Merge branch 'master' into light-inline-codesnippet

Author: zvonimirfras

src/checkbox/checkbox.component.ts

@@ -137,14 +137,14 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit {
 	 * Reflects whether the checkbox state is indeterminate.
 	 * @readonly
 	 */
-	@Input() get indeterminate() {
+	get indeterminate() {
 		return this._indeterminate;
 	}
 
 	/**
 	 * Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.
 	 */
-	set indeterminate(indeterminate: boolean) {
+	@Input() set indeterminate(indeterminate: boolean) {
 		let changed = this._indeterminate !== indeterminate;
 		this._indeterminate = indeterminate;
 
@@ -161,14 +161,14 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit {
 	 * Returns value `true` if state is selected for the checkbox.
 	 * @readonly
 	 */
-	@Input() get checked() {
+	get checked() {
 		return this._checked;
 	}
 
 	/**
 	 * Updating the state of a checkbox to match the state of the parameter passed in.
 	 */
-	set checked (checked: boolean) {
+	@Input() set checked (checked: boolean) {
 		if (checked !== this.checked) {
 			if (this._indeterminate) {
 				Promise.resolve().then(() => {

src/dropdown/dropdown.component.ts

@@ -28,7 +28,9 @@ import { I18n } from "./../i18n/i18n.module";
 @Component({
 	selector: "ibm-dropdown",
 	template: `
-	<div class="bx--list-box">
+	<div
+		class="bx--list-box"
+		[ngClass]="{'bx--dropdown--light': theme === 'light'}">
 		<button
 			type="button"
 			#dropdownButton
@@ -82,7 +84,11 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * item selection.
 	 */
 	@Input() type: "single" | "multi" = "single";
-
+	/**
+	 * `light` or `dark` dropdown theme
+	 * @memberof Dropdown
+	 */
+	@Input() theme: "light" | "dark" = "dark";
 	/**
 	 * Set to `true` to disable the dropdown.
 	 */

src/dropdown/dropdown.stories.ts

@@ -41,6 +41,29 @@ storiesOf("Dropdown", module)
 			onClose: action("Dropdown closed")
 		}
 	}))
+	.add("Light", () => ({
+		template: `
+		<ibm-dropdown
+			theme="light"
+			placeholder="Select"
+			[disabled]="disabled"
+			(selected)="selected($event)"
+			(onClose)="onClose($event)">
+			<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
+		</ibm-dropdown>
+	`,
+		props: {
+			disabled: boolean("disabled", false),
+			items: object("items", [
+				{ content: "one" },
+				{ content: "two" },
+				{ content: "three" },
+				{ content: "four" }
+			]),
+			selected: action("Selected fired for dropdown"),
+			onClose: action("Dropdown closed")
+		}
+	}))
 	.add("Multi-select", withNotes({ text: "Notes on multi select" })(() => ({
 		template: `
 		<ibm-dropdown

src/notification/notification-display.service.ts

@@ -11,9 +11,11 @@ export class NotificationDisplayService {
 	 * Programatically closes notification based on `notificationRef`.	 *
 	 */
 	close(notificationRef: any) {
-		setTimeout(() => {
-			this.applicationRef.detachView(notificationRef.hostView);
-			notificationRef.destroy();
-		}, 200);
+		if (notificationRef.hostView) {
+			setTimeout( () => {
+				this.applicationRef.detachView(notificationRef.hostView);
+				notificationRef.destroy();
+			}, 200);
+		}
 	}
 }

src/switch/switch.component.spec.ts

@@ -1,18 +1,15 @@
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { ComponentFixture, TestBed, fakeAsync, tick, async } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
-import { DebugElement } from "@angular/core";
 import { StaticIconModule } from "../icon/static-icon.module";
 
-import { Switch } from "./switch.component";
-import { Checkbox } from "../checkbox/checkbox.module";
+import { Switch, SwitchChange } from "./switch.component";
 
 describe("Switch", () => {
 	let component: Switch;
 	let fixture: ComponentFixture<Switch>;
 	let labelElement: HTMLElement;
 	let buttonElement: HTMLElement;
-	let svgElement: HTMLElement;
 
 	beforeEach(() => {
 		TestBed.configureTestingModule({
@@ -64,4 +61,17 @@ describe("Switch", () => {
 		expect(labelElement.innerHTML).toContain("bx--toggle__check");
 	});
 
+	it("should match the input checked value", () => {
+		component.checked = true;
+		fixture.detectChanges();
+		expect(buttonElement.attributes.getNamedItem("aria-checked").value).toEqual("true");
+	});
+
+	it("should emit SwitchChange event", (done: any) => {
+		component.change.subscribe((data: any) => {
+			expect(data instanceof SwitchChange).toEqual(true);
+			done();
+		});
+		component.emitChangeEvent();
+	});
 });

src/switch/switch.component.ts

@@ -2,7 +2,9 @@ import { Checkbox } from "../checkbox/checkbox.component";
 import {
 	ChangeDetectorRef,
 	Component,
-	Input
+	Input,
+	Output,
+	EventEmitter
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
@@ -51,14 +53,19 @@ export class SwitchChange {
 	template: `
 		<input
 			class="bx--toggle"
+			type="checkbox"
 			[ngClass]="{
 				'bx--toggle--small': size === 'sm'
 			}"
 			[id]="id"
-			type="checkbox"
-			(click)="onClick($event)"
+			[value]="value"
+			[name]="name"
+			[required]="required"
+			[checked]="checked"
 			[disabled]="disabled"
-			[attr.aria-checked]="checked">
+			[attr.aria-checked]="checked"
+			(change)="onChange($event)"
+			(click)="onClick($event)">
 		<label *ngIf="size === 'md'" class="bx--toggle__label" [for]="id">
 			<span class="bx--toggle__text--left">Off</span>
 			<span class="bx--toggle__appearance"></span>
@@ -96,6 +103,12 @@ export class Switch extends Checkbox {
 	 */
 	id = "switch-" + Switch.switchCount;
 
+	/**
+	 * Emits event notifying other classes when a change in state occurs on a switch after a
+	 * click.
+	 */
+	@Output() change = new EventEmitter<SwitchChange>();
+
 	/**
 	 * Creates an instance of Switch.
 	 */
@@ -105,4 +118,17 @@ export class Switch extends Checkbox {
 
 		console.warn("`ibm-switch` has been deprecated in favour of `ibm-toggle`");
 	}
+
+	/**
+	 * Creates instance of `SwitchChange` used to propagate the change event.
+	 * @memberof To
+	 */
+	emitChangeEvent() {
+		let event = new SwitchChange();
+		event.source = this;
+		event.checked = this.checked;
+
+		this.propagateChange(this.checked);
+		this.change.emit(event);
+	}
 }

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

@@ -605,4 +605,20 @@ describe("Table", () => {
 		expect(tableModel.header[2].data).toEqual("h3");
 		expect(tableModel.header.length).toEqual(3);
 	});
+
+	it("should preserve header if data is emptied", () => {
+		let tableModel  = new TableModel();
+		tableModel.header = [
+			new TableHeaderItem({data: "h1"}), new TableHeaderItem({data: "h2"}), new TableHeaderItem({data: "h3"})
+		];
+		tableModel.data = [
+			[new TableItem({data: "A"}), new TableItem({data: "B"}), new TableItem({data: "C"})],
+			[new TableItem({data: "D"}), new TableItem({data: "E"}), new TableItem({data: "F"})]
+		];
+		tableModel.data = [[]];
+		expect(tableModel.header.length).toEqual(3);
+		expect(tableModel.header[0].data).toEqual("h1");
+		expect(tableModel.header[1].data).toEqual("h2");
+		expect(tableModel.header[2].data).toEqual("h3");
+	});
 });

src/table/table-model.class.ts

@@ -29,7 +29,7 @@ export class TableModel implements PaginationModel {
 		this.rowsContext = new Array<string>(this._data.length);
 
 		// only create a fresh header if necessary (header doesn't exist or differs in length)
-		if (this.header == null || this.header.length !== this._data[0].length) {
+		if (this.header == null || (this.header.length !== this._data[0].length && this._data[0].length > 0)) {
 			let header = new Array<TableHeaderItem>();
 			for (let i = 0; i < this._data[0].length; i++) {
 				header.push(new TableHeaderItem());

src/toggle/toggle.component.spec.ts

@@ -1,18 +1,15 @@
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { ComponentFixture, TestBed, fakeAsync, tick, async } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
-import { DebugElement } from "@angular/core";
 import { StaticIconModule } from "../icon/static-icon.module";
 
-import { Toggle } from "./toggle.component";
-import { Checkbox } from "../checkbox/checkbox.module";
+import { Toggle, ToggleChange } from "./toggle.component";
 
 describe("Toggle", () => {
 	let component: Toggle;
 	let fixture: ComponentFixture<Toggle>;
 	let labelElement: HTMLElement;
 	let buttonElement: HTMLElement;
-	let svgElement: HTMLElement;
 
 	beforeEach(() => {
 		TestBed.configureTestingModule({
@@ -64,4 +61,17 @@ describe("Toggle", () => {
 		expect(labelElement.innerHTML).toContain("bx--toggle__check");
 	});
 
+	it("should match the input checked value", () => {
+		component.checked = true;
+		fixture.detectChanges();
+		expect(buttonElement.attributes.getNamedItem("aria-checked").value).toEqual("true");
+	});
+
+	it("should emit ToggleChange event", (done: any) => {
+		component.change.subscribe((data: any) => {
+			expect(data instanceof ToggleChange).toEqual(true);
+			done();
+		});
+		component.emitChangeEvent();
+	});
 });

src/toggle/toggle.component.ts

@@ -2,7 +2,9 @@ import { Checkbox } from "../checkbox/checkbox.component";
 import {
 	ChangeDetectorRef,
 	Component,
-	Input
+	Input,
+	Output,
+	EventEmitter
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
@@ -53,14 +55,19 @@ export class ToggleChange {
 	template: `
 		<input
 			class="bx--toggle"
+			type="checkbox"
 			[ngClass]="{
 				'bx--toggle--small': size === 'sm'
 			}"
 			[id]="id"
-			type="checkbox"
-			(click)="onClick($event)"
+			[value]="value"
+			[name]="name"
+			[required]="required"
+			[checked]="checked"
 			[disabled]="disabled"
-			[attr.aria-checked]="checked">
+			[attr.aria-checked]="checked"
+			(change)="onChange($event)"
+			(click)="onClick($event)">
 		<label *ngIf="size === 'md'" class="bx--toggle__label" [for]="id">
 			<span class="bx--toggle__text--left">Off</span>
 			<span class="bx--toggle__appearance"></span>
@@ -105,6 +112,12 @@ export class Toggle extends Checkbox {
 	 */
 	id = "toggle-" + Toggle.toggleCount;
 
+	/**
+	 * Emits event notifying other classes when a change in state occurs on a toggle after a
+	 * click.
+	 */
+	@Output() change = new EventEmitter<ToggleChange>();
+
 	/**
 	 * Creates an instance of Toggle.
 	 * @param {ChangeDetectorRef} changeDetectorRef
@@ -114,4 +127,17 @@ export class Toggle extends Checkbox {
 		super(changeDetectorRef);
 		Toggle.toggleCount++;
 	}
+
+	/**
+	 * Creates instance of `ToggleChange` used to propagate the change event.
+	 * @memberof To
+	 */
+	emitChangeEvent() {
+		let event = new ToggleChange();
+		event.source = this;
+		event.checked = this.checked;
+
+		this.propagateChange(this.checked);
+		this.change.emit(event);
+	}
 }