Merge branch 'main' into chore-update-from-main-2

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

@@ -2154,6 +2154,29 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
 }
 
 
+@ProxyCmp({
+  inputs: ['component', 'mode', 'tab', 'theme'],
+  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', 'mode', 'tab', 'theme'],
+})
+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', 'theme', 'translucent']
 })