Merge branch 'master' into issue#46

Author: zvonimirfras

package-lock.json

@@ -86,19 +86,19 @@
     "@commitlint/cli": "7.2.1",
     "@commitlint/config-conventional": "7.0.1",
     "@compodoc/compodoc": "1.1.7",
-    "@storybook/addon-actions": "5.0.0",
-    "@storybook/addon-knobs": "5.0.0",
-    "@storybook/addon-links": "5.0.0",
-    "@storybook/addon-notes": "5.0.0",
-    "@storybook/addon-options": "5.0.0",
-    "@storybook/addon-storysource": "5.0.0",
-    "@storybook/addons": "5.0.0",
-    "@storybook/angular": "5.0.0",
+    "@storybook/addon-actions": "5.0.3",
+    "@storybook/addon-knobs": "5.0.3",
+    "@storybook/addon-links": "5.0.3",
+    "@storybook/addon-notes": "5.0.3",
+    "@storybook/addon-options": "5.0.3",
+    "@storybook/addon-storysource": "5.0.3",
+    "@storybook/addons": "5.0.3",
+    "@storybook/angular": "5.0.3",
     "@types/jasmine": "2.8.6",
     "@types/node": "8.5.2",
     "angular2-template-loader": "0.6.2",
     "babel-loader": "8.0.4",
-    "carbon-components": "9.82.17",
+    "carbon-components": "9.84.14",
     "codelyzer": "4.5.0",
     "commitizen": "2.10.1",
     "core-js": "2.5.5",

package.json

@@ -118,11 +118,11 @@
 		"END_OF_DATA": "You've reached the end of your content",
 		"SCROLL_TOP": "Scroll to top",
 		"CHECKBOX_HEADER": "Select all rows",
-		"CHECKBOX_ROW": "Select row",
+		"CHECKBOX_ROW": "Select {{value}}",
 		"EXPAND_BUTTON": "Expand row",
 		"SORT_DESCENDING": "Sort rows by this header in descending order",
