@syncfusion/ej2-navigations 22.2.7 → 22.2.11

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

@@ -1,4 +1,4 @@
-import { Animation, Browser, ChildProperty, Collection, Complex, Component, Draggable, Droppable, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getElement, getInstance, getRandomId, getUniqueID, getValue, isBlazor, isNullOrUndefined, isRippleEnabled, isUndefined, isVisible, matches, merge, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
+import { Animation, Browser, ChildProperty, Collection, Complex, Component, Draggable, Droppable, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getElement, getInstance, getRandomId, getUniqueID, getValue, initializeCSPTemplate, isBlazor, isNullOrUndefined, isRippleEnabled, isUndefined, isVisible, matches, merge, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
 import { ListBase } from '@syncfusion/ej2-lists';
 import { Popup, calculatePosition, createSpinner, fit, getScrollableParent, getZindexPartial, hideSpinner, isCollide, showSpinner } from '@syncfusion/ej2-popups';
 import { Button, createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';
@@ -5038,7 +5038,7 @@ let Toolbar = class Toolbar extends Component {
                 this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].splice(parseInt(indexAgn.toString(), 10), 1);
             }
             if (this.isReact) {
-                this.clearTemplate();
+                this.clearToolbarTemplate(innerItems[parseInt(index.toString(), 10)]);
             }
             const btnItem = innerItems[parseInt(index.toString(), 10)].querySelector('.e-control.e-btn');
             if (!isNullOrUndefined(btnItem) && !isNullOrUndefined(btnItem.ej2_instances[0]) && !(btnItem.ej2_instances[0].isDestroyed)) {
@@ -5350,6 +5350,30 @@ let Toolbar = class Toolbar extends Component {
             nextEle = innerItems[++eleIndex];
         }
     }
+    clearToolbarTemplate(templateEle) {
+        if (this.registeredTemplate && this.registeredTemplate[`${'template'}`]) {
+            const registeredTemplates = this.registeredTemplate;
+            for (let index = 0; index < registeredTemplates[`${'template'}`].length; index++) {
+                const registeredItem = registeredTemplates[`${'template'}`][parseInt(index.toString(), 10)].rootNodes[0];
+                const closestItem = closest(registeredItem, '.' + CLS_ITEM);
+                if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
+                    this.clearTemplate(['template'], [registeredTemplates[`${'template'}`][parseInt(index.toString(), 10)]]);
+                    break;
+                }
+            }
+        }
+        else if (this.portals && this.portals.length > 0) {
+            const portals = this.portals;
+            for (let index = 0; index < portals.length; index++) {
+                const portalItem = portals[parseInt(index.toString(), 10)];
+                const closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM);
+                if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
+                    this.clearTemplate(['template'], index);
+                    break;
+                }
+            }
+        }
+    }
     /**
      * Gets called when the model property changes.The data that describes the old and new values of the property that changed.
      *
@@ -5371,31 +5395,29 @@ let Toolbar = class Toolbar extends Component {
                             const index = parseInt(Object.keys(newProp.items)[parseInt(i.toString(), 10)], 10);
                             const property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];
                             const newProperty = Object(newProp.items[parseInt(index.toString(), 10)])[`${property}`];
-                            if (typeof newProperty !== 'function') {
-                                if (this.tbarAlign || property === 'align') {
-                                    this.refresh();
-                                    this.trigger('created');
-                                    break;
-                                }
-                                const popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
-                                const booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
-                                if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {
-                                    --this.popupPriCount;
-                                }
-                                if (isNullOrUndefined(this.scrollModule)) {
-                                    this.destroyMode();
-                                }
-                                const itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));
-                                if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {
-                                    this.clearTemplate();
-                                }
-                                detach(itemCol[parseInt(index.toString(), 10)]);
-                                this.tbarEle.splice(index, 1);
-                                this.addItems([this.items[parseInt(index.toString(), 10)]], index);
-                                this.items.splice(index, 1);
-                                if (this.items[parseInt(index.toString(), 10)].template) {
-                                    this.tbarEle.splice(this.items.length, 1);
-                                }
+                            if (this.tbarAlign || property === 'align') {
+                                this.refresh();
+                                this.trigger('created');
+                                break;
+                            }
+                            const popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
+                            const booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
+                            if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {
+                                --this.popupPriCount;
+                            }
+                            if (isNullOrUndefined(this.scrollModule)) {
+                                this.destroyMode();
+                            }
+                            const itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));
+                            if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {
+                                this.clearToolbarTemplate(itemCol[parseInt(index.toString(), 10)]);
+                            }
+                            detach(itemCol[parseInt(index.toString(), 10)]);
+                            this.tbarEle.splice(index, 1);
+                            this.addItems([this.items[parseInt(index.toString(), 10)]], index);
+                            this.items.splice(index, 1);
+                            if (this.items[parseInt(index.toString(), 10)].template) {
+                                this.tbarEle.splice(this.items.length, 1);
                             }
                         }
                     }
@@ -7570,6 +7592,11 @@ let Tab = class Tab extends Component {
         this.renderContainer();
         this.wireEvents();
         this.initRender = false;
+        if (this.isReact && this.portals && this.portals.length > 0) {
+            this.renderReactTemplates(function () {
+                this.refreshActiveBorder();
+            });
+        }
     }
     renderContainer() {
         const ele = this.element;
@@ -8734,6 +8761,9 @@ let Tab = class Tab extends Component {
         }
     }
     clearTabTemplate(templateEle, templateName, className) {
+        if (!this.clearTemplates) {
+            return;
+        }
         if (this.registeredTemplate && this.registeredTemplate[templateName]) {
             const registeredTemplates = this.registeredTemplate;
             for (let index = 0; index < registeredTemplates[templateName].length; index++) {
@@ -9626,6 +9656,9 @@ __decorate$7([
 __decorate$7([
     Property(false)
 ], Tab.prototype, "allowDragAndDrop", void 0);
+__decorate$7([
+    Property(true)
+], Tab.prototype, "clearTemplates", void 0);
 __decorate$7([
     Complex({}, TabAnimationSettings)
 ], Tab.prototype, "animation", void 0);
@@ -10494,6 +10527,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             }
         }
         let eNodes = selectAll('.' + EXPANDED, element);
+        if (!this.loadOnDemand) {
+            this.isInitalExpand = this.treeData.filter(e => e[this.fields.expanded] == true).length > 0 ? true : this.isInitalExpand;
+        }
         if (!this.isInitalExpand) {
             for (let i = 0; i < eNodes.length; i++) {
                 this.renderChildNodes(eNodes[i]);
@@ -10998,6 +11034,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
     }
     doExpandAction() {
         let eUids = this.expandedNodes;
+        if (!this.loadOnDemand) {
+            this.isInitalExpand = this.treeData.filter(e => e[this.fields.expanded] == true).length > 0 ? true : this.isInitalExpand;
+        }
         if (this.isInitalExpand && eUids.length > 0) {
             this.setProperties({ expandedNodes: [] }, true);
             /* eslint-disable */
