@syncfusion/ej2-navigations 20.1.60 → 20.2.38

package/src/carousel/carousel.js

@@ -19,7 +19,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, EventHandler, Collection, Property, Event, formatUnit, NotifyPropertyChanges } from '@syncfusion/ej2-base';
-import { ChildProperty, addClass, removeClass, setStyleAttribute, attributes, getUniqueID, compile, Complex, getInstance, L10n } from '@syncfusion/ej2-base';
+import { ChildProperty, addClass, removeClass, setStyleAttribute, attributes, getUniqueID, compile, getInstance, L10n } from '@syncfusion/ej2-base';
 import { append, closest, isNullOrUndefined, remove, classList, Touch, KeyboardEvents } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
 // Constant variables
@@ -52,6 +52,7 @@ var CLS_TEMPLATE = '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';
@@ -77,21 +78,6 @@ var CarouselItem = /** @class */ (function (_super) {
     return CarouselItem;
 }(ChildProperty));
 export { CarouselItem };
-/** Specifies the animation configuration for carousel items. */
-var CarouselAnimationSettings = /** @class */ (function (_super) {
-    __extends(CarouselAnimationSettings, _super);
-    function CarouselAnimationSettings() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    __decorate([
-        Property('Slide')
-    ], CarouselAnimationSettings.prototype, "effect", void 0);
-    __decorate([
-        Property()
-    ], CarouselAnimationSettings.prototype, "customEffect", void 0);
-    return CarouselAnimationSettings;
-}(ChildProperty));
-export { CarouselAnimationSettings };
 var Carousel = /** @class */ (function (_super) {
     __extends(Carousel, _super);
     /**
@@ -144,13 +130,7 @@ var Carousel = /** @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)], oldProp.animation.customEffect);
-                        }
-                    }
+                case 'animationEffect':
                     this.applyAnimation();
                     break;
                 case 'cssClass':
@@ -431,13 +411,20 @@ var Carousel = /** @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);
-        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 () {
@@ -544,17 +531,7 @@ var Carousel = /** @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;
@@ -567,10 +544,20 @@ var Carousel = /** @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);
                 addClass([args.nextSlide], CLS_ACTIVE);
             }
+            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();
             }
@@ -765,7 +752,9 @@ var Carousel = /** @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) {
@@ -930,8 +919,8 @@ var Carousel = /** @class */ (function (_super) {
         Collection([], CarouselItem)
     ], Carousel.prototype, "items", void 0);
     __decorate([
-        Complex({}, CarouselAnimationSettings)
-    ], Carousel.prototype, "animation", void 0);
+        Property('Slide')
+    ], Carousel.prototype, "animationEffect", void 0);
     __decorate([
         Property()
     ], Carousel.prototype, "previousButtonTemplate", void 0);
@@ -968,6 +957,9 @@ var Carousel = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], Carousel.prototype, "autoPlay", void 0);
+    __decorate([
+        Property(true)
+    ], Carousel.prototype, "pauseOnHover", void 0);
     __decorate([
         Property(true)
     ], Carousel.prototype, "loop", void 0);

package/src/common/menu-base.js

@@ -1310,7 +1310,7 @@ var MenuBase = /** @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 {
@@ -1704,9 +1704,8 @@ var MenuBase = /** @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]);
         }
     };
     /**

package/src/sidebar/sidebar.d.ts

@@ -200,7 +200,6 @@ export declare class Sidebar extends Component<HTMLElement> implements INotifyPr
      * @event
      */
     destroyed: EmitType<Object>;
-    defaultBackdropDiv: any;
     constructor(options?: SidebarModel, element?: string | HTMLElement);
     protected preRender(): void;
     protected render(): void;

package/src/sidebar/sidebar.js

