1 files changed, 147 insertions, 0 deletions
diff --git a/stories/angular/loader.stories.ts b/stories/angular/loader.stories.ts
new file mode 100644
index 0000000..ccc4152
--- /dev/null
+++ b/stories/angular/loader.stories.ts
@@ -0,0 +1,147 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text, number, boolean, array, select, color, date, button } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+import { action, configureActions } from '@storybook/addon-actions';
+import { moduleMetadata } from '@storybook/angular';
+import { LoaderComponent, ButtonComponent, InputComponent, SvgIconComponent } from '../../src/angular/components';
+import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { LoaderService } from '../../src/angular/loader/loader.service';
+import { LoaderSize } from '../../src/angular/loader/loader.component';
+
+storiesOf('Loader', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+        LoaderComponent,
+        ButtonComponent,
+        InputComponent,
+        SvgIconComponent
+      ],
+      imports: [
+          CommonModule,
+        FormsModule,
+        ReactiveFormsModule
+      ],
+      providers: [
+          LoaderService
+      ]
+    })
+  )
+  .add('Relative loader', () => {
+    const _size = select('size', Object.values(LoaderSize), LoaderSize.large);
+    const _name = text('name', 'RelativeLoader');
+    const _active = boolean('active', false);
+
+      return {
+        props: {
+            activateLogger: (loader) => {
+                loader.activate();
+                action('Loader activated')();
+            },
+            deactivateLogger: (loader) => {
+                loader.deactivate();
+                action('Loader deactivated')();
+            },
+            _size, _name, _active
+        },
+        template: `
+        <h2>Loader visible: {{_active}}</h2>
+        <sdc-loader #loader1 [size]="_size" [name]="_name" [(active)]="_active">
+            <div style="border:1px solid black; padding:20px 100px;">
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+            </div>
+        </sdc-loader >
+        <div style="margin:10px 0px;">
+            <sdc-button text="Show loader" (click)="activateLogger(loader1)"></sdc-button>
+            <sdc-button text="Hide loader" (click)="deactivateLogger(loader1)"></sdc-button>
+        </div>
+        `
+      }
+    },
+    { notes: `<h2>Relative loader</h2>
+            Relative loader that wraps dom elements.
+            Use the KNOBS tab to change values.`
+    }
+)
+.add('Relative loader with service', () => {
+    const _size = select('size', Object.values(LoaderSize), LoaderSize.large);
+    const _name = text('name', 'RelativeLoader');
+    const _active = boolean('active', false);
+
+      return {
+        props: {
+            activateLogger: (loader) => {
+                loader.activate();
+                action('Loader activated')();
+            },
+            deactivateLogger: (loader) => {
+                loader.deactivate();
+                action('Loader deactivated')();
+            },
+            _size, _name, _active
+        },
+        template: `
+        <h2>Loader visible: {{_active}}</h2>
+        <sdc-loader #loader1 [size]="_size" [name]="_name" [(active)]="_active">
+            <div style="border:1px solid black; padding:20px 100px;">
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+            </div>
+        </sdc-loader >
+        <div style="margin:10px 0px;">
+            <sdc-button text="Show loader" (click)="activateLogger(loader1)"></sdc-button>
+            <sdc-button text="Hide loader" (click)="deactivateLogger(loader1)"></sdc-button>
+        </div>
+        `
+      }
+    },
+    { notes: `<h2>Relative loader</h2>
+            Relative loader that wraps dom elements.
+            Use the KNOBS tab to change values.`
+    }
+)
+
+
+
+
+
+
+
+
+.add('General loader', () => {
+    const _size = select('size', Object.values(LoaderSize), LoaderSize.large);
+    const _name = text('name', 'global');
+    const _global = boolean('global', true);
+
+      return {
+        props: {
+            activateLogger: (loader) => {
+                loader.loaderService.activate(loader.name);
+                setTimeout(() => {
+                    loader.loaderService.deactivate(loader.name);
+                }, 2000);
+                action('Global loader activated')();
+            },
+            _size, _name, _global
+        },
+        template: `
+        <sdc-loader [global]="_global" [name]="_name" [size]="_size" #globalLoader></sdc-loader>
+        <sdc-button text="Show global loader" (click)="activateLogger(globalLoader)"></sdc-button>
+        `
+      }
+    },
+    { notes: `<h2>General loader</h2>
+            General loader to hide full screen.
+            For this sample added setTimeout() function so the loader will deactivated after 2 seconds.
+            Use the KNOBS tab to change values.`
+    }
+)