feat(tabs): register tabs elements (#1883)

* feat(tabs): register tabs elements

* feat(tests-app-ng): add tabs component

Author: vchimev

e2e/tests-app-ng/app/app.routes.ts

@@ -31,6 +31,7 @@ import { ModalViewMainPageComponent } from "./modal/modal-view-main-page.compone
 import { LazyLoadModalComponent } from "./modal/lazy/lazy-load-modal.component";
 
 import { TabViewComponent } from "./tab-view/tab-view.component";
+import { TabsComponent } from "./tabs/tabs.component";
 
 import { NavigationOptionsComponent } from "./navigation-options/navigation-options.component";
 import { NavigationInfoComponent } from "./navigation-options/navigation-info.component";
@@ -77,6 +78,7 @@ export const routableComponents = [
     LazyLoadModalComponent,
 
     TabViewComponent,
+    TabsComponent,
 
     NavigationOptionsComponent,
     NavigationInfoComponent,
@@ -156,6 +158,7 @@ export const routes = [
     { path: "modal/lazy", component: LazyLoadModalComponent, data: { title: "modal(lazy)" } },
 
     { path: "tab-view", component: TabViewComponent, data: { title: "tab-view", isNavigatable: true } },
+    { path: "tabs", component: TabsComponent, data: { title: "tabs", isNavigatable: true } },
 
     { path: "nav-options", component: NavigationOptionsComponent, data: { title: "nav-options", isNavigatable: true } },
     { path: "nav-info", component: NavigationInfoComponent, data: { title: "nav-info" } },

e2e/tests-app-ng/app/tabs/tabs.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "tabs-component",
+  template: `
+<Tabs id="tabs">
+
+  <TabStrip>
+
+    <TabStripItem title="TabStripItem 1" iconSource="res://icon">
+    </TabStripItem>
+
+    <TabStripItem>
+      <Label text="TabStripItem 2">
+      </Label>
+      <Image src="res://icon">
+      </Image>
+    </TabStripItem>
+
+    <TabStripItem title="TabStripItem 3" iconSource="res://icon">
+    </TabStripItem>
+
+  </TabStrip>
+
+  <TabContentItem>
+    <StackLayout>
+      <Label text="TabContentItem 1">
+      </Label>
+    </StackLayout>
+  </TabContentItem>
+
+  <TabContentItem>
+    <StackLayout>
+      <Label text="TabContentItem 2">
+      </Label>
+    </StackLayout>
+  </TabContentItem>
+
+  <TabContentItem>
+    <StackLayout>
+      <Label text="TabContentItem 3">
+      </Label>
+    </StackLayout>
+  </TabContentItem>
+
+</Tabs>
+  `,
+})
+
+export class TabsComponent implements OnInit {
+  public ngOnInit(): void { }
+}

e2e/tests-app-ng/app/vendor.ts

@@ -175,6 +175,7 @@ const frameMeta: ViewClassMeta = {
 registerElement("AbsoluteLayout", () => require("tns-core-modules/ui/layouts/absolute-layout").AbsoluteLayout);
 registerElement("ActivityIndicator", () => require("tns-core-modules/ui/activity-indicator").ActivityIndicator);
 registerElement("Border", () => require("tns-core-modules/ui/border").Border);
+registerElement("BottomNavigation", () => require("tns-core-modules/ui/bottom-navigation").BottomNavigation);
 registerElement("Button", () => require("tns-core-modules/ui/button").Button);
 registerElement("ContentView", () => require("tns-core-modules/ui/content-view").ContentView);
 registerElement("DatePicker", () => require("tns-core-modules/ui/date-picker").DatePicker);
@@ -202,6 +203,11 @@ registerElement("StackLayout", () => require("tns-core-modules/ui/layouts/stack-
 registerElement("FlexboxLayout", () => require("tns-core-modules/ui/layouts/flexbox-layout").FlexboxLayout);
 registerElement("Switch", () => require("tns-core-modules/ui/switch").Switch);
 registerElement("TabView", () => require("tns-core-modules/ui/tab-view").TabView);
+registerElement("TabStrip", () => require("tns-core-modules/ui/tab-navigation-base/tab-strip").TabStrip);
+registerElement("TabStripItem", () => require("tns-core-modules/ui/tab-navigation-base/tab-strip-item").TabStripItem);
+registerElement("TabContentItem",
+    () => require("tns-core-modules/ui/tab-navigation-base/tab-content-item").TabContentItem);
+registerElement("Tabs", () => require("tns-core-modules/ui/tabs").Tabs);
 registerElement("TextField", () => require("tns-core-modules/ui/text-field").TextField);
 registerElement("TextView", () => require("tns-core-modules/ui/text-view").TextView);
 registerElement("TimePicker", () => require("tns-core-modules/ui/time-picker").TimePicker);