summaryrefslogtreecommitdiffstats
path: root/src/angular/tabs/tabs.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/angular/tabs/tabs.component.ts')
-rw-r--r--src/angular/tabs/tabs.component.ts41
1 files changed, 41 insertions, 0 deletions
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);
+ }
+ }
+
+ }