@syncfusion/ej2-navigations 32.2.6 → 32.2.8

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

@@ -1142,6 +1142,7 @@ let MenuBase = class MenuBase extends Component {
         this.isOpenCalled = false;
         this.isAnimationNone = false;
         this.isKBDAction = false;
+        this.skipNextArrowDown = false;
     }
     /**
      * Initialized third party configuration settings.
@@ -1247,7 +1248,8 @@ let MenuBase = class MenuBase extends Component {
                 this.element.parentElement.insertBefore(wrapper, this.element);
             }
             else {
-                document.body.appendChild(wrapper);
+                const appendToElement = this.getAppendToElement();
+                appendToElement.appendChild(wrapper);
             }
         }
         if (this.cssClass) {
@@ -1383,8 +1385,38 @@ let MenuBase = class MenuBase extends Component {
             e.action = ESCAPE;
             this.leftEscKeyHandler(e);
         }
+        const isDown = e.key ? (e.key === 'ArrowDown') : e.keyCode === 40;
+        if (!isDown) {
+            return;
+        }
+        const hostPopup = closest(this.element, '.e-popup-open');
+        if (!hostPopup) {
+            return;
+        }
+        if (closest(document.activeElement, '#' + this.element.id)) {
+            return;
+        }
+        const active = document.activeElement;
+        if (!active) {
+            return;
+        }
+        const expanded = active.getAttribute('aria-expanded') === 'true';
+        if (!expanded) {
+            return;
+        }
+        const ul = this.element;
+        const firstItem = select('.e-menu-item', ul);
+        if (firstItem) {
+            ul.focus();
+            firstItem.classList.add('e-focused');
+            this.skipNextArrowDown = true;
+        }
     }
     keyBoardHandler(e) {
+        if (e.action === DOWNARROW && this.skipNextArrowDown) {
+            this.skipNextArrowDown = false;
+            return;
+        }
         let actionName = '';
         const trgt = e.target;
         let actionNeeded = this.isMenu && !this.hamburgerMode && !this.element.classList.contains('e-vertical')
@@ -1484,6 +1516,9 @@ let MenuBase = class MenuBase extends Component {
         fliIdx = this.isValidLI(cli, fliIdx, e.action);
         cul.children[fliIdx].classList.add(FOCUSED);
         cul.children[fliIdx].focus();
+        if (closest(this.element, '.e-popup')) {
+            cul.focus();
+        }
     }
     isValidLI(cli, index, action) {
         const cul = this.getUlByNavIdx();
@@ -1525,7 +1560,8 @@ let MenuBase = class MenuBase extends Component {
             return isNullOrUndefined(popup) ? null : select('.e-menu-parent', popup);
         }
         else {
-            if (!document.body.contains(this.element) && navIdxLen === 0) {
+            const appendToElement = this.getAppendToElement();
+            if (!appendToElement.contains(this.element) && navIdxLen === 0) {
                 return null;
             }
             return this.getWrapper().children[navIdxLen];
@@ -1872,7 +1908,8 @@ let MenuBase = class MenuBase extends Component {
                     li.appendChild(this.popupWrapper);
                 }
                 else {
-                    document.body.appendChild(this.popupWrapper);
+                    const 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);
@@ -3151,6 +3188,16 @@ let MenuBase = class MenuBase extends Component {
             }
         }
     }
+    getAppendToElement() {
+        if (this.isAngular) {
+            const cdkPane = this.element.closest('.cdk-overlay-pane');
+            const popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    }
     /**
      * Get the properties to be maintained in the persisted state.
      *
@@ -8731,9 +8778,11 @@ let Tab = class Tab extends Component {
         }
         else if (this.heightAdjustMode === 'Fill') {
             addClass([this.element], [CLS_FILL]);
-            setStyleAttribute(this.element, { 'height': '100%' });
+            const parent = this.element.parentElement;
+            const heightVal = parent.style.height || parent.getAttribute('height');
+            setStyleAttribute(this.element, { 'height': heightVal != null ? heightVal : '100%' });
             this.loadContentElement();
-            this.cntEle.style.height = 'calc(100% - ' + this.hdrEle.offsetHeight + 'px)';
+            this.cntEle.style.height = heightVal != null ? `calc(${heightVal} - ${this.hdrEle.offsetHeight}px)` : 'calc(100vh - ' + this.hdrEle.offsetHeight + 'px)';
         }
         else if (this.heightAdjustMode === 'Auto') {
             if (this.isTemplate === true) {
@@ -10500,6 +10549,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 this.beforeNodeCreate(e);
             },
             enableHtmlSanitizer: this.enableHtmlSanitizer,
+            disableHtmlEncode: this.disableHtmlEncode,
             itemNavigable: this.fullRowNavigable
         };
         this.updateListProp(this.fields);
@@ -13553,12 +13603,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             this.renderReactTemplates();
         }
         else {
-            if (this.enableHtmlSanitizer) {
-                txtEle.innerText = SanitizeHtmlHelper.sanitize(newText);
-            }
-            else {
-                txtEle.innerHTML = newText;
-            }
+            txtEle[ListBase.getDomSetter(this.listBaseOption)] = ListBase.getSanitizedText(newText, this.listBaseOption);
         }
         if (isInput) {
             removeClass([liEle], EDITING);
@@ -15980,6 +16025,9 @@ __decorate$8([
 __decorate$8([
     Property(true)
 ], TreeView.prototype, "enableHtmlSanitizer", void 0);
+__decorate$8([
+    Property(true)
+], TreeView.prototype, "disableHtmlEncode", void 0);
 __decorate$8([
     Property(false)
 ], TreeView.prototype, "enablePersistence", void 0);
@@ -16636,6 +16684,12 @@ let Sidebar = class Sidebar extends Component {
                     if (!this.getState()) {
                         this.setDock();
                     }
+                    if (!this.enableDock) {
+                        removeClass([this.element], DOCKER);
+                    }
+                    else {
+                        addClass([this.element], DOCKER);
+                    }
                     break;
                 case 'zIndex':
                     this.setZindex();