@syncfusion/ej2-navigations 19.4.40 → 19.4.50

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

@@ -1926,8 +1926,14 @@ let MenuBase = class MenuBase extends Component {
                             this.setBlankIconStyle(this.popupWrapper);
                             this.wireKeyboardEvent(this.popupWrapper);
                             rippleEffect(this.popupWrapper, { selector: '.' + ITEM });
-                            this.popupWrapper.style.left = this.left + 'px';
-                            this.popupWrapper.style.top = this.top + 'px';
+                            if (this.popupWrapper.style.position === 'fixed' && this.top > 0) {
+                                this.popupWrapper.style.left = this.left + 'px';
+                                this.popupWrapper.style.top = this.top + scrollY + 'px';
+                            }
+                            else {
+                                this.popupWrapper.style.left = this.left + 'px';
+                                this.popupWrapper.style.top = this.top + 'px';
+                            }
                             const animationOptions = this.animationSettings.effect !== 'None' ? {
                                 name: this.animationSettings.effect, duration: this.animationSettings.duration,
                                 timingFunction: this.animationSettings.easing
@@ -2443,21 +2449,24 @@ let MenuBase = class MenuBase extends Component {
      * This method is used to set the menu item in the Menu based on the argument.
      *
      * @param {MenuItem} item - item need to be updated.
-     * @param {string} id - id to be passed to update the item.
+     * @param {string} id - id / text to be passed to update the item.
      * @param {boolean} isUniqueId - Set `true` if it is a unique id.
      * @returns {void}
      */
     setItem(item, id, isUniqueId) {
-        const idx = id ? id : item.id;
-        const isText = (isUniqueId === false) ? false : true;
-        const navIdx = this.getIndex(idx, isText);
+        let idx;
+        if (isUniqueId) {
+            idx = id ? id : item.id;
+        }
+        else {
+            idx = id ? id : item.text;
+        }
+        const navIdx = this.getIndex(idx, isUniqueId);
         const newItem = this.getItem(navIdx);
-        newItem.iconCss = item.iconCss;
-        newItem.id = item.id;
-        newItem.text = item.text;
-        newItem.url = item.url;
-        newItem.separator = item.separator;
-        newItem.items = item.items;
+        newItem.iconCss = item.iconCss || newItem.iconCss;
+        newItem.text = item.text || newItem.text;
+        newItem.url = item.url || newItem.url;
+        newItem.separator = item.separator || newItem.separator;
     }
     getItem(navIdx) {
         navIdx = navIdx.slice();
@@ -3294,7 +3303,7 @@ let Toolbar = class Toolbar extends Component {
      * @returns {void}.
      */
     destroy() {
-        if (this.isReact) {
+        if (this.isReact || this.isAngular) {
             this.clearTemplate();
         }
         const btnItems = this.element.querySelectorAll('.e-control.e-btn');
@@ -3303,20 +3312,28 @@ let Toolbar = class Toolbar extends Component {
                 el.ej2_instances[0].destroy();
             }
         });
-        super.destroy();
         this.unwireEvents();
         this.tempId.forEach((ele) => {
             if (!isNullOrUndefined(this.element.querySelector(ele))) {
                 document.body.appendChild(this.element.querySelector(ele)).style.display = 'none';
             }
         });
+        this.destroyItems();
         while (this.element.lastElementChild) {
             this.element.removeChild(this.element.lastElementChild);
         }
         if (this.trgtEle) {
             this.element.appendChild(this.ctrlTem);
+            this.trgtEle = null;
+            this.ctrlTem = null;
+        }
+        if (this.popObj) {
+            this.popObj.destroy();
+            detach(this.popObj.element);
+        }
+        if (this.activeEle) {
+            this.activeEle = null;
         }
-        this.clearProperty();
         this.popObj = null;
         this.tbarAlign = null;
         this.remove(this.element, 'e-toolpop');
@@ -3325,6 +3342,7 @@ let Toolbar = class Toolbar extends Component {
         }
         this.element.removeAttribute('style');
         ['aria-disabled', 'aria-orientation', 'aria-haspopup', 'role'].forEach((attrb) => this.element.removeAttribute(attrb));
+        super.destroy();
     }
     /**
      * Initialize the event handler
@@ -3414,8 +3432,8 @@ let Toolbar = class Toolbar extends Component {
         if (this.element) {
             [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach((el) => { detach(el); });
         }
-        const tbarItems = this.element.querySelector('.' + CLS_ITEMS);
         if (this.tbarAlign) {
+            const tbarItems = this.element.querySelector('.' + CLS_ITEMS);
             [].slice.call(tbarItems.children).forEach((el) => {
                 detach(el);
             });
@@ -3498,7 +3516,11 @@ let Toolbar = class Toolbar extends Component {
             case 'home':
             case 'end':
                 if (clst) {
-                    const popupCheck = closest(clst, '.e-popup');
+                    let popupCheck = closest(clst, '.e-popup');
+                    const extendedPopup = this.element.querySelector('.' + CLS_EXTENDABLECLASS);
+                    if (this.overflowMode === 'Extended' && extendedPopup && extendedPopup.classList.contains('e-popup-open')) {
+                        popupCheck = e.action === 'end' ? extendedPopup : null;
+                    }
                     if (popupCheck) {
                         if (isVisible(this.popObj.element)) {
                             nodes = [].slice.call(popupCheck.children);
@@ -3511,7 +3533,7 @@ let Toolbar = class Toolbar extends Component {
                         }
                     }
                     else {
-                        nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM);
+                        nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')');
                         if (e.action === 'home') {
                             ele = nodes[0];
                         }
@@ -5041,7 +5063,7 @@ let Toolbar = class Toolbar extends Component {
     }
     itemsRerender(newProp) {
         this.items = this.tbarItemsCol;
-        if (this.isReact) {
+        if (this.isReact || this.isAngular) {
             this.clearTemplate();
         }
         this.destroyMode();
@@ -5477,7 +5499,7 @@ let Accordion = class Accordion extends Component {
      * @returns {void}
      */
     destroy() {
-        if (this.isReact) {
+        if (this.isReact || this.isAngular || this.isVue) {
             this.clearTemplate();
         }
         const ele = this.element;
@@ -5489,9 +5511,11 @@ let Accordion = class Accordion extends Component {
             ele.removeChild(el);
         });
         if (this.trgtEle) {
+            this.trgtEle = null;
             while (this.ctrlTem.firstElementChild) {
                 ele.appendChild(this.ctrlTem.firstElementChild);
             }
+            this.ctrlTem = null;
         }
         ele.classList.remove(CLS_ACRDN_ROOT);
         ele.removeAttribute('style');
@@ -5848,11 +5872,13 @@ let Accordion = class Accordion extends Component {
                 else {
                     trgt.click();
                 }
+                e.preventDefault();
                 break;
             case 'home':
             case 'end':
                 clst = e.action === 'home' ? root.firstElementChild.children[0] : root.lastElementChild.children[0];
                 clst.focus();
+                e.preventDefault();
                 break;
         }
     }
@@ -5867,12 +5893,10 @@ let Accordion = class Accordion extends Component {
         return header;
     }
     renderInnerItem(item, index) {
-        const innerEle = this.createElement('div', { className: CLS_ITEM$1 });
-        innerEle.id = getUniqueID('acrdn_item');
-        if (isNullOrUndefined(item.id)) {
-            item.id = innerEle.id;
-        }
-        attributes(innerEle, { 'aria-expanded': 'false', 'role': 'row' });
+        const innerEle = this.createElement('div', {
+            className: CLS_ITEM$1, id: item.id || getUniqueID('acrdn_item'),
+            attrs: { 'aria-expanded': 'false', 'role': 'row' }
+        });
         if (this.headerTemplate) {
             const ctnEle = this.headerEleGenerate();
             const hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
@@ -6469,7 +6493,7 @@ let Accordion = class Accordion extends Component {
     }
     destroyItems() {
         this.restoreContent(null);
-        if (this.isReact) {
+        if (this.isReact || this.isAngular || this.isVue) {
             this.clearTemplate();
         }
         [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM$1)).forEach((el) => {
@@ -7213,7 +7237,7 @@ let Tab = class Tab extends Component {
         this.isAdd = false;
         this.isIconAlone = false;
         this.draggableItems = [];
-        this.resizeContext = this.refreshActElePosition.bind(this);
+        this.resizeContext = this.refreshActiveTabBorder.bind(this);
         /**
          * Contains the keyboard configuration of the Tab.
          */
@@ -7662,7 +7686,7 @@ let Tab = class Tab extends Component {
             trg.classList.remove(CLS_CLOSE_SHOW);
         }
         this.tbObj.refreshOverflow();
-        this.refreshActElePosition();
+        this.refreshActiveTabBorder();
     }
     prevCtnAnimation(prev, current) {
         let animation;
@@ -7857,6 +7881,7 @@ let Tab = class Tab extends Component {
     }
     getContent(ele, cnt, callType, index) {
         let eleStr;
+        cnt = isNullOrUndefined(cnt) ? "" : cnt;
         if (typeof cnt === 'string' || isNullOrUndefined(cnt.innerHTML)) {
             if (typeof cnt === 'string' && this.enableHtmlSanitizer) {
                 cnt = SanitizeHtmlHelper.sanitize(cnt);
@@ -8372,7 +8397,13 @@ let Tab = class Tab extends Component {
                 break;
         }
     }
-    refreshActElePosition() {
+    /**
+     * Refresh the active tab border
+     *
+     * @returns {void}
+     * @private
+     */
+    refreshActiveTabBorder() {
         const activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE$1, this.element);
         if (!isNullOrUndefined(activeEle) && this.reorderActiveTab) {
             this.select(this.getEleIndex(activeEle));
@@ -9113,7 +9144,7 @@ let Tab = class Tab extends Component {
                     this.setCloseButton(newProp.showCloseButton);
                     break;
                 case 'reorderActiveTab':
-                    this.refreshActElePosition();
+                    this.refreshActiveTabBorder();
                     break;
                 case 'selectedItem':
                     this.selectedItem = oldProp.selectedItem;
@@ -9128,7 +9159,7 @@ let Tab = class Tab extends Component {
                 case 'overflowMode':
                     this.tbObj.overflowMode = newProp.overflowMode;
                     this.tbObj.dataBind();
-                    this.refreshActElePosition();
+                    this.refreshActiveTabBorder();
                     break;
                 case 'heightAdjustMode':
                     this.setContentHeight(false);