@@ -197,7 +197,7 @@ var Sidebar = /** @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';
@@ -335,12 +335,8 @@ var Sidebar = /** @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);
-            setStyle(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');

package/src/tab/tab-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance, isNullOrUndefined } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, MouseEventArgs, Effect, Browser, formatUnit, DomElements, L10n } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';import { EventHandler, rippleEffect, Touch, SwipeEventArgs, compile, Animation, AnimationModel, BaseEventArgs } from '@syncfusion/ej2-base';import { getRandomId, SanitizeHtmlHelper, Draggable, DragEventArgs as DragArgs, DropEventArgs } from '@syncfusion/ej2-base';import { Base } from '@syncfusion/ej2-base';import { Popup, PopupModel } from '@syncfusion/ej2-popups';import { Toolbar, OverflowMode, ClickEventArgs } from '../toolbar/toolbar';import { ToolbarModel } from '../toolbar';
+import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance, isNullOrUndefined } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, MouseEventArgs, Effect, Browser, formatUnit, DomElements, L10n } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';import { EventHandler, rippleEffect, Touch, SwipeEventArgs, compile, Animation, AnimationModel, BaseEventArgs } from '@syncfusion/ej2-base';import { getRandomId, SanitizeHtmlHelper, Draggable, DragEventArgs as DragArgs, DropEventArgs } from '@syncfusion/ej2-base';import { Base } from '@syncfusion/ej2-base';import { Popup, PopupModel } from '@syncfusion/ej2-popups';import { Toolbar, OverflowMode, ClickEventArgs } from '../toolbar/toolbar';
 import {HeaderPosition,HeightStyles,ContentLoad,AddEventArgs,SelectingEventArgs,SelectEventArgs,RemoveEventArgs,DragEventArgs} from "./tab";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/tab/tab.d.ts

@@ -500,9 +500,6 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
      */
     protected render(): void;
     private renderContainer;
-    private serverItemsChanged;
-    private headerReady;
-    private setActiveContent;
     private renderHeader;
     private renderContent;
     private reRenderItems;
@@ -538,7 +535,6 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private getHeight;
     private setActiveBorder;
     private setActive;
-    private contentReady;
     private setItems;
     private setRTL;
     private refreshActiveBorder;

package/src/tab/tab.js

