feat: add placeholder for ibm number (#2511)

Author: rhythm55

src/number-input/number.component.ts

@@ -67,6 +67,7 @@ export class NumberChange {
 					[required]="required"
 					[attr.aria-label]="ariaLabel"
 					[attr.data-invalid]="invalid ? invalid : null"
+					[placeholder]="placeholder"
 					(input)="onNumberInputChange($event)"/>
 				<svg
 					*ngIf="!skeleton && !warn && invalid"
@@ -155,6 +156,10 @@ export class NumberComponent implements ControlValueAccessor {
 	 * The unique id for the number component.
 	 */
 	@Input() id = `number-${NumberComponent.numberCount}`;
+	/**
+	 * Sets the placeholder attribute on the `input` element.
+	 */
+	@Input() placeholder = "";
 	/**
 	 * Number input field render size
 	 */

src/number-input/number.stories.ts

@@ -35,7 +35,8 @@ storiesOf("Components|Number", module).addDecorator(
 				[warn]="warn"
 				[warnText]="warnText"
 				[size]="size"
-				[disabled]="disabled">
+				[disabled]="disabled"
+				[placeholder]="placeholder">
 			</ibm-number>
 		`,
 		props: {
@@ -51,7 +52,8 @@ storiesOf("Components|Number", module).addDecorator(
 			step: number("step", 1),
 			precision: number("precision"),
 			invalid: boolean("Show form validation (invalid)", false),
-			disabled: boolean("disabled", false)
+			disabled: boolean("disabled", false),
+			placeholder: text("Placeholder text", "Placeholder text")
 		}
 	}))
 	.add("With ngModel", () => ({
@@ -68,6 +70,7 @@ storiesOf("Components|Number", module).addDecorator(
 				[invalid]="invalid"
 				[invalidText]="invalidText"
 				[disabled]="disabled"
+				[placeholder]="placeholder"
 				[(ngModel)]="value">
 			</ibm-number>
 			{{ value }}
@@ -84,7 +87,8 @@ storiesOf("Components|Number", module).addDecorator(
 			step: number("step", 1),
 			precision: number("precision"),
 			invalid: boolean("Show form validation", false),
-			disabled: boolean("disabled", false)
+			disabled: boolean("disabled", false),
+			placeholder: text("Placeholder text", "Placeholder text")
 		}
 	}))
 	.add("Skeleton", () => ({