@ionic/angular 8.8.9-dev.11781024903.1e4268e5 → 8.8.9-dev.11781098612.122c6758

package/fesm2022/ionic-angular-common.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, Optional, InjectionToken, inject, NgZone, ApplicationRef, Injector, createComponent, TemplateRef, Directive, ContentChild, EventEmitter, ViewContainerRef, EnvironmentInjector, Attribute, SkipSelf, Input, Output, reflectComponentType, HostListener, ElementRef, ViewChild } from '@angular/core';
+import { Injectable, Inject, Optional, InjectionToken, inject, NgZone, ApplicationRef, Injector, createComponent, TemplateRef, ContentChild, Directive, EventEmitter, ViewContainerRef, EnvironmentInjector, Output, Input, Attribute, SkipSelf, reflectComponentType, HostListener, ElementRef, ViewChild } from '@angular/core';
 import * as i3 from '@angular/router';
 import { NavigationStart, NavigationCancel, NavigationError, PRIMARY_OUTLET, ChildrenOutletContexts, ActivatedRoute, Router } from '@angular/router';
 import * as i1 from '@angular/common';
@@ -25,10 +25,10 @@ class DomController {
     write(cb) {
         getQueue().write(cb);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DomController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DomController, providedIn: 'root' });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DomController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DomController, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DomController, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DomController, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -228,7 +228,6 @@ class Platform {
                 }, { once: true });
             }
             else {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 readyResolve('dom');
             }
         });
@@ -382,18 +381,18 @@ class Platform {
     height() {
         return this.win.innerHeight;
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Platform, deps: [{ token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Platform, providedIn: 'root' });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: Platform, deps: [{ token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: Platform, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Platform, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: Platform, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.NgZone }]; } });
+                }] }, { type: i0.NgZone }] });
 const readQueryParam = (url, key) => {
     key = key.replace(/[[\]\\]/g, '\\$&');
     const regex = new RegExp('[\\?&]' + key + '=([^&#]*)');
@@ -591,7 +590,6 @@ class NavController {
     }
     navigate(url, options) {
         if (Array.isArray(url)) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             return this.router.navigate(url, options);
         }
         else {
@@ -613,21 +611,20 @@ class NavController {
              * that do not modify the url, such as `replaceUrl` which is why
              * `options` is passed in here.
              */
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             return this.router.navigateByUrl(urlTree, options);
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavController, deps: [{ token: Platform }, { token: i1.Location }, { token: i3.UrlSerializer }, { token: i3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavController, providedIn: 'root' });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NavController, deps: [{ token: Platform }, { token: i1.Location }, { token: i3.UrlSerializer }, { token: i3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NavController, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavController, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NavController, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: Platform }, { type: i1.Location }, { type: i3.UrlSerializer }, { type: i3.Router, decorators: [{
+        }], ctorParameters: () => [{ type: Platform }, { type: i1.Location }, { type: i3.UrlSerializer }, { type: i3.Router, decorators: [{
                     type: Optional
-                }] }]; } });
+                }] }] });
 const getAnimation = (direction, animated, animationDirection) => {
     if (animated === false) {
         return undefined;
@@ -668,10 +665,10 @@ class Config {
         }
         return 0;
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Config, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Config, providedIn: 'root' });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: Config, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: Config, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Config, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: Config, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -745,10 +742,10 @@ class AngularDelegate {
     create(environmentInjector, injector, elementReferenceKey, customInjector) {
         return new AngularFrameworkDelegate(environmentInjector, injector, this.applicationRef, this.zone, elementReferenceKey, this.config.useSetInputAPI ?? false, customInjector);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularDelegate, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularDelegate });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: AngularDelegate, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: AngularDelegate });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularDelegate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: AngularDelegate, decorators: [{
             type: Injectable
         }] });
 class AngularFrameworkDelegate {
@@ -890,9 +887,18 @@ const attachView = (zone, environmentInjector, injector, applicationRef, elRefMa
             hostElement.classList.add(cssClass);
         }
     }
-    const unbindEvents = bindLifecycleEvents(zone, instance, hostElement);
+    const unbindEvents = bindLifecycleEvents(zone, componentRef.changeDetectorRef, instance, hostElement);
     container.appendChild(hostElement);
     applicationRef.attachView(componentRef.hostView);
