Merge branch 'master' into select

Author: cal-smith

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 success text", "Data loaded.")
 		}
 	}));

src/loading/loading.component.ts

@@ -5,7 +5,11 @@ import { I18n } from "./../i18n/i18n.module";
 	selector: "ibm-loading",
 	template: `
 		<div
-			[ngClass]="{'bx--loading--small': size === 'sm'}"
+			[ngClass]="{
+				'bx--loading--small': size === 'sm',
+				'bx--loading--stop': !isActive && !overlay,
+				'bx--loading-overlay--stop': !isActive && overlay
+			}"
 			class="bx--loading">
 			<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
 				<title>{{title}}</title>
@@ -21,17 +25,21 @@ export class Loading {
 	 */
 	@Input() title = this.i18n.get().LOADING.TITLE;
 
+	/**
+	 * set to `false` to stop the loading animation
+	 * @type {boolean}
+	 */
+	@Input() isActive = true;
+
 	/**
 	 * Specify the size of the button
 	 * @type {("normal" | "sm")}
-	 * @memberof Loading
 	 */
 	@Input() size: "normal" | "sm" = "normal";
 
 	/**
 	 * Set to `true` to make loader with an overlay.
 	 * @type {boolean}
-	 * @memberof Loading
 	 */
 	@Input() @HostBinding("class.bx--loading-overlay") overlay = false;
 

src/loading/loading.stories.ts

@@ -12,9 +12,10 @@ storiesOf("Loading", module).addDecorator(
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-		<ibm-loading [size]="size" [overlay]="overlay"></ibm-loading>
+		<ibm-loading [isActive]="isActive" [size]="size" [overlay]="overlay"></ibm-loading>
 	`,
 		props: {
+			isActive: boolean("Active", true),
 			overlay: boolean("With overlay", false),
 			size: select("Size of the loading circle", ["normal", "sm"], "normal")
 		}