@ionic/angular 7.6.2-dev.11705694334.11b34c62 → 7.6.2-dev.11706202387.1dfcd9b8

package/fesm2020/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, createComponent, TemplateRef, Directive, ContentChild, EventEmitter, ViewContainerRef, EnvironmentInjector, Attribute, SkipSelf, Input, Output, reflectComponentType, HostListener, ElementRef, ViewChild } from '@angular/core';
 import * as i3 from '@angular/router';
 import { NavigationStart, PRIMARY_OUTLET, ChildrenOutletContexts, ActivatedRoute, Router } from '@angular/router';
 import * as i1 from '@angular/common';
@@ -671,59 +671,14 @@ const getConfig = () => {
     return null;
 };
 
-/**
- * @description
- * NavParams are an object that exists on a page and can contain data for that particular view.
- * Similar to how data was pass to a view in V1 with `$stateParams`, NavParams offer a much more flexible
- * option with a simple `get` method.
- *
- * @usage
- * ```ts
- * import { NavParams } from '@ionic/angular';
- *
- * export class MyClass{
- *
- *  constructor(navParams: NavParams){
- *    // userParams is an object we have in our nav-parameters
- *    navParams.get('userParams');
- *  }
- *
- * }
- * ```
- */
-class NavParams {
-    constructor(data = {}) {
-        this.data = data;
-    }
-    /**
-     * Get the value of a nav-parameter for the current view
-     *
-     * ```ts
-     * import { NavParams } from 'ionic-angular';
-     *
-     * export class MyClass{
-     *  constructor(public navParams: NavParams){
-     *    // userParams is an object we have in our nav-parameters
-     *    this.navParams.get('userParams');
-     *  }
-     * }
-     * ```
-     *
-     * @param param Which param you want to look up
-     */
-    get(param) {
-        return this.data[param];
-    }
-}
-
 // TODO(FW-2827): types
 class AngularDelegate {
     constructor() {
         this.zone = inject(NgZone);
         this.applicationRef = inject(ApplicationRef);
     }
-    create(environmentInjector, injector, elementReferenceKey) {
-        return new AngularFrameworkDelegate(environmentInjector, injector, this.applicationRef, this.zone, elementReferenceKey);
+    create(environmentInjector, elementReferenceKey) {
+        return new AngularFrameworkDelegate(environmentInjector, this.applicationRef, this.zone, elementReferenceKey);
     }
 }
 /** @nocollapse */ AngularDelegate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AngularDelegate, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -732,9 +687,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             type: Injectable
         }] });
 class AngularFrameworkDelegate {
-    constructor(environmentInjector, injector, applicationRef, zone, elementReferenceKey) {
+    constructor(environmentInjector, applicationRef, zone, elementReferenceKey) {
         this.environmentInjector = environmentInjector;
-        this.injector = injector;
         this.applicationRef = applicationRef;
         this.zone = zone;
         this.elementReferenceKey = elementReferenceKey;
@@ -758,7 +712,7 @@ class AngularFrameworkDelegate {
                 if (this.elementReferenceKey !== undefined) {
                     componentProps[this.elementReferenceKey] = container;
                 }
-                const el = attachView(this.zone, this.environmentInjector, this.injector, this.applicationRef, this.elRefMap, this.elEventsMap, container, component, componentProps, cssClasses, this.elementReferenceKey);
+                const el = attachView(this.zone, this.environmentInjector, this.applicationRef, this.elRefMap, this.elEventsMap, container, component, componentProps, cssClasses, this.elementReferenceKey);
                 resolve(el);
             });
         });
@@ -781,26 +735,9 @@ class AngularFrameworkDelegate {
         });
     }
 }
