Merge branch 'master' into packagr-update

UjjwalUpadhyay123-bit · Aug 4, 2020 · 0ea3a5c · 0ea3a5c
2 parents af58fed + 069069e
commit 0ea3a5c
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 24 deletions.
diff --git a/src/content-switcher/content-switcher-option.directive.ts b/src/content-switcher/content-switcher-option.directive.ts
@@ -49,7 +49,7 @@ export class ContentSwitcherOption {
 
 	protected _active = false;
 
-	@HostListener("click")
+	@HostListener("click", ["$event"])
 	hostClick(event: MouseEvent) {
 		this.onClick.emit(event);
 		// skip setting and emitting if the option is already active
@@ -58,7 +58,7 @@ export class ContentSwitcherOption {
 		this.selected.emit(true);
 	}
 
-	@HostListener("focus")
+	@HostListener("focus", ["$event"])
 	doFocus(event: FocusEvent) {
 		this.onFocus.emit(event);
 		// skip setting and emitting if the option is already active

diff --git a/src/datepicker/datepicker.component.ts b/src/datepicker/datepicker.component.ts
@@ -221,6 +221,8 @@ export class DatePicker implements
 		onDayCreate: (_dObj, _dStr, _fp, dayElem) => {
 			dayElem.classList.add("bx--date-picker__day");
 		},
+		nextArrow: this.rightArrowHTML(),
+		prevArrow: this.leftArrowHTML(),
 		value: this.value
 	};
 
@@ -528,4 +530,26 @@ export class DatePicker implements
 		// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`
 		return !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;
 	}
+
+	/**
+	 * Right arrow HTML passed to flatpickr
+	 */
+	protected rightArrowHTML() {
+		return `
+			<svg width="16px" height="16px" viewBox="0 0 16 16">
+				<polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>
+				<rect width="16" height="16" style="fill:none" />
+			</svg>`;
+	}
+
+	/**
+	 * Left arrow HTML passed to flatpickr
+	 */
+	protected leftArrowHTML() {
+		return `
+			<svg width="16px" height="16px" viewBox="0 0 16 16">
+				<polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>
+				<rect width="16" height="16" style="fill:none" />
+			</svg>`;
+	}
 }
diff --git a/src/toggle/toggle.component.spec.ts b/src/toggle/toggle.component.spec.ts
@@ -28,11 +28,11 @@ describe("Toggle", () => {
 		expect(component instanceof Toggle).toBe(true);
 	});
 
-	it("should have input with class 'bx--toggle'", () => {
-		expect(buttonElement.className.includes("bx--toggle")).toEqual(true);
+	it("should have input with class 'bx--toggle-input'", () => {
+		expect(buttonElement.className.includes("bx--toggle-input")).toEqual(true);
 		component.size = "sm";
 		fixture.detectChanges();
-		expect(buttonElement.className.includes("bx--toggle")).toEqual(true);
+		expect(buttonElement.className.includes("bx--toggle-input")).toEqual(true);
 	});
 
 	it("should change state", () => {
@@ -46,18 +46,10 @@ describe("Toggle", () => {
 	});
 
 	it("should display small version of toggle when size equals sm", () => {
-		expect(buttonElement.className.includes("bx--toggle--small")).toEqual(false);
+		expect(buttonElement.className.includes("bx--toggle-input--small")).toEqual(false);
 		component.size = "sm";
 		fixture.detectChanges();
-		expect(buttonElement.className.includes("bx--toggle--small")).toEqual(true);
-	});
-
-	it("should display SVG in small version of toggle", () => {
-		component.size = "sm";
-		fixture.detectChanges();
-		labelElement = fixture.debugElement.query(By.css("label")).nativeElement;
-		expect(fixture.debugElement.query(By.css("svg")).nativeElement).not.toBeNull();
-		expect(labelElement.innerHTML).toContain("bx--toggle__check");
+		expect(buttonElement.className.includes("bx--toggle-input--small")).toEqual(true);
 	});
 
 	it("should match the input checked value", () => {

diff --git a/src/toggle/toggle.component.ts b/src/toggle/toggle.component.ts
@@ -55,10 +55,10 @@ export class ToggleChange {
 			<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
 		</label>
 		<input
-			class="bx--toggle"
+			class="bx--toggle-input"
 			type="checkbox"
 			[ngClass]="{
-				'bx--toggle--small': size === 'sm',
+				'bx--toggle-input--small': size === 'sm',
 				'bx--skeleton': skeleton
 			}"
 			[id]="id"
@@ -72,18 +72,15 @@ export class ToggleChange {
 			(change)="onChange($event)"
 			(click)="onClick($event)">
 		<label
-			class="bx--toggle__label"
+			class="bx--toggle-input__label"
 			[for]="id"
 			[ngClass]="{
 				'bx--skeleton': skeleton
 			}">
-			<span class="bx--toggle__text--left">{{(!skeleton ? getOffText() : null) | async }}</span>
-			<span class="bx--toggle__appearance">
-				<svg *ngIf="size === 'sm'" class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
-					<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"/>
-				</svg>
+			<span class="bx--toggle__switch">
+				<span class="bx--toggle__text--off">{{(!skeleton ? getOffText() : null) | async }}</span>
+				<span class="bx--toggle__text--on">{{(!skeleton ? getOnText() : null) | async}}</span>
 			</span>
-			<span class="bx--toggle__text--right">{{(!skeleton ? getOnText() : null) | async}}</span>
 		</label>
 	`,
 	providers: [