Merge remote-tracking branch 'origin/main' into sp/sync-feature-7.1-with-main

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

@@ -8,7 +8,7 @@ import { StackEvent } from './stack-utils';
 
 @Component({
   selector: 'ion-tabs',
-  template: ` <ng-content select="[slot=top]"></ng-content>
+  template: `<ng-content select="[slot=top]"></ng-content>
     <div class="tabs-inner">
       <ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
     </div>
@@ -29,7 +29,6 @@ import { StackEvent } from './stack-utils';
         height: 100%;
 
         contain: layout size style;
-        z-index: $z-index-page-container;
       }
       .tabs-inner {
         position: relative;

angular/src/providers/angular-delegate.ts

@@ -83,7 +83,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
           container,
           component,
           componentProps,
-          cssClasses
+          cssClasses,
+          this.elementReferenceKey
         );
         resolve(el);
       });
@@ -119,7 +120,8 @@ export const attachView = (
   container: any,
   component: any,
   params: any,
-  cssClasses: string[] | undefined
+  cssClasses: string[] | undefined,
+  elementReferenceKey: string | undefined
 ): any => {
   /**
    * Wraps the injector with a custom injector that
@@ -145,7 +147,23 @@ export const attachView = (
 
   const instance = componentRef.instance;
   const hostElement = componentRef.location.nativeElement;
+
   if (params) {
+    /**
+     * For modals and popovers, a reference to the component is
+     * added to `params` during the call to attachViewToDom. If
+     * a reference using this name is already set, this means
+     * the app is trying to use the name as a component prop,
+     * which will cause collisions.
+     */
+    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);
   }
   if (cssClasses) {