chore: use separate stylesheet

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>

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;
+}

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 { NavController } from '../../../providers/nav-controller';
-import { IonTabBar } from '../proxies';
+import { IonTabBar } from '../../proxies';
-
+import { IonRouterOutlet } from '../ion-router-outlet';
-import { IonRouterOutlet } from './ion-router-outlet';
+import { StackEvent } from '../stack-utils';
-import { StackEvent } from './stack-utils';
 
 @Component({
   selector: 'ion-tabs',
-  template: ` <ng-content select="[slot=top]"></ng-content>
+  templateUrl: './ion-tabs.html',
-    <div class="tabs-inner">
+  styleUrls: ['./ion-tabs.scss'],
-      <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;
-      }
-    `,
-  ],
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class IonTabs {

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';

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,