@syncfusion/ej2-navigations 19.3.56 → 19.4.41

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

@@ -579,7 +579,7 @@ let VScroll = class VScroll extends Component {
         }
         scrollBar.appendChild(scrollCnt);
         ele.appendChild(scrollBar);
-        scrollBar.style.overflowY = 'hidden';
+        scrollBar.style.overflow = 'hidden';
         this.scrollEle = scrollBar;
         this.scrollItems = scrollCnt;
     }
@@ -3156,6 +3156,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 */
 const CLS_VERTICAL = 'e-vertical';
 const CLS_ITEMS = 'e-toolbar-items';
 const CLS_ITEM = 'e-toolbar-item';
@@ -4131,9 +4132,15 @@ let Toolbar = class Toolbar extends Component {
     }
     tbarPopupHandler(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
     popupOpen(e) {
         const popObj = this.popObj;
         if (!this.isVertical) {
@@ -4179,6 +4186,7 @@ let Toolbar = class Toolbar extends Component {
             popObj.refreshPosition();
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     popupClose(e) {
         const element = this.element;
         const popupNav = element.querySelector('.' + CLS_TBARNAV);
@@ -4535,10 +4543,20 @@ let Toolbar = class Toolbar extends Component {
             const 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) {
@@ -4548,10 +4566,20 @@ let Toolbar = class Toolbar extends Component {
         innerItem[1].removeAttribute('style');
         const 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;
+            }
         }
     }
     tbarItemAlign(item, itemEle, pos) {
@@ -4619,7 +4647,12 @@ let Toolbar = class Toolbar extends Component {
         let keyVal;
         for (let 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]);
+            }
         }
     }
     /**
@@ -4664,7 +4697,12 @@ let Toolbar = class Toolbar extends Component {
                 }
                 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') {
@@ -4850,7 +4888,12 @@ let Toolbar = class Toolbar extends Component {
         }
         else if (itemType === 'Input') {
             const 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);
         }
@@ -4863,7 +4906,12 @@ let Toolbar = class Toolbar extends Component {
         const textStr = item.text;
         let iconCss;
         let 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');
+        }
         const btnTxt = this.createElement('span', { className: 'e-tbar-btn-text' });
         if (textStr) {
             btnTxt.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(textStr) : textStr;
@@ -5130,12 +5178,27 @@ let Toolbar = class Toolbar extends Component {
                     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();
@@ -5189,7 +5252,12 @@ let Toolbar = class Toolbar extends Component {
             ele = innerItems[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');
@@ -5293,6 +5361,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 */
 const CLS_ACRDN_ROOT = 'e-acrdn-root';
 const CLS_ROOT$2 = 'e-accordion';
 const CLS_ITEM$1 = 'e-acrdn-item';
@@ -5547,11 +5616,9 @@ let Accordion = class Accordion extends Component {
             this.itemTemplateFn = this.templateParser(this.itemTemplate);
         }
     }
-    /* eslint-disable */
     getHeaderTemplate() {
         return this.headerTemplateFn;
     }
-    /* eslint-disable */
     getItemTemplate() {
         return this.itemTemplateFn;
     }
@@ -5572,7 +5639,6 @@ let Accordion = class Accordion extends Component {
             innerEles = this.element.children;
         }
         const items = [];
-        /* eslint-disable */
         [].slice.call(innerEles).forEach((el) => {
             items.push({
                 header: (el.childElementCount > 0 && el.children[0]) ? (el.children[0]) : '',
@@ -5580,7 +5646,6 @@ let Accordion = class Accordion extends Component {
             });
             el.parentNode.removeChild(el);
         });
-        /* eslint-enable */
         if (rootEle) {
             this.element.removeChild(rootEle);
         }
@@ -5605,7 +5670,6 @@ let Accordion = class Accordion extends Component {
                 this.expandItem(true, this.initExpand[i]);
             }
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.renderReactTemplates();
         }
@@ -5640,7 +5704,6 @@ let Accordion = class Accordion extends Component {
                 });
             }
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.renderReactTemplates();
         }
