@syncfusion/ej2-navigations 19.3.56 → 19.4.41

package/src/breadcrumb/breadcrumb.js

@@ -17,11 +17,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-import { Component, NotifyPropertyChanges, ChildProperty, Property, Collection, append, extend, Event, EventHandler, closest, addClass, removeClass } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, ChildProperty, Property, Collection, append, extend, Event, EventHandler, closest, addClass, removeClass, detach, remove } from '@syncfusion/ej2-base';
 import { ListBase } from '@syncfusion/ej2-lists';
+import { Popup } from '@syncfusion/ej2-popups';
 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 = /** @class */ (function (_super) {
     __extends(BreadcrumbItem, _super);
     function BreadcrumbItem() {
@@ -36,6 +46,9 @@ var BreadcrumbItem = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], BreadcrumbItem.prototype, "iconCss", void 0);
+    __decorate([
+        Property(false)
+    ], BreadcrumbItem.prototype, "disabled", void 0);
     return BreadcrumbItem;
 }(ChildProperty));
 export { BreadcrumbItem };
@@ -91,20 +104,49 @@ var Breadcrumb = /** @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) {
@@ -112,7 +154,7 @@ var Breadcrumb = /** @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('/');
             }
@@ -139,13 +181,19 @@ var Breadcrumb = /** @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,
@@ -154,7 +202,9 @@ var Breadcrumb = /** @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');
@@ -162,41 +212,40 @@ var Breadcrumb = /** @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 (isItemDisabled) {
-                        args.item.setAttribute('aria-disabled', 'true');
+                    if (eventArgs.item.disabled) {
+                        args.item.setAttribute(ARIADISABLED, 'true');
+                        args.item.classList.add(DISABLEDCLASS);
+                    }
+                    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;
                 }
@@ -206,10 +255,11 @@ var Breadcrumb = /** @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
@@ -226,47 +276,129 @@ var Breadcrumb = /** @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++) {
@@ -276,6 +408,9 @@ var Breadcrumb = /** @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) {
@@ -285,15 +420,15 @@ var Breadcrumb = /** @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) {
@@ -323,31 +458,86 @@ var Breadcrumb = /** @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;
@@ -365,6 +555,11 @@ var Breadcrumb = /** @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.
      *
@@ -377,26 +572,37 @@ var Breadcrumb = /** @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(' '));
@@ -413,16 +619,31 @@ var Breadcrumb = /** @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.
@@ -447,11 +668,32 @@ var Breadcrumb = /** @class */ (function (_super) {
      * @returns {void}
      */
     Breadcrumb.prototype.destroy = function () {
-        this.unWireEvents();
-        this.element.innerHTML = '';
+        var _this = this;
+        var classes = [];
+        var attributes = ['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.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.forEach(function (attribute) {
+            _this.element.removeAttribute(attribute);
+        });
+        _super.prototype.destroy.call(this);
     };
     __decorate([
         Property('')
@@ -463,17 +705,14 @@ var Breadcrumb = /** @class */ (function (_super) {
         Property('')
     ], Breadcrumb.prototype, "activeItem", void 0);
     __decorate([
-        Property(0)
+        Property(-1)
     ], Breadcrumb.prototype, "maxItems", void 0);
     __decorate([
-        Property('Default')
+        Property('Menu')
     ], Breadcrumb.prototype, "overflowMode", void 0);
     __decorate([
         Property('')
     ], Breadcrumb.prototype, "cssClass", void 0);
-    __decorate([
-        Property('')
-    ], Breadcrumb.prototype, "width", void 0);
     __decorate([
         Property(null)
     ], Breadcrumb.prototype, "itemTemplate", void 0);
@@ -486,6 +725,9 @@ var Breadcrumb = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], Breadcrumb.prototype, "enableActiveItemNavigation", void 0);
+    __decorate([
+        Property(false)
+    ], Breadcrumb.prototype, "disabled", void 0);
     __decorate([
         Property('')
     ], Breadcrumb.prototype, "locale", void 0);

package/src/common/v-scroll.js

@@ -122,7 +122,7 @@ var VScroll = /** @class */ (function (_super) {
         }
         scrollBar.appendChild(scrollCnt);
         ele.appendChild(scrollBar);
-        scrollBar.style.overflowY = 'hidden';
+        scrollBar.style.overflow = 'hidden';
         this.scrollEle = scrollBar;
         this.scrollItems = scrollCnt;
     };