@syncfusion/ej2-navigations 19.3.57 → 19.4.47

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

@@ -270,6 +270,14 @@ export interface TabModel extends ComponentModel{
      */
     showCloseButton?: boolean;
 
+    /**
+     * Determines whether to re-order tab items to show active tab item in the header area or popup when OverflowMode is Popup.
+     *  True, if active tab item should be visible in header area instead of pop-up. The default value is true.
+     *
+     * @default true
+     */
+    reorderActiveTab?: boolean;
+
     /**
      * Specifies the scrolling distance in scroller.
      *
@@ -307,42 +315,42 @@ export interface TabModel extends ComponentModel{
     created?: EmitType<Event>;
 
     /**
-     * The event will be fired before adding the item to the Tab.
+     * The event will be fired before adding the item to the Tab.
      *
      * @event
      */
     adding?: EmitType<AddEventArgs>;
 
     /**
-     * The event will be fired after adding the item to the Tab.
+     * The event will be fired after adding the item to the Tab.
      *
      * @event
      */
     added?: EmitType<AddEventArgs>;
 
     /**
-     * The event will be fired before the item gets selected.
+     * The event will be fired before the item gets selected.
      *
      * @event
      */
     selecting?: EmitType<SelectingEventArgs>;
 
     /**
-     * The event will be fired after the item gets selected.
+     * The event will be fired after the item gets selected.
      *
      * @event
      */
     selected?: EmitType<SelectEventArgs>;
 
     /**
-     * The event will be fired before removing the item from the Tab.
+     * The event will be fired before removing the item from the Tab.
      *
      * @event
      */
     removing?: EmitType<RemoveEventArgs>;
 
     /**
-     * The event will be fired after removing the item from the Tab.
+     * The event will be fired after removing the item from the Tab.
      *
      * @event
      */

package/src/tab/tab.d.ts

@@ -33,6 +33,8 @@ export interface SelectEventArgs extends BaseEventArgs {
     cancel?: boolean;
     /** Defines the selected content. */
     selectedContent: HTMLElement;
+    /** Determines whether the event is triggered via user interaction or programmatic way. True, if the event is triggered by user interaction. */
+    isInteracted?: boolean;
 }
 /** An interface that holds options to control the selecting item action. */
 export interface SelectingEventArgs extends SelectEventArgs {
@@ -233,6 +235,7 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private maxHeight;
     private title;
     private initRender;
+    private isInteracted;
     private prevActiveEle;
     private lastIndex;
     private isSwipeed;
@@ -368,6 +371,13 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
      * @default false
      */
     showCloseButton: boolean;
+    /**
+     * Determines whether to re-order tab items to show active tab item in the header area or popup when OverflowMode is Popup.
+     *  True, if active tab item should be visible in header area instead of pop-up. The default value is true.
+     *
+     * @default true
+     */
+    reorderActiveTab: boolean;
     /**
      * Specifies the scrolling distance in scroller.
      *
@@ -400,37 +410,37 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
      */
     created: EmitType<Event>;
     /**
-     * The event will be fired before adding the item to the Tab.
+     * The event will be fired before adding the item to the Tab.
      *
      * @event
      */
     adding: EmitType<AddEventArgs>;
     /**
-     * The event will be fired after adding the item to the Tab.
+     * The event will be fired after adding the item to the Tab.
      *
      * @event
      */
     added: EmitType<AddEventArgs>;
     /**
-     * The event will be fired before the item gets selected.
+     * The event will be fired before the item gets selected.
      *
      * @event
      */
     selecting: EmitType<SelectingEventArgs>;
     /**
-     * The event will be fired after the item gets selected.
+     * The event will be fired after the item gets selected.
      *
      * @event
      */
     selected: EmitType<SelectEventArgs>;
     /**
-     * The event will be fired before removing the item from the Tab.
+     * The event will be fired before removing the item from the Tab.
      *
      * @event
      */
     removing: EmitType<RemoveEventArgs>;
     /**
-     * The event will be fired after removing the item from the Tab.
+     * The event will be fired after removing the item from the Tab.
      *
      * @event
      */
@@ -540,7 +550,13 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private swipeHandler;
     private spaceKeyDown;
     private keyHandler;
-    private refreshActElePosition;
+    /**
+     * Refresh the active tab border
+     *
+     * @returns {void}
+     * @private
+     */
+    refreshActiveTabBorder(): void;
     private refreshItemVisibility;
     private hoverHandler;
     private evalOnPropertyChangeItems;
@@ -552,8 +568,8 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     /**
      * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.
      *
-     * @param  {number} index - Index value of target Tab item.
-     * @param  {boolean} value - Boolean value that determines whether the command should be enabled or disabled.
+     * @param {number} index - Index value of target Tab item.
+     * @param {boolean} value - Boolean value that determines whether the command should be enabled or disabled.
      * By default, isEnable is true.
      * @returns {void}.
      */
@@ -561,8 +577,8 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     /**
      * Adds new items to the Tab that accepts an array as Tab items.
      *
-     * @param  {TabItemModel[]} items - An array of item that is added to the Tab.
-     * @param  {number} index - Number value that determines where the items to be added. By default, index is 0.
+     * @param {TabItemModel[]} items - An array of item that is added to the Tab.
+     * @param {number} index - Number value that determines where the items to be added. By default, index is 0.
      * @returns {void}.
      */
     addTab(items: TabItemModel[], index?: number): void;
@@ -570,24 +586,25 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     /**
      * Removes the items in the Tab from the specified index.
      *
-     * @param  {number} index - Index of target item that is going to be removed.
+     * @param {number} index - Index of target item that is going to be removed.
      * @returns {void}.
      */
     removeTab(index: number): void;
     /**
      * Shows or hides the Tab that is in the specified index.
      *
-     * @param  {number} index - Index value of target item.
-     * @param  {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.
+     * @param {number} index - Index value of target item.
+     * @param {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.
      * @returns {void}.
      */
     hideTab(index: number, value?: boolean): void;
+    private selectTab;
     /**
      * Specifies the index or HTMLElement to select an item from the Tab.
      *
-     * @param  {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.
+     * @param {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.
      * @param {Event} event - An event which takes place in DOM.
-     * @returns {void}.
+     * @returns {void}
      */
     select(args: number | HTEle, event?: Event): void;
     private selectingContent;

package/src/tab/tab.js

@@ -66,6 +66,7 @@ var CLS_VRIGHT = 'e-vertical-right';
 var CLS_HBOTTOM = 'e-horizontal-bottom';
 var CLS_FILL = 'e-fill-mode';
 var TABITEMPREFIX = 'tabitem_';
+var CLS_REORDER_ACTIVE_ITEM = 'e-reorder-active-item';
 /**
  * Objects used for configuring the Tab selecting item action properties.
  */
@@ -180,11 +181,12 @@ var Tab = /** @class */ (function (_super) {
         _this.hide = {};
         _this.maxHeight = 0;
         _this.title = 'Close';
+        _this.isInteracted = false;
         _this.lastIndex = 0;
         _this.isAdd = false;
         _this.isIconAlone = false;
         _this.draggableItems = [];
-        _this.resizeContext = _this.refreshActElePosition.bind(_this);
+        _this.resizeContext = _this.refreshActiveTabBorder.bind(_this);
         /**
          * Contains the keyboard configuration of the Tab.
          */
@@ -638,7 +640,7 @@ var Tab = /** @class */ (function (_super) {
             trg.classList.remove(CLS_CLOSE_SHOW);
         }
         this.tbObj.refreshOverflow();
-        this.refreshActElePosition();
+        this.refreshActiveTabBorder();
     };
     Tab.prototype.prevCtnAnimation = function (prev, current) {
         var animation;
@@ -765,7 +767,7 @@ var Tab = /** @class */ (function (_super) {
         }
         else {
             if (!isNOU(trgParent) && trgParent.classList.contains(CLS_ACTIVE) === false) {
-                this.select(trgIndex);
+                this.selectTab(trgIndex, null, true);
                 if (!isNOU(this.popEle)) {
                     this.popObj.hide(this.hide);
                 }
@@ -1038,9 +1040,20 @@ var Tab = /** @class */ (function (_super) {
     Tab.prototype.setActiveBorder = function () {
         var trgHdrEle = this.getTabHeader();
         var trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, trgHdrEle);
-        if (trg === null) {
+        if (isNOU(trg)) {
             return;
         }
+        if (!this.reorderActiveTab) {
+            if (trg.classList.contains(CLS_TB_POPUP) && !this.bdrLine.classList.contains(CLS_HIDDEN)) {
+                this.bdrLine.classList.add(CLS_HIDDEN);
+            }
+            if (trgHdrEle && !trgHdrEle.classList.contains(CLS_REORDER_ACTIVE_ITEM)) {
+                trgHdrEle.classList.add(CLS_REORDER_ACTIVE_ITEM);
+            }
+        }
+        else if (trgHdrEle) {
+            trgHdrEle.classList.remove(CLS_REORDER_ACTIVE_ITEM);
+        }
         var root = closest(trg, '.' + CLS_TAB);
         if (this.element !== root) {
             return;
@@ -1074,12 +1087,13 @@ var Tab = /** @class */ (function (_super) {
                 setStyle(bar, { 'left': 'auto', 'right': 'auto' });
             }
         }
-        if (!isNOU(this.bdrLine)) {
+        if (!isNOU(this.bdrLine) && !trg.classList.contains(CLS_TB_POPUP)) {
             this.bdrLine.classList.remove(CLS_HIDDEN);
         }
     };
-    Tab.prototype.setActive = function (value, skipDataBind) {
+    Tab.prototype.setActive = function (value, skipDataBind, isInteracted) {
         if (skipDataBind === void 0) { skipDataBind = false; }
+        if (isInteracted === void 0) { isInteracted = false; }
         this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
         var trg = this.tbItem[value];
         if (value < 0 || isNaN(value) || this.tbItem.length === 0) {
@@ -1150,7 +1164,8 @@ var Tab = /** @class */ (function (_super) {
                 selectedItem: trg,
                 selectedIndex: value,
                 selectedContent: select('#' + CLS_CONTENT + this.tabId + '_' + this.selectingID, this.content),
-                isSwiped: this.isSwipeed
+                isSwiped: this.isSwipeed,
+                isInteracted: isInteracted
             };
             this.trigger('selected', eventArg);
         }
@@ -1242,7 +1257,7 @@ var Tab = /** @class */ (function (_super) {
         else {
             this.isPopup = false;
             if (!isNOU(trgParent) && (trgIndex !== this.selectedItem || trgIndex !== this.prevIndex)) {
-                this.select(trgIndex, args.originalEvent);
+                this.selectTab(trgIndex, args.originalEvent, true);
             }
         }
     };
@@ -1257,7 +1272,7 @@ var Tab = /** @class */ (function (_super) {
         if (e.swipeDirection === 'Right' && this.selectedItem !== 0) {
             for (var k = this.selectedItem - 1; k >= 0; k--) {
                 if (!this.tbItem[k].classList.contains(CLS_HIDDEN)) {
-                    this.select(k);
+                    this.selectTab(k, null, true);
                     break;
                 }
             }
@@ -1265,7 +1280,7 @@ var Tab = /** @class */ (function (_super) {
         else if (e.swipeDirection === 'Left' && (this.selectedItem !== selectAll('.' + CLS_TB_ITEM, this.element).length - 1)) {
             for (var i = this.selectedItem + 1; i < this.tbItem.length; i++) {
                 if (!this.tbItem[i].classList.contains(CLS_HIDDEN)) {
-                    this.select(i);
+                    this.selectTab(i, null, true);
                     break;
                 }
             }
@@ -1341,9 +1356,15 @@ var Tab = /** @class */ (function (_super) {
                 break;
         }
     };
-    Tab.prototype.refreshActElePosition = function () {
+    /**
+     * Refresh the active tab border
+     *
+     * @returns {void}
+     * @private
+     */
+    Tab.prototype.refreshActiveTabBorder = function () {
         var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE, this.element);
-        if (!isNOU(activeEle)) {
+        if (!isNOU(activeEle) && this.reorderActiveTab) {
             this.select(this.getEleIndex(activeEle));
         }
         this.refreshActiveBorder();
@@ -1686,7 +1707,7 @@ var Tab = /** @class */ (function (_super) {
                 else {
                     _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = '';
                     removeClass([_this.tbItems.querySelector('.' + CLS_INDICATOR)], CLS_HIDDEN);
-                    _this.select(_this.droppedIndex);
+                    _this.selectTab(_this.droppedIndex, null, true);
                 }
             }
         });
@@ -1694,8 +1715,8 @@ var Tab = /** @class */ (function (_super) {
     /**
      * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.
      *
-     * @param  {number} index - Index value of target Tab item.
-     * @param  {boolean} value - Boolean value that determines whether the command should be enabled or disabled.
+     * @param {number} index - Index value of target Tab item.
+     * @param {boolean} value - Boolean value that determines whether the command should be enabled or disabled.
      * By default, isEnable is true.
      * @returns {void}.
      */
@@ -1724,8 +1745,8 @@ var Tab = /** @class */ (function (_super) {
     /**
      * Adds new items to the Tab that accepts an array as Tab items.
      *
-     * @param  {TabItemModel[]} items - An array of item that is added to the Tab.
-     * @param  {number} index - Number value that determines where the items to be added. By default, index is 0.
+     * @param {TabItemModel[]} items - An array of item that is added to the Tab.
+     * @param {number} index - Number value that determines where the items to be added. By default, index is 0.
      * @returns {void}.
      */
     Tab.prototype.addTab = function (items, index) {
@@ -1810,7 +1831,7 @@ var Tab = /** @class */ (function (_super) {
     /**
      * Removes the items in the Tab from the specified index.
      *
-     * @param  {number} index - Index of target item that is going to be removed.
+     * @param {number} index - Index of target item that is going to be removed.
      * @returns {void}.
      */
     Tab.prototype.removeTab = function (index) {
@@ -1850,8 +1871,8 @@ var Tab = /** @class */ (function (_super) {
     /**
      * Shows or hides the Tab that is in the specified index.
      *
-     * @param  {number} index - Index value of target item.
-     * @param  {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.
+     * @param {number} index - Index value of target item.
+     * @param {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.
      * @returns {void}.
      */
     Tab.prototype.hideTab = function (index, value) {
@@ -1911,12 +1932,18 @@ var Tab = /** @class */ (function (_super) {
             this.tbObj.refreshOverflow();
         }
     };
+    Tab.prototype.selectTab = function (args, event, isInteracted) {
+        if (event === void 0) { event = null; }
+        if (isInteracted === void 0) { isInteracted = false; }
+        this.isInteracted = isInteracted;
+        this.select(args, event);
+    };
     /**
      * Specifies the index or HTMLElement to select an item from the Tab.
      *
-     * @param  {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.
+     * @param {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.
      * @param {Event} event - An event which takes place in DOM.
-     * @returns {void}.
+     * @returns {void}
      */
     Tab.prototype.select = function (args, event) {
         var _this = this;
@@ -1954,20 +1981,22 @@ var Tab = /** @class */ (function (_super) {
             selectingContent: !isNOU(this.content) ?
                 select('#' + CLS_CONTENT + this.tabId + '_' + this.selectingID, this.content) : null,
             isSwiped: this.isSwipeed,
+            isInteracted: this.isInteracted,
             cancel: false
         };
         if (!this.initRender) {
             this.trigger('selecting', eventArg, function (selectArgs) {
                 if (!selectArgs.cancel) {
-                    _this.selectingContent(args);
+                    _this.selectingContent(args, _this.isInteracted);
                 }
             });
         }
         else {
-            this.selectingContent(args);
+            this.selectingContent(args, this.isInteracted);
         }
+        this.isInteracted = false;
     };
-    Tab.prototype.selectingContent = function (args) {
+    Tab.prototype.selectingContent = function (args, isInteracted) {
         if (typeof args === 'number') {
             if (!isNOU(this.tbItem[args]) && (this.tbItem[args].classList.contains(CLS_DISABLE) ||
                 this.tbItem[args].classList.contains(CLS_HIDDEN))) {
@@ -1983,8 +2012,8 @@ var Tab = /** @class */ (function (_super) {
             }
             if (this.tbItem.length > args && args >= 0 && !isNaN(args)) {
                 this.prevIndex = this.selectedItem;
-                if (this.tbItem[args].classList.contains(CLS_TB_POPUP)) {
-                    this.setActive(this.popupHandler(this.tbItem[args]));
+                if (this.tbItem[args].classList.contains(CLS_TB_POPUP) && this.reorderActiveTab) {
+                    this.setActive(this.popupHandler(this.tbItem[args]), null, isInteracted);
                     if ((!isNOU(this.items) && this.items.length > 0) && this.allowDragAndDrop) {
                         this.tbItem = selectAll('.' + CLS_TB_ITEMS + ' .' + CLS_TB_ITEM, this.hdrEle);
                         var item = this.items[args];
@@ -1993,15 +2022,15 @@ var Tab = /** @class */ (function (_super) {
                     }
                 }
                 else {
-                    this.setActive(args);
+                    this.setActive(args, null, isInteracted);
                 }
             }
             else {
-                this.setActive(0);
+                this.setActive(0, null, isInteracted);
             }
         }
         else if (args instanceof (HTMLElement)) {
-            this.setActive(this.getEleIndex(args));
+            this.setActive(this.getEleIndex(args), null, isInteracted);
         }
     };
     /**
@@ -2084,6 +2113,9 @@ var Tab = /** @class */ (function (_super) {
                 case 'showCloseButton':
                     this.setCloseButton(newProp.showCloseButton);
                     break;
+                case 'reorderActiveTab':
+                    this.refreshActiveTabBorder();
+                    break;
                 case 'selectedItem':
                     this.selectedItem = oldProp.selectedItem;
                     this.select(newProp.selectedItem);
@@ -2097,7 +2129,7 @@ var Tab = /** @class */ (function (_super) {
                 case 'overflowMode':
                     this.tbObj.overflowMode = newProp.overflowMode;
                     this.tbObj.dataBind();
-                    this.refreshActElePosition();
+                    this.refreshActiveTabBorder();
                     break;
                 case 'heightAdjustMode':
                     this.setContentHeight(false);
@@ -2276,6 +2308,9 @@ var Tab = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], Tab.prototype, "showCloseButton", void 0);
+    __decorate([
+        Property(true)
+    ], Tab.prototype, "reorderActiveTab", void 0);
     __decorate([
         Property()
     ], Tab.prototype, "scrollStep", void 0);

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

@@ -1,4 +1,4 @@
-import { Component, EventHandler, Property, Event, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';import { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';import { selectAll, setStyleAttribute as setStyle, KeyboardEventArgs, select } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { calculatePosition } from '@syncfusion/ej2-popups';import { Button, IconPosition } from '@syncfusion/ej2-buttons';import { HScroll } from '../common/h-scroll';import { VScroll } from '../common/v-scroll';
+import { Component, EventHandler, Property, Event, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';import { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';import { selectAll, setStyleAttribute as setStyle, KeyboardEventArgs, select } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { calculatePosition } from '@syncfusion/ej2-popups';import { Button, IconPosition } from '@syncfusion/ej2-buttons';import { HScroll } from '../common/h-scroll';import { VScroll } from '../common/v-scroll';
 import {OverflowOption,ItemType,DisplayMode,ItemAlign,ClickEventArgs,OverflowMode,BeforeCreateArgs} from "./toolbar";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -160,7 +160,7 @@ export interface ItemModel {
     /**
      * Event triggers when `click` the toolbar item.
      *
-     * @event
+     * @event click
      */
     click?: EmitType<ClickEventArgs>;
 
@@ -241,30 +241,30 @@ export interface ToolbarModel extends ComponentModel{
     allowKeyboard?: boolean;
 
     /**
-     * The event will be fired on clicking the Toolbar elements.
+     * The event will be fired on clicking the Toolbar elements.
      *
-     * @event
+     * @event clicked
      */
     clicked?: EmitType<ClickEventArgs>;
 
     /**
      * The event will be fired when the control is rendered.
      *
-     * @event
+     * @event created
      */
     created?: EmitType<Event>;
 
     /**
      * The event will be fired when the control gets destroyed.
      *
-     * @event
+     * @event destroyed
      */
     destroyed?: EmitType<Event>;
 
     /**
      * The event will be fired before the control is rendered on a page.
      *
-     * @event
+     * @event beforeCreate
      */
     beforeCreate?: EmitType<BeforeCreateArgs>;
 

package/src/toolbar/toolbar.d.ts

@@ -182,7 +182,7 @@ export declare class Item extends ChildProperty<Item> {
     /**
      * Event triggers when `click` the toolbar item.
      *
-     * @event
+     * @event click
      */
     click: EmitType<ClickEventArgs>;
 }
@@ -280,27 +280,27 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
      */
     allowKeyboard: boolean;
     /**
-     * The event will be fired on clicking the Toolbar elements.
+     * The event will be fired on clicking the Toolbar elements.
      *
-     * @event
+     * @event clicked
      */
     clicked: EmitType<ClickEventArgs>;
     /**
      * The event will be fired when the control is rendered.
      *
-     * @event
+     * @event created
      */
     created: EmitType<Event>;
     /**
      * The event will be fired when the control gets destroyed.
      *
-     * @event
+     * @event destroyed
      */
     destroyed: EmitType<Event>;
     /**
      * The event will be fired before the control is rendered on a page.
      *
-     * @event
+     * @event beforeCreate
      */
     beforeCreate: EmitType<BeforeCreateArgs>;
     /**