@@ -5686,7 +5749,6 @@ let Accordion = class Accordion extends Component {
         else {
             this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.renderReactTemplates();
         }
@@ -5892,7 +5954,6 @@ let Accordion = class Accordion extends Component {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     fetchElement(ele, value, index, isHeader) {
-        /* eslint-disable */
         let templateFn;
         let temString;
         try {
@@ -5906,12 +5967,10 @@ let Accordion = class Accordion extends Component {
         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);
@@ -5919,7 +5978,6 @@ let Accordion = class Accordion extends Component {
         }
         let tempArray;
         if (!isNullOrUndefined(templateFn)) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (this.isReact) {
                 this.renderReactTemplates();
             }
@@ -5965,7 +6023,6 @@ let Accordion = class Accordion extends Component {
         attributes(itemcnt, { 'aria-hidden': 'true' });
         const 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();
             }
@@ -6112,7 +6169,7 @@ let Accordion = class Accordion extends Component {
         this.trigger('expanding', eventArgs, (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);
@@ -6240,7 +6297,6 @@ let Accordion = class Accordion extends Component {
                 }
             });
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.renderReactTemplates();
         }
@@ -6261,7 +6317,6 @@ let Accordion = class Accordion extends Component {
      * @returns {void}.
      */
     removeItem(index) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.clearTemplate(['headerTemplate', 'itemTemplate'], index);
         }
@@ -6408,14 +6463,12 @@ let Accordion = class Accordion extends Component {
                 this.collapse(ctn);
             }
         }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.renderReactTemplates();
         }
     }
     destroyItems() {
         this.restoreContent(null);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
             this.clearTemplate();
         }
