@syncfusion/ej2-navigations 32.2.7 → 32.2.9

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

@@ -1215,6 +1215,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         _this.isOpenCalled = false;
         _this.isAnimationNone = false;
         _this.isKBDAction = false;
+        _this.skipNextArrowDown = false;
         return _this;
     }
     /**
@@ -1322,7 +1323,8 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 this.element.parentElement.insertBefore(wrapper, this.element);
             }
             else {
-                document.body.appendChild(wrapper);
+                var appendToElement = this.getAppendToElement();
+                appendToElement.appendChild(wrapper);
             }
         }
         if (this.cssClass) {
@@ -1459,8 +1461,38 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             e.action = ESCAPE;
             this.leftEscKeyHandler(e);
         }
+        var isDown = e.key ? (e.key === 'ArrowDown') : e.keyCode === 40;
+        if (!isDown) {
+            return;
+        }
+        var hostPopup = closest(this.element, '.e-popup-open');
+        if (!hostPopup) {
+            return;
+        }
+        if (closest(document.activeElement, '#' + this.element.id)) {
+            return;
+        }
+        var active = document.activeElement;
+        if (!active) {
+            return;
+        }
+        var expanded = active.getAttribute('aria-expanded') === 'true';
+        if (!expanded) {
+            return;
+        }
+        var ul = this.element;
+        var firstItem = select('.e-menu-item', ul);
+        if (firstItem) {
+            ul.focus();
+            firstItem.classList.add('e-focused');
+            this.skipNextArrowDown = true;
+        }
     };
     MenuBase.prototype.keyBoardHandler = function (e) {
+        if (e.action === DOWNARROW && this.skipNextArrowDown) {
+            this.skipNextArrowDown = false;
+            return;
+        }
         var actionName = '';
         var trgt = e.target;
         var actionNeeded = this.isMenu && !this.hamburgerMode && !this.element.classList.contains('e-vertical')
@@ -1560,6 +1592,13 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
         fliIdx = this.isValidLI(cli, fliIdx, e.action);
         cul.children[fliIdx].classList.add(FOCUSED);
         cul.children[fliIdx].focus();
+        if (closest(this.element, '.e-popup')) {
+            var focusedLiItem = cul.children[fliIdx];
+            var focusableChild = focusedLiItem.querySelector('[tabindex], span[tabindex], a, button, [tabindex]:not([tabindex="-1"])');
+            if (!focusableChild) {
+                cul.focus();
+            }
+        }
     };
     MenuBase.prototype.isValidLI = function (cli, index, action) {
         var cul = this.getUlByNavIdx();
@@ -1603,7 +1642,8 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             return isNullOrUndefined(popup) ? null : select('.e-menu-parent', popup);
         }
         else {
-            if (!document.body.contains(this.element) && navIdxLen === 0) {
+            var appendToElement = this.getAppendToElement();
+            if (!appendToElement.contains(this.element) && navIdxLen === 0) {
                 return null;
             }
             return this.getWrapper().children[navIdxLen];
@@ -1959,7 +1999,8 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     li.appendChild(this.popupWrapper);
                 }
                 else {
-                    document.body.appendChild(this.popupWrapper);
+                    var appendToElement = this.getAppendToElement();
+                    appendToElement.appendChild(this.popupWrapper);
                 }
                 this.isNestedOrVertical = this.element.classList.contains('e-vertical') || this.navIdx.length !== 1;
                 this.popupObj = this.generatePopup(this.popupWrapper, this.uList, li, this.isNestedOrVertical);
@@ -3260,6 +3301,16 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    MenuBase.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element.closest('.cdk-overlay-pane');
+            var popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     /**
      * Get the properties to be maintained in the persisted state.
      *
@@ -6848,8 +6899,13 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             if (this.isReact) {
                 this.renderReactTemplates();
             }
-            append(this.getItemTemplate()(this.dataSource[parseInt(index.toString(), 10)], this, 'itemTemplate', this.element.id + '_itemTemplate', false), ctn);
-            itemcnt.appendChild(ctn);
+            if (!isNullOrUndefined(this.getItemTemplate())) {
+                append(this.getItemTemplate()(this.dataSource[parseInt(index.toString(), 10)], this, 'itemTemplate', this.element.id + '_itemTemplate', false), ctn);
+                itemcnt.appendChild(ctn);
+            }
+            else {
+                itemcnt.appendChild(this.fetchElement(ctn, this.dataSource[parseInt(index.toString(), 10)].content, index));
+            }
         }
         else {
             var content = this.items[parseInt(index.toString(), 10)].content;
@@ -17046,6 +17102,13 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
                     else {
                         addClass([this.element], DOCKER);
                     }
+                    if (!this.isOpen && sibling) {
+                        if (!this.enableDock) {
+                            this.element.style.transform = sibling.style.transform = '';
+                        }
+                        sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] =
+                            this.enableDock ? this.setDimension(this.dockSize) : '0px';
+                    }
                     break;
                 case 'zIndex':
                     this.setZindex();