@@ -359,75 +359,15 @@ var Tab = /** @class */ (function (_super) {
             }
             if (!isNOU(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' && !isNOU(this.cntEle)) {
-            var itemCollection = [].slice.call(this.cntEle.children);
-            var content_1 = CLS_CONTENT + this.tabId + '_' + this.selectedItem;
-            itemCollection.forEach(function (item) {
-                if (item.classList.contains(CLS_ACTIVE) && item.id !== content_1) {
-                    item.classList.remove(CLS_ACTIVE);
-                }
-                if (item.id === content_1) {
-                    item.classList.add(CLS_ACTIVE);
-                }
-            });
-            this.prevIndex = this.selectedItem;
-            this.triggerAnimation(CLS_ITEM + 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 (!isNOU(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 + ' .' + CLS_TB_ITEMS, this.element);
-        if (!isNOU(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 (!isNOU(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, this.element);
-        if (!isNOU(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 + this.tabId + '_' + this.selectedItem;
-        var item = this.getTrgContent(this.cntEle, this.extIndex(id));
-        if (!isNOU(item)) {
-            item.classList.add(CLS_ACTIVE);
-        }
-        return id;
-    };
     Tab.prototype.renderHeader = function () {
         var _this = this;
         var hdrPlace = this.headerPlacement;
@@ -477,7 +417,8 @@ var Tab = /** @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;
@@ -487,7 +428,10 @@ var Tab = /** @class */ (function (_super) {
         this.setCloseButton(this.showCloseButton);
         var toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
         if (!isNOU(toolbarHeader)) {
-            toolbarHeader.id = this.element.id + '_' + 'tab_header_items';
+            if (isNOU(toolbarHeader.id) || toolbarHeader.id === '') {
+                toolbarHeader.id = this.element.id + '_' + 'tab_header_items';
+            }
+            this.element.setAttribute('aria-owns', toolbarHeader.id);
         }
     };
     Tab.prototype.renderContent = function () {
@@ -1213,10 +1157,6 @@ var Tab = /** @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());
@@ -1848,7 +1788,7 @@ var Tab = /** @class */ (function (_super) {
             }
             this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());
             this.isAdd = true;
-            var tabItems = this.parseObject(items, index);
+            var tabItems_2 = this.parseObject(items, index);
             this.isAdd = false;
             var i_1 = 0;
             var textValue_1;
@@ -1856,6 +1796,12 @@ var Tab = /** @class */ (function (_super) {
                 textValue_1 = item.headerTemplate || item.header.text;
                 if (!(isNOU(item.headerTemplate || item.header) || isNOU(textValue_1) ||
                     (textValue_1.length === 0) && !isNOU(item.header) && isNOU(item.header.iconCss))) {
+                    if (tabItems_2[place]) {
+                        if (isNOU(item.id)) {
+                            item.id = TABITEMPREFIX + (lastEleIndex + place).toString();
+                        }
+                        tabItems_2[place].htmlAttributes['data-id'] = item.id;
+                    }
                     _this.items.splice((index + i_1), 0, item);
                     i_1++;
                 }
@@ -1870,7 +1816,7 @@ var Tab = /** @class */ (function (_super) {
                     _this.getContent(eleTrg, item.content, 'render', index);
                 }
             });
-            this.tbObj.addItems(tabItems, index);
+            this.tbObj.addItems(tabItems_2, index);
             if (!this.isReplace) {
                 this.trigger('added', { addedItems: items });
             }
@@ -1879,6 +1825,7 @@ var Tab = /** @class */ (function (_super) {
             }
             else {
                 this.setActiveBorder();
+                this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
             }
             this.bindDraggable();
         }
@@ -1903,7 +1850,8 @@ var Tab = /** @class */ (function (_super) {
                     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.itemIndexArray.splice(targetEleIndex, 1);
                 _this.refreshActiveBorder();
                 var cntTrg = select('#' + CLS_CONTENT + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_CONTENT, _this.element));
                 if (!isNOU(cntTrg)) {
@@ -2088,6 +2036,9 @@ var Tab = /** @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 {
@@ -2168,12 +2119,20 @@ var Tab = /** @class */ (function (_super) {
                     this.setContentHeight(false);
                     break;
                 case 'cssClass':
+                    var headerEle = this.element.querySelector('.' + CLS_HEADER);
                     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':

package/src/toolbar/toolbar.js

@@ -737,6 +737,9 @@ var Toolbar = /** @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);
             setStyle(this.element, { overflow: 'hidden' });
         }
@@ -988,6 +991,9 @@ var Toolbar = /** @class */ (function (_super) {
     Toolbar.prototype.popupInit = function (element, ele) {
         if (!this.popObj) {
             element.appendChild(ele);
+            if (this.cssClass) {
+                addClass([ele], this.cssClass.split(' '));
+            }
             setStyle(this.element, { overflow: '' });
             var eleStyles = window.getComputedStyle(this.element);
             var popup = new Popup(null, {

package/src/treeview/treeview-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, EmitType, isUndefined, Browser, compile, isNullOrUndefined, createElement } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Event, EventHandler, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { rippleEffect, Effect, Animation, AnimationOptions, RippleOptions, remove  } from '@syncfusion/ej2-base';import { Draggable, DragEventArgs, Droppable, DropEventArgs } from '@syncfusion/ej2-base';import { getElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { isNullOrUndefined as isNOU, Touch, TapEventArgs, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions, AriaAttributesMapping, FieldsMapping } from '@syncfusion/ej2-lists';import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { Component, EmitType, isUndefined, Browser, compile, isNullOrUndefined } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Event, EventHandler, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { rippleEffect, Effect, Animation, AnimationOptions, RippleOptions, remove  } from '@syncfusion/ej2-base';import { Draggable, DragEventArgs, Droppable, DropEventArgs } from '@syncfusion/ej2-base';import { getElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { isNullOrUndefined as isNOU, Touch, TapEventArgs, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions, AriaAttributesMapping, FieldsMapping } from '@syncfusion/ej2-lists';import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 import {ExpandOnSettings,SortOrder,FailureEventArgs,DataBoundEventArgs,DataSourceChangedEventArgs,DrawNodeEventArgs,NodeKeyPressEventArgs,NodeCheckEventArgs,NodeClickEventArgs,NodeExpandEventArgs,DragAndDropEventArgs,NodeEditEventArgs,NodeSelectEventArgs} from "./treeview";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/treeview/treeview.js

@@ -596,6 +596,7 @@ var TreeView = /** @class */ (function (_super) {
                         this.updateChildCheckState(childItems, this.treeData[index]);
                     }
                 }
+                this.validNodes = (this.enablePersistence) ? this.checkedNodes : this.validNodes;
             }
             this.setProperties({ checkedNodes: this.validNodes }, true);
         }
@@ -3669,14 +3670,10 @@ var TreeView = /** @class */ (function (_super) {
                 for (var j = 0; j < cNodes.length; j++) {
                     var returnValue = (this.sortOrder === 'Ascending') ? cNodes[j].textContent.toUpperCase() > li[i].innerText.toUpperCase() : cNodes[j].textContent.toUpperCase() < li[i].innerText.toUpperCase();
                     if (returnValue) {
-                        refNode = cNodes[j];
-                        dropUl.insertBefore(li[i], refNode);
+                        dropUl.insertBefore(li[i], cNodes[j]);
                         break;
                     }
-                    else {
-                        refNode = cNodes[cNodes.length];
-                        dropUl.insertBefore(li[i], refNode);
-                    }
+                    dropUl.insertBefore(li[i], cNodes[cNodes.length]);
                 }
             }
         }

package/styles/accordion/_fusionnew-definition.scss

@@ -0,0 +1,85 @@
+/*! Accordion's bootstrap5 theme wise override definitions and variables */
+// sass-lint:disable-all
+$acrdn-skin: 'bootstrap5' !default;
+
+// font definitions
+$acrdn-icon-font-size: $text-lg !default;
+$acrdn-slct-header-font-weight: $font-weight-normal;
+$acrdn-header-font: $content-text-color !default;
+$acrdn-nested-header-font: $content-text-color !default;
+$acrdn-header-font-weight: $font-weight-normal !default;
+$acrdn-header-font-size: $text-sm !default;
+$acrdn-nest-header-font-size: $text-sm !default;
+$acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
+$acrdn-nest-header-content-font-weight: normal !default;
+$acrdn-content-font-size: $text-sm !default;
+$acrdn-header-font-bgr-size: $text-base !default;
+$acrdn-content-font-bgr-size: $text-base !default;
+$acrdn-bgr-arrow-icon-font-size: 22px;
+$acrdn-bgr-icon-font-size: 20px !default;
+$acrdn-icon-font-size: 18px !default;
+$acrdn-selected-header-font-color: $primary !default;
+
+// Header, Nested header and RTL mode Padding
+$acrdn-nest-nrml-header-padding: 8px 0 8px 26px !default;
+$acrdn-nest-bgr-header-padding: 12px 0 12px 28px !default;
+$acrdn-nest-second-nrml-header-padding: 8px 0 8px 38px !default;
+$acrdn-nest-second-bgr-header-padding: 12px 0 12px 40px !default;
+$acrdn-nrml-header-padding: 10px 16px !default;
+$acrdn-bgr-header-padding: 13px 20px !default;
+$acrdn-rtl-nrml-header-padding: 7px 12px !default;
+$acrdn-rtl-bgr-header-padding: 11px 17px !default;
+$acrdn-rtl-nest-nrml-header-padding: 8px 26px 8px 0 !default;
+$acrdn-rtl-nest-bgr-header-padding: 12px 28px 12px 0 !default;
+$acrdn-rtl-nest-second-nrml-header-padding: 8px 38px 8px 0 !default;
+$acrdn-rtl-nest-second-bgr-header-padding: 12px 40px 12px 0 !default;
+
+// Content, Nested content and RTL mode Padding
+$acrdn-nrml-content-padding: 12px !default;
+$acrdn-bgr-content-padding: 16px !default;
+$acrdn-nest-nrml-content-padding: 16px 16px 16px 26px !default;
+$acrdn-nest-bgr-content-padding: 20px 20px 20px 28px !default;
+$acrdn-nest-second-nrml-content-padding: 20px 20px 20px 38px !default;
+$acrdn-nest-second-bgr-content-padding: 24px 24px 24px 40px !default;
+$acrdn-rtl-nest-nrml-content-padding: 16px 26px 16px 16px !default;
+$acrdn-rtl-nest-bgr-content-padding: 20px 28px 20px 20px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 20px 38px 20px 20px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 24px 40px 24px 24px !default;
+
+// dimension definitions
+$acrdn-border-radius: 4px !default;
+$acrdn-nrml-header-minheight: 38px !default;
+$acrdn-bgr-header-minheight: 48px !default;
+$acrdn-nrml-header-lineheight: 22px !default;
+$acrdn-bgr-header-lineheight: 24px !default;
+$acrdn-nrml-header-paddingpix: 16px !default;
+$acrdn-bgr-header-paddingpix: 16px !default;
+$acrdn-content-line-height: 1.5 !default;
+$acrdn-nrml-header-icon-padding: 8px !default;
+$acrdn-bgr-header-icon-padding: 12px !default;
+$acrdn-nrml-icn-minwidth: 22px !default;
+$acrdn-bgr-icn-minwidth: 24px !default;
+$acrdn-selected-border-size: 1px !default;
+$acrdn-item-padding-size: 0 !default;
+$acrdn-selected-border-type: none !default;
+$acrdn-border-type: solid !default;
+$acrdn-border-size: 1px !default;
+
+// color definitions
+$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
+$acrdn-active-bg: $content-bg-color !default;
+$acrdn-bg-color: $content-bg-color !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
+$acrdn-selected-header-color: $content-bg-color !default;
+$acrdn-icon-color: $icon-color !default;
+$acrdn-selected-icon-color: $primary !default;
+$acrdn-content-color: $content-text-color !default;
+$acrdn-selected-border-color: $border-light !default;
+$acrdn-header-focus-bg: $primary-lighter !default;
+$acrdn-header-hover-bg: $primary-lighter !default;
+$acrdn-header-active-bg: $primary-lighter !default;
+$acrdn-item-header-focus-border-color: $primary !default;
+$acrdn-icon-disable-color: $icon-color-disabled;
+$acrdn-text-disable-color: $content-text-color-disabled;
+$acrdn-default-border: $acrdn-selected-border-color !default;

package/styles/accordion/_material3-definition.scss

@@ -0,0 +1,85 @@
+/*! Accordion's bootstrap5 theme wise override definitions and variables */
+// sass-lint:disable-all
+$acrdn-skin: 'bootstrap5' !default;
+
+// font definitions
+$acrdn-icon-font-size: $text-lg !default;
+$acrdn-slct-header-font-weight: $font-weight-normal;
+$acrdn-header-font: $content-text-color !default;
+$acrdn-nested-header-font: $content-text-color !default;
+$acrdn-header-font-weight: $font-weight-normal !default;
+$acrdn-header-font-size: $text-sm !default;
+$acrdn-nest-header-font-size: $text-sm !default;
+$acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
+$acrdn-nest-header-content-font-weight: normal !default;
+$acrdn-content-font-size: $text-sm !default;
+$acrdn-header-font-bgr-size: $text-base !default;
+$acrdn-content-font-bgr-size: $text-base !default;
+$acrdn-bgr-arrow-icon-font-size: 22px;
+$acrdn-bgr-icon-font-size: 20px !default;
+$acrdn-icon-font-size: 18px !default;
+$acrdn-selected-header-font-color: $primary !default;
+
+// Header, Nested header and RTL mode Padding
+$acrdn-nest-nrml-header-padding: 8px 0 8px 26px !default;
+$acrdn-nest-bgr-header-padding: 12px 0 12px 28px !default;
+$acrdn-nest-second-nrml-header-padding: 8px 0 8px 38px !default;
+$acrdn-nest-second-bgr-header-padding: 12px 0 12px 40px !default;
+$acrdn-nrml-header-padding: 10px 16px !default;
+$acrdn-bgr-header-padding: 13px 20px !default;
+$acrdn-rtl-nrml-header-padding: 7px 12px !default;
+$acrdn-rtl-bgr-header-padding: 11px 17px !default;
+$acrdn-rtl-nest-nrml-header-padding: 8px 26px 8px 0 !default;
+$acrdn-rtl-nest-bgr-header-padding: 12px 28px 12px 0 !default;
+$acrdn-rtl-nest-second-nrml-header-padding: 8px 38px 8px 0 !default;
+$acrdn-rtl-nest-second-bgr-header-padding: 12px 40px 12px 0 !default;
+
+// Content, Nested content and RTL mode Padding
+$acrdn-nrml-content-padding: 12px !default;
+$acrdn-bgr-content-padding: 16px !default;
+$acrdn-nest-nrml-content-padding: 16px 16px 16px 26px !default;
+$acrdn-nest-bgr-content-padding: 20px 20px 20px 28px !default;
+$acrdn-nest-second-nrml-content-padding: 20px 20px 20px 38px !default;
+$acrdn-nest-second-bgr-content-padding: 24px 24px 24px 40px !default;
+$acrdn-rtl-nest-nrml-content-padding: 16px 26px 16px 16px !default;
+$acrdn-rtl-nest-bgr-content-padding: 20px 28px 20px 20px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 20px 38px 20px 20px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 24px 40px 24px 24px !default;
+
+// dimension definitions
+$acrdn-border-radius: 4px !default;
+$acrdn-nrml-header-minheight: 38px !default;
+$acrdn-bgr-header-minheight: 48px !default;
+$acrdn-nrml-header-lineheight: 22px !default;
+$acrdn-bgr-header-lineheight: 24px !default;
+$acrdn-nrml-header-paddingpix: 16px !default;
+$acrdn-bgr-header-paddingpix: 16px !default;
+$acrdn-content-line-height: 1.5 !default;
+$acrdn-nrml-header-icon-padding: 8px !default;
+$acrdn-bgr-header-icon-padding: 12px !default;
+$acrdn-nrml-icn-minwidth: 22px !default;
+$acrdn-bgr-icn-minwidth: 24px !default;
+$acrdn-selected-border-size: 1px !default;
+$acrdn-item-padding-size: 0 !default;
+$acrdn-selected-border-type: none !default;
+$acrdn-border-type: solid !default;
+$acrdn-border-size: 1px !default;
+
+// color definitions
+$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
+$acrdn-active-bg: $content-bg-color !default;
+$acrdn-bg-color: $content-bg-color !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
+$acrdn-selected-header-color: $content-bg-color !default;
+$acrdn-icon-color: $icon-color !default;
+$acrdn-selected-icon-color: $primary !default;
+$acrdn-content-color: $content-text-color !default;
+$acrdn-selected-border-color: $border-light !default;
+$acrdn-header-focus-bg: $primary-lighter !default;
+$acrdn-header-hover-bg: $primary-lighter !default;
+$acrdn-header-active-bg: $primary-lighter !default;
+$acrdn-item-header-focus-border-color: $primary !default;
+$acrdn-icon-disable-color: $icon-color-disabled;
+$acrdn-text-disable-color: $content-text-color-disabled;
+$acrdn-default-border: $acrdn-selected-border-color !default;