Merge branch 'master' into slider

Author: zvonimirfras

src/i18n/en.json

@@ -123,6 +123,10 @@
 		"BUTTON_ARIA_LEFT": "Go to the previous tab",
 		"BUTTON_ARIA_RIGHT": "Go to the next tab"
 	},
+	"TOGGLE": {
+		"OFF": "Off",
+		"ON": "On"
+	},
 	"TOPNAV": {
 		"SKIP_TO_MAIN": "Skip to main content",
 		"HAMBURGER": {

src/table/table.component.ts

@@ -199,6 +199,7 @@ import { I18n } from "./../i18n/i18n.module";
 						<button
 							class="bx--table-sort-v2"
 							*ngIf="this.sort.observers.length > 0 && column.sortable"
+							[attr.aria-label]="(column.sorted && column.ascending ? sortDescendingLabel : sortAscendingLabel)"
 							[ngClass]="{
 								'bx--table-sort-v2--active': column.sorted,
 								'bx--table-sort-v2--ascending': column.ascending
@@ -210,10 +211,7 @@ import { I18n } from "./../i18n/i18n.module";
 							</ng-template>
 							<svg
 							class="bx--table-sort-v2__icon"
-							width="10" height="5" viewBox="0 0 10 5"
-							[attr.aria-label]="(column.sorted && column.ascending ? sortDescendingLabel : sortAscendingLabel)"
-							[attr.alt]="(column.sorted && column.ascending ? sortDescendingLabel : sortAscendingLabel)">
-								<title>{{(column.sorted && column.ascending ? sortDescendingLabel : sortAscendingLabel)}}</title>
+							width="10" height="5" viewBox="0 0 10 5">
 								<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
 							</svg>
 						</button>

src/toggle/toggle.component.spec.ts

@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed, fakeAsync, tick, async } from "@angular/core
 import { By } from "@angular/platform-browser";
 import { StaticIconModule } from "../icon/static-icon.module";
 
+import { I18nModule } from "../i18n/i18n.module";
 import { Toggle, ToggleChange } from "./toggle.component";
 
 describe("Toggle", () => {
@@ -14,7 +15,7 @@ describe("Toggle", () => {
 	beforeEach(() => {
 		TestBed.configureTestingModule({
 			declarations: [Toggle],
-			imports: [BrowserAnimationsModule, StaticIconModule],
+			imports: [BrowserAnimationsModule, StaticIconModule, I18nModule],
 			providers: []
 		});
 

src/toggle/toggle.component.ts

@@ -8,6 +8,7 @@ import {
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
+import { I18n } from "../i18n/i18n.module";
 
 /**
  * Defines the set of states for a toggle component.
@@ -76,9 +77,9 @@ export class ToggleChange {
 			[ngClass]="{
 				'bx--skeleton': skeleton
 			}">
-			<span class="bx--toggle__text--left">{{ !skeleton ? "Off" : null }}</span>
+			<span class="bx--toggle__text--left">{{(!skeleton ? offText : null) | async }}</span>
 			<span class="bx--toggle__appearance"></span>
-			<span class="bx--toggle__text--right">{{ !skeleton ? "On" : null }}</span>
+			<span class="bx--toggle__text--right">{{(!skeleton ? onText : null) | async}}</span>
 		</label>
 
 		<label
@@ -112,6 +113,35 @@ export class Toggle extends Checkbox {
 	 */
 	static toggleCount = 0;
 
+	/**
+	 * Text that is set on the left side of the toggle.
+	 * @type {(string)}
+	 * @memberof Toggle
+	 */
+	@Input()
+	set offText(value) {
+		this._offText.next(value);
+	}
+
+	get offText() {
+		return this._offText;
+	}
+
+	/**
+	 * Text that is set on the right side of the toggle.
+	 * @type {(string)}
+	 * @memberof Toggle
+	 */
+	@Input()
+	set onText(value) {
+		this._onText.next(value);
+	}
+
+	get onText() {
+		return this._onText;
+	}
+
+
 	/**
 	 * Size of the toggle component.
 	 * @type {("sm" | "md" | "default")}
@@ -138,12 +168,14 @@ export class Toggle extends Checkbox {
 	 */
 	@Output() change = new EventEmitter<ToggleChange>();
 
+	protected _offText = this.i18n.get("TOGGLE.OFF");
+	protected _onText = this.i18n.get("TOGGLE.ON");
 	/**
 	 * Creates an instance of Toggle.
 	 * @param {ChangeDetectorRef} changeDetectorRef
 	 * @memberof Toggle
 	 */
-	constructor(protected changeDetectorRef: ChangeDetectorRef) {
+	constructor(protected changeDetectorRef: ChangeDetectorRef, protected i18n: I18n) {
 		super(changeDetectorRef);
 		Toggle.toggleCount++;
 	}

src/toggle/toggle.module.ts

@@ -4,6 +4,7 @@ import { FormsModule } from "@angular/forms";
 import { CommonModule } from "@angular/common";
 
 // imports
+import { I18nModule } from "../i18n/i18n.module";
 import { Toggle } from "../toggle/toggle.component";
 
 // exports
@@ -18,7 +19,8 @@ export { Toggle } from "../toggle/toggle.component";
 	],
 	imports: [
 		CommonModule,
-		FormsModule
+		FormsModule,
+		I18nModule
 	]
 })
 export class ToggleModule { }