+    /**
+     * Run change detection on the freshly attached view so Angular's init hooks
+     * (`ngOnInit`, `ngAfterViewInit`) fire before the web component dispatches its
+     * Ionic lifecycle events (`ionViewWillEnter`, etc.). `createComponent` only runs
+     * the creation pass. The init hooks run during an update pass. Under Zone.js an
+     * implicit tick used to cover this, but zoneless Angular schedules no such tick,
+     * so without this the first `ionViewWillEnter` could run before `ngOnInit`.
+     */
+    componentRef.changeDetectorRef.detectChanges();
     elRefMap.set(hostElement, componentRef);
     elEventsMap.set(hostElement, unbindEvents);
     return hostElement;
@@ -904,10 +910,24 @@ const LIFECYCLES = [
     LIFECYCLE_DID_LEAVE,
     LIFECYCLE_WILL_UNLOAD,
 ];
-const bindLifecycleEvents = (zone, instance, element) => {
+const bindLifecycleEvents = (zone, changeDetectorRef, instance, element) => {
+    /**
+     * `zone.run` keeps the listener registration (and, under Zone.js, the handler
+     * execution) inside the Angular zone, so async work started inside a lifecycle
+     * hook is still zone-tracked. Under zoneless Angular it is a passthrough.
+     */
     return zone.run(() => {
         const unregisters = LIFECYCLES.filter((eventName) => typeof instance[eventName] === 'function').map((eventName) => {
-            const handler = (ev) => instance[eventName](ev.detail);
+            const handler = (ev) => {
+                instance[eventName](ev.detail);
+                /**
+                 * Ionic lifecycle events (`ionViewWillEnter`, etc.) are dispatched from
+                 * the web component via a native event listener, so under zoneless
+                 * Angular nothing schedules change detection for state the hook mutates.
+                 * Mark the view dirty explicitly. This is a no-op-or-better under Zone.js.
+                 */
+                changeDetectorRef.markForCheck();
+            };
             element.addEventListener(eventName, handler);
             return () => element.removeEventListener(eventName, handler);
         });
@@ -1010,14 +1030,7 @@ const MODAL_METHODS = [
     'setCurrentBreakpoint',
     'getCurrentBreakpoint',
 ];
-let IonModal = 
-/**
- * @Component extends from @Directive
- * so by defining the inputs here we
- * do not need to re-define them for the
- * lazy loaded popover.
- */
-class IonModal {
+let IonModal = class IonModal {
     z;
     // TODO(FW-2827): type
     template;
@@ -1049,8 +1062,8 @@ class IonModal {
             'ionDragEnd',
         ]);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonModal, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonModal, selector: "ion-modal", inputs: { animated: "animated", keepContentsMounted: "keepContentsMounted", backdropBreakpoint: "backdropBreakpoint", backdropDismiss: "backdropDismiss", breakpoints: "breakpoints", canDismiss: "canDismiss", cssClass: "cssClass", enterAnimation: "enterAnimation", expandToScroll: "expandToScroll", event: "event", focusTrap: "focusTrap", handle: "handle", handleBehavior: "handleBehavior", initialBreakpoint: "initialBreakpoint", isOpen: "isOpen", keyboardClose: "keyboardClose", leaveAnimation: "leaveAnimation", mode: "mode", presentingElement: "presentingElement", showBackdrop: "showBackdrop", translucent: "translucent", trigger: "trigger" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonModal, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: IonModal, isStandalone: true, selector: "ion-modal", inputs: { animated: "animated", keepContentsMounted: "keepContentsMounted", backdropBreakpoint: "backdropBreakpoint", backdropDismiss: "backdropDismiss", breakpoints: "breakpoints", canDismiss: "canDismiss", cssClass: "cssClass", enterAnimation: "enterAnimation", expandToScroll: "expandToScroll", event: "event", focusTrap: "focusTrap", handle: "handle", handleBehavior: "handleBehavior", initialBreakpoint: "initialBreakpoint", isOpen: "isOpen", keyboardClose: "keyboardClose", leaveAnimation: "leaveAnimation", mode: "mode", presentingElement: "presentingElement", showBackdrop: "showBackdrop", translucent: "translucent", trigger: "trigger" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
 };
 IonModal = __decorate([
     ProxyCmp({
@@ -1064,14 +1077,14 @@ IonModal = __decorate([
      * lazy loaded popover.
      */
 ], IonModal);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonModal, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ion-modal',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                     inputs: MODAL_INPUTS,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { template: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { template: [{
                 type: ContentChild,
                 args: [TemplateRef, { static: false }]
             }] } });
@@ -1100,14 +1113,7 @@ const POPOVER_INPUTS = [
     'side',
 ];
 const POPOVER_METHODS = ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss'];
-let IonPopover = 
-/**
- * @Component extends from @Directive
- * so by defining the inputs here we
- * do not need to re-define them for the
- * lazy loaded popover.
- */
-class IonPopover {
+let IonPopover = class IonPopover {
     z;
     // TODO(FW-2827): type
     template;
@@ -1135,8 +1141,8 @@ class IonPopover {
             'didDismiss',
         ]);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonPopover, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonPopover, selector: "ion-popover", inputs: { alignment: "alignment", animated: "animated", arrow: "arrow", keepContentsMounted: "keepContentsMounted", backdropDismiss: "backdropDismiss", cssClass: "cssClass", dismissOnSelect: "dismissOnSelect", enterAnimation: "enterAnimation", event: "event", focusTrap: "focusTrap", isOpen: "isOpen", keyboardClose: "keyboardClose", leaveAnimation: "leaveAnimation", mode: "mode", showBackdrop: "showBackdrop", translucent: "translucent", trigger: "trigger", triggerAction: "triggerAction", reference: "reference", size: "size", side: "side" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonPopover, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: IonPopover, isStandalone: true, selector: "ion-popover", inputs: { alignment: "alignment", animated: "animated", arrow: "arrow", keepContentsMounted: "keepContentsMounted", backdropDismiss: "backdropDismiss", cssClass: "cssClass", dismissOnSelect: "dismissOnSelect", enterAnimation: "enterAnimation", event: "event", focusTrap: "focusTrap", isOpen: "isOpen", keyboardClose: "keyboardClose", leaveAnimation: "leaveAnimation", mode: "mode", showBackdrop: "showBackdrop", translucent: "translucent", trigger: "trigger", triggerAction: "triggerAction", reference: "reference", size: "size", side: "side" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
 };
 IonPopover = __decorate([
     ProxyCmp({
@@ -1150,14 +1156,14 @@ IonPopover = __decorate([
      * lazy loaded popover.
      */
 ], IonPopover);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonPopover, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ion-popover',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                     inputs: POPOVER_INPUTS,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { template: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { template: [{
                 type: ContentChild,
                 args: [TemplateRef, { static: false }]
             }] } });
@@ -1259,7 +1265,7 @@ class StackController {
     createView(ref, activatedRoute) {
         const url = getUrl(this.router, activatedRoute);
         const element = ref?.location?.nativeElement;
-        const unlistenEvents = bindLifecycleEvents(this.zone, ref.instance, element);
+        const unlistenEvents = bindLifecycleEvents(this.zone, ref.changeDetectorRef, ref.instance, element);
         return {
             id: this.nextId++,
             stackId: computeStackId(this.tabsPrefix, url),
@@ -1425,7 +1431,6 @@ class StackController {
         return this.runningTask !== undefined;
     }
     destroy() {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         this.containerEl = undefined;
         this.views.forEach(destroyView);
         this.activeView = undefined;
@@ -1567,6 +1572,7 @@ class IonRouterOutlet {
                 onEnd: (shouldContinue) => this.stackCtrl.endBackTransition(shouldContinue),
             }
             : undefined;
+        this.nativeEl.swipeGesture = swipe;
     }
     constructor(name, tabs, commonLocation, elementRef, router, zone, activatedRoute, parentOutlet) {
         this.parentOutlet = parentOutlet;
@@ -1639,7 +1645,6 @@ class IonRouterOutlet {
     deactivate() {
         if (this.activated) {
             if (this.activatedView) {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 const context = this.getContext();
                 this.activatedView.savedData = new Map(context.children['contexts']);
                 /**
@@ -1684,7 +1689,6 @@ class IonRouterOutlet {
             const saved = enteringView.savedData;
             if (saved) {
                 // self-restore
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 const context = this.getContext();
                 context.children['contexts'] = saved;
             }
@@ -1705,7 +1709,6 @@ class IonRouterOutlet {
             const component$ = new BehaviorSubject(null);
             const activatedRouteProxy = this.createActivatedRouteProxy(component$, activatedRoute);
             const injector = new OutletInjector(activatedRouteProxy, childContexts, this.location.injector);
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             const component = snapshot.routeConfig.component ?? snapshot.component;
             /**
              * View components need to be added as a child of ion-router-outlet
@@ -1728,7 +1731,6 @@ class IonRouterOutlet {
              * At this point this.activated has been set earlier
              * in this function, so it is guaranteed to be non-null.
              */
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             enteringView = this.stackCtrl.createView(this.activated, activatedRoute);
             // Store references to the proxy by component
             this.proxyMap.set(cmpRef.instance, activatedRouteProxy);
@@ -1839,10 +1841,10 @@ class IonRouterOutlet {
         proxy.component = activatedRoute.component;
         this.currentActivatedRoute$.next({ component, activatedRoute });
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonRouterOutlet, deps: [{ token: 'name', attribute: true }, { token: 'tabs', attribute: true, optional: true }, { token: i1.Location }, { token: i0.ElementRef }, { token: i3.Router }, { token: i0.NgZone }, { token: i3.ActivatedRoute }, { token: IonRouterOutlet, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonRouterOutlet, selector: "ion-router-outlet", inputs: { animated: "animated", animation: "animation", mode: "mode", swipeGesture: "swipeGesture", name: "name" }, outputs: { stackWillChange: "stackWillChange", stackDidChange: "stackDidChange", activateEvents: "activate", deactivateEvents: "deactivate" }, exportAs: ["outlet"], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonRouterOutlet, deps: [{ token: 'name', attribute: true }, { token: 'tabs', attribute: true, optional: true }, { token: i1.Location }, { token: i0.ElementRef }, { token: i3.Router }, { token: i0.NgZone }, { token: i3.ActivatedRoute }, { token: IonRouterOutlet, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: IonRouterOutlet, isStandalone: true, selector: "ion-router-outlet", inputs: { animated: "animated", animation: "animation", mode: "mode", swipeGesture: "swipeGesture", name: "name" }, outputs: { stackWillChange: "stackWillChange", stackDidChange: "stackDidChange", activateEvents: "activate", deactivateEvents: "deactivate" }, exportAs: ["outlet"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonRouterOutlet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonRouterOutlet, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ion-router-outlet',
@@ -1850,7 +1852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                     inputs: ['animated', 'animation', 'mode', 'swipeGesture'],
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['name']
                 }] }, { type: undefined, decorators: [{
@@ -1862,7 +1864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     type: SkipSelf
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { name: [{
+                }] }], propDecorators: { name: [{
                 type: Input
             }], stackWillChange: [{
                 type: Output
@@ -1956,10 +1958,10 @@ class RoutedComponentInputBinder {
         });
         this.outletDataSubscriptions.set(outlet, dataSubscription);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoutedComponentInputBinder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoutedComponentInputBinder });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RoutedComponentInputBinder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RoutedComponentInputBinder });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoutedComponentInputBinder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RoutedComponentInputBinder, decorators: [{
             type: Injectable
         }] });
 const provideComponentInputBinding = () => {
@@ -2092,12 +2094,12 @@ class ValueAccessor {
             });
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ValueAccessor, host: { listeners: { "ionBlur": "_handleBlurEvent($event.target)" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ValueAccessor, isStandalone: true, host: { listeners: { "ionBlur": "_handleBlurEvent($event.target)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ValueAccessor, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { _handleBlurEvent: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }], propDecorators: { _handleBlurEvent: [{
                 type: HostListener,
                 args: ['ionBlur', ['$event.target']]
             }] } });
@@ -2170,23 +2172,23 @@ let IonBackButton = class IonBackButton {
             ev.preventDefault();
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonBackButton, deps: [{ token: IonRouterOutlet, optional: true }, { token: NavController }, { token: Config }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonBackButton, inputs: { color: "color", defaultHref: "defaultHref", disabled: "disabled", icon: "icon", mode: "mode", routerAnimation: "routerAnimation", text: "text", type: "type" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonBackButton, deps: [{ token: IonRouterOutlet, optional: true }, { token: NavController }, { token: Config }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: IonBackButton, isStandalone: true, inputs: { color: "color", defaultHref: "defaultHref", disabled: "disabled", icon: "icon", mode: "mode", routerAnimation: "routerAnimation", text: "text", type: "type" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
 };
 IonBackButton = __decorate([
     ProxyCmp({
         inputs: BACK_BUTTON_INPUTS,
     })
 ], IonBackButton);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonBackButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonBackButton, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                     inputs: BACK_BUTTON_INPUTS,
                 }]
-        }], ctorParameters: function () { return [{ type: IonRouterOutlet, decorators: [{
+        }], ctorParameters: () => [{ type: IonRouterOutlet, decorators: [{
                     type: Optional
-                }] }, { type: NavController }, { type: Config }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onClick: [{
+                }] }, { type: NavController }, { type: Config }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -2217,8 +2219,8 @@ let IonNav = class IonNav {
         ref.nativeElement.delegate = angularDelegate.create(environmentInjector, injector);
         proxyOutputs(this, this.el, ['ionNavDidChange', 'ionNavWillChange']);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonNav, deps: [{ token: i0.ElementRef }, { token: i0.EnvironmentInjector }, { token: i0.Injector }, { token: AngularDelegate }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonNav, inputs: { animated: "animated", animation: "animation", root: "root", rootParams: "rootParams", swipeGesture: "swipeGesture" }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonNav, deps: [{ token: i0.ElementRef }, { token: i0.EnvironmentInjector }, { token: i0.Injector }, { token: AngularDelegate }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: IonNav, isStandalone: true, inputs: { animated: "animated", animation: "animation", root: "root", rootParams: "rootParams", swipeGesture: "swipeGesture" }, ngImport: i0 });
 };
 IonNav = __decorate([
     ProxyCmp({
@@ -2226,13 +2228,13 @@ IonNav = __decorate([
         methods: NAV_METHODS,
     })
 ], IonNav);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonNav, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonNav, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                     inputs: NAV_INPUTS,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.EnvironmentInjector }, { type: i0.Injector }, { type: AngularDelegate }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.EnvironmentInjector }, { type: i0.Injector }, { type: AngularDelegate }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }] });
 
 /**
  * Adds support for Ionic routing directions and animations to the base Angular router link directive.
@@ -2313,17 +2315,17 @@ class RouterLinkDelegateDirective {
          */
         ev.preventDefault();
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RouterLinkDelegateDirective, deps: [{ token: i1.LocationStrategy }, { token: NavController }, { token: i0.ElementRef }, { token: i3.Router }, { token: i3.RouterLink, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RouterLinkDelegateDirective, selector: ":not(a):not(area)[routerLink]", inputs: { routerDirection: "routerDirection", routerAnimation: "routerAnimation" }, host: { listeners: { "click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RouterLinkDelegateDirective, deps: [{ token: i1.LocationStrategy }, { token: NavController }, { token: i0.ElementRef }, { token: i3.Router }, { token: i3.RouterLink, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: RouterLinkDelegateDirective, isStandalone: true, selector: ":not(a):not(area)[routerLink]", inputs: { routerDirection: "routerDirection", routerAnimation: "routerAnimation" }, host: { listeners: { "click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RouterLinkDelegateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RouterLinkDelegateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: ':not(a):not(area)[routerLink]',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocationStrategy }, { type: NavController }, { type: i0.ElementRef }, { type: i3.Router }, { type: i3.RouterLink, decorators: [{
+        }], ctorParameters: () => [{ type: i1.LocationStrategy }, { type: NavController }, { type: i0.ElementRef }, { type: i3.Router }, { type: i3.RouterLink, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { routerDirection: [{
+                }] }], propDecorators: { routerDirection: [{
                 type: Input
             }], routerAnimation: [{
                 type: Input
@@ -2364,17 +2366,17 @@ class RouterLinkWithHrefDelegateDirective {
     onClick() {
         this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RouterLinkWithHrefDelegateDirective, deps: [{ token: i1.LocationStrategy }, { token: NavController }, { token: i0.ElementRef }, { token: i3.Router }, { token: i3.RouterLink, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RouterLinkWithHrefDelegateDirective, selector: "a[routerLink],area[routerLink]", inputs: { routerDirection: "routerDirection", routerAnimation: "routerAnimation" }, host: { listeners: { "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RouterLinkWithHrefDelegateDirective, deps: [{ token: i1.LocationStrategy }, { token: NavController }, { token: i0.ElementRef }, { token: i3.Router }, { token: i3.RouterLink, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: RouterLinkWithHrefDelegateDirective, isStandalone: true, selector: "a[routerLink],area[routerLink]", inputs: { routerDirection: "routerDirection", routerAnimation: "routerAnimation" }, host: { listeners: { "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RouterLinkWithHrefDelegateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RouterLinkWithHrefDelegateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'a[routerLink],area[routerLink]',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocationStrategy }, { type: NavController }, { type: i0.ElementRef }, { type: i3.Router }, { type: i3.RouterLink, decorators: [{
+        }], ctorParameters: () => [{ type: i1.LocationStrategy }, { type: NavController }, { type: i0.ElementRef }, { type: i3.Router }, { type: i3.RouterLink, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { routerDirection: [{
+                }] }], propDecorators: { routerDirection: [{
                 type: Input
             }], routerAnimation: [{
                 type: Input
@@ -2481,6 +2483,16 @@ class IonTabs {
             this.ionTabsDidChange.emit({ tab: stackId });
         }
     }
+    /**
+     * Host listener for the `ionTabButtonClick` event. Angular 22 enabled stricter
+     * host-binding type checking, which types `$event` as the DOM `Event`. That is
+     * not assignable to `select`'s public `string | CustomEvent` parameter, so this
+     * thin wrapper narrows the event before forwarding to keep `select`'s public
+     * signature intact.
+     */
+    onTabButtonClick(ev) {
+        return this.select(ev);
+    }
     /**
      * When a tab button is clicked, there are several scenarios:
      * 1. If the selected tab is currently active (the tab button has been clicked
@@ -2541,6 +2553,8 @@ class IonTabs {
                 return;
             }
             const rootView = this.outlet.getRootView(tab);
+            // Keep the explicit rootView null-guard; an optional-chain rewrite changes the short-circuit value spread below.
+            // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
             const navigationExtras = rootView && tabRootUrl === rootView.url && rootView.savedExtras;
             return this.navCtrl.navigateRoot(tabRootUrl, {
                 ...navigationExtras,
@@ -2638,22 +2652,22 @@ class IonTabs {
             this.tabsInner.nativeElement.after(tabBar);
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonTabs, deps: [{ token: NavController }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IonTabs, selector: "ion-tabs", outputs: { ionTabsWillChange: "ionTabsWillChange", ionTabsDidChange: "ionTabsDidChange" }, host: { listeners: { "ionTabButtonClick": "select($event)" } }, viewQueries: [{ propertyName: "tabsInner", first: true, predicate: ["tabsInner"], descendants: true, read: ElementRef, static: true }], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonTabs, deps: [{ token: NavController }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: IonTabs, isStandalone: true, selector: "ion-tabs", outputs: { ionTabsWillChange: "ionTabsWillChange", ionTabsDidChange: "ionTabsDidChange" }, host: { listeners: { "ionTabButtonClick": "onTabButtonClick($event)" } }, viewQueries: [{ propertyName: "tabsInner", first: true, predicate: ["tabsInner"], descendants: true, read: ElementRef, static: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IonTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IonTabs, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ion-tabs',
                 }]
-        }], ctorParameters: function () { return [{ type: NavController }]; }, propDecorators: { tabsInner: [{
+        }], ctorParameters: () => [{ type: NavController }], propDecorators: { tabsInner: [{
                 type: ViewChild,
                 args: ['tabsInner', { read: ElementRef, static: true }]
             }], ionTabsWillChange: [{
                 type: Output
             }], ionTabsDidChange: [{
                 type: Output
-            }], select: [{
+            }], onTabButtonClick: [{
                 type: HostListener,
                 args: ['ionTabButtonClick', ['$event']]
             }] } });
@@ -2743,5 +2757,5 @@ class IonicRouteStrategy {
  * Generated bundle index. Do not edit.
  */
 
-export { AngularDelegate, Config, ConfigToken, DomController, IonBackButton, IonModal, IonModalToken, IonNav, IonPopover, IonRouterOutlet, IonTabs, IonicRouteStrategy, MenuController, NavController, NavParams, OverlayBaseController, Platform, ProxyCmp, RouterLinkDelegateDirective, RouterLinkWithHrefDelegateDirective, ValueAccessor, bindLifecycleEvents, provideComponentInputBinding, raf, setIonicClasses };
+export { AngularDelegate, Config, ConfigToken, DomController, IonBackButton, IonModal, IonModalToken, IonNav, IonPopover, IonRouterOutlet, IonTabs, IonicRouteStrategy, MenuController, NavController, NavParams, OverlayBaseController, Platform, ProxyCmp, RouterLinkDelegateDirective, RouterLinkWithHrefDelegateDirective, ValueAccessor, provideComponentInputBinding, raf, setIonicClasses };
 //# sourceMappingURL=ionic-angular-common.mjs.map