@syncfusion/ej2-navigations 27.2.5 → 28.1.33-686179

package/src/tab/tab.d.ts

@@ -25,6 +25,14 @@ export declare type HeaderPosition = 'Top' | 'Bottom' | 'Left' | 'Right';
  * ```
  */
 export declare type HeightStyles = 'None' | 'Auto' | 'Content' | 'Fill';
+/**
+ * Enables or disables the tab swiping action through Touch and Mouse.
+ * - `Both`: Enables swiping for both touch and mouse input.
+ * - `Touch`: Enables swiping only for touch input.
+ * - `Mouse`: Enables swiping only for mouse input.
+ * - `None`: Disables swiping for both touch and mouse input.
+ */
+export declare type TabSwipeMode = 'Both' | 'Touch' | 'Mouse' | 'None';
 /**
  * Specifies the options of Tab content display mode.
  * ```props
@@ -308,6 +316,18 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
      * @default '100%'
      */
     width: string | number;
+    /**
+     * Defines whether the tab transition should occur or not when performing Touch/Mouse swipe action.
+     *
+     * @remarks
+     * - `Both`: Enables swiping for both touch and mouse input.
+     * - `Touch`: Enables swiping only for touch input.
+     * - `Mouse`: Enables swiping only for mouse input.
+     * - `None`: Disables swiping for both touch and mouse input.
+     *
+     * @default "Both"
+     */
+    swipeMode: TabSwipeMode;
     /**
      * Specifies the height of the Tab component. By default, Tab height is set based on the height of its parent.
      * To use height property, heightAdjustMode must be set to 'None'.
@@ -368,9 +388,9 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
      * * `Dynamic` - The content of all the tabs are rendered on the initial load and maintained in the DOM.
      * * `Init` - The content of all the tabs are rendered on the initial load and maintained in the DOM.
      *
-     * @default 'Dynamic'
+     * @default 'Demand'
      */
-    protected loadOn: ContentLoad;
+    loadOn: ContentLoad;
     /**
      * Enable or disable persisting component's state between page reloads.
      * If enabled, following list of states will be persisted.
@@ -539,6 +559,7 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     protected render(): void;
     private renderContainer;
     private renderHeader;
+    private createContentElement;
     private renderContent;
     private reRenderItems;
     private parseObject;
@@ -569,6 +590,8 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private changeToolbarOrientation;
     private setOrientation;
     private setCssClass;
+    private loadContentInitMode;
+    private loadContentElement;
     private setContentHeight;
     private getHeight;
     private setActiveBorder;
@@ -578,6 +601,7 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private refreshActiveBorder;
     private showPopup;
     private bindDraggable;
+    private bindSwipeEvents;
     private wireEvents;
     private unWireEvents;
     private clickHandler;

package/src/tab/tab.js

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { Component, Property, Event, closest, Collection, Complex, attributes, detach, isNullOrUndefined, animationMode } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';
 import { KeyboardEvents, Browser, formatUnit, L10n } from '@syncfusion/ej2-base';
@@ -453,6 +453,17 @@ var Tab = /** @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.createContentElement = function (index) {
+        var contentElement = this.createElement('div', {
+            id: CLS_CONTENT + this.tabId + '_' + index, className: CLS_ITEM,
+            attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + index }
+        });
+        if (['Dynamic', 'Demand'].indexOf(this.loadOn) !== -1 ||
+            (this.loadOn === 'Init' && index === Number(this.extIndex(this.itemIndexArray[0])))) {
+            addClass([contentElement], CLS_ACTIVE);
+        }
+        return contentElement;
+    };
     Tab.prototype.renderContent = function () {
         this.cntEle = select('.' + CLS_CONTENT, this.element);
         var hdrItem = selectAll('.' + CLS_TB_ITEM, this.element);
@@ -467,11 +478,26 @@ var Tab = /** @class */ (function (_super) {
                 }
             }
         }
