feat(tabs): Option switch from manual and automatic activation

Author: youda97

src/tabs/tab-headers.component.ts

@@ -97,6 +97,12 @@ export class TabHeaders implements AfterViewInit, AfterContentInit {
 	 * @memberof Tabs
 	 */
 	@Input() cacheActive = false;
+	/**
+	 * Set to 'true' to have tabs automatically activated and have their content displayed when they recieve focus.
+	 * @memberof TabHeaders
+	 */
+	@Input() automaticActivation: boolean;
+
 	/**
 	 * Gets the Unordered List element that holds the `Tab` headings from the view DOM.
 	 * @memberof TabHeaders
@@ -135,39 +141,58 @@ export class TabHeaders implements AfterViewInit, AfterContentInit {
 	 */
 	@HostListener("keydown", ["$event"])
 	keyboardInput(event) {
+		let tabsArray = Array.from<any>(this.tabs);
+
 		if (event.key === "Right" || event.key === "ArrowRight") {
 			if (this.currentSelectedTab < this.allTabHeaders.length - 1) {
 				event.preventDefault();
+				if (this.automaticActivation) {
+					this.selectTab(event.target, tabsArray[this.currentSelectedTab + 1], this.currentSelectedTab);
+				}
 				this.allTabHeaders[this.currentSelectedTab + 1].focus();
 			} else {
 				event.preventDefault();
+				if (this.automaticActivation) {
+					this.selectTab(event.target, tabsArray[0], 0);
+				}
 				this.allTabHeaders[0].focus();
 			}
 		}
 
 		if (event.key === "Left" || event.key === "ArrowLeft") {
 			if (this.currentSelectedTab > 0) {
 				event.preventDefault();
+				if (this.automaticActivation) {
+					this.selectTab(event.target, tabsArray[this.currentSelectedTab - 1], this.currentSelectedTab);
+				}
 				this.allTabHeaders[this.currentSelectedTab - 1].focus();
 			} else {
 				event.preventDefault();
+				if (this.automaticActivation) {
+					this.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);
+				}
 				this.allTabHeaders[this.allTabHeaders.length - 1].focus();
 			}
 		}
 
 		if (event.key === "Home") {
 			event.preventDefault();
+			if (this.automaticActivation) {
+				this.selectTab(event.target, tabsArray[0], 0);
+			}
 			this.allTabHeaders[0].focus();
 		}
 
 		if (event.key === "End") {
 			event.preventDefault();
+			if (this.automaticActivation) {
+				this.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);
+			}
 			this.allTabHeaders[this.allTabHeaders.length - 1].focus();
 		}
 
-		if (event.key === " ") {
-			let selectedTab = Array.from<any>(this.tabInput);
-			this.selectTab(event.target, selectedTab[this.currentSelectedTab], this.currentSelectedTab);
+		if (event.key === " " && !this.automaticActivation) {
+			this.selectTab(event.target, tabsArray[this.currentSelectedTab], this.currentSelectedTab);
 		}
 	}
 

src/tabs/tabs.component.ts

@@ -42,6 +42,7 @@ import { TabHeaders } from "./tab-headers.component";
 			<ibm-tab-headers
 				*ngIf="hasTabHeaders() && position === 'top'"
 				[tabs]="tabs"
+				[automaticActivation]="automaticActivation"
 				[cacheActive]="cacheActive">
 			</ibm-tab-headers>
 			<ng-content></ng-content>
@@ -65,6 +66,12 @@ export class Tabs implements AfterContentInit {
 	 * @memberof Tabs
 	 */
 	@Input() cacheActive = false;
+	/**
+	 * Set to 'true' to have tabs automatically activated and have their content displayed when they recieve focus.
+	 * @memberof Tabs
+	 */
+	@Input() automaticActivation = false;
+
 	/**
 	 * Maintains a `QueryList` of the `Tab` elements and updates if `Tab`s are added or removed.
 	 * @type {QueryList<Tab>}

src/tabs/tabs.stories.ts

@@ -1,5 +1,5 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
-import { withKnobs } from "@storybook/addon-knobs/angular";
+import { withKnobs, boolean } from "@storybook/addon-knobs/angular";
 
 import { TabsModule } from "../";
 
@@ -14,11 +14,14 @@ storiesOf("Tabs", module)
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-			<ibm-tabs>
+			<ibm-tabs [automaticActivation]="automaticActivation">
 				<ibm-tab heading="one">foo</ibm-tab>
 				<ibm-tab heading="two">bar</ibm-tab>
 			</ibm-tabs>
-		`
+		`,
+		props: {
+			automaticActivation: boolean("automaticActivation", false)
+		}
 	}))
 	.add("With template", () => ({
 		template: `