Add missing attributes to timepicker

Author: Maged Hennawy

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

@@ -20,10 +20,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;
+	/**
+	 * Set to `true` for an invalid select component.
+	 */
+	@Input() invalid = 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 (true ? this.theme === "light" : false);
+	}
 
 	@Output() valueChange: EventEmitter<string> = new EventEmitter();
 

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,7 @@ 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 +18,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 +35,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")
 		}
 	}));