@@ -6450,12 +6503,10 @@ let Accordion = class Accordion extends Component {
     setTemplate(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
     templateCompile(ele, cnt, index) {
         const tempEle = this.createElement('div');
         this.fetchElement(tempEle, cnt, index, false);
@@ -7067,6 +7118,7 @@ const CLS_VRIGHT = 'e-vertical-right';
 const CLS_HBOTTOM = 'e-horizontal-bottom';
 const CLS_FILL = 'e-fill-mode';
 const TABITEMPREFIX = 'tabitem_';
+const CLS_REORDER_ACTIVE_ITEM = 'e-reorder-active-item';
 /**
  * Objects used for configuring the Tab selecting item action properties.
  */
@@ -7156,11 +7208,12 @@ let Tab = class Tab extends Component {
         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.
          */
@@ -7609,7 +7662,7 @@ let Tab = class Tab extends Component {
             trg.classList.remove(CLS_CLOSE_SHOW);
         }
         this.tbObj.refreshOverflow();
-        this.refreshActElePosition();
+        this.refreshActiveTabBorder();
     }
     prevCtnAnimation(prev, current) {
         let animation;
@@ -7734,7 +7787,7 @@ let Tab = class Tab extends Component {
         }
         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);
                 }
@@ -8006,9 +8059,20 @@ let Tab = class Tab extends Component {
     setActiveBorder() {
         const trgHdrEle = this.getTabHeader();
         const 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);
+        }
         const root = closest(trg, '.' + CLS_TAB);
         if (this.element !== root) {
             return;
@@ -8042,11 +8106,11 @@ let Tab = class Tab extends Component {
                 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);
         }
     }
-    setActive(value, skipDataBind = false) {
+    setActive(value, skipDataBind = false, isInteracted = false) {
         this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
         const trg = this.tbItem[value];
         if (value < 0 || isNaN(value) || this.tbItem.length === 0) {
@@ -8117,7 +8181,8 @@ let Tab = class Tab extends Component {
                 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);
         }
@@ -8208,7 +8273,7 @@ let Tab = class Tab extends Component {
         else {
             this.isPopup = false;
             if (!isNullOrUndefined(trgParent) && (trgIndex !== this.selectedItem || trgIndex !== this.prevIndex)) {
-                this.select(trgIndex, args.originalEvent);
+                this.selectTab(trgIndex, args.originalEvent, true);
             }
         }
     }
@@ -8223,7 +8288,7 @@ let Tab = class Tab extends Component {
         if (e.swipeDirection === 'Right' && this.selectedItem !== 0) {
             for (let 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;
                 }
             }
@@ -8231,7 +8296,7 @@ let Tab = class Tab extends Component {
         else if (e.swipeDirection === 'Left' && (this.selectedItem !== selectAll('.' + CLS_TB_ITEM, this.element).length - 1)) {
             for (let 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;
                 }
             }
@@ -8307,9 +8372,15 @@ let Tab = class Tab extends Component {
                 break;
         }
     }
-    refreshActElePosition() {
+    /**
+     * Refresh the active tab border
+     *
+     * @returns {void}
+     * @private
+     */
+    refreshActiveTabBorder() {
         const 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();
@@ -8649,7 +8720,7 @@ let Tab = class Tab extends Component {
                 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);
                 }
             }
         });
@@ -8657,8 +8728,8 @@ let Tab = class Tab extends Component {
     /**
      * 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}.
      */
@@ -8687,8 +8758,8 @@ let Tab = class Tab extends Component {
     /**
      * 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}.
      */
     addTab(items, index) {
@@ -8771,7 +8842,7 @@ let Tab = class Tab extends Component {
     /**
      * 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}.
      */
     removeTab(index) {
@@ -8810,8 +8881,8 @@ let Tab = class Tab extends Component {
     /**
      * 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}.
      */
     hideTab(index, value) {
@@ -8871,12 +8942,16 @@ let Tab = class Tab extends Component {
             this.tbObj.refreshOverflow();
         }
     }
+    selectTab(args, event = null, 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}
      */
     select(args, event) {
         const tabHeader = this.getTabHeader();
@@ -8913,20 +8988,22 @@ let Tab = class Tab extends Component {
             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, (selectArgs) => {
                 if (!selectArgs.cancel) {
-                    this.selectingContent(args);
+                    this.selectingContent(args, this.isInteracted);
                 }
             });
         }
         else {
-            this.selectingContent(args);
+            this.selectingContent(args, this.isInteracted);
         }
+        this.isInteracted = false;
     }
-    selectingContent(args) {
+    selectingContent(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))) {
@@ -8942,8 +9019,8 @@ let Tab = class Tab extends Component {
             }
             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);
                         let item = this.items[args];
@@ -8952,15 +9029,15 @@ let Tab = class Tab extends Component {
                     }
                 }
                 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);
         }
     }
     /**
@@ -9041,6 +9118,9 @@ let Tab = class Tab extends Component {
                 case 'showCloseButton':
                     this.setCloseButton(newProp.showCloseButton);
                     break;
+                case 'reorderActiveTab':
+                    this.refreshActiveTabBorder();
+                    break;
                 case 'selectedItem':
                     this.selectedItem = oldProp.selectedItem;
                     this.select(newProp.selectedItem);
@@ -9054,7 +9134,7 @@ let Tab = class Tab extends Component {
                 case 'overflowMode':
                     this.tbObj.overflowMode = newProp.overflowMode;
                     this.tbObj.dataBind();
-                    this.refreshActElePosition();
+                    this.refreshActiveTabBorder();
                     break;
                 case 'heightAdjustMode':
                     this.setContentHeight(false);
@@ -9234,6 +9314,9 @@ __decorate$7([
 __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);
@@ -9300,6 +9383,8 @@ const COLLAPSIBLE = 'e-icon-collapsible';
 const EXPANDABLE = 'e-icon-expandable';
 const LISTITEM = 'e-list-item';
 const LISTTEXT = 'e-list-text';
+const LISTWRAP = 'e-text-wrap';
+const IELISTWRAP = 'e-ie-wrap';
 const PARENTITEM = 'e-list-parent';
 const HOVER = 'e-hover';
 const ACTIVE = 'e-active';
@@ -9452,6 +9537,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.isFieldChange = false;
         this.changeDataSource = false;
         this.hasTemplate = false;
+        this.isFirstRender = false;
         this.mouseDownStatus = false;
     }
     /**
@@ -9574,6 +9660,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.setCssClass(null, this.cssClass);
         this.setEnableRtl();
         this.setFullRow(this.fullRowSelect);
+        this.setTextWrap();
         this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);
     }
     setDisabledMode() {
@@ -10558,11 +10645,36 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 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();
         }
     }
+    setTextWrap() {
+        (this.allowTextWrap ? addClass : removeClass)([this.element], LISTWRAP);
+        if (Browser.isIE) {
+            (this.allowTextWrap ? addClass : removeClass)([this.element], IELISTWRAP);
+        }
+    }
+    updateWrap(ulEle) {
+        if (!this.fullRowSelect) {
+            return;
+        }
+        const liEle = ulEle ? selectAll('.' + LISTITEM, ulEle) : this.liList;
+        const length = liEle.length;
+        for (let i = 0; i < length; i++) {
+            this.calculateWrap(liEle[i]);
+        }
+    }
+    calculateWrap(liEle) {
+        const element = select('.' + FULLROW, liEle);
+        if (element && element.nextElementSibling) {
+            element.style.height = this.allowTextWrap ? element.nextElementSibling.offsetHeight + 'px' : '';
+        }
+    }
     doExpandAction() {
         let eUids = this.expandedNodes;
         if (this.isInitalExpand && eUids.length > 0) {
@@ -10798,6 +10910,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         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);
@@ -11298,6 +11414,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             this.expandNode(currLi, icon);
         }
         else {
+            this.isFirstRender = true;
             this.renderChildNodes(currLi, expandChild, callback);
             let liEles = selectAll('.' + LISTITEM, currLi);
             for (let i = 0; i < liEles.length; i++) {
@@ -11990,6 +12107,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             removeClass([liEle], EDITING);
             txtEle.focus();
         }
+        if (this.allowTextWrap) {
+            this.calculateWrap(liEle);
+        }
     }
     getElement(ele) {
         if (isNullOrUndefined(ele)) {
@@ -13576,6 +13696,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     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;
@@ -13627,6 +13751,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 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) {
@@ -14065,6 +14193,9 @@ __decorate$8([
 __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);
@@ -14432,7 +14563,7 @@ let Sidebar = class Sidebar extends Component {
     setTimeOut() {
         const sibling = document.querySelector('.e-main-content') || this.targetEle;
         const 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);
             }
@@ -14739,7 +14870,7 @@ let Sidebar = class Sidebar extends Component {
         const 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';
             }
         }
@@ -14761,9 +14892,9 @@ let Sidebar = class Sidebar extends Component {
                 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;
@@ -14904,6 +15035,15 @@ var __decorate$10 = (undefined && undefined.__decorate) || function (decorators,
 const ICONRIGHT = 'e-icon-right';
 const ITEMTEXTCLASS = 'e-breadcrumb-text';
 const ICONCLASS = 'e-breadcrumb-icon';
+const MENUCLASS = 'e-breadcrumb-menu';
+const ITEMCLASS = 'e-breadcrumb-item';
+const POPUPCLASS = 'e-breadcrumb-popup';
+const WRAPMODECLASS = 'e-breadcrumb-wrap-mode';
+const SCROLLMODECLASS = 'e-breadcrumb-scroll-mode';
+const TABINDEX = 'tabindex';
+const DISABLEDCLASS = 'e-disabled';
+const ARIADISABLED = 'aria-disabled';
+const DOT = '.';
 class BreadcrumbItem extends ChildProperty {
 }
 __decorate$10([
@@ -14915,6 +15055,9 @@ __decorate$10([
 __decorate$10([
     Property(null)
 ], BreadcrumbItem.prototype, "iconCss", void 0);
+__decorate$10([
+    Property(false)
+], BreadcrumbItem.prototype, "disabled", void 0);
 /**
  * Breadcrumb is a graphical user interface that helps to identify or highlight the current location within a hierarchical structure of websites.
  * The aim is to make the user aware of their current position in a hierarchy of website links.
@@ -14966,20 +15109,48 @@ let Breadcrumb = class Breadcrumb extends Component {
         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();
     }
     initPvtProps() {
-        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;
+            }
         }
     }
-    setWidth() {
-        if (this.width) {
-            this.element.style.width = this.width;
+    getEndIndex() {
+        let endIndex;
+        if (this.activeItem) {
+            this.items.forEach((item, idx) => {
+                if (item.url === this.activeItem || item.text === this.activeItem) {
+                    endIndex = idx;
+                }
+            });
+        }
+        else {
+            endIndex = this.items.length - 1;
         }
+        return endIndex;
     }
     initItems() {
         if (!this.items.length) {
@@ -14987,7 +15158,7 @@ let Breadcrumb = class Breadcrumb extends Component {
             let uri;
             const items = [];
             if (this.url) {
-                const url = new URL(this.url);
+                const url = new URL(this.url, window.location.origin);
                 baseUri = url.origin + '/';
                 uri = url.href.split(baseUri)[1].split('/');
             }
@@ -15013,13 +15184,19 @@ let Breadcrumb = class Breadcrumb extends Component {
         if (itemsLength) {
             let isActiveItem;
             let isLastItem;
+            let isLastItemInPopup;
             let j = 0;
+            let wrapDiv;
             const len = (itemsLength * 2) - 1;
-            const ol = this.createElement('ol');
+            let isItemCancelled = false;
+            const ol = this.createElement('ol', { className: this.overflowMode === 'Wrap' ? 'e-breadcrumb-wrapped-ol' : '' });
+            const firstOl = this.createElement('ol', { className: this.overflowMode === 'Wrap' ? 'e-breadcrumb-first-ol' : '' });
             const showIcon = this.hasField(items, 'iconCss');
-            const isDisabled = this.element.classList.contains('e-disabled');
-            const isCollasped = (this.overflowMode === 'Collapsed' && this._maxItems > 0 && itemsLength > this.maxItems && !this.isExpanded);
-            const isDefaultOverflowMode = (this.overflowMode === 'Default' && this._maxItems > 0);
+            const isCollasped = (this.overflowMode === 'Collapsed' && this._maxItems > 0 && itemsLength > this._maxItems && !this.isExpanded);
+            const isDefaultOverflowMode = (this.overflowMode === 'Hidden' && this._maxItems > 0);
+            if (this.overflowMode === 'Menu' && this.popupUl) {
+                this.popupUl.innerHTML = '';
+            }
             const listBaseOptions = {
                 moduleName: this.getModuleName(),
                 showIcon: showIcon,
@@ -15028,7 +15205,9 @@ let Breadcrumb = class Breadcrumb extends Component {
                     const 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 && !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');
@@ -15036,41 +15215,40 @@ let Breadcrumb = class Breadcrumb extends Component {
                     if (isDefaultOverflowMode) {
                         args.item.setAttribute('item-index', j.toString());
                     }
-                    if (args.item.querySelector('.' + ITEMTEXTCLASS)) {
-                        EventHandler.add(args.item.querySelector('.' + ITEMTEXTCLASS), 'focus', () => {
-                            args.item.classList.add('e-focus');
-                        }, this);
-                        EventHandler.add(args.item.querySelector('.' + ITEMTEXTCLASS), 'focusout', () => {
-                            args.item.classList.remove('e-focus');
-                        }, this);
-                    }
                     const 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);
-                    const isItemDisabled = isDisabled || eventArgs.element.classList.contains('e-disabled');
+                    isItemCancelled = eventArgs.cancel;
                     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));
+                        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 (let i = 0; i < len; i % 2 && j++, i++) {
-                isActiveItem = (this.activeItem && this.activeItem === items[j].url);
+                isActiveItem = (this.activeItem && (this.activeItem === items[j].url || this.activeItem === items[j].text));
                 if (isCollasped && i > 1 && i < len - 2) {
                     continue;
                 }
@@ -15080,10 +15258,11 @@ let Breadcrumb = class Breadcrumb extends Component {
                 }
                 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] }];
+                    item = [{ previousItem: items[j], nextItem: items[j + 1] }];
                 }
                 else {
                     // list item
@@ -15100,47 +15279,129 @@ let Breadcrumb = class Breadcrumb extends Component {
                     if (!item[0].url && !this.itemTemplate) {
                         item = [extend({}, item[0], { isEmptyUrl: true, url: '#' })];
                     }
-                    isLastItem = isDefaultOverflowMode && (j === this.endIndex);
-                    if ((((i === len - 1 || isLastItem) && !this.itemTemplate) || isActiveItem) && !this.enableActiveItemNavigation) {
+                    isLastItem = (isDefaultOverflowMode || this.overflowMode === 'Menu') && (j === 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);
+                let parent = ol;
+                const lastPopupItemIdx = this.startIndex + this.endIndex - this._maxItems;
+                if (this.overflowMode === 'Menu' && ((j >= this.startIndex && (j <= lastPopupItemIdx && (i % 2 ? !(j === lastPopupItemIdx) : true)) && this.endIndex >= this._maxItems && this._maxItems > 0) || this._maxItems === 0)) {
+                    if (i % 2) {
+                        continue;
+                    }
+                    else {
+                        parent = this.popupUl;
+                        if (isLastItem) {
+                            isLastItemInPopup = true;
+                        }
+                    }
+                }
+                else if (this.overflowMode === 'Wrap') {
+                    if (i === 0) {
+                        parent = firstOl;
+                    }
+                    else {
+                        parent = wrapDiv;
+                    }
+                }
+                const li = ListBase.createList(this.createElement, item, listBaseOptions, isSingleLevel, this).childNodes;
+                if (!isItemCancelled) {
+                    append(li, parent);
+                }
+                else if (isDefaultOverflowMode || isCollasped || this.overflowMode === 'Menu' || this.overflowMode === 'Wrap') {
+                    items.splice(j, 1);
+                    this.initPvtProps();
+                    return this.reRenderItems();
+                }
+                else if ((i === len - 1 || isLastItem)) {
+                    remove(parent.lastElementChild);
+                }
+                if (this.overflowMode === 'Wrap' && i !== 0 && i % 2 === 0) {
+                    ol.appendChild(wrapDiv);
+                }
                 if (isCollasped && i === 1) {
-                    const li = this.createElement('li', { className: 'e-icons e-breadcrumb-collapsed', attrs: { 'tabindex': '0' } });
+                    const li = this.createElement('li', { className: 'e-icons e-breadcrumb-collapsed', attrs: { TABINDEX: '0' } });
                     EventHandler.add(li, 'keyup', this.expandHandler, this);
-                    ol.append(li);
+                    ol.appendChild(li);
+                }
+                if (this.overflowMode === 'Menu' && this.startIndex === i && this.endIndex >= this._maxItems && this._maxItems >= 0) {
+                    const menu = this.getMenuElement();
+                    EventHandler.add(menu, 'keyup', this.keyDownHandler, this);
+                    ol.appendChild(menu);
                 }
                 if (isActiveItem || isLastItem) {
                     break;
                 }
+                if (isItemCancelled) {
+                    i++;
+                }
             }
             if (this.isReact) {
                 this.renderReactTemplates();
             }
-            this.element.append(ol);
+            if (this.overflowMode === 'Wrap') {
+                this.element.appendChild(firstOl);
+            }
+            this.element.appendChild(ol);
             this.calculateMaxItems();
         }
     }
     calculateMaxItems() {
-        if (!this._maxItems) {
-            if (this.overflowMode === 'Default' || this.overflowMode === 'Collapsed') {
-                const width = this.element.offsetWidth;
-                let liWidth = this.element.children[0].children[0].offsetWidth;
-                const liElems = [].slice.call(this.element.children[0].children).reverse();
-                for (let 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') {
+            let maxItems;
+            const width = this.element.offsetWidth;
+            const liElems = [].slice.call(this.element.children[0].children).reverse();
+            let liWidth = this.overflowMode === 'Menu' ? 0 : liElems[liElems.length - 1].offsetWidth + (liElems[liElems.length - 2] ? liElems[liElems.length - 2].offsetWidth : 0);
+            if (this.overflowMode === 'Menu') {
+                const menuEle = this.getMenuElement();
+                this.element.appendChild(menuEle);
+                liWidth += menuEle.offsetWidth;
+                remove(menuEle);
+            }
+            for (let 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) {
+            let width = 0;
+            const liElems = this.element.querySelectorAll(DOT + ITEMCLASS);
+            if (liElems.length > this._maxItems + this._maxItems - 1) {
+                for (let 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';
+                }
+            }
+        }
     }
     hasField(items, field) {
         for (let i = 0, len = items.length; i < len; i++) {
@@ -15150,6 +15411,9 @@ let Breadcrumb = class Breadcrumb extends Component {
         }
         return false;
     }
+    getMenuElement() {
+        return this.createElement('li', { className: 'e-icons e-breadcrumb-menu', attrs: { TABINDEX: '0' } });
+    }
     beforeItemRenderChanges(prevItem, currItem, elem, isRightIcon) {
         const wrapElem = elem.querySelector('.e-anchor-wrap');
         if (currItem.text !== prevItem.text) {
@@ -15159,15 +15423,15 @@ let Breadcrumb = class Breadcrumb extends Component {
                 }
             });
         }
-        if (currItem.iconCss !== prevItem.iconCss) {
-            const iconElem = elem.querySelector('.' + ICONCLASS);
+        if (currItem.iconCss !== prevItem.iconCss && wrapElem) { // wrapElem - for checking it is item not a separator
+            const 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) {
@@ -15197,31 +15461,85 @@ let Breadcrumb = class Breadcrumb extends Component {
         this.renderItems(this.items);
     }
     clickHandler(e) {
-        const li = closest(e.target, '.e-breadcrumb-item');
-        if (li && (closest(e.target, '.' + ITEMTEXTCLASS) || this.itemTemplate)) {
-            let idx = [].slice.call(li.parentElement.children).indexOf(li);
-            idx = Math.floor(idx / 2);
-            if (this.overflowMode === 'Default' && this._maxItems > 0 && this.endIndex !== 0) {
+        const li = closest(e.target, DOT + ITEMCLASS + ':not(.e-breadcrumb-separator)');
+        if (!this.enableNavigation) {
+            e.preventDefault();
+        }
+        if (li && (closest(e.target, DOT + ITEMTEXTCLASS) || this.itemTemplate)) {
+            let idx;
+            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();
+        }
+    }
+    renderPopup() {
+        const 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: () => {
+                this.popupUl.focus();
+            }
+        });
+        this.popupWireEvents();
+        this.popupObj.show();
+    }
+    documentClickHandler(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);
+        }
     }
     resize() {
         this._maxItems = this.maxItems;
@@ -15239,6 +15557,11 @@ let Breadcrumb = class Breadcrumb extends Component {
             this.clickHandler(e);
         }
     }
+    popupKeyDownHandler(e) {
+        if (e.key === 'Escape') {
+            this.documentClickHandler(e);
+        }
+    }
     /**
      * Called internally if any of the property value changed.
      *
@@ -15250,26 +15573,37 @@ let Breadcrumb = class Breadcrumb extends Component {
     onPropertyChanged(newProp, oldProp) {
         for (const prop of Object.keys(newProp)) {
             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(' '));
@@ -15286,16 +15620,31 @@ let Breadcrumb = class Breadcrumb extends Component {
                 case 'enableRtl':
                     this.element.classList.toggle('e-rtl');
                     break;
+                case 'disabled':
+                    this.element.classList.toggle(DISABLEDCLASS);
+                    this.element.setAttribute(ARIADISABLED, newProp.disabled + '');
+                    break;
             }
         }
     }
     wireEvents() {
+        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));
     }
+    popupWireEvents() {
+        EventHandler.add(this.popupObj.element, 'click', this.clickHandler, this);
+        EventHandler.add(this.popupObj.element, 'keydown', this.popupKeyDownHandler, this);
+    }
     unWireEvents() {
+        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.
@@ -15320,11 +15669,31 @@ let Breadcrumb = class Breadcrumb extends Component {
      * @returns {void}
      */
     destroy() {
-        this.unWireEvents();
-        this.element.innerHTML = '';
+        let classes = [];
+        let 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((attribute) => {
+            this.element.removeAttribute(attribute);
+        });
+        super.destroy();
     }
 };
 __decorate$10([
@@ -15337,17 +15706,14 @@ __decorate$10([
     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);
@@ -15360,6 +15726,9 @@ __decorate$10([
 __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);