@syncfusion/ej2-navigations 21.2.5 → 21.2.8

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

@@ -3034,7 +3034,8 @@ let MenuBase = class MenuBase extends Component {
             index = navIdx.pop();
             ul = this.getUlByNavIdx(navIdx.length);
             if (ul) {
-                if (ishide) {
+                let validUl = isUniqueId ? ul.children[index].id : ul.children[index].textContent;
+                if (ishide && validUl === items[i]) {
                     ul.children[index].classList.add(HIDE);
                 }
                 else {
@@ -6643,6 +6644,12 @@ let Accordion = class Accordion extends Component {
             const itemObj = items[parseInt(index.toString(), 10)];
             items.splice(index, 1);
             this.restoreContent(index);
+            const header = select('.' + CLS_HEADERCTN, item);
+            const content = select('.' + CLS_CTENT, item);
+            if (this.isReact || this.isAngular) {
+                this.clearAccordionTemplate(header, 'header', CLS_HEADERCTN);
+                this.clearAccordionTemplate(content, 'content', CLS_CTENT);
+            }
             detach(item);
             this.addItem(itemObj, index);
         }
@@ -6663,6 +6670,30 @@ let Accordion = class Accordion extends Component {
             });
         }
     }
+    clearAccordionTemplate(templateEle, templateName, className) {
+        if (this.registeredTemplate && this.registeredTemplate[`${templateName}`]) {
+            const registeredTemplates = this.registeredTemplate;
+            for (let index = 0; index < registeredTemplates[`${templateName}`].length; index++) {
+                const registeredItem = registeredTemplates[`${templateName}`][parseInt(index.toString(), 10)].rootNodes[0];
+                const closestItem = closest(registeredItem.containerInfo, '.' + className);
+                if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
+                    this.clearTemplate([templateName], [registeredTemplates[`${templateName}`][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, '.' + className);
+                if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
+                    this.clearTemplate([templateName], index);
+                    break;
+                }
+            }
+        }
+    }
     getPersistData() {
         const keyEntity = ['expandedIndices'];
         return this.addOnPersist(keyEntity);
@@ -6685,44 +6716,50 @@ let Accordion = class Accordion extends Component {
                         const changedProp = Object.keys(newProp.items);
                         for (let j = 0; j < changedProp.length; j++) {
                             const index = parseInt(Object.keys(newProp.items)[parseInt(j.toString(), 10)], 10);
-                            const property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];
-                            const item = selectAll('.' + CLS_ITEM$1, this.element)[parseInt(index.toString(), 10)];
-                            const oldVal = Object(oldProp.items[parseInt(index.toString(), 10)])[`${property}`];
-                            const newVal = Object(newProp.items[parseInt(index.toString(), 10)])[`${property}`];
-                            const temp = property;
-                            if (temp === 'header' || temp === 'iconCss' || temp === 'expanded' || ((temp === 'content') && (oldVal === ''))) {
-                                this.updateItem(item, index);
-                            }
-                            if (property === 'cssClass' && !isNullOrUndefined(item)) {
-                                if (oldVal) {
-                                    removeClass([item], oldVal.split(' '));
+                            const property = Object.keys(newProp.items[parseInt(index.toString(), 10)]);
+                            for (let k = 0; k < property.length; k++) {
+                                const item = selectAll('.' + CLS_ITEM$1, this.element)[parseInt(index.toString(), 10)];
+                                const oldVal = Object(oldProp.items[parseInt(index.toString(), 10)])[`${property[parseInt(k.toString(), 10)]}`];
+                                const newVal = Object(newProp.items[parseInt(index.toString(), 10)])[`${property[parseInt(k.toString(), 10)]}`];
+                                const temp = property[parseInt(k.toString(), 10)];
+                                const content = select('.' + CLS_CTENT, item);
+                                if (temp === 'header' || temp === 'iconCss' || temp === 'expanded' || ((temp === 'content') && (oldVal === ''))) {
+                                    this.updateItem(item, index);
                                 }
-                                if (newVal) {
-                                    addClass([item], newVal.split(' '));
-                                }
-                            }
-                            if (property === 'visible' && !isNullOrUndefined(item)) {
-                                if (Object(newProp.items[parseInt(index.toString(), 10)])[`${property}`] === false) {
-                                    item.classList.add(CLS_ITEMHIDE);
+                                if (property[parseInt(k.toString(), 10)] === 'cssClass' && !isNullOrUndefined(item)) {
+                                    if (oldVal) {
+                                        removeClass([item], oldVal.split(' '));
+                                    }
+                                    if (newVal) {
+                                        addClass([item], newVal.split(' '));
+                                    }
                                 }
-                                else {
-                                    item.classList.remove(CLS_ITEMHIDE);
+                                if (property[parseInt(k.toString(), 10)] === 'visible' && !isNullOrUndefined(item)) {
+                                    if (Object(newProp.items[parseInt(index.toString(), 10)])[`${property[parseInt(k.toString(), 10)]}`] === false) {
+                                        item.classList.add(CLS_ITEMHIDE);
+                                    }
+                                    else {
+                                        item.classList.remove(CLS_ITEMHIDE);
+                                    }
                                 }
-                            }
-                            if (property === 'disabled' && !isNullOrUndefined(item)) {
-                                this.enableItem(index, !newVal);
-                            }
-                            if (property === 'content' && !isNullOrUndefined(item) && item.children.length === 2) {
-                                if (typeof newVal === 'function') {
-                                    const activeContent = item.querySelector('.' + CLS_CTENT);
-                                    activeContent.innerHTML = '';
-                                    this.setTemplate(newVal, activeContent, index);
+                                if (property[parseInt(k.toString(), 10)] === 'disabled' && !isNullOrUndefined(item)) {
+                                    this.enableItem(index, !newVal);
                                 }
-                                else {
-                                    if (item.classList.contains(CLS_SLCTED)) {
-                                        this.expandItem(false, index);
+                                if (property[parseInt(k.toString(), 10)] === 'content' && !isNullOrUndefined(item) && item.children.length === 2) {
+                                    if (typeof newVal === 'function') {
+                                        if (this.isAngular || this.isReact) {
+                                            this.clearAccordionTemplate(content, property[parseInt(k.toString(), 10)], CLS_CTENT);
+                                        }
+                                        const activeContent = item.querySelector('.' + CLS_CTENT);
+                                        activeContent.innerHTML = '';
+                                        this.setTemplate(newVal, activeContent, index);
+                                    }
+                                    else {
+                                        if (item.classList.contains(CLS_SLCTED)) {
+                                            this.expandItem(false, index);
+                                        }
+                                        detach(item.querySelector('.' + CLS_CONTENT));
                                     }
-                                    detach(item.querySelector('.' + CLS_CONTENT));
                                 }
                             }
                         }