feat(inline-loading): Add active/inactive states

Author: youda97

src/inline-loading/inline-loading.component.ts

@@ -12,7 +12,10 @@ import {
 		<div class="bx--inline-loading__animation">
 			<div
 				*ngIf="success === false"
-				class="bx--loading bx--loading--small">
+				class="bx--loading bx--loading--small"
+				[ngClass]="{
+					'bx--loading--stop': !isActive
+				}">
 				<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
 					<circle cx="0" cy="0" r="37.5"></circle>
 				</svg>
@@ -30,22 +33,20 @@ import {
 export class InlineLoading {
 	/**
 	 * Specify the text description for the loading state.
-	 *
-	 * @memberof InlineLoading
 	 */
 	@Input() loadingText;
 	/**
 	 * Specify the text description for the success state.
-	 *
-	 * @memberof InlineLoading
 	 */
 	@Input() successText;
 	/**
 	 * Provide a delay for the `setTimeout` for success.
-	 *
-	 * @memberof InlineLoading
 	 */
 	@Input() successDelay = 1500;
+	/**
+	 * set to `false` to stop the loading animation
+	 */
+	@Input() isActive = true;
 
 	/**
 	 * Returns value `true` if the component is in the success state.
@@ -69,16 +70,13 @@ export class InlineLoading {
 	 * Emits event after the success state is active
 	 *
 	 * @type {EventEmitter<any>}
-	 * @memberof InlineLoading
 	 */
 	@Output() onSuccess: EventEmitter<any> = new EventEmitter();
 
 	@HostBinding("class.bx--inline-loading") loadingClass = true;
 
 	/**
 	 * Set to `true` if the action is completed successfully.
-	 *
-	 * @memberof InlineLoading
 	 */
 	protected _success = false;
 }

src/inline-loading/inline-loading.stories.ts

@@ -1,7 +1,7 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { withNotes } from "@storybook/addon-notes";
 import { action } from "@storybook/addon-actions";
-import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
+import { withKnobs, text, object } from "@storybook/addon-knobs/angular";
 
 import { InlineLoadingModule, ButtonModule } from "../";
 
@@ -19,7 +19,7 @@ storiesOf("Inline Loading", module)
 		`,
 		props: {
 			onSuccess: action("onSuccess"),
-			loadingText: "Loading data...",
-			successText: "Data loaded."
+			loadingText: text("The loading text", "Loading data..."),
+			successText: text("The sucess text", "Data loaded.")
 		}
 	}));