-const attachView = (zone, environmentInjector, injector, applicationRef, elRefMap, elEventsMap, container, component, params, cssClasses, elementReferenceKey) => {
-    /**
-     * Wraps the injector with a custom injector that
-     * provides NavParams to the component.
-     *
-     * NavParams is a legacy feature from Ionic v3 that allows
-     * Angular developers to provide data to a component
-     * and access it by providing NavParams as a dependency
-     * in the constructor.
-     *
-     * The modern approach is to access the data directly
-     * from the component's class instance.
-     */
-    const childInjector = Injector.create({
-        providers: getProviders(params),
-        parent: injector,
-    });
+const attachView = (zone, environmentInjector, applicationRef, elRefMap, elEventsMap, container, component, params, cssClasses, elementReferenceKey) => {
     const componentRef = createComponent(component, {
         environmentInjector,
-        elementInjector: childInjector,
     });
     const instance = componentRef.instance;
     const hostElement = componentRef.location.nativeElement;
@@ -815,7 +752,27 @@ const attachView = (zone, environmentInjector, injector, applicationRef, elRefMa
         if (elementReferenceKey && instance[elementReferenceKey] !== undefined) {
             console.error(`[Ionic Error]: ${elementReferenceKey} is a reserved property when using ${container.tagName.toLowerCase()}. Rename or remove the "${elementReferenceKey}" property from ${component.name}.`);
         }
-        Object.assign(instance, params);
+        const { modal, popover, ...otherParams } = params;
+        /**
+         * Any key/value pairs set in componentProps
+         * must be set as inputs on the component instance.
+         */
+        for (const key in otherParams) {
+            componentRef.setInput(key, otherParams[key]);
+        }
+        /**
+         * Using setInput will cause an error when
+         * setting modal/popover on a component that
+         * does not define them as an input. For backwards
+         * compatibility purposes we fall back to using
+         * Object.assign for these properties.
+         */
+        if (modal !== undefined) {
+            Object.assign(instance, { modal });
+        }
+        if (popover !== undefined) {
+            Object.assign(instance, { popover });
+        }
     }
     if (cssClasses) {
         for (const cssClass of cssClasses) {
@@ -846,23 +803,6 @@ const bindLifecycleEvents = (zone, instance, element) => {
         return () => unregisters.forEach((fn) => fn());
     });
 };
-const NavParamsToken = new InjectionToken('NavParamsToken');
-const getProviders = (params) => {
-    return [
-        {
-            provide: NavParamsToken,
-            useValue: params,
-        },
-        {
-            provide: NavParams,
-            useFactory: provideNavParamsInjectable,
-            deps: [NavParamsToken],
-        },
-    ];
-};
-const provideNavParamsInjectable = (params) => {
-    return new NavParams(params);
-};
 
 // TODO: Is there a way we can grab this from angular-component-lib instead?
 const proxyInputs = (Cmp, inputs) => {
@@ -1347,9 +1287,6 @@ class StackController {
         if (enteringEl && enteringEl !== leavingEl) {
             enteringEl.classList.add('ion-page');
             enteringEl.classList.add('ion-page-invisible');
-            if (enteringEl.parentElement !== containerEl) {
-                containerEl.appendChild(enteringEl);
-            }
             if (containerEl.commit) {
                 return containerEl.commit(enteringEl, leavingEl, {
                     duration: direction === undefined ? 0 : undefined,
@@ -1413,7 +1350,8 @@ const cleanup = (activeRoute, views, viewsSnapshot, location, zone) => {
 // TODO(FW-2827): types
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class IonRouterOutlet {
-    constructor(name, tabs, commonLocation, elementRef, router, zone, activatedRoute, parentOutlet) {
+    constructor(name, tabs, commonLocation, elementRef, router, zone, activatedRoute, outletContent, parentOutlet) {
+        this.outletContent = outletContent;
         this.parentOutlet = parentOutlet;
         this.activatedView = null;
         // Maintain map of activated route proxies for each component instance
@@ -1600,8 +1538,16 @@ class IonRouterOutlet {
             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;
-            cmpRef = this.activated = this.location.createComponent(component, {
-                index: this.location.length,
+            /**
+             * View components need to be added as a child of ion-router-outlet
+             * for page transitions and swipe to go back.
+             * However, createComponent mounts components as siblings of the
+             * ViewContainerRef. As a result, outletContent must reference
+             * an ng-container inside of ion-router-outlet and not
+             * ion-router-outlet itself.
+             */
+            cmpRef = this.activated = this.outletContent.createComponent(component, {
+                index: this.outletContent.length,
                 injector,
                 environmentInjector: environmentInjector ?? this.environmentInjector,
             });
@@ -1720,7 +1666,7 @@ class IonRouterOutlet {
         this.currentActivatedRoute$.next({ component, activatedRoute });
     }
 }
-/** @nocollapse */ IonRouterOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.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 */ IonRouterOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.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: i0.ViewContainerRef }, { token: IonRouterOutlet, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
 /** @nocollapse */ IonRouterOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: IonRouterOutlet, decorators: [{
             type: Directive,
@@ -1738,7 +1684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }, {
                     type: Attribute,
                     args: ['tabs']
-                }] }, { type: i1.Location }, { type: i0.ElementRef }, { type: i3.Router }, { type: i0.NgZone }, { type: i3.ActivatedRoute }, { type: IonRouterOutlet, decorators: [{
+                }] }, { type: i1.Location }, { type: i0.ElementRef }, { type: i3.Router }, { type: i0.NgZone }, { type: i3.ActivatedRoute }, { type: i0.ViewContainerRef }, { type: IonRouterOutlet, decorators: [{
                     type: SkipSelf
                 }, {
                     type: Optional
@@ -2033,15 +1979,15 @@ const NAV_METHODS = [
     'getPrevious',
 ];
 let IonNav = class IonNav {
-    constructor(ref, environmentInjector, injector, angularDelegate, z, c) {
+    constructor(ref, environmentInjector, angularDelegate, z, c) {
         this.z = z;
         c.detach();
         this.el = ref.nativeElement;
-        ref.nativeElement.delegate = angularDelegate.create(environmentInjector, injector);
+        ref.nativeElement.delegate = angularDelegate.create(environmentInjector);
         proxyOutputs(this, this.el, ['ionNavDidChange', 'ionNavWillChange']);
     }
 };
-/** @nocollapse */ IonNav.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.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 */ IonNav.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: IonNav, deps: [{ token: i0.ElementRef }, { token: i0.EnvironmentInjector }, { token: AngularDelegate }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
 /** @nocollapse */ IonNav.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: IonNav, inputs: { animated: "animated", animation: "animation", root: "root", rootParams: "rootParams", swipeGesture: "swipeGesture" }, ngImport: i0 });
 IonNav = __decorate([
     ProxyCmp({
@@ -2055,7 +2001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     // 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: function () { return [{ type: i0.ElementRef }, { type: i0.EnvironmentInjector }, { type: AngularDelegate }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
 
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class IonTabs {
@@ -2457,5 +2403,5 @@ class OverlayBaseController {
  * Generated bundle index. Do not edit.
  */
 
-export { AngularDelegate, Config, ConfigToken, DomController, IonBackButton, IonModal, 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, IonNav, IonPopover, IonRouterOutlet, IonTabs, IonicRouteStrategy, MenuController, NavController, OverlayBaseController, Platform, ProxyCmp, RouterLinkDelegateDirective, RouterLinkWithHrefDelegateDirective, ValueAccessor, bindLifecycleEvents, provideComponentInputBinding, raf, setIonicClasses };
 //# sourceMappingURL=ionic-angular-common.mjs.map