@syncfusion/ej2-navigations 33.2.7 → 33.2.10

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

@@ -1341,6 +1341,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
         this.defaultOption = this.showItemOnClick;
+        if (isNullOrUndefined(this.animation)) {
+            this.animation = new Animation({});
+        }
     };
     MenuBase.prototype.renderItems = function () {
         if (!this.items.length) {
@@ -6296,6 +6299,7 @@ var CLS_ACRDN_ROOT = 'e-acrdn-root';
 var CLS_ROOT$2 = 'e-accordion';
 var CLS_ITEM$1 = 'e-acrdn-item';
 var CLS_ITEMFOCUS = 'e-item-focus';
+var CLS_KEYBOARDFOCUS = 'e-focused';
 var CLS_ITEMHIDE = 'e-hide';
 var CLS_HEADER = 'e-acrdn-header';
 var CLS_HEADERICN = 'e-acrdn-header-icon';
@@ -6405,6 +6409,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
      */
     function Accordion(options, element) {
         var _this = _super.call(this, options, element) || this;
+        _this.isKeyboardNavigation = false;
         /**
          * Contains the keyboard configuration of the Accordion.
          */
@@ -6519,6 +6524,9 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     };
     Accordion.prototype.unWireEvents = function () {
         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();
         }
@@ -6530,6 +6538,9 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     };
     Accordion.prototype.wireEvents = function () {
         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 });
         }
@@ -6574,10 +6585,27 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         return this.itemTemplateFn;
     };
     Accordion.prototype.focusIn = function (e) {
-        e.target.parentElement.classList.add(CLS_ITEMFOCUS);
+        var targetItem = e.target.parentElement;
+        targetItem.classList.add(CLS_ITEMFOCUS);
+        if (this.isKeyboardNavigation) {
+            targetItem.classList.add(CLS_KEYBOARDFOCUS);
+            this.isKeyboardNavigation = false;
+        }
     };
     Accordion.prototype.focusOut = function (e) {
-        e.target.parentElement.classList.remove(CLS_ITEMFOCUS);
+        var targetItem = e.target.parentElement;
+        targetItem.classList.remove(CLS_ITEMFOCUS);
+        targetItem.classList.remove(CLS_KEYBOARDFOCUS);
+    };
+    Accordion.prototype.keyDownHandler = function (e) {
+        if (e.key === 'Tab' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            this.isKeyboardNavigation = true;
+        }
+    };
+    Accordion.prototype.mouseDownHandler = function (e) {
+        this.isKeyboardNavigation = false;
+        var targetItem = e.target.parentElement;
+        targetItem.classList.remove(CLS_KEYBOARDFOCUS);
     };
     Accordion.prototype.ctrlTemplate = function () {
         this.ctrlTem = this.element.cloneNode(true);
@@ -8397,6 +8425,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     Tab.prototype.refreshOverflow = function () {
         if (!isNullOrUndefined(this.tbObj)) {
             this.tbObj.refreshOverflow();
+            this.updatePopupIconAriaLabel();
         }
     };
     /**
@@ -8563,6 +8592,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             this.hdrEle.setAttribute('aria-labelledby', this.element.getAttribute('aria-labelledby'));
             this.element.removeAttribute('aria-labelledby');
         }
+        this.updatePopupIconAriaLabel();
         this.setCloseButton(this.showCloseButton);
         var toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
         if (!isNullOrUndefined(toolbarHeader)) {
@@ -8571,6 +8601,21 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.updatePopupIconAriaLabel = function () {
+        if (isNullOrUndefined(this.hdrEle) || isNullOrUndefined(this.tbObj) || this.tbObj.overflowMode !== 'Popup') {
+            return;
+        }
+        var nav = this.hdrEle.querySelector('.' + CLS_HOR_NAV);
+        if (isNullOrUndefined(nav)) {
+            return;
+        }
+        var raw = window.getComputedStyle(nav, '::before').getPropertyValue('content');
+        var beforeText = (raw || '').trim().replace(/^['"]|['"]$/g, '').replace(/\\(["'])/g, '$1').replace(/\\\\/g, '\\');
+        var label = (beforeText && beforeText !== 'none' && beforeText !== 'normal')
+            ? beforeText
+            : 'overflow';
+        nav.setAttribute('aria-label', label);
+    };
     Tab.prototype.createContentElement = function (index) {
         var contentElement = this.createElement('div', {
             id: CLS_CONTENT$1 + this.tabId + '_' + index, className: CLS_ITEM$2,
@@ -10018,11 +10063,13 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             this.trigger('adding', addArgs, function (tabAddingArgs) {
                 if (!tabAddingArgs.cancel) {
                     _this.addingTabContent(items, index);
+                    _this.updatePopupIconAriaLabel();
                 }
             });
         }
         else {
             this.addingTabContent(items, index);
+            this.updatePopupIconAriaLabel();
         }
         if (this.isReact) {
             this.renderReactTemplates();
@@ -10469,6 +10516,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     this.tbObj.overflowMode = newProp.overflowMode;
                     this.tbObj.dataBind();
                     this.refreshActiveTabBorder();
+                    this.updatePopupIconAriaLabel();
                     break;
                 case 'heightAdjustMode':
                     this.setContentHeight(false);
@@ -10637,6 +10685,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             this.select(this.getEleIndex(activeEle));
         }
         this.refreshActiveBorder();
+        this.updatePopupIconAriaLabel();
     };
     __decorate$7([
         Collection([], TabItem)
@@ -16744,6 +16793,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
         var _this = _super.call(this, options, element) || this;
         _this.documentClickContext = _this.documentclickHandler.bind(_this);
         _this.resizeHandler = _this.resize.bind(_this);
+        _this.preventClose = false;
         return _this;
     }
     Sidebar.prototype.preRender = function () {
@@ -16940,6 +16990,10 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
                     setTimeout(function () { return _this.setTimeOut(); }, 50);
                 }
                 EventHandler.add(_this.element, 'transitionend', _this.transitionEnd, _this);
+                _this.preventClose = false;
+            }
+            else {
+                _this.preventClose = true;
             }
         });
     };
@@ -17197,9 +17251,12 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
                 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 = '';