@syncfusion/ej2-navigations 20.1.61 → 20.2.39

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

@@ -2267,7 +2267,7 @@ let MenuBase = class MenuBase extends Component {
         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 {
@@ -2654,9 +2654,8 @@ let MenuBase = class MenuBase extends Component {
     removeItem(item, navIdx, idx) {
         item.splice(idx, 1);
         const uls = this.getWrapper().children;
-        const 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]);
         }
     }
     /**
@@ -3873,6 +3872,9 @@ let Toolbar = class Toolbar extends Component {
             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' });
         }
@@ -4123,6 +4125,9 @@ let Toolbar = class Toolbar extends Component {
     popupInit(element, ele) {
         if (!this.popObj) {
             element.appendChild(ele);
+            if (this.cssClass) {
+                addClass([ele], this.cssClass.split(' '));
+            }
             setStyleAttribute(this.element, { overflow: '' });
             const eleStyles = window.getComputedStyle(this.element);
             const popup = new Popup(null, {
@@ -7437,75 +7442,15 @@ let Tab = class Tab extends Component {
             }
             if (!isNullOrUndefined(this.tbItem)) {
                 for (let i = 0; i < this.items.length; i++) {
-                    const tabID = this.items[i].id;
-                    this.tbItem[i].setAttribute('data-id', tabID);
+                    if (this.items[i]) {
+                        const tabID = this.items[i].id;
+                        this.tbItem[i].setAttribute('data-id', tabID);
+                    }
                 }
             }
             this.setRTL(this.enableRtl);
         }
     }
-    serverItemsChanged() {
-        this.enableAnimation = false;
-        this.setActive(this.selectedItem, true);
-        if (this.loadOn !== 'Dynamic' && !isNullOrUndefined(this.cntEle)) {
-            const itemCollection = [].slice.call(this.cntEle.children);
-            const content = CLS_CONTENT$1 + this.tabId + '_' + this.selectedItem;
-            itemCollection.forEach((item) => {
-                if (item.classList.contains(CLS_ACTIVE$1) && item.id !== content) {
-                    item.classList.remove(CLS_ACTIVE$1);
-                }
-                if (item.id === content) {
-                    item.classList.add(CLS_ACTIVE$1);
-                }
-            });
-            this.prevIndex = this.selectedItem;
-            this.triggerAnimation(CLS_ITEM$2 + this.tabId + '_' + this.selectedItem, false);
-        }
-        this.enableAnimation = true;
-    }
-    headerReady() {
-        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);
-            const 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') {
-            const id = this.setActiveContent();
-            this.triggerAnimation(id, false);
-        }
-        this.initRender = false;
-        this.renderComplete();
-    }
-    setActiveContent() {
-        const id = CLS_ITEM$2 + this.tabId + '_' + this.selectedItem;
-        const item = this.getTrgContent(this.cntEle, this.extIndex(id));
-        if (!isNullOrUndefined(item)) {
-            item.classList.add(CLS_ACTIVE$1);
-        }
-        return id;
-    }
     renderHeader() {
         const hdrPlace = this.headerPlacement;
         let tabItems = [];
@@ -7554,7 +7499,8 @@ let Tab = class Tab extends Component {
             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;
@@ -7564,7 +7510,10 @@ let Tab = class Tab extends Component {
         this.setCloseButton(this.showCloseButton);
         const 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);
         }
     }
     renderContent() {
@@ -8283,10 +8232,6 @@ let Tab = class Tab extends Component {
             this.trigger('selected', eventArg);
         }
     }
-    contentReady() {
-        const id = this.setActiveContent();
-        this.triggerAnimation(id, this.enableAnimation);
-    }
     setItems(items) {
         this.isReplace = true;
         this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());
@@ -8795,7 +8740,7 @@ let Tab = class Tab extends Component {
                 }
             }
             else {
-                this.dragItem.parentNode.insertBefore(dropItem, this.dragItem);
+                this.dragItem.parentNode.insertBefore(this.dragItem, dropItem.nextElementSibling);
             }
         }
     }
@@ -8972,8 +8917,9 @@ let Tab = class Tab extends Component {
                 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);
+                const targetEleIndex = this.itemIndexArray.indexOf(trg.id);
+                this.items.splice(targetEleIndex, 1);
+                this.itemIndexArray.splice(targetEleIndex, 1);
                 this.refreshActiveBorder();
                 const cntTrg = select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.extIndex(trg.id), select('.' + CLS_CONTENT$1, this.element));
                 if (!isNullOrUndefined(cntTrg)) {
@@ -9155,6 +9101,9 @@ let Tab = class Tab extends Component {
                         let item = this.items[args];
                         this.items.splice(args, 1);
                         this.items.splice(this.tbItem.length - 1, 0, item);
+                        let itemId = this.itemIndexArray[args];
+                        this.itemIndexArray.splice(args, 1);
+                        this.itemIndexArray.splice(this.tbItem.length - 1, 0, itemId);
                     }
                 }
                 else {
@@ -9233,12 +9182,20 @@ let Tab = class Tab extends Component {
                     this.setContentHeight(false);
                     break;
                 case 'cssClass':
+                    const 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':
@@ -10046,6 +10003,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                         this.updateChildCheckState(childItems, this.treeData[index]);
                     }
                 }
+                this.validNodes = (this.enablePersistence) ? this.checkedNodes : this.validNodes;
             }
             this.setProperties({ checkedNodes: this.validNodes }, true);
         }
@@ -14487,6 +14445,7 @@ const CLOSE = 'e-close';
 const OPEN = 'e-open';
 const TRASITION = 'e-transition';
 const DEFAULTBACKDROP = 'e-sidebar-overlay';
+const CONTEXTBACKDROP = 'e-backdrop';
 const RTL$2 = 'e-rtl';
 const RIGHT = 'e-right';
 const LEFT = 'e-left';
@@ -14655,7 +14614,7 @@ let Sidebar = class Sidebar extends Component {
     destroyBackDrop() {
         const 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';
@@ -14791,12 +14750,8 @@ let Sidebar = class Sidebar extends Component {
     }
     createBackDrop() {
         if (this.target && this.showBackdrop && this.getState()) {
-            const targetString = this.target;
             const 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');
@@ -15534,12 +15489,6 @@ let Breadcrumb = class Breadcrumb extends Component {
                     }
                     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();
-                        }
                     }
                 }
             }
@@ -15944,6 +15893,7 @@ const CLS_TEMPLATE$2 = 'e-template';
 const CLS_SLIDE_ANIMATION = 'e-carousel-slide-animation';
 const CLS_FADE_ANIMATION = 'e-carousel-fade-animation';
 const CLS_CUSTOM_ANIMATION = 'e-carousel-custom-animation';
+const CLS_ANIMATION_NONE = 'e-carousel-animation-none';
 const CLS_PREV_SLIDE = 'e-prev';
 const CLS_NEXT_SLIDE = 'e-next';
 const CLS_TRANSITION_START = 'e-transition-start';
@@ -15963,15 +15913,6 @@ __decorate$11([
 __decorate$11([
     Property()
 ], CarouselItem.prototype, "htmlAttributes", void 0);
-/** Specifies the animation configuration for carousel items. */
-class CarouselAnimationSettings extends ChildProperty {
-}
-__decorate$11([
-    Property('Slide')
-], CarouselAnimationSettings.prototype, "effect", void 0);
-__decorate$11([
-    Property()
-], CarouselAnimationSettings.prototype, "customEffect", void 0);
 let Carousel = class Carousel extends Component {
     /**
      * Constructor for creating the Carousel widget
@@ -16022,12 +15963,7 @@ let Carousel = class Carousel extends Component {
         let target;
         for (const prop of Object.keys(newProp)) {
             switch (prop) {
-                case 'animation':
-                    for (const propName of Object.keys(newProp.animation)) {
-                        if (propName === 'customEffect' && !isNullOrUndefined(oldProp.animation.customEffect)) {
-                            removeClass([this.element.querySelector(`.${CLS_ITEMS$2}`)], oldProp.animation.customEffect);
-                        }
-                    }
+                case 'animationEffect':
                     this.applyAnimation();
                     break;
                 case 'cssClass':
@@ -16306,13 +16242,20 @@ let Carousel = class Carousel extends Component {
         this.touchModule = new Touch(this.element, { swipe: this.swipeHandler.bind(this) });
     }
     applyAnimation() {
-        const 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;
         }
     }
     autoSlide() {
@@ -16416,17 +16359,7 @@ let Carousel = class Carousel extends Component {
                 isSwiped: isSwiped
             };
             let 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;
@@ -16439,10 +16372,20 @@ let Carousel = class Carousel extends Component {
                     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();
             }
@@ -16634,7 +16577,9 @@ let Carousel = class Carousel extends Component {
                 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) {
@@ -16797,8 +16742,8 @@ __decorate$11([
     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);
@@ -16835,6 +16780,9 @@ __decorate$11([
 __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);
@@ -16869,5 +16817,5 @@ Carousel = __decorate$11([
  * 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.es2015.js.map