@@ -11435,6 +11474,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (callback) {
             callback();
         }
+        if (expandChild) {
+            this.expandedNodes.push(parentLi.getAttribute('data-uid'));
+        }
         if (this.treeList.length === 0 && !this.isLoaded) {
             this.finalize();
         }
@@ -15783,7 +15825,14 @@ let Breadcrumb = class Breadcrumb extends Component {
                 if (i % 2) {
                     // separator item
                     wrapDiv = this.createElement('div', { className: 'e-breadcrumb-item-wrapper' });
-                    listBaseOptions.template = this.separatorTemplate ? this.separatorTemplate : '/';
+                    if ((this.separatorTemplate && this.separatorTemplate === '/') || isNullOrUndefined(this.separatorTemplate)) {
+                        listBaseOptions.template = initializeCSPTemplate(function () {
+                            return '/';
+                        });
+                    }
+                    else {
+                        listBaseOptions.template = this.separatorTemplate;
+                    }
                     listBaseOptions.itemClass = 'e-breadcrumb-separator';
                     isSingleLevel = false;
                     item = [{ previousItem: items[j], nextItem: items[j + 1] }];
@@ -17333,6 +17382,13 @@ let Carousel = class Carousel extends Component {
             EventHandler.add(this.itemsContainer, 'mouseup touchend', this.swipStop, this);
         }
     }
+    resizeHandler() {
+        if (this.itemsContainer && this.itemsContainer.firstElementChild) {
+            const numOfItems = this.getNumOfItems();
+            const slideWidth = this.itemsContainer.firstElementChild.clientWidth;
+            this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + numOfItems);
+        }
+    }
     wireEvents() {
         if (!(this.animationEffect === 'Custom')) {
             this.swipeModehandlers();
@@ -17341,6 +17397,7 @@ let Carousel = class Carousel extends Component {
         EventHandler.add(this.element, 'mouseenter mouseleave', this.onHoverActions, this);
         EventHandler.add(this.element.firstElementChild, 'animationend', this.onTransitionEnd, this);
         EventHandler.add(this.element.firstElementChild, 'transitionend', this.onTransitionEnd, this);
+        EventHandler.add(window, 'resize', this.resizeHandler, this);
     }
     unWireEvents() {
         const indicators = [].slice.call(this.element.querySelectorAll(`.${CLS_INDICATOR_BAR}`));
@@ -17359,6 +17416,7 @@ let Carousel = class Carousel extends Component {
         EventHandler.remove(this.element.firstElementChild, 'transitionend', this.onTransitionEnd);
         EventHandler.clearEvents(this.element);
         EventHandler.clearEvents(this.itemsContainer);
+        EventHandler.remove(window, 'resize', this.resizeHandler);
     }
     /**
      * Method to transit from the current slide to the previous slide.