@syncfusion/ej2-navigations 20.3.58 → 20.4.38

package/src/tab/tab.js

@@ -153,6 +153,9 @@ var TabItem = /** @class */ (function (_super) {
     __decorate([
         Property()
     ], TabItem.prototype, "id", void 0);
+    __decorate([
+        Property(-1)
+    ], TabItem.prototype, "tabIndex", void 0);
     return TabItem;
 }(ChildProperty));
 export { TabItem };
@@ -357,9 +360,10 @@ var Tab = /** @class */ (function (_super) {
                 this.setContentHeight(true);
                 this.select(this.selectedItem);
             }
+            this.tbItem = selectAll('.' + CLS_TB_ITEM, this.hdrEle);
             if (!isNOU(this.tbItem)) {
                 for (var i = 0; i < this.items.length; i++) {
-                    if (this.items[i]) {
+                    if (this.tbItem[i]) {
                         var tabID = this.items[i].id;
                         this.tbItem[i].setAttribute('data-id', tabID);
                     }
@@ -462,7 +466,7 @@ var Tab = /** @class */ (function (_super) {
         if (!this.isReplace && tbItems.length > 0) {
             var idList_1 = [];
             tbItems.forEach(function (item) {
-                idList_1.push(parseInt(item.id.slice(item.id.indexOf('_') + 1), 10));
+                idList_1.push(_this.getIndexFromEle(item.id));
             });
             maxId = Math.max.apply(Math, idList_1);
         }
@@ -484,8 +488,7 @@ var Tab = /** @class */ (function (_super) {
             }
             var itemIndex;
             if (_this.isReplace && !isNOU(_this.tbId) && _this.tbId !== '') {
-                var num = (_this.tbId.indexOf('_'));
-                itemIndex = parseInt(_this.tbId.substring(num + 1), 10);
+                itemIndex = parseInt(_this.tbId.substring(_this.tbId.lastIndexOf('_') + 1), 10);
                 _this.tbId = '';
             }
             else {
@@ -527,7 +530,8 @@ var Tab = /** @class */ (function (_super) {
                     _this.isIconAlone = true;
                 }
             }
-            var wrapAttrs = (item.disabled) ? {} : { tabIndex: '-1' };
+            var tabIndex = isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString();
+            var wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex };
             tCont.appendChild(_this.btnCls.cloneNode(true));
             var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
@@ -972,14 +976,14 @@ var Tab = /** @class */ (function (_super) {
             }
             else {
                 if (!this.isVertical()) {
-                    setStyle(this.cntEle, { 'height': (this.element.offsetHeight - hdrEle.offsetHeight) + 'px' });
+                    setStyle(this.cntEle, { 'height': (this.element.clientHeight - hdrEle.offsetHeight) + 'px' });
                 }
             }
         }
         else if (this.heightAdjustMode === 'Fill') {
             addClass([this.element], [CLS_FILL]);
             setStyle(this.element, { 'height': '100%' });
-            setStyle(this.cntEle, { 'height': (this.element.offsetHeight - hdrEle.offsetHeight) + 'px' });
+            this.cntEle.style.height = 'calc(100% - ' + this.hdrEle.offsetHeight + 'px)';
         }
         else if (this.heightAdjustMode === 'Auto') {
             if (this.isTemplate === true) {
@@ -1319,12 +1323,14 @@ var Tab = /** @class */ (function (_super) {
             case 'shiftTab':
                 if (trg.classList.contains(CLS_WRAP)
                     && closest(trg, '.' + CLS_TB_ITEM).classList.contains(CLS_ACTIVE) === false) {
-                    trg.setAttribute('tabindex', '-1');
+                    trg.setAttribute('tabindex', trg.getAttribute('data-tabindex'));
                 }
                 if (this.popObj && isVisible(this.popObj.element)) {
                     this.popObj.hide(this.hide);
                 }
-                actEle.children.item(0).setAttribute('tabindex', '0');
+                if (!isNOU(actEle) && actEle.children.item(0).getAttribute('tabindex') === '-1') {
+                    actEle.children.item(0).setAttribute('tabindex', '0');
+                }
                 break;
             case 'moveLeft':
             case 'moveRight':
@@ -1374,6 +1380,9 @@ var Tab = /** @class */ (function (_super) {
             return;
         }
     };
+    Tab.prototype.getIndexFromEle = function (id) {
+        return parseInt(id.substring(id.lastIndexOf('_') + 1), 10);
+    };
     Tab.prototype.hoverHandler = function (e) {
         var trg = e.target;
         if (!isNOU(trg.classList) && trg.classList.contains(CLS_ICON_CLOSE)) {
@@ -1392,8 +1401,7 @@ var Tab = /** @class */ (function (_super) {
                     var hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
                     var itemIndex = void 0;
                     if (hdr && !isNOU(hdr.id) && hdr.id !== '') {
-                        var num = (hdr.id.lastIndexOf('_'));
-                        itemIndex = parseInt(hdr.id.substring(num + 1), 10);
+                        itemIndex = this.getIndexFromEle(hdr.id);
                     }
                     else {
                         itemIndex = index;
@@ -1711,7 +1719,7 @@ var Tab = /** @class */ (function (_super) {
         }
         if (value === true) {
             tbItems.classList.remove(CLS_DISABLE, CLS_OVERLAY);
-            tbItems.firstElementChild.setAttribute('tabindex', '-1');
+            tbItems.firstElementChild.setAttribute('tabindex', tbItems.firstElementChild.getAttribute('data-tabindex'));
         }
         else {
             tbItems.classList.add(CLS_DISABLE, CLS_OVERLAY);
@@ -1972,7 +1980,7 @@ var Tab = /** @class */ (function (_super) {
             this.selectingID = this.extIndex(trg.id);
         }
         if (!isNOU(this.prevItem) && !this.prevItem.classList.contains(CLS_DISABLE)) {
-            this.prevItem.children.item(0).setAttribute('tabindex', '-1');
+            this.prevItem.children.item(0).setAttribute('tabindex', this.prevItem.firstElementChild.getAttribute('tabindex'));
         }
         var eventArg = {
             event: event,
@@ -2220,7 +2228,8 @@ var Tab = /** @class */ (function (_super) {
                         this.isIconAlone = true;
                     }
                 }
-                var wrapAtt = (item.disabled) ? {} : { tabIndex: '-1' };
+                var tabIndex = isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString();
+                var wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex };
                 tConts.appendChild(this.btnCls.cloneNode(true));
                 var wraper = this.createElement('div', { className: CLS_WRAP, attrs: wrapAtt });
                 wraper.appendChild(tConts);
@@ -2264,9 +2273,7 @@ var Tab = /** @class */ (function (_super) {
         else {
             var tabItems = this.element.querySelector('.' + CLS_TB_ITEMS);
             var element = this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE);
-            var id = element.id;
-            var num = (id.indexOf('_'));
-            var index = parseInt(id.substring(num + 1), 10);
+            var index = this.getIndexFromEle(element.id);
             var header = element.innerText;
             var detachContent = this.element.querySelector('.' + CLS_CONTENT).querySelector('.' + CLS_ACTIVE).children[0];
             var mainContents = detachContent.innerHTML;
@@ -2285,7 +2292,10 @@ var Tab = /** @class */ (function (_super) {
             var conte = this.createElement('div', {
                 className: CLS_TEXT_WRAP, innerHTML: txtString + this.btnCls.outerHTML
             }).outerHTML;
-            var wrap = this.createElement('div', { className: CLS_WRAP, innerHTML: conte, attrs: { tabIndex: '-1' } });
+            var tabIndex = element.firstElementChild.getAttribute('data-tabindex');
+            var wrap = this.createElement('div', {
+                className: CLS_WRAP, innerHTML: conte, attrs: { tabIndex: tabIndex, 'data-tabindex': tabIndex }
+            });
             tabItems.insertBefore(this.createElement('div', attr), tabItems.children[index + 1]);
             this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE).appendChild(wrap);
             var crElem = this.createElement('div', { innerHTML: mainContents });

package/src/toolbar/toolbar-model.d.ts

@@ -164,6 +164,15 @@ export interface ItemModel {
      */
     click?: EmitType<ClickEventArgs>;
 
+    /**
+     * Specifies the tab order of the Toolbar items. When positive values assigned, it allows to switch focus to the next/previous toolbar items with Tab/ShiftTab keys.
+     * By default, user can able to switch between items only via arrow keys.
+     * If the value is set to 0 for all tool bar items, then tab switches based on element order.
+     *
+     * @default -1
+     */
+    tabIndex?: number;
+
 }
 
 /**

package/src/toolbar/toolbar.d.ts

@@ -185,6 +185,14 @@ export declare class Item extends ChildProperty<Item> {
      * @event click
      */
     click: EmitType<ClickEventArgs>;
+    /**
+     * Specifies the tab order of the Toolbar items. When positive values assigned, it allows to switch focus to the next/previous toolbar items with Tab/ShiftTab keys.
+     * By default, user can able to switch between items only via arrow keys.
+     * If the value is set to 0 for all tool bar items, then tab switches based on element order.
+     *
+     * @default -1
+     */
+    tabIndex: number;
 }
 /**
  * The Toolbar control contains a group of commands that are aligned horizontally.
@@ -325,6 +333,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     constructor(options?: ToolbarModel, element?: string | HTMLElement);
     private wireEvents;
     private wireKeyboardEvent;
+    private updateTabIndex;
     private unwireKeyboardEvent;
     private docKeyDown;
     private unwireEvents;
@@ -436,6 +445,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     private templateRender;
     private buttonRendering;
     private renderSubComponent;
+    private getDataTabindex;
     private itemClick;
     private activeEleSwitch;
     private activeEleRemove;
@@ -450,6 +460,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     private itemsRerender;
     private resize;
     private extendedOpen;
+    private updateHideEleTabIndex;
     /**
      * Gets called when the model property changes.The data that describes the old and new values of the property that changed.
      *