aboutsummaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/input.component.exp.ts
diff options
context:
space:
mode:
authorIsrael Lavi <israel.lavi@intl.att.com>2018-05-21 17:42:00 +0300
committerIsrael Lavi <il0695@att.com>2018-05-21 17:52:01 +0300
commit1994c98063c27a41797dec01f2ca9fcbe33ceab0 (patch)
treef30beeaf15a8358f6da78fdd74bcbda74bd334f8 /stories/ng2-component-lab/input.component.exp.ts
parent4749f4631426fcbe29ed98cef8f24cab18b501d0 (diff)
init commit onap ui
Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to 'stories/ng2-component-lab/input.component.exp.ts')
-rw-r--r--stories/ng2-component-lab/input.component.exp.ts79
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>
+ `
+ }]);