Merge pull request #349 from youda97/skeleton-nput

feat(input): Add skeleton state

Author: zvonimirfras

src/input/input.directive.ts

@@ -21,6 +21,7 @@ export class TextInput {
 	@Input() theme: "light" | "dark" = "dark";
 
 	@HostBinding("class.bx--text-input") inputClass = true;
+	@HostBinding("class.bx--skeleton") @Input() skeleton = false;
 	@HostBinding("class.bx--text-input--light") get isLightTheme() {
 		return this.theme === "light";
 	}

src/input/input.stories.ts

@@ -33,4 +33,21 @@ storiesOf("Input", module).addDecorator(
 		props: {
 			theme: select("Theme", ["dark", "light"], "dark")
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+		<div style="width: 300px">
+			<ibm-label skeleton="true">
+				<input ibmText skeleton="true">
+			</ibm-label>
+			<br>
+			<input ibmText skeleton="true">
+		</div>
+		<br><br>
+		<div style="width: 160px">
+			<ibm-label skeleton="true">
+				<div ibmTextArea skeleton="true"></div>
+			</ibm-label>
+		</div>
+		`
 	}));

src/input/label.component.ts

@@ -31,7 +31,14 @@ import {
 @Component({
 	selector: "ibm-label",
 	template: `
-		<label [for]="labelInputID" class="bx--label"><ng-content></ng-content></label>
+		<label
+			[for]="labelInputID"
+			class="bx--label"
+			[ngClass]="{
+				'bx--skeleton': skeleton
+			}">
+			<ng-content></ng-content>
+		</label>
 		<ng-content select="input,textarea,div"></ng-content>
 	`
 })
@@ -55,6 +62,10 @@ export class Label implements AfterContentInit {
 	 * @memberof Label
 	 */
 	@Input() labelState: "success" | "warning" | "error" | "" = "";
+	/**
+	 * Set to `true` for a loading label.
+	 */
+	@Input() skeleton = false;
 
 	@HostBinding("class.bx--form-item") labelClass = true;
 

src/input/text-area.directive.ts

@@ -21,6 +21,7 @@ export class TextArea {
 	@Input() theme: "light" | "dark" = "dark";
 
 	@HostBinding("class.bx--text-area") baseClass = true;
+	@HostBinding("class.bx--skeleton") @Input() skeleton = false;
 	@HostBinding("class.bx--text-area--light") get isLightTheme() {
 		return this.theme === "light";
 	}