Merge branch 'master' of github.com:IBM/carbon-components-angular

Author: cal-smith

src/checkbox/checkbox.component.ts

@@ -67,7 +67,7 @@ export class CheckboxChange {
 			[indeterminate]="indeterminate"
 			[attr.aria-label]="ariaLabel"
 			[attr.aria-labelledby]="ariaLabelledby"
-			[attr.aria-checked]="indeterminate ? 'mixed' : checked"
+			[attr.aria-checked]="(indeterminate ? 'mixed' : checked)"
 			(change)="onChange($event)"
 			(click)="onClick($event)">
 		<label [for]="id" class="bx--checkbox-label">

src/combobox/combobox.component.ts

@@ -61,14 +61,11 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 			</div>
 			<input
 				[disabled]="disabled"
-				[attr.aria-expanded]="open"
 				(click)="toggleDropdown()"
 				(keyup)="onSearch($event.target.value)"
 				[value]="selectedValue"
 				class="bx--text-input"
 				aria-label="ListBox input field"
-				role="combobox"
-				aria-autocomplete="list"
 				autocomplete="off"
 				placeholder="Filter..."/>
 			<div
@@ -200,7 +197,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 	@ContentChild(AbstractDropdownView) view: AbstractDropdownView;
 	@ViewChild("dropdownMenu") dropdownMenu;
 	@HostBinding("class") class = "bx--combo-box bx--list-box";
-	@HostBinding("attr.role") role = "listbox";
+	@HostBinding("attr.role") role = "combobox";
 	@HostBinding("style.display") display = "block";
 
 	public open = false;

src/dialog/overflow-menu/overflow-menu.component.ts

@@ -7,11 +7,10 @@ const EN = require("./../../i18n/en.json");
  *
  * html:
  * ```
- * <ibm-overflow-menu [options]="overflowContent"></ibm-overflow-menu>
- * <ng-template #overflowContent>
+ * <ibm-overflow-menu>
  *	<ibm-overflow-menu-option>Option 1</ibm-overflow-menu-option>
  *	<ibm-overflow-menu-option>Option 2</ibm-overflow-menu-option>
- * </ng-template>
+ * </ibm-overflow-menu>
  * ```
  */
 @Component({

src/dropdown/dropdown.component.ts

@@ -4,19 +4,16 @@ import {
 	Output,
 	EventEmitter,
 	ElementRef,
-	ViewEncapsulation,
 	ContentChild,
 	OnInit,
 	ViewChild,
 	AfterContentInit,
-	AfterViewInit,
 	HostListener,
-	forwardRef,
-	OnDestroy,
-	HostBinding
+	OnDestroy
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
+// Observable import is required here so typescript can compile correctly
 import { Observable, fromEvent, of, Subscription } from "rxjs";
 import { throttleTime } from "rxjs/operators";
 

src/dropdown/list/dropdown-list.component.ts

@@ -53,7 +53,10 @@ import { ScrollableList } from "./../scrollable-list.directive";
 @Component({
 	selector: "ibm-dropdown-list",
 	template: `
-		<ul #list class="bx--list-box__menu">
+		<ul
+			#list
+			role="listbox"
+			class="bx--list-box__menu">
 			<li tabindex="{{item.disabled? -1 : 0}}"
 				role="option"
 				*ngFor="let item of displayItems"
@@ -72,7 +75,8 @@ import { ScrollableList } from "./../scrollable-list.directive";
 						type="checkbox"
 						[checked]="item.selected"
 						[disabled]="item.disabled"
-						(click)="doClick($event, item)">
+						(click)="doClick($event, item)"
+						tabindex="-1">
 					<label class="bx--checkbox-label">{{item.content}}</label>
 				</div>
 				<ng-container *ngIf="!listTpl && type === 'single'">{{item.content}}</ng-container>

src/table/table-model.class.spec.ts

@@ -8,6 +8,24 @@ describe("Table", () => {
 		expect(tableModel.totalDataLength).toEqual(0);
 	});
 
+	it("model should handle different variants of empty data", () => {
+		let tableModel  = new TableModel();
+		tableModel.data = undefined;
+
+		expect(tableModel.data).toEqual([[]]);
+		expect(tableModel.totalDataLength).toEqual(0);
+
+		tableModel.data = null;
+
+		expect(tableModel.data).toEqual([[]]);
+		expect(tableModel.totalDataLength).toEqual(0);
+
+		tableModel.data = [];
+
+		expect(tableModel.data).toEqual([[]]);
+		expect(tableModel.totalDataLength).toEqual(0);
+	});
+
 	it("should set rowsSelected when setting data", () => {
 		let tableModel  = new TableModel();
 		tableModel.data = [

src/table/table-model.class.ts

@@ -15,6 +15,10 @@ export class TableModel implements PaginationModel {
 	 * @memberof TableModel
 	 */
 	set data(newData: Array<Array<TableItem>>) {
+		if (!newData || (Array.isArray(newData) && newData.length === 0) ) {
+			newData = [[]];
+		}
+
 		this._data = newData;
 
 		// init rowsSelected

src/table/table.component.ts

@@ -15,26 +15,26 @@ const EN = require("./../i18n/en.json");
 /**
  * Build your table with this component by extending things that differ from default.
  *
- * demo: [https://pages.github.ibm.com/peretz/neutrino/#/table](https://pages.github.ibm.com/peretz/neutrino/#/table)
+ * demo: [https://angular.carbondesignsystem.com/?selectedKind=Table](https://angular.carbondesignsystem.com/?selectedKind=Table)
  *
  * Instead of the usual write-your-own-html approach you had with `<table>`,
- * neutrino table uses model-view-controller approach.
+ * carbon table uses model-view-controller approach.
  *
  * Here, you create a view (with built-in controller) and provide it a model.
  * Changes you make to the model are reflected in the view. Provide same model you use
- * in the table to the `<ibm-table-pagination>` and `<ibm-table-goto-page>` components.
+ * in the table to the `<ibm-pagination>` components.
  * They provide a different view over the same data.
  *
  * ## Basic usage
  *
  * ```html
- * <ibm-table [model]="simpleModel"></ibm-table>
+ * <ibm-table [model]="model"></ibm-table>
  * ```
  *
  * ```typescript
- * public simpleModel = new TableModel();
+ * public model = new TableModel();
  *
- * this.simpleModel.data = [
+ * this.model.data = [
  * 	[new TableItem({data: "asdf"}), new TableItem({data: "qwer"})],
  * 	[new TableItem({data: "csdf"}), new TableItem({data: "zwer"})],
  * 	[new TableItem({data: "bsdf"}), new TableItem({data: "swer"})],
@@ -104,14 +104,10 @@ const EN = require("./../i18n/en.json");
  *
  * See `TableHeaderItem` class for more information.
  *
- * ## Build your own table footer with neutrino components
+ * ## Use pagination as table footer
  *
  * ```html
- * <p class="table-footer">
- * 	<span class="table-selection-info">{{model.selectedRowsCount()}} of {{model.totalDataLength}} rows selected</span>
- * 	<ibm-table-pagination [model]="model" (selectPage)="selectPage($event)"></ibm-table-pagination>
- * 	<ibm-table-goto-page (selectPage)="selectPage($event)"></ibm-table-goto-page>
- * </p>
+ * <ibm-pagination [model]="model" (selectPage)="selectPage($event)"></ibm-pagination>
  * ```
  *
  * `selectPage()` function should fetch the data from backend, create new `data`, apply it to `model.data`,
@@ -121,28 +117,30 @@ const EN = require("./../i18n/en.json");
  *
  * ```typescript
  * selectPage(page) {
- * 	this.service.getPage(page).then((data: Array<Array<any>>) => {
- * 		let newData = [];
- *
- * 		// create new data from the service data
- * 		data.forEach(dataRow => {
- * 			let row = [];
- * 			dataRow.forEach(dataElement => {
- * 				row.push(new TableItem({
- * 					data: dataElement,
- * 					template: typeof dataElement === "string" ? undefined : this.customTableItemTemplate
- * 					// your template can handle all the data types so you don't have to conditionally set it
- * 					// you can also set different templates for different columns based on index
- * 				}));
- * 			});
- * 			newData.push(row);
- * 		});
- *
+ * 	this.getPage(page).then((data: Array<Array<any>>) => {
  * 		// set the data and update page
- * 		this.model.data = newData;
+ * 		this.model.data = this.prepareData(data);
  * 		this.model.currentPage = page;
  * 	});
  * }
+ *
+ * private prepareData(data: Array<Array<any>>) {
+ * 	// create new data from the service data
+ * 	let newData = [];
+ * 	data.forEach(dataRow => {
+ * 		let row = [];
+ * 		dataRow.forEach(dataElement => {
+ * 			row.push(new TableItem({
+ * 				data: dataElement,
+ * 				template: typeof dataElement === "string" ? undefined : this.paginationTableItemTemplate
+ * 				// your template can handle all the data types so you don't have to conditionally set it
+ * 				// you can also set different templates for different columns based on index
+ * 			}));
+ * 		});
+ * 		newData.push(row);
+ * 	});
+ * 	return newData;
+ * }
  * ```
  *
  * @export
@@ -164,9 +162,10 @@ const EN = require("./../i18n/en.json");
 				<th *ngIf="model.hasExpandableRows()"></th>
 				<th *ngIf="showSelectionColumn">
 					<ibm-checkbox
-						[size]="size !== 'lg' ? 'sm' : 'md'"
+						[size]="size !== ('lg' ? 'sm' : 'md')"
 						[(ngModel)]="selectAllCheckbox"
 						[indeterminate]="selectAllCheckboxSomeSelected"
+						aria-label="Select all rows"
 						(change)="onSelectAllCheckboxChange()">
 					</ibm-checkbox>
 				</th>
@@ -303,6 +302,7 @@ const EN = require("./../i18n/en.json");
 					</td>
 					<td *ngIf="showSelectionColumn">
 						<ibm-checkbox
+							aria-label="Select row"
 							[size]="size !== ('lg' ? 'sm' : 'md')"
 							[(ngModel)]="model.rowsSelected[i]"
 							(change)="onRowCheckboxChange(i)">
@@ -387,7 +387,7 @@ export class Table {
 	/**
 	 * Controls whether to show the selection checkboxes column or not.
 	 *
-	 * @deprecated in the next major neutrino version in favour of
+	 * @deprecated in the next major carbon-components-angular version in favour of
 	 * `showSelectionColumn` because of new attribute `enableSingleSelect`
 	 *  please use `showSelectionColumn` instead
 	 */