-		"SORT_ASCENDING": "Sort rows by this header in ascending order"
-
+		"SORT_ASCENDING": "Sort rows by this header in ascending order",
+		"ROW": "row"
 	},
 	"TABLE_TOOLBAR": {
 		"ACTION_BAR": "Table Action Bar"

src/i18n/en.json

@@ -347,7 +347,7 @@ import { I18n } from "./../i18n/i18n.module";
 						(click)="setCheckboxIndex()">
 						<ibm-checkbox
 							inline="true"
-							[attr.aria-label]="checkboxRowLabel | async"
+							[aria-label]="checkboxRowLabel | i18nReplace:getSelectionLabelValue(row) | async"
 							[size]="size !== ('lg' ? 'sm' : 'md')"
 							[(ngModel)]="model.rowsSelected[i]"
 							(change)="onRowCheckboxChange(i)">
@@ -650,6 +650,18 @@ export class Table implements AfterViewInit {
 	 */
 	@Input() footerTemplate: TemplateRef<any>;
 
+	/**
+	 * Used to populate the row selection checkbox label with a useful value if set.
+	 *
+	 * Example:
+	 * ```
+	 * <ibm-table [selectionLabelColumn]="0"></ibm-table>
+	 * <!-- results in aria-label="Select first column value"
+	 * (where "first column value" is the value of the first column in the row -->
+	 * ```
+	 */
+	@Input() selectionLabelColumn: number;
+
 	/**
 	 * Emits an index of the column that wants to be sorted.
 	 *
@@ -952,4 +964,11 @@ export class Table implements AfterViewInit {
 	setExpandIndex(event) {
 		this.columnIndex = 0;
 	}
+
+	getSelectionLabelValue(row: TableItem[]) {
+		if (!this.selectionLabelColumn) {
+			return { value: this.i18n.get().TABLE.ROW };
+		}
+		return { value: row[this.selectionLabelColumn].data };
+	}
 }

src/table/table.component.ts

@@ -4,14 +4,12 @@ import {
 	Input,
 	HostListener,
 	ViewChild,
-	AfterViewInit,
 	ContentChildren,
-	AfterContentInit
+	AfterContentInit,
+	ViewChildren,
+	ElementRef
 } from "@angular/core";
 
-import { fromEvent } from "rxjs";
-import { throttleTime } from "rxjs/operators";
-
 import { Tab } from "./tab.component";
 
 
@@ -61,6 +59,7 @@ import { Tab } from "./tab.component";
 					role="presentation"
 					(click)="selectTab(tabref, tab, i)">
 					<a
+						#tabItem
 						[attr.aria-selected]="tab.active"
 						[attr.tabindex]="(tab.active?0:-1)"
 						[attr.aria-controls]="tab.id"
@@ -88,24 +87,20 @@ import { Tab } from "./tab.component";
 	 `
 })
 
-export class TabHeaders implements AfterViewInit, AfterContentInit {
+export class TabHeaders implements AfterContentInit {
 	/**
 	 * List of `Tab` components.
-	 * @type {QueryList<Tab>}
-	 * @memberof TabHeaders
 	 */
 	// disable the next line because we need to rename the input
 	// tslint:disable-next-line
 	@Input("tabs") tabInput: QueryList<Tab>;
 	/**
 	 * Set to 'true' to have `Tab` items cached and not reloaded on tab switching.
 	 * Duplicate from `n-tabs` to support standalone headers
-	 * @memberof Tabs
 	 */
 	@Input() cacheActive = false;
 	/**
 	 * Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.
-	 * @memberof TabHeaders
 	 */
 	@Input() followFocus: boolean;
 	/**
@@ -115,7 +110,6 @@ export class TabHeaders implements AfterViewInit, AfterContentInit {
 
 	/**
 	 * Gets the Unordered List element that holds the `Tab` headings from the view DOM.
-	 * @memberof TabHeaders
 	 */
 	@ViewChild("tabList") headerContainer;
 	/**
@@ -128,26 +122,21 @@ export class TabHeaders implements AfterViewInit, AfterContentInit {
 	public tabs: QueryList<Tab>;
 	/**
 	 * The index of the first visible tab.
-	 * @memberof TabHeaders
 	 */
 	public firstVisibleTab = 0;
 	/**
 	 * The DOM element containing the `Tab` headings displayed.
-	 * @memberof TabHeaders
 	 */
-	public allTabHeaders;
+	@ViewChildren("tabItem") allTabHeaders: QueryList<ElementRef>;
 	/**
 	 * Controls the manual focusing done by tabbing through headings.
-	 * @memberof TabHeaders
 	 */
 	public currentSelectedTab: number;
 	public tabListVisible = false;
 
 	// keyboard accessibility
 	/**
 	 * Controls the keydown events used for tabbing through the headings.
-	 * @param {any} event
-	 * @memberof TabHeaders
 	 */
 	@HostListener("keydown", ["$event"])
 	keyboardInput(event) {
@@ -160,13 +149,13 @@ export class TabHeaders implements AfterViewInit, AfterContentInit {
 				if (this.followFocus) {
 					this.selectTab(event.target, tabsArray[this.currentSelectedTab + 1], this.currentSelectedTab);
 				}
-				this.allTabHeaders[this.currentSelectedTab + 1].focus();
+				this.allTabHeaders.toArray()[this.currentSelectedTab + 1].nativeElement.focus();
 			} else {
 				event.preventDefault();
 				if (this.followFocus) {
 					this.selectTab(event.target, tabsArray[0], 0);
 				}
-				this.allTabHeaders[0].focus();
+				this.allTabHeaders.first.nativeElement.focus();
 			}
 		}
 
@@ -177,13 +166,13 @@ export class TabHeaders implements AfterViewInit, AfterContentInit {
 				if (this.followFocus) {
 					this.selectTab(event.target, tabsArray[this.currentSelectedTab - 1], this.currentSelectedTab);
 				}
-				this.allTabHeaders[this.currentSelectedTab - 1].focus();
+				this.allTabHeaders.toArray()[this.currentSelectedTab - 1].nativeElement.focus();
 			} else {
 				event.preventDefault();
 				if (this.followFocus) {
 					this.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);
 				}
-				this.allTabHeaders[this.allTabHeaders.length - 1].focus();
+				this.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();
 			}
 		}
 
@@ -192,15 +181,15 @@ export class TabHeaders implements AfterViewInit, AfterContentInit {
 			if (this.followFocus) {
 				this.selectTab(event.target, tabsArray[0], 0);
 			}
-			this.allTabHeaders[0].focus();
+			this.allTabHeaders.toArray()[0].nativeElement.focus();
 		}
 
 		if (event.key === "End") {
 			event.preventDefault();
 			if (this.followFocus) {
 				this.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);
 			}
