@syncfusion/ej2-navigations 20.1.61 → 20.2.39

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

@@ -2363,7 +2363,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         if (closest(e.target, '.e-menu-wrapper').querySelector('ul.e-menu-parent').id !== this.element.id) {
             return;
         }
-        if (this.element.classList.contains('e-hide-menu')) {
+        if (this.element.className.indexOf('e-hide-menu') > -1) {
             this.openHamburgerMenu(e);
         }
         else {
@@ -2757,9 +2757,8 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
     MenuBase.prototype.removeItem = function (item, navIdx, idx) {
         item.splice(idx, 1);
         var uls = this.getWrapper().children;
-        var uls_length = this.hamburgerMode ? 1 : uls.length;
-        if (navIdx.length < uls_length) {
-            detach(uls[this.hamburgerMode ? 1 : navIdx.length].children[idx]);
+        if (navIdx.length < uls.length) {
+            detach(uls[navIdx.length].children[idx]);
         }
     };
     /**
@@ -4012,6 +4011,9 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             else {
                 this.scrollModule = new HScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);
             }
+            if (this.cssClass) {
+                addClass([innerItems[0]], this.cssClass.split(' '));
+            }
             this.remove(this.scrollModule.element, CLS_TBARPOS);
             setStyleAttribute(this.element, { overflow: 'hidden' });
         }
@@ -4263,6 +4265,9 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
     Toolbar.prototype.popupInit = function (element, ele) {
         if (!this.popObj) {
             element.appendChild(ele);
+            if (this.cssClass) {
+                addClass([ele], this.cssClass.split(' '));
+            }
             setStyleAttribute(this.element, { overflow: '' });
             var eleStyles = window.getComputedStyle(this.element);
             var popup = new Popup(null, {
@@ -7705,75 +7710,15 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
             if (!isNullOrUndefined(this.tbItem)) {
                 for (var i = 0; i < this.items.length; i++) {
-                    var tabID = this.items[i].id;
-                    this.tbItem[i].setAttribute('data-id', tabID);
+                    if (this.items[i]) {
+                        var tabID = this.items[i].id;
+                        this.tbItem[i].setAttribute('data-id', tabID);
+                    }
                 }
             }
             this.setRTL(this.enableRtl);
         }
     };
-    Tab.prototype.serverItemsChanged = function () {
-        this.enableAnimation = false;
-        this.setActive(this.selectedItem, true);
-        if (this.loadOn !== 'Dynamic' && !isNullOrUndefined(this.cntEle)) {
-            var itemCollection = [].slice.call(this.cntEle.children);
-            var content_1 = CLS_CONTENT$1 + this.tabId + '_' + this.selectedItem;
-            itemCollection.forEach(function (item) {
-                if (item.classList.contains(CLS_ACTIVE$1) && item.id !== content_1) {
-                    item.classList.remove(CLS_ACTIVE$1);
-                }
-                if (item.id === content_1) {
-                    item.classList.add(CLS_ACTIVE$1);
-                }
-            });
-            this.prevIndex = this.selectedItem;
-            this.triggerAnimation(CLS_ITEM$2 + this.tabId + '_' + this.selectedItem, false);
-        }
-        this.enableAnimation = true;
-    };
-    Tab.prototype.headerReady = function () {
-        this.initRender = true;
-        this.hdrEle = this.getTabHeader();
-        this.setOrientation(this.headerPlacement, this.hdrEle);
-        if (!isNullOrUndefined(this.hdrEle)) {
-            this.tbObj = (this.hdrEle && this.hdrEle.ej2_instances[0]);
-        }
-        this.tbObj.clicked = this.clickHandler.bind(this);
-        this.tbObj.on('onItemsChanged', this.serverItemsChanged.bind(this));
-        this.tbItems = select('.' + CLS_HEADER$1 + ' .' + CLS_TB_ITEMS, this.element);
-        if (!isNullOrUndefined(this.tbItems)) {
-            rippleEffect(this.tbItems, { selector: '.e-tab-wrap' });
-        }
-        if (selectAll('.' + CLS_TB_ITEM, this.element).length > 0) {
-            this.bdrLine = select('.' + CLS_INDICATOR + '.' + CLS_IGNORE, this.element);
-            var scrollCnt = select('.' + this.scrCntClass, this.tbItems);
-            if (!isNullOrUndefined(scrollCnt)) {
-                scrollCnt.insertBefore(this.bdrLine, scrollCnt.firstElementChild);
-            }
-            else {
-                this.tbItems.insertBefore(this.bdrLine, this.tbItems.firstElementChild);
-            }
-            this.select(this.selectedItem);
-        }
-        this.cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT$1, this.element);
-        if (!isNullOrUndefined(this.cntEle)) {
-            this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });
-        }
-        if (this.loadOn === 'Demand') {
-            var id = this.setActiveContent();
-            this.triggerAnimation(id, false);
-        }
-        this.initRender = false;
-        this.renderComplete();
-    };
-    Tab.prototype.setActiveContent = function () {
-        var id = CLS_ITEM$2 + this.tabId + '_' + this.selectedItem;
-        var item = this.getTrgContent(this.cntEle, this.extIndex(id));
-        if (!isNullOrUndefined(item)) {
-            item.classList.add(CLS_ACTIVE$1);
-        }
-        return id;
-    };
     Tab.prototype.renderHeader = function () {
         var _this = this;
         var hdrPlace = this.headerPlacement;
@@ -7823,7 +7768,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             items: (tabItems.length !== 0) ? tabItems : [],
             clicked: this.clickHandler.bind(this),
             scrollStep: this.scrollStep,
-            enableHtmlSanitizer: this.enableHtmlSanitizer
+            enableHtmlSanitizer: this.enableHtmlSanitizer,
+            cssClass: this.cssClass
         });
         this.tbObj.isStringTemplate = true;
         this.tbObj.createElement = this.createElement;
@@ -7833,7 +7779,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         this.setCloseButton(this.showCloseButton);
         var toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
         if (!isNullOrUndefined(toolbarHeader)) {
-            toolbarHeader.id = this.element.id + '_' + 'tab_header_items';
+            if (isNullOrUndefined(toolbarHeader.id) || toolbarHeader.id === '') {
+                toolbarHeader.id = this.element.id + '_' + 'tab_header_items';
+            }
+            this.element.setAttribute('aria-owns', toolbarHeader.id);
         }
     };
     Tab.prototype.renderContent = function () {
@@ -8558,10 +8507,6 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             this.trigger('selected', eventArg);
         }
     };
-    Tab.prototype.contentReady = function () {
-        var id = this.setActiveContent();
-        this.triggerAnimation(id, this.enableAnimation);
-    };
     Tab.prototype.setItems = function (items) {
         this.isReplace = true;
         this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());
@@ -9073,7 +9018,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             else {
-                this.dragItem.parentNode.insertBefore(dropItem, this.dragItem);
+                this.dragItem.parentNode.insertBefore(this.dragItem, dropItem.nextElementSibling);
             }
         }
     };
@@ -9254,8 +9199,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 if (_this.allowDragAndDrop && (index !== Array.prototype.indexOf.call(_this.itemIndexArray, trg.id))) {
                     index = Array.prototype.indexOf.call(_this.itemIndexArray, trg.id);
                 }
-                _this.items.splice(index, 1);
-                _this.itemIndexArray.splice(index, 1);
+                var targetEleIndex = _this.itemIndexArray.indexOf(trg.id);
+                _this.items.splice(targetEleIndex, 1);
+                _this.itemIndexArray.splice(targetEleIndex, 1);
                 _this.refreshActiveBorder();
                 var cntTrg = select('#' + CLS_CONTENT$1 + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_CONTENT$1, _this.element));
                 if (!isNullOrUndefined(cntTrg)) {
@@ -9440,6 +9386,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                         var item = this.items[args];
                         this.items.splice(args, 1);
                         this.items.splice(this.tbItem.length - 1, 0, item);
+                        var itemId = this.itemIndexArray[args];
+                        this.itemIndexArray.splice(args, 1);
+                        this.itemIndexArray.splice(this.tbItem.length - 1, 0, itemId);
                     }
                 }
                 else {
@@ -9520,12 +9469,20 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     this.setContentHeight(false);
                     break;
                 case 'cssClass':
+                    var headerEle = this.element.querySelector('.' + CLS_HEADER$1);
                     if (oldProp.cssClass !== '' && !isNullOrUndefined(oldProp.cssClass)) {
                         this.setCssClass(this.element, oldProp.cssClass, false);
                         this.setCssClass(this.element, newProp.cssClass, true);
+                        if (!isNullOrUndefined(headerEle)) {
+                            this.setCssClass(headerEle, oldProp.cssClass, false);
+                            this.setCssClass(headerEle, newProp.cssClass, true);
+                        }
                     }
                     else {
                         this.setCssClass(this.element, newProp.cssClass, true);
+                        if (!isNullOrUndefined(headerEle)) {
+                            this.setCssClass(headerEle, newProp.cssClass, true);
+                        }
                     }
                     break;
                 case 'items':
@@ -10368,6 +10325,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                         this.updateChildCheckState(childItems, this.treeData[index]);
                     }
                 }
+                this.validNodes = (this.enablePersistence) ? this.checkedNodes : this.validNodes;
             }
             this.setProperties({ checkedNodes: this.validNodes }, true);
         }
@@ -14847,6 +14805,7 @@ var CLOSE = 'e-close';
 var OPEN = 'e-open';
 var TRASITION = 'e-transition';
 var DEFAULTBACKDROP = 'e-sidebar-overlay';
+var CONTEXTBACKDROP = 'e-backdrop';
 var RTL$2 = 'e-rtl';
 var RIGHT = 'e-right';
 var LEFT = 'e-left';
@@ -15016,7 +14975,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
     Sidebar.prototype.destroyBackDrop = function () {
         var sibling = document.querySelector('.e-main-content') || this.targetEle;
         if (this.target && this.showBackdrop && sibling) {
-            sibling.removeChild(this.defaultBackdropDiv);
+            removeClass([sibling], CONTEXTBACKDROP);
         }
         else if (this.showBackdrop && this.modal) {
             this.modal.style.display = 'none';
@@ -15154,12 +15113,8 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
     };
     Sidebar.prototype.createBackDrop = function () {
         if (this.target && this.showBackdrop && this.getState()) {
-            var targetString = this.target;
             var sibling = document.querySelector('.e-main-content') || this.targetEle;
-            this.defaultBackdropDiv = this.createElement('div');
-            addClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
-            setStyleAttribute(this.defaultBackdropDiv, { height: targetString.style.height });
-            sibling.appendChild(this.defaultBackdropDiv);
+            addClass([sibling], CONTEXTBACKDROP);
         }
         else if (this.showBackdrop && !this.modal && this.getState()) {
             this.modal = this.createElement('div');
@@ -15920,12 +15875,6 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
                     }
                     if (!(this.overflowMode === 'Menu' && liElems[i].classList.contains(MENUCLASS))) {
                         liWidth += liElems[i].offsetWidth;
-                        if (liWidth > width) {
-                            maxItems = Math.ceil((i) / 2) + (this.overflowMode === 'Menu' && i <= 2 ? 0 : 1);
-                            this._maxItems = maxItems;
-                            this.initPvtProps();
-                            return this.reRenderItems();
-                        }
                     }
                 }
             }
@@ -16347,6 +16296,7 @@ var CLS_TEMPLATE$2 = 'e-template';
 var CLS_SLIDE_ANIMATION = 'e-carousel-slide-animation';
 var CLS_FADE_ANIMATION = 'e-carousel-fade-animation';
 var CLS_CUSTOM_ANIMATION = 'e-carousel-custom-animation';
+var CLS_ANIMATION_NONE = 'e-carousel-animation-none';
 var CLS_PREV_SLIDE = 'e-prev';
 var CLS_NEXT_SLIDE = 'e-next';
 var CLS_TRANSITION_START = 'e-transition-start';
@@ -16371,20 +16321,6 @@ var CarouselItem = /** @__PURE__ @class */ (function (_super) {
     ], CarouselItem.prototype, "htmlAttributes", void 0);
     return CarouselItem;
 }(ChildProperty));
-/** Specifies the animation configuration for carousel items. */
-var CarouselAnimationSettings = /** @__PURE__ @class */ (function (_super) {
-    __extends$11(CarouselAnimationSettings, _super);
-    function CarouselAnimationSettings() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    __decorate$11([
-        Property('Slide')
-    ], CarouselAnimationSettings.prototype, "effect", void 0);
-    __decorate$11([
-        Property()
-    ], CarouselAnimationSettings.prototype, "customEffect", void 0);
-    return CarouselAnimationSettings;
-}(ChildProperty));
 var Carousel = /** @__PURE__ @class */ (function (_super) {
     __extends$11(Carousel, _super);
     /**
@@ -16437,13 +16373,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
-                case 'animation':
-                    for (var _b = 0, _c = Object.keys(newProp.animation); _b < _c.length; _b++) {
-                        var propName = _c[_b];
-                        if (propName === 'customEffect' && !isNullOrUndefined(oldProp.animation.customEffect)) {
-                            removeClass([this.element.querySelector("." + CLS_ITEMS$2)], oldProp.animation.customEffect);
-                        }
-                    }
+                case 'animationEffect':
                     this.applyAnimation();
                     break;
                 case 'cssClass':
@@ -16724,13 +16654,20 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         this.touchModule = new Touch(this.element, { swipe: this.swipeHandler.bind(this) });
     };
     Carousel.prototype.applyAnimation = function () {
-        var animationTarget = this.element.querySelector("." + CLS_ITEMS$2);
-        removeClass([animationTarget], [CLS_CUSTOM_ANIMATION, CLS_FADE_ANIMATION, CLS_SLIDE_ANIMATION]);
-        if (this.animation.customEffect) {
-            addClass([animationTarget], [CLS_CUSTOM_ANIMATION, this.animation.customEffect]);
-        }
-        else if (this.animation.effect !== 'None') {
-            addClass([animationTarget], this.animation.effect === 'Fade' ? CLS_FADE_ANIMATION : CLS_SLIDE_ANIMATION);
+        removeClass([this.element], [CLS_CUSTOM_ANIMATION, CLS_FADE_ANIMATION, CLS_SLIDE_ANIMATION, CLS_ANIMATION_NONE]);
+        switch (this.animationEffect) {
+            case 'Slide':
+                addClass([this.element], CLS_SLIDE_ANIMATION);
+                break;
+            case 'Fade':
+                addClass([this.element], CLS_FADE_ANIMATION);
+                break;
+            case 'None':
+                addClass([this.element], CLS_ANIMATION_NONE);
+                break;
+            case 'Custom':
+                addClass([this.element], CLS_CUSTOM_ANIMATION);
+                break;
         }
     };
     Carousel.prototype.autoSlide = function () {
@@ -16837,17 +16774,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                 isSwiped: isSwiped
             };
             var slideHeight;
-            if (_this.animation.customEffect) {
-                if (direction === 'Previous') {
-                    addClass([args.nextSlide], CLS_NEXT_SLIDE);
-                    addClass([args.currentSlide], CLS_PREV_SLIDE);
-                }
-                else {
-                    addClass([args.currentSlide], CLS_PREV_SLIDE);
-                    addClass([args.nextSlide], CLS_NEXT_SLIDE);
-                }
-            }
-            else if (_this.animation.effect === 'Slide') {
+            if (_this.animationEffect === 'Slide') {
                 if (direction === 'Previous') {
                     addClass([args.nextSlide], CLS_PREV_SLIDE);
                     slideHeight = args.nextSlide.offsetHeight;
@@ -16860,10 +16787,20 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                     addClass([args.currentSlide, args.nextSlide], CLS_TRANSITION_START);
                 }
             }
-            else if (_this.animation.effect === 'Fade') {
+            else if (_this.animationEffect === 'Fade') {
                 removeClass([args.currentSlide], CLS_ACTIVE$2);
                 addClass([args.nextSlide], CLS_ACTIVE$2);
             }
+            else if (_this.animationEffect === 'Custom') {
+                if (direction === 'Previous') {
+                    addClass([args.nextSlide], CLS_NEXT_SLIDE);
+                    addClass([args.currentSlide], CLS_PREV_SLIDE);
+                }
+                else {
+                    addClass([args.currentSlide], CLS_PREV_SLIDE);
+                    addClass([args.nextSlide], CLS_NEXT_SLIDE);
+                }
+            }
             else {
                 _this.onTransitionEnd();
             }
@@ -17058,7 +16995,9 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                 if (this.buttonsVisibility === 'VisibleOnHover' && navigator) {
                     removeClass([].slice.call(navigator.childNodes), CLS_HOVER_ARROWS);
                 }
-                addClass([this.element], CLS_HOVER);
+                if (this.pauseOnHover) {
+                    addClass([this.element], CLS_HOVER);
+                }
                 break;
             case 'mouseleave':
                 if (this.buttonsVisibility === 'VisibleOnHover' && navigator) {
@@ -17223,8 +17162,8 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         Collection([], CarouselItem)
     ], Carousel.prototype, "items", void 0);
     __decorate$11([
-        Complex({}, CarouselAnimationSettings)
-    ], Carousel.prototype, "animation", void 0);
+        Property('Slide')
+    ], Carousel.prototype, "animationEffect", void 0);
     __decorate$11([
         Property()
     ], Carousel.prototype, "previousButtonTemplate", void 0);
@@ -17261,6 +17200,9 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
     __decorate$11([
         Property(true)
     ], Carousel.prototype, "autoPlay", void 0);
+    __decorate$11([
+        Property(true)
+    ], Carousel.prototype, "pauseOnHover", void 0);
     __decorate$11([
         Property(true)
     ], Carousel.prototype, "loop", void 0);
@@ -17297,5 +17239,5 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
  * 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, BreadcrumbItem, Breadcrumb, CarouselItem, CarouselAnimationSettings, Carousel };
+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, CarouselItem, Carousel };
 //# sourceMappingURL=ej2-navigations.es5.js.map