+        else {
+            if (selectAll('.' + CLS_TB_ITEM, this.element).length > 0) {
+                if (this.loadOn === 'Init') {
+                    for (var i = 0; i < this.itemIndexArray.length; i++) {
+                        if (this.itemIndexArray[i]) {
+                            this.cntEle.appendChild(this.createContentElement(Number(this.extIndex(this.itemIndexArray[i]))));
+                        }
+                    }
+                }
+                else if (this.loadOn === 'Dynamic') {
+                    this.cntEle.appendChild(this.createContentElement(this.selectedItem > 0 ?
+                        this.selectedItem : Number(this.extIndex(this.itemIndexArray[0]))));
+                }
+            }
+        }
     };
     Tab.prototype.reRenderItems = function () {
         this.renderContainer();
         if (!isNOU(this.cntEle)) {
-            this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });
+            this.bindSwipeEvents();
         }
     };
     Tab.prototype.parseObject = function (items, index) {
@@ -974,6 +1000,24 @@ var Tab = /** @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.loadContentInitMode = function (ele) {
+        if (!ele) {
+            return;
+        }
+        if (this.loadOn === 'Init') {
+            for (var i = 0; i < this.items.length; i++) {
+                if (this.cntEle.children.item(i)) {
+                    this.getContent(this.cntEle.children.item(i), this.items[i].content, 'render', i);
+                }
+            }
+        }
+    };
+    Tab.prototype.loadContentElement = function () {
+        if (!this.isTemplate) {
+            var ele = this.cntEle.children.item(0);
+            this.loadContentInitMode(ele);
+        }
+    };
     Tab.prototype.setContentHeight = function (val) {
         if (this.element.classList.contains(CLS_FILL)) {
             removeClass([this.element], [CLS_FILL]);
@@ -983,6 +1027,7 @@ var Tab = /** @class */ (function (_super) {
         }
         var hdrEle = this.getTabHeader();
         if (this.heightAdjustMode === 'None') {
+            this.loadContentElement();
             if (this.height === 'auto') {
                 return;
             }
@@ -995,6 +1040,7 @@ var Tab = /** @class */ (function (_super) {
         else if (this.heightAdjustMode === 'Fill') {
             addClass([this.element], [CLS_FILL]);
             setStyle(this.element, { 'height': '100%' });
+            this.loadContentElement();
             this.cntEle.style.height = 'calc(100% - ' + this.hdrEle.offsetHeight + 'px)';
         }
         else if (this.heightAdjustMode === 'Auto') {
@@ -1009,11 +1055,8 @@ var Tab = /** @class */ (function (_super) {
             }
             else {
                 this.cntEle = select('.' + CLS_CONTENT, this.element);
-                if (val === true) {
-                    this.cntEle.appendChild(this.createElement('div', {
-                        id: (CLS_CONTENT + this.tabId + '_' + 0), className: CLS_ITEM + ' ' + CLS_ACTIVE,
-                        attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + 0 }
-                    }));
+                if (val === true && this.loadOn === 'Demand') {
+                    this.cntEle.appendChild(this.createContentElement(Number(this.extIndex(this.itemIndexArray[0]))));
                 }
                 var ele = this.cntEle.children.item(0);
                 for (var i = 0; i < this.items.length; i++) {
@@ -1027,7 +1070,10 @@ var Tab = /** @class */ (function (_super) {
                     this.clearTemplate(['content']);
                 }
                 this.templateEle = [];
-                this.getContent(ele, this.items[0].content, 'render', 0);
+                if (this.loadOn === 'Demand') {
+                    this.getContent(ele, this.items[0].content, 'render', 0);
+                }
+                this.loadContentInitMode(ele);
                 if (this.prevIndex !== this.selectedItem) {
                     ele.classList.remove(CLS_ACTIVE);
                 }
@@ -1035,6 +1081,7 @@ var Tab = /** @class */ (function (_super) {
             setStyle(this.cntEle, { 'height': this.maxHeight + 'px' });
         }
         else {
+            this.loadContentElement();
             setStyle(this.cntEle, { 'height': 'auto' });
         }
     };
@@ -1118,7 +1165,7 @@ var Tab = /** @class */ (function (_super) {
             return;
         }
         if (!this.isTemplate) {
-            attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT + this.tabId + '_' + value });
+            attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT + this.tabId + '_' + this.extIndex(trg.id) });
         }
         var id = trg.id;
         this.removeActiveClass();
@@ -1139,6 +1186,9 @@ var Tab = /** @class */ (function (_super) {
         }
         else {
             this.cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);
+            while (this.loadOn === 'Dynamic' && this.cntEle.firstElementChild) {
+                this.cntEle.removeChild(this.cntEle.firstElementChild);
+            }
             var item = this.getTrgContent(this.cntEle, this.extIndex(id));
             if (isNOU(item)) {
                 this.cntEle.appendChild(this.createElement('div', {
@@ -1214,13 +1264,18 @@ var Tab = /** @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.bindSwipeEvents = function () {
+        if (this.swipeMode !== 'None') {
+            this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });
+        }
+    };
     Tab.prototype.wireEvents = function () {
         this.bindDraggable();
         window.addEventListener('resize', this.resizeContext);
         EventHandler.add(this.element, 'mouseover', this.hoverHandler, this);
         EventHandler.add(this.element, 'keydown', this.spaceKeyDown, this);
         if (!isNOU(this.cntEle)) {
-            this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });
+            this.bindSwipeEvents();
         }
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
         this.tabKeyModule = new KeyboardEvents(this.element, {
@@ -1265,7 +1320,9 @@ var Tab = /** @class */ (function (_super) {
         }
     };
     Tab.prototype.swipeHandler = function (e) {
-        if (e.velocity < 3 && isNOU(e.originalEvent.changedTouches)) {
+        if ((e.velocity < 3 && isNullOrUndefined(e.originalEvent.changedTouches)) ||
+            (this.swipeMode === 'Touch' && ((e.originalEvent.type === 'mouseup') || e.originalEvent.type === 'mouseleave')) ||
+            (this.swipeMode === 'Mouse' && e.originalEvent.type === 'touchend') || (this.swipeMode === 'None')) {
             return;
         }
         if (this.isNested) {
@@ -1862,7 +1919,7 @@ var Tab = /** @class */ (function (_super) {
                     _this.items.splice((index + i_1), 0, item);
                     i_1++;
                 }
-                if (_this.isTemplate && !isNOU(item.header) && !isNOU(item.header.text)) {
+                if (!isNOU(item.header) && !isNOU(item.header.text) && (_this.isTemplate || _this.loadOn === 'Init')) {
                     var no = lastEleIndex + place;
                     var ele = _this.createElement('div', {
                         id: CLS_CONTENT + _this.tabId + '_' + no, className: CLS_ITEM,
@@ -2253,6 +2310,13 @@ var Tab = /** @class */ (function (_super) {
                 case 'allowDragAndDrop':
                     this.bindDraggable();
                     break;
+                case 'swipeMode':
+                    if (this.touchModule) {
+                        this.touchModule.destroy();
+                        this.touchModule = null;
+                    }
+                    this.bindSwipeEvents();
+                    break;
                 case 'dragArea':
                     if (this.allowDragAndDrop) {
                         this.draggableItems.forEach(function (item) {
@@ -2404,6 +2468,9 @@ var Tab = /** @class */ (function (_super) {
     __decorate([
         Property('100%')
     ], Tab.prototype, "width", void 0);
+    __decorate([
+        Property('Both')
+    ], Tab.prototype, "swipeMode", void 0);
     __decorate([
         Property('auto')
     ], Tab.prototype, "height", void 0);
@@ -2423,7 +2490,7 @@ var Tab = /** @class */ (function (_super) {
         Property('Scrollable')
     ], Tab.prototype, "overflowMode", void 0);
     __decorate([
-        Property('Dynamic')
+        Property('Demand')
     ], Tab.prototype, "loadOn", void 0);
     __decorate([
         Property(false)