@syncfusion/ej2-navigations 19.2.59 → 19.3.44

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

@@ -5073,7 +5073,7 @@ let Toolbar = class Toolbar extends Component {
         for (const prop of Object.keys(newProp)) {
             switch (prop) {
                 case 'items':
-                    if (!(newProp.items instanceof Array && oldProp.items instanceof Array) && !this.isServerRendered) {
+                    if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {
                         const changedProb = Object.keys(newProp.items);
                         for (let i = 0; i < changedProb.length; i++) {
                             const index = parseInt(Object.keys(newProp.items)[i], 10);
@@ -5464,15 +5464,10 @@ let Accordion = class Accordion extends Component {
      * @returns {void}
      */
     render() {
-        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();
     }
@@ -5542,7 +5537,7 @@ let Accordion = class Accordion extends Component {
         }
         return undefined;
     }
-    initializeheaderTemplate() {
+    initializeHeaderTemplate() {
         if (this.headerTemplate) {
             this.headerTemplateFn = this.templateParser(this.headerTemplate);
         }
@@ -5553,7 +5548,7 @@ let Accordion = class Accordion extends Component {
         }
     }
     /* eslint-disable */
-    getheaderTemplate() {
+    getHeaderTemplate() {
         return this.headerTemplateFn;
     }
     /* eslint-disable */
@@ -5684,32 +5679,9 @@ let Accordion = class Accordion extends Component {
         eventArgs.originalEvent = e;
         const 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 {
-                const id = acrdnItem.id;
-                if (this.items.length > 0) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.interopAdaptor.invokeMethodAsync('OnItemClick', index).then(() => {
-                        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(() => {
-                        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);
@@ -5843,7 +5815,7 @@ let Accordion = class Accordion extends Component {
             const ctnEle = this.headerEleGenerate();
             const 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);
@@ -6374,16 +6346,6 @@ let Accordion = class Accordion extends Component {
             eleHeader.removeAttribute('tabindex');
         }
     }
-    /**
-     * Refresh the Accordion component.
-     *
-     * @returns {void}.
-     */
-    refresh() {
-        if (!this.isServerRendered) {
-            super.refresh();
-        }
-    }
     /**
      * Expands/Collapses the specified Accordion item.
      *
@@ -6433,35 +6395,10 @@ let Accordion = class Accordion extends Component {
             return;
         }
         if (isNullOrUndefined(ctn) && isExpand) {
-            if (!this.isServerRendered) {
-                ctn = this.contentRendering(index);
-                ele.appendChild(ctn);
-                this.ariaAttrUpdate(ele);
-                this.expand(ctn);
-            }
-            else {
-                const id = ele.id;
-                if (this.items.length > 0) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.interopAdaptor.invokeMethodAsync('OnItemClick', index).then(() => {
-                        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(() => {
-                        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) {
@@ -6546,10 +6483,6 @@ let Accordion = class Accordion extends Component {
         for (const prop of Object.keys(newProp)) {
             switch (prop) {
                 case 'items':
-                    if (this.isServerRendered) {
-                        this.wireFocusEvents();
-                        break;
-                    }
                     if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {
                         const changedProp = Object.keys(newProp.items);
                         for (let j = 0; j < changedProp.length; j++) {
@@ -6604,7 +6537,7 @@ let Accordion = class Accordion extends Component {
                     isRefresh = true;
                     break;
                 case 'headerTemplate':
-                    this.initializeheaderTemplate();
+                    this.initializeHeaderTemplate();
                     isRefresh = true;
                     break;
                 case 'itemTemplate':
@@ -6638,7 +6571,7 @@ let Accordion = class Accordion extends Component {
                     break;
             }
         }
-        if (isRefresh && !this.isServerRendered) {
+        if (isRefresh) {
             this.initExpand = [];
             if (this.expandedIndices.length > 0) {
                 this.initExpand = this.expandedIndices;
@@ -7285,12 +7218,7 @@ let Tab = class Tab extends Component {
         if (this.isReact) {
             this.clearTemplate();
         }
-        if (!this.isServerRendered) {
-            super.refresh();
-        }
-        else if (this.isServerRendered && this.loadOn !== 'Dynamic') {
-            this.setActiveBorder();
-        }
+        super.refresh();
         if (this.isReact) {
             this.renderReactTemplates();
         }
@@ -7336,10 +7264,6 @@ let Tab = class Tab extends Component {
         this.initRender = false;
     }
     renderContainer() {
-        if (this.isServerRendered) {
-            this.isTemplate = false;
-            return;
-        }
         const ele = this.element;
         this.items.forEach((item, index) => {
             if (isNullOrUndefined(item.id) && !isNullOrUndefined(item.setProperties)) {
@@ -7545,7 +7469,17 @@ let Tab = class Tab extends Component {
             if (typeof txt === 'string' && this.enableHtmlSanitizer) {
                 txt = SanitizeHtmlHelper.sanitize(txt);
             }
-            this.lastIndex = ((tbCount === 0) ? i : ((this.isReplace) ? (index + i) : (this.lastIndex + 1)));
+            let itemIndex;
+            if (this.isReplace && !isNullOrUndefined(this.tbId) && this.tbId !== '') {
+                const num = (this.tbId.indexOf('_'));
+                itemIndex = parseInt(this.tbId.substring(num + 1), 10);
+                this.tbId = '';
+            }
+            else {
+                itemIndex = index + i;
+            }
+            const addIndex = this.isAdd ? tbCount + i : this.lastIndex + 1;
+            this.lastIndex = ((tbCount === 0) ? i : ((this.isReplace) ? (itemIndex) : (addIndex)));
             const disabled = (item.disabled) ? ' ' + CLS_DISABLE$4 + ' ' + CLS_OVERLAY$2 : '';
             const hidden = (item.visible === false) ? ' ' + CLS_HIDDEN$1 : '';
             txtWrapEle = this.createElement('div', { className: CLS_TEXT, attrs: { 'role': 'presentation' } });
@@ -7731,23 +7665,17 @@ let Tab = class Tab extends Component {
     triggerAnimation(id, value) {
         const prevIndex = this.prevIndex;
         let oldCnt;
-        let newCnt;
-        if (!this.isServerRendered || (this.isServerRendered && this.loadOn !== 'Dynamic')) {
-            const itemCollection = [].slice.call(this.element.querySelector('.' + CLS_CONTENT$1).children);
-            itemCollection.forEach((item) => {
-                if (item.id === this.prevActiveEle) {
-                    oldCnt = item;
-                }
-            });
-            const prevEle = this.tbItem[prevIndex];
-            newCnt = this.getTrgContent(this.cntEle, this.extIndex(id));
-            if (isNullOrUndefined(oldCnt) && !isNullOrUndefined(prevEle)) {
-                const idNo = this.extIndex(prevEle.id);
-                oldCnt = this.getTrgContent(this.cntEle, idNo);
+        const itemCollection = [].slice.call(this.element.querySelector('.' + CLS_CONTENT$1).children);
+        itemCollection.forEach((item) => {
+            if (item.id === this.prevActiveEle) {
+                oldCnt = item;
             }
-        }
-        else {
-            newCnt = this.cntEle.firstElementChild;
+        });
+        const prevEle = this.tbItem[prevIndex];
+        const newCnt = this.getTrgContent(this.cntEle, this.extIndex(id));
+        if (isNullOrUndefined(oldCnt) && !isNullOrUndefined(prevEle)) {
+            const idNo = this.extIndex(prevEle.id);
+            oldCnt = this.getTrgContent(this.cntEle, idNo);
         }
         if (!isNullOrUndefined(newCnt)) {
             this.prevActiveEle = newCnt.id;
@@ -7976,21 +7904,6 @@ let Tab = class Tab extends Component {
             curActItem.firstElementChild.focus();
         }
     }
-    serverChangeOrientation(newProp, oldProp) {
-        this.setOrientation(newProp, this.hdrEle);
-        removeClass([this.element], [CLS_VTAB]);
-        const newValue = newProp === 'Left' || newProp === 'Right';
-        const oldValue = oldProp === 'Left' || oldProp === 'Right';
-        if (newValue !== oldValue) {
-            this.changeToolbarOrientation();
-        }
-        if (this.isVertical()) {
-            addClass([this.element], [CLS_VTAB]);
-        }
-        this.updateOrientationAttribute();
-        this.setActiveBorder();
-        this.focusItem();
-    }
     changeToolbarOrientation() {
         this.tbObj.setProperties({ height: (this.isVertical() ? '100%' : 'auto'), width: (this.isVertical() ? 'auto' : '100%') }, true);
         this.tbObj.changeOrientation();
@@ -8075,6 +7988,9 @@ let Tab = class Tab extends Component {
                 }
                 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' });
         }
@@ -8093,9 +8009,6 @@ let Tab = class Tab extends Component {
         if (trg === null) {
             return;
         }
-        if (this.isServerRendered && trg.classList.contains(CLS_TB_POPUP)) {
-            this.popupHandler(trg);
-        }
         const root = closest(trg, '.' + CLS_TAB);
         if (this.element !== root) {
             return;
@@ -8136,9 +8049,6 @@ let Tab = class Tab extends Component {
     setActive(value, skipDataBind = false) {
         this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
         const 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;
         }
@@ -8180,7 +8090,7 @@ let Tab = class Tab extends Component {
                 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);
             const item = this.getTrgContent(this.cntEle, this.extIndex(id));
             if (isNullOrUndefined(item)) {
@@ -8297,12 +8207,7 @@ let Tab = class Tab extends Component {
         }
         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);
             }
         }
@@ -8447,8 +8352,17 @@ let Tab = class Tab extends Component {
                 const property = Object.keys(newProp.items[index])[0];
                 const oldVal = Object(oldProp.items[index])[property];
                 const newVal = Object(newProp.items[index])[property];
-                const hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM$2 + this.tabId + '_' + index, this.element);
-                const cntItem = select('.' + CLS_CONTENT$1 + ' #' + CLS_CONTENT$1 + this.tabId + '_' + index, this.element);
+                const hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
+                let itemIndex;
+                if (hdr && !isNullOrUndefined(hdr.id) && hdr.id !== '') {
+                    const num = (hdr.id.indexOf('_'));
+                    itemIndex = parseInt(hdr.id.substring(num + 1), 10);
+                }
+                else {
+                    itemIndex = index;
+                }
+                const hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM$2 + this.tabId + '_' + itemIndex, this.element);
+                const cntItem = select('.' + CLS_CONTENT$1 + ' #' + CLS_CONTENT$1 + this.tabId + '_' + itemIndex, this.element);
                 if (property === 'header' || property === 'headerTemplate') {
                     const icon = (isNullOrUndefined(this.items[index].header) ||
                         isNullOrUndefined(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
@@ -8457,6 +8371,7 @@ let Tab = class Tab extends Component {
                         this.removeTab(index);
                     }
                     else {
+                        this.tbId = hdr.id;
                         const arr = [];
                         arr.push(this.items[index]);
                         this.items.splice(index, 1);
@@ -8585,10 +8500,7 @@ let Tab = class Tab extends Component {
                         }
                     }
                     this.cloneElement.style.pointerEvents = 'none';
-                    let x = this.cloneElement.getBoundingClientRect().left;
-                    let y = this.cloneElement.getBoundingClientRect().top;
-                    let ele = document.elementFromPoint(x, y);
-                    dropItem = closest(ele, '.' + CLS_TB_ITEM + '.e-draggable');
+                    dropItem = closest(e.target, '.' + CLS_TB_ITEM + '.e-draggable');
                     let scrollContentWidth = 0;
                     if (this.overflowMode === 'Scrollable' && !isNullOrUndefined(this.element.querySelector('.e-hscroll'))) {
                         scrollContentWidth = this.element.querySelector('.e-hscroll-content').offsetWidth;
@@ -8953,7 +8865,7 @@ let Tab = class Tab extends Component {
         }
         this.setActiveBorder();
         item.setAttribute('aria-hidden', '' + value);
-        if (!this.isServerRendered && this.overflowMode === 'Popup' && this.tbObj) {
+        if (this.overflowMode === 'Popup' && this.tbObj) {
             this.tbObj.refreshOverflow();
         }
     }
@@ -9110,12 +9022,10 @@ let Tab = class Tab extends Component {
                     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);
                     }
@@ -9124,26 +9034,17 @@ let Tab = class Tab extends Component {
                     }
                     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);
@@ -9154,10 +9055,8 @@ let Tab = class Tab extends Component {
                     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) {
@@ -14702,10 +14601,10 @@ let Sidebar = class Sidebar extends Component {
     }
     wireEvents() {
         this.setEnableGestures();
-        window.addEventListener('resize', this.resize.bind(this));
+        EventHandler.add(window, 'resize', this.resize, this);
     }
     unWireEvents() {
-        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();
@@ -14979,9 +14878,485 @@ Sidebar = __decorate$9([
  * Sidebar modules
  */
 
+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;
+};
+const ICONRIGHT = 'e-icon-right';
+const ITEMTEXTCLASS = 'e-breadcrumb-text';
+const ICONCLASS = 'e-breadcrumb-icon';
+class BreadcrumbItem extends ChildProperty {
+}
+__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);
+/**
+ * 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>
+ * ```
+ */
+let Breadcrumb = class Breadcrumb extends Component {
+    /**
+     * Constructor for creating the widget.
+     *
+     * @private
+     * @param {BreadcrumbModel} options - Specifies the Breadcrumb model.
+     * @param {string | HTMLElement} element - Specifies the element.
+     */
+    constructor(options, element) {
+        super(options, element);
+    }
+    /**
+     * @private
+     * @returns {void}
+     */
+    preRender() {
+        // pre render code
+    }
+    /**
+     * Initialize the control rendering.
+     *
+     * @private
+     * @returns {void}
+     */
+    render() {
+        this.initialize();
+        this.renderItems(this.items);
+        this.wireEvents();
+    }
+    initialize() {
+        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();
+    }
+    initPvtProps() {
+        if (this.overflowMode === 'Default' && this._maxItems > 0) {
+            this.startIndex = this.items.length - (this._maxItems - 1);
+            this.endIndex = this.items.length - 1;
+        }
+    }
+    setWidth() {
+        if (this.width) {
+            this.element.style.width = this.width;
+        }
+    }
+    initItems() {
+        if (!this.items.length) {
+            let baseUri;
+            let uri;
+            const items = [];
+            if (this.url) {
+                const 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 (let i = 0; i < uri.length; i++) {
+                items.push({ text: uri[i], url: baseUri + uri[i] });
+                baseUri += uri[i] + '/';
+            }
+            this.setProperties({ items: items }, true);
+        }
+    }
+    renderItems(items) {
+        let item;
+        let isSingleLevel;
+        const isIconRight = this.element.classList.contains(ICONRIGHT);
+        const itemsLength = items.length;
+        if (itemsLength) {
+            let isActiveItem;
+            let isLastItem;
+            let j = 0;
+            const len = (itemsLength * 2) - 1;
+            const ol = this.createElement('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 listBaseOptions = {
+                moduleName: this.getModuleName(),
+                showIcon: showIcon,
+                itemNavigable: true,
+                itemCreated: (args) => {
+                    const isLastItem = args.curData.isLastItem;
+                    if (args.curData.isEmptyUrl) {
+                        args.item.children[0].removeAttribute('href');
+                        if (!isLastItem || (isLastItem && this.enableActiveItemNavigation)) {
+                            args.item.children[0].setAttribute('tabindex', '0');
+                            EventHandler.add(args.item.children[0], 'keydown', this.keyDownHandler, this);
+                        }
+                    }
+                    if (isLastItem && args.item.children.length && !this.itemTemplate) {
+                        delete args.curData.isLastItem;
+                        args.item.innerHTML = this.createElement('span', { className: ITEMTEXTCLASS, innerHTML: args.item.children[0].innerHTML }).outerHTML;
+                    }
+                    if (args.curData.iconCss && !args.curData.text && !this.itemTemplate) {
+                        args.item.classList.add('e-icon-item');
+                    }
+                    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
+                    };
+                    this.trigger('beforeItemRender', eventArgs);
+                    const containsRightIcon = (isIconRight || eventArgs.element.classList.contains(ICONRIGHT));
+                    if (containsRightIcon && args.curData.iconCss && !this.itemTemplate) {
+                        args.item.querySelector('.e-anchor-wrap').append(args.item.querySelector('.' + ICONCLASS));
+                    }
+                    if (isDisabled || eventArgs.element.classList.contains('e-disabled')) {
+                        args.item.setAttribute('aria-disabled', 'true');
+                    }
+                    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);
+                if (isCollasped && i > 1 && i < len - 2) {
+                    continue;
+                }
+                else if (isDefaultOverflowMode && ((j < this.startIndex || j > this.endIndex)
+                    && (i % 2 ? j !== this.startIndex - 1 : true)) && j !== 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] }];
+                }
+                else {
+                    // list item
+                    listBaseOptions.itemClass = '';
+                    if (this.itemTemplate) {
+                        listBaseOptions.template = this.itemTemplate;
+                        isSingleLevel = false;
+                    }
+                    else {
+                        isSingleLevel = true;
+                    }
+                    item = [extend({}, items[j].properties ? items[j].properties
+                            : items[j])];
+                    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) {
+                        item[0].isLastItem = true;
+                    }
+                }
+                append(ListBase.createList(this.createElement, item, listBaseOptions, isSingleLevel, this)
+                    .childNodes, ol);
+                if (isCollasped && i === 1) {
+                    const 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();
+        }
+    }
+    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;
+                        this.initPvtProps();
+                        return this.reRenderItems();
+                    }
+                    else {
+                        liWidth += liElems[i].offsetWidth;
+                    }
+                }
+            }
+        }
+    }
+    hasField(items, field) {
+        for (let i = 0, len = items.length; i < len; i++) {
+            if (items[i][field]) {
+                return true;
+            }
+        }
+        return false;
+    }
+    beforeItemRenderChanges(prevItem, currItem, elem, isRightIcon) {
+        const wrapElem = elem.querySelector('.e-anchor-wrap');
+        if (currItem.text !== prevItem.text) {
+            wrapElem.childNodes.forEach((child) => {
+                if (child.nodeType === Node.TEXT_NODE) {
+                    child.textContent = currItem.text;
+                }
+            });
+        }
+        if (currItem.iconCss !== prevItem.iconCss) {
+            const 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) {
+                const iconElem = this.createElement('span', { className: ICONCLASS + ' ' + currItem.iconCss });
+                if (isRightIcon) {
+                    append([iconElem], wrapElem);
+                }
+                else {
+                    wrapElem.insertBefore(iconElem, wrapElem.childNodes[0]);
+                }
+            }
+        }
+        if (currItem.url !== prevItem.url && this.enableNavigation) {
+            const anchor = elem.querySelector('a.' + ITEMTEXTCLASS);
+            if (anchor) {
+                if (currItem.url) {
+                    anchor.setAttribute('href', currItem.url);
+                }
+                else {
+                    anchor.removeAttribute('href');
+                }
+            }
+        }
+    }
+    reRenderItems() {
+        this.element.innerHTML = '';
+        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) {
+                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();
+        }
+    }
+    resize() {
+        this._maxItems = this.maxItems;
+        this.initPvtProps();
+        this.reRenderItems();
+    }
+    expandHandler(e) {
+        if (e.key === 'Enter') {
+            this.isExpanded = true;
+            this.reRenderItems();
+        }
+    }
+    keyDownHandler(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}
+     */
+    onPropertyChanged(newProp, oldProp) {
+        for (const prop of Object.keys(newProp)) {
+            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;
+            }
+        }
+    }
+    wireEvents() {
+        EventHandler.add(this.element, 'click', this.clickHandler, this);
+        window.addEventListener('resize', this.resize.bind(this));
+    }
+    unWireEvents() {
+        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
+     */
+    getPersistData() {
+        return this.addOnPersist(['activeItem']);
+    }
+    /**
+     * Get module name.
+     *
+     * @private
+     * @returns {string} - Module Name
+     */
+    getModuleName() {
+        return 'breadcrumb';
+    }
+    /**
+     * Destroys the widget.
+     *
+     * @returns {void}
+     */
+    destroy() {
+        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);
+
+/**
+ * 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.es2015.js.map