-			this.allTabHeaders[this.allTabHeaders.length - 1].focus();
+			this.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();
 		}
 
 		// `"Spacebar"` is IE11 specific value
@@ -219,25 +208,12 @@ export class TabHeaders implements AfterViewInit, AfterContentInit {
 		this.tabs.forEach(tab => tab.cacheActive = this.cacheActive);
 		this.tabs.changes.subscribe(() => {
 			this.setFirstTab();
-			// also update the tab headers list
-			this.allTabHeaders = this.headerContainer.nativeElement.querySelectorAll("li a");
 		});
 		this.setFirstTab();
 	}
 
-	/**
-	 * Performs check to see if there is overflow and needs scrolling.
-	 * @memberof TabHeaders
-	 */
-	ngAfterViewInit() {
-		this.allTabHeaders = this.headerContainer.nativeElement.querySelectorAll("li a");
-	}
-
 	/**
 	 * Controls manually focusing tabs.
-	 * @param {HTMLElement} ref
-	 * @param {number} index
-	 * @memberof TabHeaders
 	 */
 	public onTabFocus(ref: HTMLElement, index: number) {
 		this.currentSelectedTab = index;
@@ -259,10 +235,6 @@ export class TabHeaders implements AfterViewInit, AfterContentInit {
 
 	/**
 	 * Selects `Tab` 'tab' and moves it into view on the view DOM if it is not already.
-	 * @param ref
-	 * @param tab
-	 * @param tabIndex
-	 * @memberof TabHeaders
 	 */
 	public selectTab(ref: HTMLElement, tab: Tab, tabIndex: number) {
 		if (tab.disabled) {
@@ -279,8 +251,6 @@ export class TabHeaders implements AfterViewInit, AfterContentInit {
 
 	/**
 	 * Determines which `Tab` is initially selected.
-	 * @protected
-	 * @memberof Tabs
 	 */
 	protected setFirstTab() {
 		setTimeout(() => {

src/tabs/tab-headers.component.ts

@@ -59,18 +59,14 @@ export class Tabs implements AfterContentInit {
 	/**
 	 * Takes either the string value 'top' or 'bottom' to place TabHeader
 	 * relative to the `TabPanel`s.
-	 * @type string
-	 * @memberof Tabs
 	 */
 	@Input() position: "top" | "bottom" = "top";
 	/**
 	 * Set to 'true' to have `Tab` items cached and not reloaded on tab switching.
-	 * @memberof Tabs
 	 */
 	@Input() cacheActive = false;
 	/**
-	 * Set to 'true' to have tabs automatically activated and have their content displayed when they recieve focus.
-	 * @memberof Tabs
+	 * Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.
 	 */
 	@Input() followFocus = true;
 	/**
@@ -84,8 +80,6 @@ export class Tabs implements AfterContentInit {
 
 	/**
 	 * Maintains a `QueryList` of the `Tab` elements and updates if `Tab`s are added or removed.
-	 * @type {QueryList<Tab>}
-	 * @memberof Tabs
 	 */
 	@ContentChildren(Tab, { descendants: false }) tabs: QueryList<Tab>;
 	/**
@@ -94,9 +88,8 @@ export class Tabs implements AfterContentInit {
 	@ContentChild(TabHeaders) tabHeaders;
 
 	/**
-	 * After content is initialized update `Tab`s to cache (if turned on) and set the inital
+	 * After content is initialized update `Tab`s to cache (if turned on) and set the initial
 	 * selected Tab item.
-	 * @memberof Tabs
 	 */
 	ngAfterContentInit() {
 		if (this.tabHeaders) {

src/tabs/tabs.component.ts

@@ -44,7 +44,7 @@ storiesOf("Tabs", module)
 			</ng-template>
 			<ibm-tabs [followFocus]="followFocus" [isNavigation]="isNavigation">
 				<ibm-tab *ngFor="let item of data; let i = index;" [heading]="customTabs" [context]="item">Tab Content {{i + 1}}</ibm-tab>
-				<ibm-tab [heading]="iconTab">Tab Content 4</ibm-tab>
+				<ibm-tab [heading]="iconTab">Tab Content Custom</ibm-tab>
 			</ibm-tabs>
 		`,
 		props: {