@syncfusion/ej2-navigations 19.2.59 → 19.3.44

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

@@ -5226,7 +5226,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             var prop = _a[_i];
             switch (prop) {
                 case 'items':
-                    if (!(newProp.items instanceof Array && oldProp.items instanceof Array) && !this.isServerRendered) {
+                    if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {
                         var changedProb = Object.keys(newProp.items);
                         for (var i = 0; i < changedProb.length; i++) {
                             var index = parseInt(Object.keys(newProp.items)[i], 10);
@@ -5649,15 +5649,10 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Accordion.prototype.render = function () {
-        if (!this.isServerRendered) {
-            this.initializeheaderTemplate();
-            this.initializeItemTemplate();
-            this.initialize();
-            this.renderControl();
-        }
-        else {
-            this.wireFocusEvents();
-        }
+        this.initializeHeaderTemplate();
+        this.initializeItemTemplate();
+        this.initialize();
+        this.renderControl();
         this.wireEvents();
         this.renderComplete();
     };
@@ -5728,7 +5723,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         }
         return undefined;
     };
-    Accordion.prototype.initializeheaderTemplate = function () {
+    Accordion.prototype.initializeHeaderTemplate = function () {
         if (this.headerTemplate) {
             this.headerTemplateFn = this.templateParser(this.headerTemplate);
         }
@@ -5739,7 +5734,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /* eslint-disable */
-    Accordion.prototype.getheaderTemplate = function () {
+    Accordion.prototype.getHeaderTemplate = function () {
         return this.headerTemplateFn;
     };
     /* eslint-disable */
@@ -5838,7 +5833,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Accordion.prototype.clickHandler = function (e) {
-        var _this = this;
         var trgt = e.target;
         var items = this.getItems();
         var eventArgs = {};
@@ -5872,32 +5866,9 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         eventArgs.originalEvent = e;
         var ctnCheck = !isNullOrUndefined(tglIcon) && acrdnItem.childElementCount <= 1;
         if (ctnCheck && (isNullOrUndefined(acrdnCtn) || !isNullOrUndefined(select('.' + CLS_HEADER + ' .' + CLS_TOOGLEICN, acrdnCtnItem)))) {
-            if (!this.isServerRendered) {
-                acrdnItem.appendChild(this.contentRendering(index));
-                this.ariaAttrUpdate(acrdnItem);
-                this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
-            }
-            else {
-                var id = acrdnItem.id;
-                if (this.items.length > 0) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.interopAdaptor.invokeMethodAsync('OnItemClick', index).then(function () {
-                        if (_this.isDestroyed) {
-                            return;
-                        }
-                        _this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
-                    });
-                }
-                else {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.interopAdaptor.invokeMethodAsync('OnDataClick', id).then(function () {
-                        if (_this.isDestroyed) {
-                            return;
-                        }
-                        _this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
-                    });
-                }
-            }
+            acrdnItem.appendChild(this.contentRendering(index));
+            this.ariaAttrUpdate(acrdnItem);
+            this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
         }
         else {
             this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
@@ -6033,7 +6004,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             var ctnEle = this.headerEleGenerate();
             var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
             ctnEle.appendChild(hdrEle);
-            append(this.getheaderTemplate()(item, this, 'headerTemplate', this.element.id + '_headerTemplate', false), hdrEle);
+            append(this.getHeaderTemplate()(item, this, 'headerTemplate', this.element.id + '_headerTemplate', false), hdrEle);
             innerEle.appendChild(ctnEle);
             ctnEle.appendChild(this.toggleIconGenerate());
             this.add(innerEle, CLS_SLCT);
@@ -6570,16 +6541,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             eleHeader.removeAttribute('tabindex');
         }
     };
-    /**
-     * Refresh the Accordion component.
-     *
-     * @returns {void}.
-     */
-    Accordion.prototype.refresh = function () {
-        if (!this.isServerRendered) {
-            _super.prototype.refresh.call(this);
-        }
-    };
     /**
      * Expands/Collapses the specified Accordion item.
      *
@@ -6625,41 +6586,15 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Accordion.prototype.itemExpand = function (isExpand, ele, index) {
-        var _this = this;
         var ctn = ele.children[1];
         if (ele.classList.contains(CLS_DISABLE$3)) {
             return;
         }
         if (isNullOrUndefined(ctn) && isExpand) {
-            if (!this.isServerRendered) {
-                ctn = this.contentRendering(index);
-                ele.appendChild(ctn);
-                this.ariaAttrUpdate(ele);
-                this.expand(ctn);
-            }
-            else {
-                var id = ele.id;
-                if (this.items.length > 0) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.interopAdaptor.invokeMethodAsync('OnItemClick', index).then(function () {
-                        if (_this.isDestroyed) {
-                            return;
-                        }
-                        ctn = ele.children[1];
-                        _this.expand(ctn);
-                    });
-                }
-                else {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.interopAdaptor.invokeMethodAsync('OnDataClick', id).then(function () {
-                        if (_this.isDestroyed) {
-                            return;
-                        }
-                        ctn = ele.children[1];
-                        _this.expand(ctn);
-                    });
-                }
-            }
+            ctn = this.contentRendering(index);
+            ele.appendChild(ctn);
+            this.ariaAttrUpdate(ele);
+            this.expand(ctn);
         }
         else if (!isNullOrUndefined(ctn)) {
             if (isExpand) {
@@ -6745,10 +6680,6 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             var prop = _a[_i];
             switch (prop) {
                 case 'items':
-                    if (this.isServerRendered) {
-                        this.wireFocusEvents();
-                        break;
-                    }
                     if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {
                         var changedProp = Object.keys(newProp.items);
                         for (var j = 0; j < changedProp.length; j++) {
@@ -6803,7 +6734,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                     isRefresh = true;
                     break;
                 case 'headerTemplate':
-                    this.initializeheaderTemplate();
+                    this.initializeHeaderTemplate();
                     isRefresh = true;
                     break;
                 case 'itemTemplate':
@@ -6837,7 +6768,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                     break;
             }
         }
-        if (isRefresh && !this.isServerRendered) {
+        if (isRefresh) {
             this.initExpand = [];
             if (this.expandedIndices.length > 0) {
                 this.initExpand = this.expandedIndices;
@@ -7555,12 +7486,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         if (this.isReact) {
             this.clearTemplate();
         }
-        if (!this.isServerRendered) {
-            _super.prototype.refresh.call(this);
-        }
-        else if (this.isServerRendered && this.loadOn !== 'Dynamic') {
-            this.setActiveBorder();
-        }
+        _super.prototype.refresh.call(this);
         if (this.isReact) {
             this.renderReactTemplates();
         }
@@ -7606,10 +7532,6 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         this.initRender = false;
     };
     Tab.prototype.renderContainer = function () {
-        if (this.isServerRendered) {
-            this.isTemplate = false;
-            return;
-        }
         var ele = this.element;
         this.items.forEach(function (item, index) {
             if (isNullOrUndefined(item.id) && !isNullOrUndefined(item.setProperties)) {
@@ -7817,7 +7739,17 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             if (typeof txt === 'string' && _this.enableHtmlSanitizer) {
                 txt = SanitizeHtmlHelper.sanitize(txt);
             }
-            _this.lastIndex = ((tbCount === 0) ? i : ((_this.isReplace) ? (index + i) : (_this.lastIndex + 1)));
+            var itemIndex;
+            if (_this.isReplace && !isNullOrUndefined(_this.tbId) && _this.tbId !== '') {
+                var num = (_this.tbId.indexOf('_'));
+                itemIndex = parseInt(_this.tbId.substring(num + 1), 10);
+                _this.tbId = '';
+            }
+            else {
+                itemIndex = index + i;
+            }
+            var addIndex = _this.isAdd ? tbCount + i : _this.lastIndex + 1;
+            _this.lastIndex = ((tbCount === 0) ? i : ((_this.isReplace) ? (itemIndex) : (addIndex)));
             var disabled = (item.disabled) ? ' ' + CLS_DISABLE$4 + ' ' + CLS_OVERLAY$2 : '';
             var hidden = (item.visible === false) ? ' ' + CLS_HIDDEN$1 : '';
             txtWrapEle = _this.createElement('div', { className: CLS_TEXT, attrs: { 'role': 'presentation' } });
@@ -8005,23 +7937,17 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         var prevIndex = this.prevIndex;
         var oldCnt;
-        var newCnt;
-        if (!this.isServerRendered || (this.isServerRendered && this.loadOn !== 'Dynamic')) {
-            var itemCollection = [].slice.call(this.element.querySelector('.' + CLS_CONTENT$1).children);
-            itemCollection.forEach(function (item) {
-                if (item.id === _this.prevActiveEle) {
-                    oldCnt = item;
-                }
-            });
-            var prevEle = this.tbItem[prevIndex];
-            newCnt = this.getTrgContent(this.cntEle, this.extIndex(id));
-            if (isNullOrUndefined(oldCnt) && !isNullOrUndefined(prevEle)) {
-                var idNo = this.extIndex(prevEle.id);
-                oldCnt = this.getTrgContent(this.cntEle, idNo);
+        var itemCollection = [].slice.call(this.element.querySelector('.' + CLS_CONTENT$1).children);
+        itemCollection.forEach(function (item) {
+            if (item.id === _this.prevActiveEle) {
+                oldCnt = item;
             }
-        }
-        else {
-            newCnt = this.cntEle.firstElementChild;
+        });
+        var prevEle = this.tbItem[prevIndex];
+        var newCnt = this.getTrgContent(this.cntEle, this.extIndex(id));
+        if (isNullOrUndefined(oldCnt) && !isNullOrUndefined(prevEle)) {
+            var idNo = this.extIndex(prevEle.id);
+            oldCnt = this.getTrgContent(this.cntEle, idNo);
         }
         if (!isNullOrUndefined(newCnt)) {
             this.prevActiveEle = newCnt.id;
@@ -8251,21 +8177,6 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             curActItem.firstElementChild.focus();
         }
     };
-    Tab.prototype.serverChangeOrientation = function (newProp, oldProp) {
-        this.setOrientation(newProp, this.hdrEle);
-        removeClass([this.element], [CLS_VTAB]);
-        var newValue = newProp === 'Left' || newProp === 'Right';
-        var oldValue = oldProp === 'Left' || oldProp === 'Right';
-        if (newValue !== oldValue) {
-            this.changeToolbarOrientation();
-        }
-        if (this.isVertical()) {
-            addClass([this.element], [CLS_VTAB]);
-        }
-        this.updateOrientationAttribute();
-        this.setActiveBorder();
-        this.focusItem();
-    };
     Tab.prototype.changeToolbarOrientation = function () {
         this.tbObj.setProperties({ height: (this.isVertical() ? '100%' : 'auto'), width: (this.isVertical() ? 'auto' : '100%') }, true);
         this.tbObj.changeOrientation();
@@ -8350,6 +8261,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 }
                 this.templateEle = [];
                 this.getContent(ele, this.items[0].content, 'render', 0);
+                if (this.prevIndex !== this.selectedItem) {
+                    ele.classList.remove(CLS_ACTIVE$1);
+                }
             }
             setStyleAttribute(this.cntEle, { 'height': this.maxHeight + 'px' });
         }
@@ -8368,9 +8282,6 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         if (trg === null) {
             return;
         }
-        if (this.isServerRendered && trg.classList.contains(CLS_TB_POPUP)) {
-            this.popupHandler(trg);
-        }
         var root = closest(trg, '.' + CLS_TAB);
         if (this.element !== root) {
             return;
@@ -8412,9 +8323,6 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         if (skipDataBind === void 0) { skipDataBind = false; }
         this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
         var trg = this.tbItem[value];
-        if (this.isServerRendered && trg) {
-            value = parseInt(trg.getAttribute('data-index'), 10);
-        }
         if (value < 0 || isNaN(value) || this.tbItem.length === 0) {
             return;
         }
@@ -8456,7 +8364,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 this.triggerAnimation(id, this.enableAnimation);
             }
         }
-        else if (!this.isServerRendered || (this.isServerRendered && this.loadOn === 'Init')) {
+        else {
             this.cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT$1, this.element);
             var item = this.getTrgContent(this.cntEle, this.extIndex(id));
             if (isNullOrUndefined(item)) {
@@ -8574,12 +8482,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             this.isPopup = false;
-            if (this.isServerRendered && !isNullOrUndefined(trgParent)) {
-                if (parseInt(trgParent.getAttribute('data-index'), 10) !== this.selectedItem) {
-                    this.select(trgIndex);
-                }
-            }
-            else if (!isNullOrUndefined(trgParent) && (trgIndex !== this.selectedItem || trgIndex !== this.prevIndex)) {
+            if (!isNullOrUndefined(trgParent) && (trgIndex !== this.selectedItem || trgIndex !== this.prevIndex)) {
                 this.select(trgIndex, args.originalEvent);
             }
         }
@@ -8724,8 +8627,17 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 var property = Object.keys(newProp.items[index])[0];
                 var oldVal = Object(oldProp.items[index])[property];
                 var newVal = Object(newProp.items[index])[property];
-                var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM$2 + this.tabId + '_' + index, this.element);
-                var cntItem = select('.' + CLS_CONTENT$1 + ' #' + CLS_CONTENT$1 + this.tabId + '_' + index, this.element);
+                var hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
+                var itemIndex = void 0;
+                if (hdr && !isNullOrUndefined(hdr.id) && hdr.id !== '') {
+                    var num = (hdr.id.indexOf('_'));
+                    itemIndex = parseInt(hdr.id.substring(num + 1), 10);
+                }
+                else {
+                    itemIndex = index;
+                }
+                var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM$2 + this.tabId + '_' + itemIndex, this.element);
+                var cntItem = select('.' + CLS_CONTENT$1 + ' #' + CLS_CONTENT$1 + this.tabId + '_' + itemIndex, this.element);
                 if (property === 'header' || property === 'headerTemplate') {
                     var icon = (isNullOrUndefined(this.items[index].header) ||
                         isNullOrUndefined(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
@@ -8734,6 +8646,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                         this.removeTab(index);
                     }
                     else {
+                        this.tbId = hdr.id;
                         var arr = [];
                         arr.push(this.items[index]);
                         this.items.splice(index, 1);
@@ -8863,10 +8776,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                         }
                     }
                     _this.cloneElement.style.pointerEvents = 'none';
-                    var x = _this.cloneElement.getBoundingClientRect().left;
-                    var y = _this.cloneElement.getBoundingClientRect().top;
-                    var ele = document.elementFromPoint(x, y);
-                    dropItem = closest(ele, '.' + CLS_TB_ITEM + '.e-draggable');
+                    dropItem = closest(e.target, '.' + CLS_TB_ITEM + '.e-draggable');
                     var scrollContentWidth = 0;
                     if (_this.overflowMode === 'Scrollable' && !isNullOrUndefined(_this.element.querySelector('.e-hscroll'))) {
                         scrollContentWidth = _this.element.querySelector('.e-hscroll-content').offsetWidth;
@@ -9236,7 +9146,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         }
         this.setActiveBorder();
         item.setAttribute('aria-hidden', '' + value);
-        if (!this.isServerRendered && this.overflowMode === 'Popup' && this.tbObj) {
+        if (this.overflowMode === 'Popup' && this.tbObj) {
             this.tbObj.refreshOverflow();
         }
     };
@@ -9396,12 +9306,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'height':
                     setStyleAttribute(this.element, { height: formatUnit(newProp.height) });
-                    if (!this.isServerRendered) {
-                        this.setContentHeight(false);
-                    }
+                    this.setContentHeight(false);
                     break;
                 case 'cssClass':
-                    if (oldProp.cssClass !== '') {
+                    if (oldProp.cssClass !== '' && !isNullOrUndefined(oldProp.cssClass)) {
                         this.setCssClass(this.element, oldProp.cssClass, false);
                         this.setCssClass(this.element, newProp.cssClass, true);
                     }
@@ -9410,26 +9318,17 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     }
                     break;
                 case 'items':
-                    if (!this.isServerRendered) {
-                        this.evalOnPropertyChangeItems(newProp, oldProp);
-                    }
+                    this.evalOnPropertyChangeItems(newProp, oldProp);
                     break;
                 case 'showCloseButton':
                     this.setCloseButton(newProp.showCloseButton);
                     break;
                 case 'selectedItem':
-                    if (!this.isServerRendered) {
-                        this.selectedItem = oldProp.selectedItem;
-                        this.select(newProp.selectedItem);
-                    }
+                    this.selectedItem = oldProp.selectedItem;
+                    this.select(newProp.selectedItem);
                     break;
                 case 'headerPlacement':
-                    if (this.isServerRendered) {
-                        this.serverChangeOrientation(newProp.headerPlacement, oldProp.headerPlacement);
-                    }
-                    else {
-                        this.changeOrientation(newProp.headerPlacement);
-                    }
+                    this.changeOrientation(newProp.headerPlacement);
                     break;
                 case 'enableRtl':
                     this.setRTL(newProp.enableRtl);
@@ -9440,10 +9339,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     this.refreshActElePosition();
                     break;
                 case 'heightAdjustMode':
-                    if (!this.isServerRendered) {
-                        this.setContentHeight(false);
-                        this.select(this.selectedItem);
-                    }
+                    this.setContentHeight(false);
+                    this.select(this.selectedItem);
                     break;
                 case 'scrollStep':
                     if (this.tbObj) {
@@ -15064,10 +14961,10 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
     };
     Sidebar.prototype.wireEvents = function () {
         this.setEnableGestures();
-        window.addEventListener('resize', this.resize.bind(this));
+        EventHandler.add(window, 'resize', this.resize, this);
     };
     Sidebar.prototype.unWireEvents = function () {
-        window.removeEventListener('resize', this.resize.bind(this));
+        EventHandler.remove(window, 'resize', this.resize);
         EventHandler.remove(document, 'mousedown touchstart', this.documentclickHandler);
         if (this.mainContentEle) {
             this.mainContentEle.destroy();
@@ -15343,9 +15240,507 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
  * Sidebar modules
  */
 
+var __extends$10 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$10 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+var ICONRIGHT = 'e-icon-right';
+var ITEMTEXTCLASS = 'e-breadcrumb-text';
+var ICONCLASS = 'e-breadcrumb-icon';
+var BreadcrumbItem = /** @__PURE__ @class */ (function (_super) {
+    __extends$10(BreadcrumbItem, _super);
+    function BreadcrumbItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$10([
+        Property('')
+    ], BreadcrumbItem.prototype, "text", void 0);
+    __decorate$10([
+        Property('')
+    ], BreadcrumbItem.prototype, "url", void 0);
+    __decorate$10([
+        Property(null)
+    ], BreadcrumbItem.prototype, "iconCss", void 0);
+    return BreadcrumbItem;
+}(ChildProperty));
+/**
+ * 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.
+ * ```html
+ * <nav id='breadcrumb'></nav>
+ * ```
+ * ```typescript
+ * <script>
+ * var breadcrumbObj = new Breadcrumb({ items: [{ text: 'Home', url: '/' }, { text: 'Index', url: './index.html }]});
+ * breadcrumbObj.appendTo("#breadcrumb");
+ * </script>
+ * ```
+ */
+var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
+    __extends$10(Breadcrumb, _super);
+    /**
+     * Constructor for creating the widget.
+     *
+     * @private
+     * @param {BreadcrumbModel} options - Specifies the Breadcrumb model.
+     * @param {string | HTMLElement} element - Specifies the element.
+     */
+    function Breadcrumb(options, element) {
+        return _super.call(this, options, element) || this;
+    }
+    /**
+     * @private
+     * @returns {void}
+     */
+    Breadcrumb.prototype.preRender = function () {
+        // pre render code
+    };
+    /**
+     * Initialize the control rendering.
+     *
+     * @private
+     * @returns {void}
+     */
+    Breadcrumb.prototype.render = function () {
+        this.initialize();
+        this.renderItems(this.items);
+        this.wireEvents();
+    };
+    Breadcrumb.prototype.initialize = function () {
+        this._maxItems = this.maxItems;
+        this.element.setAttribute('aria-label', 'breadcrumb');
+        if (this.cssClass) {
+            addClass([this.element], this.cssClass.split(' '));
+        }
+        this.setWidth();
+        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;
+        }
+    };
+    Breadcrumb.prototype.setWidth = function () {
+        if (this.width) {
+            this.element.style.width = this.width;
+        }
+    };
+    Breadcrumb.prototype.initItems = function () {
+        if (!this.items.length) {
+            var baseUri = void 0;
+            var uri = void 0;
+            var items = [];
+            if (this.url) {
+                var url = new URL(this.url);
+                baseUri = url.origin + '/';
+                uri = url.href.split(baseUri)[1].split('/');
+            }
+            else {
+                baseUri = window.location.origin + '/';
+                uri = window.location.href.split(baseUri)[1].split('/');
+            }
+            items.push({ iconCss: 'e-icons e-home', url: baseUri });
+            for (var i = 0; i < uri.length; i++) {
+                items.push({ text: uri[i], url: baseUri + uri[i] });
+                baseUri += uri[i] + '/';
+            }
+            this.setProperties({ items: items }, true);
+        }
+    };
+    Breadcrumb.prototype.renderItems = function (items) {
+        var _this = this;
+        var item;
+        var isSingleLevel;
+        var isIconRight = this.element.classList.contains(ICONRIGHT);
+        var itemsLength = items.length;
+        if (itemsLength) {
+            var isActiveItem = void 0;
+            var isLastItem = void 0;
+            var j_1 = 0;
+            var len = (itemsLength * 2) - 1;
+            var ol = this.createElement('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 listBaseOptions = {
+                moduleName: this.getModuleName(),
+                showIcon: showIcon,
+                itemNavigable: true,
+                itemCreated: function (args) {
+                    var isLastItem = args.curData.isLastItem;
+                    if (args.curData.isEmptyUrl) {
+                        args.item.children[0].removeAttribute('href');
+                        if (!isLastItem || (isLastItem && _this.enableActiveItemNavigation)) {
+                            args.item.children[0].setAttribute('tabindex', '0');
+                            EventHandler.add(args.item.children[0], 'keydown', _this.keyDownHandler, _this);
+                        }
+                    }
+                    if (isLastItem && args.item.children.length && !_this.itemTemplate) {
+                        delete args.curData.isLastItem;
+                        args.item.innerHTML = _this.createElement('span', { className: ITEMTEXTCLASS, innerHTML: args.item.children[0].innerHTML }).outerHTML;
+                    }
+                    if (args.curData.iconCss && !args.curData.text && !_this.itemTemplate) {
+                        args.item.classList.add('e-icon-item');
+                    }
+                    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
+                    };
+                    _this.trigger('beforeItemRender', eventArgs);
+                    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));
+                    }
+                    if (isDisabled_1 || eventArgs.element.classList.contains('e-disabled')) {
+                        args.item.setAttribute('aria-disabled', 'true');
+                    }
+                    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);
+                if (isCollasped && i > 1 && i < len - 2) {
+                    continue;
+                }
+                else if (isDefaultOverflowMode_1 && ((j_1 < this.startIndex || j_1 > this.endIndex)
+                    && (i % 2 ? j_1 !== this.startIndex - 1 : true)) && j_1 !== 0) {
+                    continue;
+                }
+                if (i % 2) {
+                    // separator item
+                    listBaseOptions.template = this.separatorTemplate ? this.separatorTemplate : '/';
+                    listBaseOptions.itemClass = 'e-breadcrumb-separator';
+                    isSingleLevel = false;
+                    item = [{ previousItem: item.pop(), nextItem: items[j_1] }];
+                }
+                else {
+                    // list item
+                    listBaseOptions.itemClass = '';
+                    if (this.itemTemplate) {
+                        listBaseOptions.template = this.itemTemplate;
+                        isSingleLevel = false;
+                    }
+                    else {
+                        isSingleLevel = true;
+                    }
+                    item = [extend({}, items[j_1].properties ? items[j_1].properties
+                            : items[j_1])];
+                    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) {
+                        item[0].isLastItem = true;
+                    }
+                }
+                append(ListBase.createList(this.createElement, item, listBaseOptions, isSingleLevel, this)
+                    .childNodes, ol);
+                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);
+                }
+                if (isActiveItem || isLastItem) {
+                    break;
+                }
+            }
+            if (this.isReact) {
+                this.renderReactTemplates();
+            }
+            this.element.append(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;
+                        this.initPvtProps();
+                        return this.reRenderItems();
+                    }
+                    else {
+                        liWidth += liElems[i].offsetWidth;
+                    }
+                }
+            }
+        }
+    };
+    Breadcrumb.prototype.hasField = function (items, field) {
+        for (var i = 0, len = items.length; i < len; i++) {
+            if (items[i][field]) {
+                return true;
+            }
+        }
+        return false;
+    };
+    Breadcrumb.prototype.beforeItemRenderChanges = function (prevItem, currItem, elem, isRightIcon) {
+        var wrapElem = elem.querySelector('.e-anchor-wrap');
+        if (currItem.text !== prevItem.text) {
+            wrapElem.childNodes.forEach(function (child) {
+                if (child.nodeType === Node.TEXT_NODE) {
+                    child.textContent = currItem.text;
+                }
+            });
+        }
+        if (currItem.iconCss !== prevItem.iconCss) {
+            var iconElem = elem.querySelector('.' + ICONCLASS);
+            if (iconElem) {
+                if (currItem.iconCss) {
+                    removeClass([iconElem], prevItem.iconCss.split(' '));
+                    addClass([iconElem], currItem.iconCss.split(' '));
+                }
+                else {
+                    iconElem.remove();
+                }
+            }
+            else if (currItem.iconCss) {
+                var iconElem_1 = this.createElement('span', { className: ICONCLASS + ' ' + currItem.iconCss });
+                if (isRightIcon) {
+                    append([iconElem_1], wrapElem);
+                }
+                else {
+                    wrapElem.insertBefore(iconElem_1, wrapElem.childNodes[0]);
+                }
+            }
+        }
+        if (currItem.url !== prevItem.url && this.enableNavigation) {
+            var anchor = elem.querySelector('a.' + ITEMTEXTCLASS);
+            if (anchor) {
+                if (currItem.url) {
+                    anchor.setAttribute('href', currItem.url);
+                }
+                else {
+                    anchor.removeAttribute('href');
+                }
+            }
+        }
+    };
+    Breadcrumb.prototype.reRenderItems = function () {
+        this.element.innerHTML = '';
+        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) {
+                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();
+        }
+        if (e.target.classList.contains('e-breadcrumb-collapsed')) {
+            this.isExpanded = true;
+            this.reRenderItems();
+        }
+    };
+    Breadcrumb.prototype.resize = function () {
+        this._maxItems = this.maxItems;
+        this.initPvtProps();
+        this.reRenderItems();
+    };
+    Breadcrumb.prototype.expandHandler = function (e) {
+        if (e.key === 'Enter') {
+            this.isExpanded = true;
+            this.reRenderItems();
+        }
+    };
+    Breadcrumb.prototype.keyDownHandler = function (e) {
+        if (e.key === 'Enter') {
+            this.clickHandler(e);
+        }
+    };
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @private
+     * @param {BreadcrumbModel} newProp - Specifies the new properties.
+     * @param {BreadcrumbModel} oldProp - Specifies the old properties.
+     * @returns {void}
+     */
+    Breadcrumb.prototype.onPropertyChanged = function (newProp, oldProp) {
+        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 'overflowMode':
+                case 'maxItems':
+                    this.initPvtProps();
+                    this.reRenderItems();
+                    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(' '));
+                    }
+                    if (newProp.cssClass) {
+                        addClass([this.element], newProp.cssClass.split(' '));
+                    }
+                    if ((oldProp.cssClass && oldProp.cssClass.indexOf(ICONRIGHT) > -1) && !(newProp.cssClass &&
+                        newProp.cssClass.indexOf(ICONRIGHT) > -1) || !(oldProp.cssClass && oldProp.cssClass.indexOf(ICONRIGHT) > -1) &&
+                        (newProp.cssClass && newProp.cssClass.indexOf(ICONRIGHT) > -1)) {
+                        this.reRenderItems();
+                    }
+                    break;
+            }
+        }
+    };
+    Breadcrumb.prototype.wireEvents = function () {
+        EventHandler.add(this.element, 'click', this.clickHandler, this);
+        window.addEventListener('resize', this.resize.bind(this));
+    };
+    Breadcrumb.prototype.unWireEvents = function () {
+        EventHandler.remove(this.element, 'click', this.clickHandler);
+        window.removeEventListener('resize', this.resize.bind(this));
+    };
+    /**
+     * Get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    Breadcrumb.prototype.getPersistData = function () {
+        return this.addOnPersist(['activeItem']);
+    };
+    /**
+     * Get module name.
+     *
+     * @private
+     * @returns {string} - Module Name
+     */
+    Breadcrumb.prototype.getModuleName = function () {
+        return 'breadcrumb';
+    };
+    /**
+     * Destroys the widget.
+     *
+     * @returns {void}
+     */
+    Breadcrumb.prototype.destroy = function () {
+        this.unWireEvents();
+        this.element.innerHTML = '';
+        if (this.cssClass) {
+            removeClass([this.element], this.cssClass.split(' '));
+        }
+    };
+    __decorate$10([
+        Property('')
+    ], Breadcrumb.prototype, "url", void 0);
+    __decorate$10([
+        Collection([], BreadcrumbItem)
+    ], Breadcrumb.prototype, "items", void 0);
+    __decorate$10([
+        Property('')
+    ], Breadcrumb.prototype, "activeItem", void 0);
+    __decorate$10([
+        Property(0)
+    ], Breadcrumb.prototype, "maxItems", void 0);
+    __decorate$10([
+        Property('Default')
+    ], 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);
+    __decorate$10([
+        Property('/')
+    ], Breadcrumb.prototype, "separatorTemplate", void 0);
+    __decorate$10([
+        Property(true)
+    ], Breadcrumb.prototype, "enableNavigation", void 0);
+    __decorate$10([
+        Property(false)
+    ], Breadcrumb.prototype, "enableActiveItemNavigation", void 0);
+    __decorate$10([
+        Property('')
+    ], Breadcrumb.prototype, "locale", void 0);
+    __decorate$10([
+        Event()
+    ], Breadcrumb.prototype, "beforeItemRender", void 0);
+    __decorate$10([
+        Event()
+    ], Breadcrumb.prototype, "itemClick", void 0);
+    __decorate$10([
+        Event()
+    ], Breadcrumb.prototype, "created", void 0);
+    Breadcrumb = __decorate$10([
+        NotifyPropertyChanges
+    ], Breadcrumb);
+    return Breadcrumb;
+}(Component));
+
+/**
+ * Breadcrumb modules
+ */
+
 /**
  * Navigation all modules
  */
 
-export { MenuAnimationSettings, MenuItem, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar };
+export { MenuAnimationSettings, MenuItem, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbItem, Breadcrumb };
 //# sourceMappingURL=ej2-navigations.es5.js.map