feat(react, vue, angular): use tabs without router (#29794)

Issue number: resolves #25184 

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>

packages/angular/src/app-initialize.ts

@@ -20,7 +20,7 @@ export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
 
       return applyPolyfills().then(() => {
         return defineCustomElements(win, {
-          exclude: ['ion-tabs', 'ion-tab'],
+          exclude: ['ion-tabs'],
           syncQueue: true,
           raf,
           jmp: (h: any) => zone.runOutsideAngular(h),

packages/angular/src/directives/navigation/ion-tabs.ts

@@ -1,7 +1,7 @@
 import { Component, ContentChild, ContentChildren, ViewChild, QueryList } from '@angular/core';
 import { IonTabs as IonTabsBase } from '@ionic/angular/common';
 
-import { IonTabBar } from '../proxies';
+import { IonTabBar, IonTab } from '../proxies';
 
 import { IonRouterOutlet } from './ion-router-outlet';
 
@@ -11,11 +11,13 @@ import { IonRouterOutlet } from './ion-router-outlet';
     <ng-content select="[slot=top]"></ng-content>
     <div class="tabs-inner" #tabsInner>
       <ion-router-outlet
+        *ngIf="tabs.length === 0"
         #outlet
         tabs="true"
         (stackWillChange)="onStackWillChange($event)"
         (stackDidChange)="onStackDidChange($event)"
       ></ion-router-outlet>
+      <ng-content *ngIf="tabs.length > 0" select="ion-tab"></ng-content>
     </div>
     <ng-content></ng-content>
   `,
@@ -52,4 +54,5 @@ export class IonTabs extends IonTabsBase {
 
   @ContentChild(IonTabBar, { static: false }) tabBar: IonTabBar | undefined;
   @ContentChildren(IonTabBar) tabBars: QueryList<IonTabBar>;
+  @ContentChildren(IonTab) tabs: QueryList<IonTab>;
 }

packages/angular/src/directives/proxies-list.ts

@@ -74,6 +74,7 @@ export const DIRECTIVES = [
   d.IonSkeletonText,
   d.IonSpinner,
   d.IonSplitPane,
+  d.IonTab,
   d.IonTabBar,
   d.IonTabButton,
   d.IonText,

packages/angular/src/directives/proxies.ts

@@ -2148,6 +2148,29 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
 }
 
 
+@ProxyCmp({
+  inputs: ['component', 'tab'],
+  methods: ['setActive']
+})
+@Component({
+  selector: 'ion-tab',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['component', 'tab'],
+})
+export class IonTab {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface IonTab extends Components.IonTab {}
+
+
 @ProxyCmp({
   inputs: ['color', 'mode', 'selectedTab', 'translucent']
 })