Fix #176 Update toggle to support checked input

Author: esuau

src/switch/switch.component.spec.ts

@@ -64,4 +64,10 @@ 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");
+	});
+
 });

src/switch/switch.component.ts

@@ -51,14 +51,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>

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";
 
 describe("Toggle", () => {
 	let component: Toggle;
 	let fixture: ComponentFixture<Toggle>;
 	let labelElement: HTMLElement;
 	let buttonElement: HTMLElement;
-	let svgElement: HTMLElement;
 
 	beforeEach(() => {
 		TestBed.configureTestingModule({
@@ -64,4 +61,10 @@ 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");
+	});
+
 });

src/toggle/toggle.component.ts

@@ -2,7 +2,10 @@ import { Checkbox } from "../checkbox/checkbox.component";
 import {
 	ChangeDetectorRef,
 	Component,
-	Input
+	Input,
+	Output,
+	EventEmitter,
+	ChangeDetectionStrategy
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
@@ -53,14 +56,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>

src/toggle/toggle.stories.ts

@@ -11,18 +11,20 @@ storiesOf("Toggle", module).addDecorator(
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-			<ibm-toggle [disabled]="disabled"></ibm-toggle>
+			<ibm-toggle [disabled]="disabled" [checked]="checked"></ibm-toggle>
 		`,
 		props: {
-			disabled: boolean("disabled", false)
+			disabled: boolean("disabled", false),
+			checked: boolean("checked", false)
 		}
 
 	}))
 	.add("Small", () => ({
 		template: `
-			<ibm-toggle [disabled]="disabled" size="sm"></ibm-toggle>
+			<ibm-toggle [disabled]="disabled" [checked]="checked" size="sm"></ibm-toggle>
 		`,
 		props: {
-			disabled: boolean("disabled", false)
+			disabled: boolean("disabled", false),
+			checked: boolean("checked", false)
 		}
 	}));