@syncfusion/ej2-navigations 33.2.6 → 33.2.8

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

@@ -5934,6 +5934,13 @@ let Toolbar = class Toolbar extends Component {
                             if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {
                                 this.clearToolbarTemplate(itemCol[parseInt(index.toString(), 10)]);
                             }
+                            if (this.element.closest('.e-richtexteditor')) {
+                                const btnItem = itemCol[parseInt(index.toString(), 10)].querySelector('.e-control.e-btn');
+                                if (!isNullOrUndefined(btnItem) && !isNullOrUndefined(btnItem.ej2_instances[0]) &&
+                                    !(btnItem.ej2_instances[0].isDestroyed)) {
+                                    btnItem.ej2_instances[0].destroy();
+                                }
+                            }
                             EventHandler.remove(itemCol[parseInt(index.toString(), 10)], 'click', this.itemClick);
                             detach(itemCol[parseInt(index.toString(), 10)]);
                             this.tbarEle.splice(index, 1);
@@ -6115,6 +6122,7 @@ const CLS_ACRDN_ROOT = 'e-acrdn-root';
 const CLS_ROOT$2 = 'e-accordion';
 const CLS_ITEM$1 = 'e-acrdn-item';
 const CLS_ITEMFOCUS = 'e-item-focus';
+const CLS_KEYBOARDFOCUS = 'e-focused';
 const CLS_ITEMHIDE = 'e-hide';
 const CLS_HEADER = 'e-acrdn-header';
 const CLS_HEADERICN = 'e-acrdn-header-icon';
@@ -6208,6 +6216,7 @@ let Accordion = class Accordion extends Component {
      */
     constructor(options, element) {
         super(options, element);
+        this.isKeyboardNavigation = false;
         /**
          * Contains the keyboard configuration of the Accordion.
          */
@@ -6320,6 +6329,9 @@ let Accordion = class Accordion extends Component {
     }
     unWireEvents() {
         EventHandler.remove(this.element, 'click', this.clickHandler);
+        EventHandler.remove(this.element, 'keydown', this.keyDownHandler);
+        EventHandler.remove(document, 'keydown', this.keyDownHandler);
+        EventHandler.remove(this.element, 'mousedown', this.mouseDownHandler);
         if (!isNullOrUndefined(this.keyModule)) {
             this.keyModule.destroy();
         }
@@ -6330,6 +6342,9 @@ let Accordion = class Accordion extends Component {
     }
     wireEvents() {
         EventHandler.add(this.element, 'click', this.clickHandler, this);
+        EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);
+        EventHandler.add(document, 'keydown', this.keyDownHandler, this);
+        EventHandler.add(this.element, 'mousedown', this.mouseDownHandler, this);
         if (!this.isNested && !this.isDestroy) {
             this.removeRippleEffect = rippleEffect(this.element, { selector: '.' + CLS_HEADER });
         }
@@ -6374,10 +6389,27 @@ let Accordion = class Accordion extends Component {
         return this.itemTemplateFn;
     }
     focusIn(e) {
-        e.target.parentElement.classList.add(CLS_ITEMFOCUS);
+        const targetItem = e.target.parentElement;
+        targetItem.classList.add(CLS_ITEMFOCUS);
+        if (this.isKeyboardNavigation) {
+            targetItem.classList.add(CLS_KEYBOARDFOCUS);
+            this.isKeyboardNavigation = false;
+        }
     }
     focusOut(e) {
-        e.target.parentElement.classList.remove(CLS_ITEMFOCUS);
+        const targetItem = e.target.parentElement;
+        targetItem.classList.remove(CLS_ITEMFOCUS);
+        targetItem.classList.remove(CLS_KEYBOARDFOCUS);
+    }
+    keyDownHandler(e) {
+        if (e.key === 'Tab' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            this.isKeyboardNavigation = true;
+        }
+    }
+    mouseDownHandler(e) {
+        this.isKeyboardNavigation = false;
+        const targetItem = e.target.parentElement;
+        targetItem.classList.remove(CLS_KEYBOARDFOCUS);
     }
     ctrlTemplate() {
         this.ctrlTem = this.element.cloneNode(true);
@@ -6625,11 +6657,6 @@ let Accordion = class Accordion extends Component {
         const innerEle = this.createElement('div', {
             className: CLS_ITEM$1, id: item.id || getUniqueID('acrdn_item')
         });
-        if (item.expanded && !isNullOrUndefined(index) && (!this.enablePersistence)) {
-            if (this.initExpand.indexOf(index) === -1) {
-                this.initExpand.push(index);
-            }
-        }
         if (this.headerTemplate) {
             const ctnEle = this.headerEleGenerate();
             const hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
@@ -6638,9 +6665,8 @@ let Accordion = class Accordion extends Component {
             innerEle.appendChild(ctnEle);
             ctnEle.appendChild(this.toggleIconGenerate());
             this.add(innerEle, CLS_SLCT);
-            return innerEle;
         }
-        if (item.header && this.angularnativeCondiCheck(item, 'header')) {
+        else if (item.header && this.angularnativeCondiCheck(item, 'header')) {
             let header = item.header;
             if (this.enableHtmlSanitizer && typeof (item.header) === 'string') {
                 header = SanitizeHtmlHelper.sanitize(item.header);
@@ -6652,6 +6678,11 @@ let Accordion = class Accordion extends Component {
             innerEle.appendChild(ctnEle);
         }
         let hdr = select('.' + CLS_HEADER, innerEle);
+        if (item.expanded && !isNullOrUndefined(index) && (!this.enablePersistence)) {
+            if (this.initExpand.indexOf(index) === -1) {
+                this.initExpand.push(index);
+            }
+        }
         if (item.cssClass) {
             addClass([innerEle], item.cssClass.split(' '));
         }
@@ -6674,7 +6705,7 @@ let Accordion = class Accordion extends Component {
                 hdr.insertBefore(hdrIcnEle, hdr.childNodes[0]);
             }
         }
-        if (item.content && this.angularnativeCondiCheck(item, 'content')) {
+        if (item.content && this.angularnativeCondiCheck(item, 'content') && !this.headerTemplate) {
             const hdrIcon = this.toggleIconGenerate();
             if (isNullOrUndefined(hdr)) {
                 hdr = this.headerEleGenerate();
@@ -8117,6 +8148,7 @@ let Tab = class Tab extends Component {
     refreshOverflow() {
         if (!isNullOrUndefined(this.tbObj)) {
             this.tbObj.refreshOverflow();
+            this.updatePopupIconAriaLabel();
         }
     }
     /**
@@ -8168,6 +8200,12 @@ let Tab = class Tab extends Component {
                 this.refreshActiveBorder();
             });
         }
+        if (this.isAngular && this.registeredTemplate && !isNullOrUndefined(this.registeredTemplate.headerTemplate)) {
+            setTimeout(() => {
+                this.refreshOverflow();
+                this.refreshActiveBorder();
+            }, 5);
+        }
     }
     renderContainer() {
         const ele = this.element;
@@ -8275,6 +8313,7 @@ let Tab = class Tab extends Component {
             this.hdrEle.setAttribute('aria-labelledby', this.element.getAttribute('aria-labelledby'));
             this.element.removeAttribute('aria-labelledby');
         }
+        this.updatePopupIconAriaLabel();
         this.setCloseButton(this.showCloseButton);
         const toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
         if (!isNullOrUndefined(toolbarHeader)) {
@@ -8283,6 +8322,21 @@ let Tab = class Tab extends Component {
             }
         }
     }
+    updatePopupIconAriaLabel() {
+        if (isNullOrUndefined(this.hdrEle) || isNullOrUndefined(this.tbObj) || this.tbObj.overflowMode !== 'Popup') {
+            return;
+        }
+        const nav = this.hdrEle.querySelector('.' + CLS_HOR_NAV);
+        if (isNullOrUndefined(nav)) {
+            return;
+        }
+        const raw = window.getComputedStyle(nav, '::before').getPropertyValue('content');
+        const beforeText = (raw || '').trim().replace(/^['"]|['"]$/g, '').replace(/\\(["'])/g, '$1').replace(/\\\\/g, '\\');
+        const label = (beforeText && beforeText !== 'none' && beforeText !== 'normal')
+            ? beforeText
+            : 'overflow';
+        nav.setAttribute('aria-label', label);
+    }
     createContentElement(index) {
         const contentElement = this.createElement('div', {
             id: CLS_CONTENT$1 + this.tabId + '_' + index, className: CLS_ITEM$2,
@@ -9089,7 +9143,14 @@ let Tab = class Tab extends Component {
             tbPopObj.show(config);
         }
     }
-    bindDraggable() {
+    bindDraggable(refreshDraggableItems) {
+        if (refreshDraggableItems && this.draggableItems.length > 0) {
+            for (let i = 0; i < this.draggableItems.length; i++) {
+                this.draggableItems[i].destroy();
+                this.draggableItems[i] = null;
+            }
+            this.draggableItems = [];
+        }
         if (this.allowDragAndDrop) {
             const tabHeader = this.element.querySelector('.' + CLS_HEADER$1);
             if (tabHeader) {
@@ -9709,11 +9770,13 @@ let Tab = class Tab extends Component {
             this.trigger('adding', addArgs, (tabAddingArgs) => {
                 if (!tabAddingArgs.cancel) {
                     this.addingTabContent(items, index);
+                    this.updatePopupIconAriaLabel();
                 }
             });
         }
         else {
             this.addingTabContent(items, index);
+            this.updatePopupIconAriaLabel();
         }
         if (this.isReact) {
             this.renderReactTemplates();
@@ -10153,6 +10216,7 @@ let Tab = class Tab extends Component {
                     this.tbObj.overflowMode = newProp.overflowMode;
                     this.tbObj.dataBind();
                     this.refreshActiveTabBorder();
+                    this.updatePopupIconAriaLabel();
                     break;
                 case 'heightAdjustMode':
                     this.setContentHeight(false);
@@ -10164,7 +10228,7 @@ let Tab = class Tab extends Component {
                     }
                     break;
                 case 'allowDragAndDrop':
-                    this.bindDraggable();
+                    this.bindDraggable(true);
                     break;
                 case 'swipeMode':
                     if (this.touchModule) {
@@ -10321,6 +10385,7 @@ let Tab = class Tab extends Component {
             this.select(this.getEleIndex(activeEle));
         }
         this.refreshActiveBorder();
+        this.updatePopupIconAriaLabel();
     }
 };
 __decorate$7([
@@ -10468,6 +10533,7 @@ const CHECKBOXRIPPLE = 'e-ripple-container';
 const RIPPLE = 'e-ripple';
 const RIPPLEELMENT = 'e-ripple-element';
 const FOCUS = 'e-node-focus';
+const FOCUSED$1 = 'e-focused';
 const IMAGE = 'e-list-img';
 const BIGGER = 'e-bigger';
 const SMALL = 'e-small';
@@ -12774,6 +12840,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             const focusedNode = this.getFocusedNode();
             if (focusedNode) {
                 removeClass([focusedNode], FOCUS);
+                removeClass([focusedNode], FOCUSED$1);
                 focusedNode.setAttribute('tabindex', '-1');
             }
             addClass([li], FOCUS);
@@ -13468,9 +13535,11 @@ let TreeView = TreeView_1 = class TreeView extends Component {
     }
     setFocus(preNode, nextNode) {
         removeClass([preNode], FOCUS);
+        removeClass([preNode], FOCUSED$1);
         preNode.setAttribute('tabindex', '-1');
         if (!nextNode.classList.contains('e-disable')) {
             addClass([nextNode], FOCUS);
+            addClass([nextNode], FOCUSED$1);
             nextNode.setAttribute('tabindex', '0');
             nextNode.focus();
             EventHandler.add(nextNode, 'blur', this.focusOut, this);
@@ -13495,6 +13564,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             else {
                 focusedElement.setAttribute('tabindex', '0');
                 addClass([focusedElement], FOCUS);
+                addClass([focusedElement], FOCUSED$1);
                 EventHandler.add(focusedElement, 'blur', this.focusOut, this);
             }
             this.mouseDownStatus = false;
@@ -13504,6 +13574,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         const focusedElement = this.getFocusedNode();
         if (event.target === focusedElement) {
             removeClass([focusedElement], FOCUS);
+            removeClass([focusedElement], FOCUSED$1);
             EventHandler.remove(focusedElement, 'blur', this.focusOut);
         }
     }
@@ -16318,6 +16389,7 @@ let Sidebar = class Sidebar extends Component {
         super(options, element);
         this.documentClickContext = this.documentclickHandler.bind(this);
         this.resizeHandler = this.resize.bind(this);
+        this.preventClose = false;
     }
     preRender() {
         this.setWidth();
@@ -16512,6 +16584,10 @@ let Sidebar = class Sidebar extends Component {
                     setTimeout(() => this.setTimeOut(), 50);
                 }
                 EventHandler.add(this.element, 'transitionend', this.transitionEnd, this);
+                this.preventClose = false;
+            }
+            else {
+                this.preventClose = true;
             }
         });
     }
@@ -16767,9 +16843,12 @@ let Sidebar = class Sidebar extends Component {
                 case 'type':
                     this.checkType(false);
                     removeClass([this.element], [VISIBILITY]);
-                    this.addClass();
+                    if (!this.preventClose) {
+                        this.addClass();
+                    }
                     addClass([this.element], this.type === 'Auto' ? (Browser.isDevice ? ['e-over'] :
                         ['e-push']) : ['e-' + this.type.toLowerCase()]);
+                    this.setType(this.type);
                     break;
                 case 'position':
                     this.element.style.transform = '';