5 files changed, 99 insertions, 0 deletions
diff --git a/src/angular/tabs/children/tab.component.html.ts b/src/angular/tabs/children/tab.component.html.ts
new file mode 100644
index 0000000..36ff413
--- /dev/null
+++ b/src/angular/tabs/children/tab.component.html.ts
@@ -0,0 +1,5 @@
+export default `
+<div [hidden]="!active" class="sdc-tab-content" role="tabpanel">
+    <ng-content></ng-content>
+</div>
+`;
diff --git a/src/angular/tabs/children/tab.component.ts b/src/angular/tabs/children/tab.component.ts
new file mode 100644
index 0000000..3b96e87
--- /dev/null
+++ b/src/angular/tabs/children/tab.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { Mode } from './../../common/enums';
+import template from "./tab.component.html";
+
+@Component({
+  selector: 'sdc-tab',
+  template: template
+})
+export class TabComponent {
+  @Input() public title: string;
+  @Input() public titleIcon: string;
+  @Input() public active = false;
+
+  public titleIconMode = Mode.secondary;
+
+}
diff --git a/src/angular/tabs/tabs.component.html.ts b/src/angular/tabs/tabs.component.html.ts
new file mode 100644
index 0000000..2333b86
--- /dev/null
+++ b/src/angular/tabs/tabs.component.html.ts
@@ -0,0 +1,14 @@
+export default `
+<ul class="sdc-tabs-list" role="tablist">
+    <li *ngFor="let tab of tabs" class="sdc-tab" role="tab" (click)="selectTab(tab)" [class.sdc-tab-active]="tab.active">
+        <span *ngIf="tab.title">{{tab.title}}</span>
+        <svg-icon-label
+            *ngIf="tab.titleIcon"
+            [name]="tab.titleIcon"
+            [mode]="tab.titleIconMode"
+            [size]="_size">
+        </svg-icon-label>
+    </li>
+</ul>
+<ng-content></ng-content>
+`;
diff --git a/src/angular/tabs/tabs.component.ts b/src/angular/tabs/tabs.component.ts
new file mode 100644
index 0000000..595f304
--- /dev/null
+++ b/src/angular/tabs/tabs.component.ts
@@ -0,0 +1,41 @@
+import { Component, Input, AfterContentInit, ContentChildren, QueryList, HostBinding } from '@angular/core';
+import { TabComponent } from './children/tab.component';
+import { SvgIconComponent } from "./../../../src/angular/svg-icon/svg-icon.component";
+import { Mode, Placement, Size } from './../common/enums';
+import template from "./tabs.component.html";
+
+@Component({
+    selector: 'sdc-tabs',
+    template: template
+})
+
+export class TabsComponent implements AfterContentInit {
+
+    @HostBinding('class') classes = 'sdc-tabs sdc-tabs-header';
+    @ContentChildren(TabComponent) private tabs: QueryList<TabComponent>;
+
+    public _size = Size.medium;
+
+    public selectTab(tab: TabComponent) {
+      // deactivate all tabs
+      this.tabs.toArray().forEach((_tab: TabComponent) => {
+        _tab.active = false;
+        _tab.titleIconMode = Mode.secondary;
+      });
+
+      // activate the tab the user has clicked on.
+      tab.active = true;
+      tab.titleIconMode = Mode.primary;
+    }
+
+    public ngAfterContentInit() {
+        // get all active tabs
+        const activeTabs = this.tabs.filter((tab) => tab.active);
+
+        // if there is no active tab set, activate the first
+        if (activeTabs.length === 0) {
+            this.selectTab(this.tabs.first);
+        }
+    }
+
+  }
diff --git a/src/angular/tabs/tabs.module.ts b/src/angular/tabs/tabs.module.ts
new file mode 100644
index 0000000..107942d
--- /dev/null
+++ b/src/angular/tabs/tabs.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormElementsModule } from "../form-elements/form-elements.module";
+import { TabsComponent } from "./tabs.component";
+import { TabComponent } from './children/tab.component';
+import { SvgIconModule } from './../svg-icon/svg-icon.module';
+
+@NgModule({
+    declarations: [
+        TabsComponent,
+        TabComponent
+    ],
+    imports: [
+        CommonModule,
+        SvgIconModule
+    ],
+    exports: [
+        TabsComponent,
+        TabComponent
+    ]
+})
+export class TabsModule {
+}