From 77062b49058bcc442b1ce8c8761b1065817616da Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 25 May 2023 13:00:29 -0400
Subject: [PATCH] chore: use separate stylesheet

---
 .../navigation/ion-tabs/ion-tabs.html         |  5 +++
 .../navigation/ion-tabs/ion-tabs.scss         | 24 +++++++++++
 .../navigation/{ => ion-tabs}/ion-tabs.ts     | 43 +++----------------
 angular/src/index.ts                          |  2 +-
 angular/src/ionic-module.ts                   |  2 +-
 5 files changed, 37 insertions(+), 39 deletions(-)
 create mode 100644 angular/src/directives/navigation/ion-tabs/ion-tabs.html
 create mode 100644 angular/src/directives/navigation/ion-tabs/ion-tabs.scss
 rename angular/src/directives/navigation/{ => ion-tabs}/ion-tabs.ts (80%)

diff --git a/angular/src/directives/navigation/ion-tabs/ion-tabs.html b/angular/src/directives/navigation/ion-tabs/ion-tabs.html
new file mode 100644
index 0000000000..736bcc0df0
--- /dev/null
+++ b/angular/src/directives/navigation/ion-tabs/ion-tabs.html
@@ -0,0 +1,5 @@
+<ng-content select="[slot=top]"></ng-content>
+<div class="tabs-inner">
+  <ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
+</div>
+<ng-content></ng-content>
diff --git a/angular/src/directives/navigation/ion-tabs/ion-tabs.scss b/angular/src/directives/navigation/ion-tabs/ion-tabs.scss
new file mode 100644
index 0000000000..1c2bdb7ce8
--- /dev/null
+++ b/angular/src/directives/navigation/ion-tabs/ion-tabs.scss
@@ -0,0 +1,24 @@
+:host {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  flex-direction: column;
+
+  width: 100%;
+  height: 100%;
+
+  contain: layout size style;
+  z-index: $z-index-page-container;
+}
+
+.tabs-inner {
+  position: relative;
+
+  flex: 1;
+
+  contain: layout size style;
+}
diff --git a/angular/src/directives/navigation/ion-tabs.ts b/angular/src/directives/navigation/ion-tabs/ion-tabs.ts
similarity index 80%
rename from angular/src/directives/navigation/ion-tabs.ts
rename to angular/src/directives/navigation/ion-tabs/ion-tabs.ts
index 33a163eefb..fdb6bd4f96 100644
--- a/angular/src/directives/navigation/ion-tabs.ts
+++ b/angular/src/directives/navigation/ion-tabs/ion-tabs.ts
@@ -1,45 +1,14 @@
 import { Component, ContentChild, EventEmitter, HostListener, Output, ViewChild } from '@angular/core';
 
-import { NavController } from '../../providers/nav-controller';
-import { IonTabBar } from '../proxies';
-
-import { IonRouterOutlet } from './ion-router-outlet';
-import { StackEvent } from './stack-utils';
+import { NavController } from '../../../providers/nav-controller';
+import { IonTabBar } from '../../proxies';
+import { IonRouterOutlet } from '../ion-router-outlet';
+import { StackEvent } from '../stack-utils';
 
 @Component({
   selector: 'ion-tabs',
-  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>
-    <ng-content></ng-content>`,
-  styles: [
-    `
-      :host {
-        display: flex;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-
-        flex-direction: column;
-
-        width: 100%;
-        height: 100%;
-
-        contain: layout size style;
-        z-index: $z-index-page-container;
-      }
-      .tabs-inner {
-        position: relative;
-
-        flex: 1;
-
-        contain: layout size style;
-      }
-    `,
-  ],
+  templateUrl: './ion-tabs.html',
+  styleUrls: ['./ion-tabs.scss'],
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class IonTabs {
diff --git a/angular/src/index.ts b/angular/src/index.ts
index 7227fabae5..57a9cb771e 100644
--- a/angular/src/index.ts
+++ b/angular/src/index.ts
@@ -4,7 +4,7 @@ export { NumericValueAccessorDirective as NumericValueAccessor } from './directi
 export { RadioValueAccessorDirective as RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
 export { SelectValueAccessorDirective as SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
 export { TextValueAccessorDirective as TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
-export { IonTabs } from './directives/navigation/ion-tabs';
+export { IonTabs } from './directives/navigation/ion-tabs/ion-tabs';
 export { IonBackButtonDelegateDirective as IonBackButtonDelegate } from './directives/navigation/ion-back-button';
 export { NavDelegate } from './directives/navigation/nav-delegate';
 export { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
diff --git a/angular/src/ionic-module.ts b/angular/src/ionic-module.ts
index 2db4f26d47..f2cba70a78 100644
--- a/angular/src/ionic-module.ts
+++ b/angular/src/ionic-module.ts
@@ -12,7 +12,7 @@ import {
 } from './directives/control-value-accessors';
 import { IonBackButtonDelegateDirective } from './directives/navigation/ion-back-button';
 import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
-import { IonTabs } from './directives/navigation/ion-tabs';
+import { IonTabs } from './directives/navigation/ion-tabs/ion-tabs';
 import { NavDelegate } from './directives/navigation/nav-delegate';
 import {
   RouterLinkDelegateDirective,