@syncfusion/ej2-navigations 22.2.7 → 22.2.8

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

@@ -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);
                             }
                         }
                     }
@@ -8734,6 +8756,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 +9651,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);