From 2ce00cf292e01664e02ecaf64af229d6a371c480 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 30 May 2023 10:09:33 -0400
Subject: [PATCH] fix(angular): remove invalid z-index style (#27559)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The Angular implementation of `ion-tabs` uses SASS styles in the inline
usage for styles:

```ts
styles: [`
  :host {
    z-index: $z-index-page-container;
  }
`]
```

However Angular is expecting CSS mark-up by default. This results in an
invalid value being assigned to the `z-index`.

![image
(10)](https://github.com/ionic-team/ionic-framework/assets/13732623/3a917c7e-bbb3-4ce2-afb9-d6d4f0d3824f)


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removes the invalid style from the tabs stylesheet
- Removes unnecessary leading whitespace from the template

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---
 angular/src/directives/navigation/ion-tabs.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/angular/src/directives/navigation/ion-tabs.ts b/angular/src/directives/navigation/ion-tabs.ts
index 33a163eefb..4ae93fd6ba 100644
--- a/angular/src/directives/navigation/ion-tabs.ts
+++ b/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;