Merge branch 'master' into master

Author: zvonimirfras

src/timepicker-select/timepicker-select.component.ts

@@ -1,4 +1,10 @@
-import { Component, Input, ChangeDetectorRef, Output, EventEmitter, HostBinding } from "@angular/core";
+import {
+	Component,
+	Input,
+	Output,
+	EventEmitter,
+	HostBinding
+} from "@angular/core";
 import { Select } from "../select/select.component";
 
 @Component({
@@ -20,15 +26,27 @@ export class TimePickerSelect extends Select {
 	@HostBinding("class.bx--select") timeSelect = true;
 	@HostBinding("class.bx--time-picker__select") timePickerSelect = true;
 
+	@Input() id = `timepicker-select-${TimePickerSelect.selectCount++}`;
+
+	/**
+	 * Set to true for a loading select.
+	 */
+	@Input() skeleton = false;
+
+	/**
+	 * `light` or `dark` select theme
+	 */
+	@Input() theme: "light" | "dark" = "dark";
+
 	@HostBinding("class.bx--skeleton") timePickerSelectSkeleton = this.skeleton;
-	@HostBinding("class.bx--select--light") timePickerSelectLight = (true ? this.theme === "light" : false);
 
-	@Input() id = `timepicker-select-${TimePickerSelect.selectCount++}`;
+	@HostBinding("class.bx--select--light") get timePickerSelectLight() {
+		return this.theme === "light";
+	}
 
 	@Output() valueChange: EventEmitter<string> = new EventEmitter();
 
 	onChange(event) {
 		this.valueChange.emit(event.target.value);
-		console.log(this.theme);
 	}
 }

src/timepicker/timepicker.component.ts

@@ -9,14 +9,13 @@ import {
 @Component({
 	selector: "ibm-timepicker",
 	template: `
-			<div
-				[ngClass]="{
-					'bx--select--light': theme === 'light',
-					'bx--skeleton': skeleton
-				}"
-				class="bx--time-picker__input">
+			<div class="bx--time-picker__input">
 				<label *ngIf="!skeleton" [attr.for]="id" class="bx--label">{{label}}</label>
 				<input
+					[ngClass]="{
+						'bx--text-input--light': theme === 'light',
+						'bx--skeleton': skeleton
+					}"
 					[value]="value"
 					[placeholder]="placeholder"
 					[pattern]="pattern"
@@ -45,6 +44,16 @@ export class TimePicker {
 	@Input() disabled = false;
 	@Input() value: string;
 
+	/**
+	 * Set to true for a loading select.
+	 */
+	@Input() skeleton = false;
+
+	/**
+	 * `light` or `dark` select theme
+	 */
+	@Input() theme: "light" | "dark" = "dark";
+
 	@Output() valueChange: EventEmitter<string> = new EventEmitter();
 
 	onChange(event) {

src/timepicker/timepicker.stories.ts

@@ -2,7 +2,12 @@ import { action } from "@storybook/addon-actions";
 import { TimePickerSelectModule } from "../timepicker-select/timepicker-select.module";
 import { TimePickerModule } from "./timepicker.module";
 import { storiesOf, moduleMetadata } from "@storybook/angular";
-import { withKnobs, boolean, text } from "@storybook/addon-knobs/angular";
+import {
+	withKnobs,
+	boolean,
+	text,
+	select
+} from "@storybook/addon-knobs/angular";
 import { ExperimentalModule } from "..";
 
 storiesOf("Time Picker", module)
@@ -18,12 +23,12 @@ storiesOf("Time Picker", module)
 	.addDecorator(withKnobs)
 	.add("Simple", () => ({
 		template: `
-		<ibm-timepicker (valueChange)="timePickerChange($event)" [value]="value" [disabled]="disableTime" label="Select a time">
-			<ibm-timepicker-select (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
+		<ibm-timepicker [theme]="theme" (valueChange)="timePickerChange($event)" [value]="value" [disabled]="disableTime" label="Select a time">
+			<ibm-timepicker-select [theme]="theme" (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
 				<option selected value="AM">AM</option>
 				<option value="PM">PM</option>
 			</ibm-timepicker-select>
-			<ibm-timepicker-select (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
+			<ibm-timepicker-select [theme]="theme" (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
 				<option selected value="Time Zone 1">Time Zone 1</option>
 				<option value="Time Zone 2">Time Zone 2</option>
 			</ibm-timepicker-select>
@@ -35,6 +40,7 @@ storiesOf("Time Picker", module)
 			timePickerSelectChange: action("Time picker select change fired"),
 			value: text("Time in 12hr format", "12:12"),
 			disableTime: boolean("disabled time", false),
-			disabledSelect: boolean("disabled selects", false)
+			disabledSelect: boolean("disabled selects", false),
+			theme: select("Theme", ["dark", "light"], "dark")
 		}
 	}));