@syncfusion/ej2-navigations 22.1.34 → 22.1.38

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

@@ -3387,6 +3387,7 @@ let Toolbar = class Toolbar extends Component {
     constructor(options, element) {
         super(options, element);
         this.resizeContext = this.resize.bind(this);
+        this.orientationChangeContext = this.orientationChange.bind(this);
         /**
          * Contains the keyboard configuration of the Toolbar.
          */
@@ -3475,6 +3476,7 @@ let Toolbar = class Toolbar extends Component {
     wireEvents() {
         EventHandler.add(this.element, 'click', this.clickHandler, this);
         window.addEventListener('resize', this.resizeContext);
+        window.addEventListener('orientationchange', this.orientationChangeContext);
         if (this.allowKeyboard) {
             this.wireKeyboardEvent();
         }
@@ -3521,6 +3523,7 @@ let Toolbar = class Toolbar extends Component {
         this.destroyScroll();
         this.unwireKeyboardEvent();
         window.removeEventListener('resize', this.resizeContext);
+        window.removeEventListener('orientationchange', this.orientationChangeContext);
         EventHandler.remove(document, 'scroll', this.docEvent);
         EventHandler.remove(document, 'click', this.docEvent);
     }
@@ -4240,8 +4243,9 @@ let Toolbar = class Toolbar extends Component {
         let sepHeight;
         let sepItem;
         if (this.overflowMode === 'Extended') {
-            sepItem = element.querySelector('.' + CLS_SEPARATOR + ':not(.' + CLS_POPUP + ')');
-            sepHeight = (element.style.height === 'auto' || element.style.height === '') ? null : sepItem.offsetHeight;
+            sepItem = element.querySelector('.' + CLS_SEPARATOR);
+            sepHeight =
+                (element.style.height === 'auto' || element.style.height === '') ? null : (sepItem && sepItem.offsetHeight);
         }
         const eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_POPUP + ')');
         const eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : (eleItem && eleItem.offsetHeight);
@@ -4493,7 +4497,7 @@ let Toolbar = class Toolbar extends Component {
         nav.setAttribute('role', 'button');
         element.appendChild(nav);
     }
-    tbarPriRef(inEle, indx, sepPri, el, des, elWid, wid, ig) {
+    tbarPriRef(inEle, indx, sepPri, el, des, elWid, wid, ig, eleStyles) {
         const ignoreCount = ig;
         const popEle = this.popObj.element;
         const query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';
@@ -4505,8 +4509,7 @@ let Toolbar = class Toolbar extends Component {
             const eleSep = inEle.children[indx - (indx - sepPri) - 1];
             const ignoreCheck = (!isNullOrUndefined(eleSep) && checkClass(eleSep, CLS_TBARIGNORE));
             if ((!isNullOrUndefined(eleSep) && checkClass(eleSep, CLS_SEPARATOR) && !isVisible(eleSep)) || ignoreCheck) {
-                const sepDisplay = 'none';
-                eleSep.style.display = 'inherit';
+                eleSep.style.display = 'unset';
                 const eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);
                 const prevSep = eleSep.previousElementSibling;
                 if ((elWid + eleSepWidth) < wid || des) {
@@ -4516,8 +4519,9 @@ let Toolbar = class Toolbar extends Component {
                     }
                 }
                 else {
+                    setStyleAttribute(el, eleStyles);
                     if (prevSep.classList.contains(CLS_SEPARATOR)) {
-                        prevSep.style.display = sepDisplay;
+                        prevSep.style.display = 'none';
                     }
                 }
                 eleSep.style.display = '';
@@ -4635,6 +4639,7 @@ let Toolbar = class Toolbar extends Component {
             }
             el.style.position = '';
             if (elWidth < width || destroy) {
+                const inlineStyles = { minWidth: el.style.minWidth, height: el.style.height, minHeight: el.style.minHeight };
                 setStyleAttribute(el, { minWidth: '', height: '', minHeight: '' });
                 if (!el.classList.contains(CLS_POPOVERFLOW)) {
                     el.classList.remove(CLS_POPUP);
@@ -4660,7 +4665,7 @@ let Toolbar = class Toolbar extends Component {
                 }
                 ignoreCount = this.ignoreEleFetch(index, innerEle);
                 if (el.classList.contains(CLS_TBAROVERFLOW)) {
-                    this.tbarPriRef(innerEle, index, sepBeforePri, el, destroy, elWidth, width, ignoreCount);
+                    this.tbarPriRef(innerEle, index, sepBeforePri, el, destroy, elWidth, width, ignoreCount, inlineStyles);
                     width -= el.offsetWidth;
                 }
                 else if (index === 0) {
@@ -5305,6 +5310,11 @@ let Toolbar = class Toolbar extends Component {
         this.tbResize = false;
         this.separator();
     }
+    orientationChange() {
+        setTimeout(() => {
+            this.resize();
+        }, 500);
+    }
     extendedOpen() {
         const sib = this.element.querySelector('.' + CLS_EXTENDABLECLASS);
         if (this.overflowMode === 'Extended' && sib) {
@@ -7521,7 +7531,7 @@ let Tab = class Tab extends Component {
         this.isNested = false;
         this.isPopup = false;
         this.initRender = true;
-        this.isSwipeed = false;
+        this.isSwiped = false;
         this.itemIndexArray = [];
         this.templateEle = [];
         if (this.allowDragAndDrop) {
@@ -8363,17 +8373,21 @@ let Tab = class Tab extends Component {
         this.setActiveBorder();
         this.refreshItemVisibility(trg);
         if (!this.initRender && !skipDataBind) {
-            trg.firstElementChild.focus();
             const eventArg = {
                 previousItem: this.prevItem,
                 previousIndex: this.prevIndex,
                 selectedItem: trg,
                 selectedIndex: value,
                 selectedContent: select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.selectingID, this.content),
-                isSwiped: this.isSwipeed,
-                isInteracted: isInteracted
+                isSwiped: this.isSwiped,
+                isInteracted: isInteracted,
+                preventFocus: false
             };
-            this.trigger('selected', eventArg);
+            this.trigger('selected', eventArg, (selectEventArgs) => {
+                if (!selectEventArgs.preventFocus) {
+                    trg.firstElementChild.focus();
+                }
+            });
         }
     }
     setItems(items) {
@@ -8477,7 +8491,7 @@ let Tab = class Tab extends Component {
             nestedTab.removeAttribute('data-swipe');
             return;
         }
-        this.isSwipeed = true;
+        this.isSwiped = true;
         if (e.swipeDirection === 'Right' && this.selectedItem !== 0) {
             for (let k = this.selectedItem - 1; k >= 0; k--) {
                 if (!this.tbItem[k].classList.contains(CLS_HIDDEN$1)) {
@@ -8494,7 +8508,7 @@ let Tab = class Tab extends Component {
                 }
             }
         }
-        this.isSwipeed = false;
+        this.isSwiped = false;
     }
     spaceKeyDown(e) {
         if ((e.keyCode === 32 && e.which === 32) || (e.keyCode === 35 && e.which === 35)) {
@@ -9234,7 +9248,7 @@ let Tab = class Tab extends Component {
             selectingIndex: args,
             selectingContent: !isNullOrUndefined(this.content) ?
                 select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.selectingID, this.content) : null,
-            isSwiped: this.isSwipeed,
+            isSwiped: this.isSwiped,
             isInteracted: this.isInteracted,
             cancel: false
         };
@@ -17305,6 +17319,7 @@ let Carousel = class Carousel extends Component {
         EventHandler.remove(this.element.firstElementChild, 'animationend', this.onTransitionEnd);
         EventHandler.remove(this.element.firstElementChild, 'transitionend', this.onTransitionEnd);
         EventHandler.clearEvents(this.element);
+        EventHandler.clearEvents(this.itemsContainer);
     }
     /**
      * Method to transit from the current slide to the previous slide.
@@ -17404,8 +17419,9 @@ let Carousel = class Carousel extends Component {
         this.destroyButtons();
         this.unWireEvents();
         [].slice.call(this.element.children).forEach((ele) => { this.element.removeChild(ele); });
-        removeClass([this.element], [CLS_CAROUSEL, this.cssClass, CLS_RTL$5]);
+        removeClass([this.element], [CLS_CAROUSEL, this.cssClass, CLS_RTL$5, CLS_SWIPE]);
         ['tabindex', 'role', 'style'].forEach((attr) => { this.element.removeAttribute(attr); });
+        this.itemsContainer = null;
         super.destroy();
     }
 };