Merge "init commit onap ui"HEAD2.0.0-ONAPmasterbeijing2.0.0-ONAP

1 files changed, 79 insertions, 0 deletions

diff --git a/stories/ng2-component-lab/input.component.exp.ts b/stories/ng2-component-lab/input.component.exp.ts
new file mode 100644
index 0000000..7e931d6
--- /dev/null
+++ b/stories/ng2-component-lab/input.component.exp.ts
@@ -0,0 +1,79 @@
+import { experimentOn } from '@islavi/ng2-component-lab';
+
+const valueChange = (value: any): void => {
+    console.log('The value was changed! >>>>', value);
+};
+
+export default experimentOn('Input')
+  .group("Input",[
+      {
+        id: 'normalInput',
+        showSource: true,
+        title: 'Normal input',
+        description: 'Normal input',
+        template: `
+        <sdc-input label="Please Enter value" name="myValue" testId="myTestId"></sdc-input>
+        `
+      },
+      {
+        id: 'disabledInput',
+        showSource: true,
+        title: 'Disabled input',
+        description: 'Disabled input',
+        template: `
+        <sdc-input [disabled]="true"></sdc-input>
+        `
+      },
+      {
+        id: 'InputTypeNumber',
+        showSource: true,
+        title: 'Input type number',
+        description: 'Input type number',
+        template: `
+        <sdc-input type='number'></sdc-input>
+        `
+      },
+      {
+        id: 'Input required',
+        title: 'Input required',
+        description: 'Input required (this add red * to the label, but does not perform validation, use sdc-validation for validation)',
+        showSource: true,
+        template: `
+        <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+      `
+      },
+      {
+        id: 'inputWithMaxLength',
+        title: 'Input with max length',
+        description: 'Input with max length',
+        showSource: true,
+        template: `
+        <sdc-input [maxLength]="5"></sdc-input>
+        `
+    },
+    {
+        id: 'inputWithPlaceholder',
+        title: 'Input with placeholder, custom class, and tests ID',
+        description: 'Input with placeholder',
+        showSource: true,
+        template: `
+      <sdc-input placeHolder="Text..." [classNames]="'my-custom-class another-class'" [testId]="'customTestId'"></sdc-input>
+    `
+    },
+    {
+        id: 'inputWithDebounce',
+        title: 'Input with debounce time',
+        description: `<pre>On value change event code:
+        const valueChange = (value: any): void => {
+            console.log('The value was changed! >>>>', value);
+        };
+        This event will happen 5 sec after the change
+        </pre>`,
+        showSource: true,
+        context: {
+            changeEvent: valueChange
+        },
+        template: `
+      <sdc-input [debounceTime]="5000" (valueChange)="changeEvent($event)"></sdc-input>
+      `
+    }]);