version update

core/src/components.d.ts

@@ -12,17 +12,19 @@ export namespace Components {
           * Returns the root scrollable element
          */
         "getRootScrollableEl": () => Promise<HTMLElement | null>;
+        "loaded": boolean;
         /**
           * Set this to true to prevent vertical scrolling of this tab. Defaults to `false`.  This property will automatically be set to true if there is a direct child element of `ion-content`. To override this behaviour make sure to explicitly set this property to `false`.
          */
         "noScroll": boolean;
+        "visible": boolean;
     }
     interface SuperTabButton {
         "active"?: boolean;
         /**
           * Whether the button is disabled
          */
-        "disabled": boolean;
+        "disabled"?: boolean;
         "index"?: number;
         "scrollableContainer": boolean;
     }
@@ -154,10 +156,12 @@ declare global {
 }
 declare namespace LocalJSX {
     interface SuperTab {
+        "loaded"?: boolean;
         /**
           * Set this to true to prevent vertical scrolling of this tab. Defaults to `false`.  This property will automatically be set to true if there is a direct child element of `ion-content`. To override this behaviour make sure to explicitly set this property to `false`.
          */
         "noScroll": boolean;
+        "visible"?: boolean;
     }
     interface SuperTabButton {
         "active"?: boolean;

core/src/interface.d.ts

@@ -78,6 +78,9 @@ export interface SuperTabsConfig {
   avoidElements?: boolean;
 
   nativeSmoothScroll?: boolean;
+
+  lazyLoad?: boolean;
+  unloadWhenInvisible?: boolean;
 }
 
 /**
@@ -88,7 +91,7 @@ export interface SuperTabChangeEventDetail {
    * Selected tab index.
    */
   index: number;
-  
+
   /**
    * Indicates whether the tab index has changed.
    */

core/src/super-tab-button/readme.md

@@ -7,9 +7,9 @@
 
 ## Properties
 
-| Property   | Attribute  | Description                    | Type      | Default |
-| ---------- | ---------- | ------------------------------ | --------- | ------- |
-| `disabled` | `disabled` | Whether the button is disabled | `boolean` | `false` |
+| Property   | Attribute  | Description                    | Type                   | Default     |
+| ---------- | ---------- | ------------------------------ | ---------------------- | ----------- |
+| `disabled` | `disabled` | Whether the button is disabled | `boolean \| undefined` | `undefined` |
 
 
 ## CSS Custom Properties

core/src/super-tab-button/super-tab-button.component.tsx

@@ -20,7 +20,7 @@ export class SuperTabButtonComponent implements ComponentInterface {
   /**
    * Whether the button is disabled
    */
-  @Prop({ reflectToAttr: true }) disabled: boolean = false;
+  @Prop({ reflectToAttr: true }) disabled?: boolean;
 
   /** @internal */
   @Prop() scrollableContainer: boolean = false;
@@ -66,8 +66,8 @@ export class SuperTabButtonComponent implements ComponentInterface {
         aria-disabled={this.disabled ? 'true' : false}
         aria-selected={this.active ? 'true' : 'false'}
         class={{
-          'ion-activatable': !this.disabled,
-          'ion-focusable': !this.disabled,
+          'ion-activatable': true,
+          'ion-focusable': true,
           'icon-only': !!this.icon && !this.label,
           'label-only': !!this.label && !this.icon,
           active: Boolean(this.active),

core/src/super-tab/readme.md

@@ -9,7 +9,9 @@
 
 | Property                | Attribute   | Description                                                                                                                                                                                                                                                             | Type      | Default     |
 | ----------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `loaded`                | `loaded`    |                                                                                                                                                                                                                                                                         | `boolean` | `false`     |
 | `noScroll` _(required)_ | `no-scroll` | Set this to true to prevent vertical scrolling of this tab. Defaults to `false`.  This property will automatically be set to true if there is a direct child element of `ion-content`. To override this behaviour make sure to explicitly set this property to `false`. | `boolean` | `undefined` |
+| `visible`               | `visible`   |                                                                                                                                                                                                                                                                         | `boolean` | `false`     |
 
 
 ## Methods

core/src/super-tab/super-tab.component.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, h, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, h, Host, Method, Prop } from '@stencil/core';
 
 
 @Component({
@@ -21,6 +21,9 @@ export class SuperTabComponent implements ComponentInterface {
     reflect: true,
   }) noScroll!: boolean;
 
+  @Prop() loaded = false;
+  @Prop() visible = false;
+
   componentDidLoad() {
     this.checkIonContent();
   }
@@ -67,6 +70,10 @@ export class SuperTabComponent implements ComponentInterface {
   }
 
   render() {
-    return <slot/>;
+    return <Host style={{ visibility: this.visible ? 'visible' : 'hidden' }}>
+      {
+        this.loaded ? <slot></slot> : null
+      }
+    </Host>;
   }
 }

core/src/super-tabs-container/super-tabs-container.component.tsx

@@ -14,7 +14,6 @@ import {
 import { SuperTabsConfig } from '../interface';
 import { checkGesture, debugLog, getTs, pointerCoord, scrollEl, STCoord } from '../utils';
 
-
 @Component({
   tag: 'super-tabs-container',
   styleUrl: 'super-tabs-container.component.scss',
@@ -127,7 +126,7 @@ export class SuperTabsContainerComponent implements ComponentInterface {
   @Method()
   moveContainer(scrollX: number, animate?: boolean): Promise<void> {
     if (animate) {
-      scrollEl(this.el, scrollX, 0, this.config!.nativeSmoothScroll!, this.config!.transitionDuration);
+      scrollEl(this.el, scrollX, this.config!.nativeSmoothScroll!, this.config!.transitionDuration);
     } else {
       this.el.scroll(scrollX, 0);
     }
@@ -145,14 +144,14 @@ export class SuperTabsContainerComponent implements ComponentInterface {
         return;
       }
 
-      this.scrollToTop();
+      await this.scrollToTop();
     }
 
     if (moveContainer) {
-      this.moveContainerByIndex(index, animate);
+      await this.moveContainerByIndex(index, animate);
     }
 
-    this.updateActiveTabIndex(index, false);
+    await this.updateActiveTabIndex(index, false);
   }
 
   /**
@@ -161,30 +160,34 @@ export class SuperTabsContainerComponent implements ComponentInterface {
   @Method()
   async scrollToTop() {
     if (this._activeTabIndex === undefined || this.tabs === undefined) {
-      this.debug('scrollToTop', 'activeTabIndex or tabs was undefined', this._activeTabIndex, this.tabs);
+      this.debug('activeTabIndex or tabs was undefined');
       return;
     }
 
     const current = this.tabs[this._activeTabIndex];
-
-    if (!current) {
-      this.debug('Current active tab was undefined in scrollToTop');
-      return;
-    }
-
-    const el = await current.getRootScrollableEl();
-    if (el) {
-      scrollEl(el, 0, 0, this.config!.nativeSmoothScroll!, this.config!.transitionDuration);
-    } else {
-      this.debug('scrollToTop', 'couldnt find a scrollable element');
-    }
+    this.queue.read(() => {
+      if (!current) {
+        this.debug('Current active tab was undefined in scrollToTop');
+        return;
+      }
+      //  deepcode ignore PromiseNotCaughtGeneral: <comment the reason here>
+      current.getRootScrollableEl().then((el) => {
+        if (el) {
+          scrollEl(el, 0, this.config!.nativeSmoothScroll!, this.config!.transitionDuration);
+        }
+      });
+    });
   }
 
   private updateActiveTabIndex(index: number, emit: boolean = true) {
     this.debug('updateActiveTabIndex', index, emit, this._activeTabIndex);
 
     this._activeTabIndex = index;
     emit && this.activeTabIndexChange.emit(this._activeTabIndex);
+
+    if (this.config!.lazyLoad) {
+      this.lazyLoadTabs();
+    }
   }
 
   private updateSelectedTabIndex(index: number) {
@@ -336,12 +339,15 @@ export class SuperTabsContainerComponent implements ComponentInterface {
 
     this.debug('indexTab', this.scrollWidth, this.width);
 
-    await Promise.all(tabs.map(t => t.componentOnReady()));
+    await Promise.all(tabs.map((t) => t.componentOnReady()));
     this.tabs = tabs;
+
     if (this.ready && typeof this._activeTabIndex === 'number') {
       this.moveContainerByIndex(this._activeTabIndex, true);
     }
 
+    this.lazyLoadTabs();
+
     if (this.config) {
       switch (this.config.sideMenu) {
         case 'both':
@@ -357,13 +363,49 @@ export class SuperTabsContainerComponent implements ComponentInterface {
     }
 
     if (this._activeTabIndex !== undefined) {
-      this.moveContainerByIndex(this._activeTabIndex, false)
-        .then(() => {
-          this.ready = true;
-        });
+      this.moveContainerByIndex(this._activeTabIndex, false).then(() => {
+        this.ready = true;
+      });
     }
   }
 
+  private lazyLoadTabs() {
+    if (typeof this._activeTabIndex === 'undefined') {
+      this.debug('lazyLoadTabs', 'called when _activeTabIndex is undefined');
+      return;
+    }
+
+    if (!this.config) {
+      this.debug('lazyLoadTabs', 'called with no config available');
+      return;
+    }
+
+    if (!this.config!.lazyLoad) {
+      this.tabs.forEach((t: HTMLSuperTabElement) => {
+        t.loaded = true;
+        t.visible = true;
+      });
+      return;
+    }
+
+    const activeTab = this._activeTabIndex;
+    const tabs = [...this.tabs];
+
+    const min = activeTab - 1;
+    const max = activeTab + 1;
+
+    let index = 0;
+
+    for (const tab of tabs) {
+      tab.visible = index >= min && index <= max;
+
+      tab.loaded = tab.visible || (this.config!.unloadWhenInvisible ? false : tab.loaded);
+
+      index++;
+    }
+    this.tabs = tabs;
+  }
+
   private calcSelectedTab(): number {
     const scrollX = Math.max(0, Math.min(this.scrollWidth - this.width, this.el.scrollLeft));
     return this.positionToIndex(scrollX);

core/src/super-tabs-toolbar/super-tabs-toolbar.component.tsx

@@ -156,7 +156,7 @@ export class SuperTabsToolbarComponent implements ComponentInterface {
       return Promise.resolve();
     }
 
-    scrollEl(this.buttonsContainerEl, scrollX, 0, this.config!.nativeSmoothScroll!, animate ? this.config!.transitionDuration : 0);
+    scrollEl(this.buttonsContainerEl, scrollX, this.config!.nativeSmoothScroll!, animate ? this.config!.transitionDuration : 0);
     return Promise.resolve();
   }
 
@@ -197,10 +197,6 @@ export class SuperTabsToolbarComponent implements ComponentInterface {
   }
 
   private onButtonClick(button: HTMLSuperTabButtonElement) {
-    if (!button || button.disabled) {
-      return;
-    }
-
     this.lastClickTs = Date.now();
     this.setActiveTab(button.index as number, true, true);
     this.buttonClick.emit(button);
@@ -412,7 +408,7 @@ export class SuperTabsToolbarComponent implements ComponentInterface {
     }
 
     if (!animate) {
-      scrollEl(this.buttonsContainerEl, pos!, 0, false, 50);
+      scrollEl(this.buttonsContainerEl, pos!, false, 50);
     } else {
       this.moveContainer(pos!, animate);
     }

core/src/super-tabs/super-tabs.component.tsx

@@ -141,12 +141,14 @@ export class SuperTabsComponent implements ComponentInterface {
 
     // set the selected tab so the toolbar & container are aligned and in sync
 
-    if (this.container) {
-      this.container.setActiveTabIndex(this.activeTabIndex, true, false);
-    }
+    if (this.activeTabIndex > 0) {
+      if (this.container) {
+        this.container.setActiveTabIndex(this.activeTabIndex, true, false);
+      }
 
-    if (this.toolbar) {
-      this.toolbar.setActiveTab(this.activeTabIndex, true, false);
+      if (this.toolbar) {
+        this.toolbar.setActiveTab(this.activeTabIndex, true, false);
+      }
     }
 
     // listen to `slotchange` event to detect any changes in children
@@ -169,12 +171,14 @@ export class SuperTabsComponent implements ComponentInterface {
       }
     }
 
-    if (this.container) {
-      this.container.setActiveTabIndex(this.activeTabIndex, true, false);
-    }
+    if (this.activeTabIndex > 0) {
+      if (this.container) {
+        this.container.moveContainerByIndex(this.activeTabIndex, false);
+      }
 
-    if (this.toolbar) {
-      this.toolbar.setActiveTab(this.activeTabIndex, true);
+      if (this.toolbar) {
+        this.toolbar.setActiveTab(this.activeTabIndex, true);
+      }
     }
 
     this.propagateConfig();