From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001
From: Israel Lavi <israel.lavi@intl.att.com>
Date: Mon, 21 May 2018 17:42:00 +0300
Subject: init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>
---
 .../ng2-component-lab/validation.component.exp.ts  | 162 +++++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 stories/ng2-component-lab/validation.component.exp.ts

(limited to 'stories/ng2-component-lab/validation.component.exp.ts')

diff --git a/stories/ng2-component-lab/validation.component.exp.ts b/stories/ng2-component-lab/validation.component.exp.ts
new file mode 100644
index 0000000..7f18c93
--- /dev/null
+++ b/stories/ng2-component-lab/validation.component.exp.ts
@@ -0,0 +1,162 @@
+import { experimentOn } from '@islavi/ng2-component-lab';
+import { RegexPatterns } from '../../src/angular/common/enums';
+import { DropDownOptionType, IDropDownOption } from './../../src/angular/form-elements/dropdown/dropdown-models';
+
+const options1: IDropDownOption[] = [
+    {
+        label: 'First Option',
+        value: 'First Option',
+    },
+    {
+        label: 'Second Option',
+        value: 'Second Option',
+    },
+    {
+        label: 'Third Option',
+        value: 'Third Option',
+        type: DropDownOptionType.Simple
+    }
+];
+
+export default experimentOn('Validation')
+    .group("Validation", [
+        {
+            id: 'validation1',
+            showSource: true,
+            title: 'Simple validation',
+            description: 'Simple validation (validating that email is valid and that user inserted something in the field). \
+                            By default the validation starts after first key press',
+            context: {
+                emailPattern: RegexPatterns.email
+            },
+            template: `
+                <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
+                <sdc-validation [validateElement]="email">
+                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
+                    <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
+                </sdc-validation>
+            `
+        },
+        {
+            id: 'validation2',
+            showSource: true,
+            title: 'Simple validation',
+            description: 'Simple validation',
+            context: {
+                numbersPattern: RegexPatterns.numbers,
+                isValueHundred: (value: any) => {
+                    return (Number(value) === 100) ? true : false;
+                }
+            },
+            template: `
+                <sdc-input #numberValidator label="Please enter some number" [maxLength]="10" required="true"></sdc-input>
+                <sdc-validation [validateElement]="numberValidator">
+                    <sdc-regex-validator message="This is not a number!" [pattern]="numbersPattern"></sdc-regex-validator>
+                    <sdc-custom-validator message="The number should be 100" [callback]="isValueHundred"></sdc-custom-validator>
+                </sdc-validation>
+            `
+        },
+        {
+            id: 'validation3',
+            showSource: true,
+            title: 'Disabled validation',
+            description: 'Disabled validation',
+            context: {
+                emailPattern: RegexPatterns.email
+            },
+            template: `
+                <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
+                <sdc-validation [validateElement]="email" disabled='true'>
+                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
+                    <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
+                </sdc-validation>
+            `
+        },
+        {
+            id: 'validation4',
+            showSource: true,
+            title: 'Validation with value already entered',
+            description: 'Validation with value already entered',
+            context: {
+                emailPattern: RegexPatterns.email
+            },
+            template: `
+                <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true" value="notvalidemail@"></sdc-input>
+                <sdc-validation [validateElement]="email">
+                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
+                    <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
+                </sdc-validation>
+            `
+        },
+        {
+            id: 'validation5',
+            showSource: true,
+            title: 'Validation with validity changed callback',
+            description: 'Simple validation with alert when validity changes',
+            context: {
+                numbersPattern: RegexPatterns.numbers,
+                validityChanged: (newState: boolean) => {
+                    alert("Validity has changed to " + newState);
+                }
+            },
+            template: `
+                <sdc-input #validatorWithCallback label="Please enter a number" [maxLength]="10" required="true"></sdc-input>
+                <sdc-validation [validateElement]="validatorWithCallback" (validityChanged)="validityChanged($event)">
+                    <sdc-regex-validator message="This is not a number!" [pattern]="numbersPattern"></sdc-regex-validator>
+                </sdc-validation>
+            `
+        },
+        {
+            id: 'dropdownWithValidation',
+            showSource: true,
+            context: {
+                options: options1,
+                isThirdOption: (value: any) => {
+                    return value === 'Third Option';
+                }
+            },
+            title: 'DropDown with validation',
+            description: 'DropDown with validation',
+            template: `
+            <sdc-dropdown #mydropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options"></sdc-dropdown>
+            <sdc-validation [validateElement]="mydropdown">
+                <sdc-required-validator message="Field is required!"></sdc-required-validator>
+                <sdc-custom-validator message="Please select the third option" [callback]="isThirdOption"></sdc-custom-validator>
+            </sdc-validation>
+            `
+        },
+        {
+            id: 'validationGroup',
+            showSource: true,
+            context: {
+                options: options1,
+                emailPattern: RegexPatterns.email,
+                isThirdOption: (value: any) => {
+                    return value === 'Third Option';
+                },
+                validateGroup: (validationGroup) => {
+                    validationGroup.validate();
+                }
+            },
+            title: 'Validation group',
+            description: 'Validation group (activating validation from code)',
+            template: `
+            <sdc-validation-group #validationGroup>
+
+                <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
+                <sdc-validation [validateElement]="email">
+                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
+                    <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
+                </sdc-validation>
+
+                <sdc-dropdown #mydropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options"></sdc-dropdown>
+                <sdc-validation [validateElement]="mydropdown">
+                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
+                    <sdc-custom-validator message="Please select the third option" [callback]="isThirdOption"></sdc-custom-validator>
+                </sdc-validation>
+
+            </sdc-validation-group>
+            <sdc-button text="validate group" (click)="validateGroup(validationGroup)"></sdc-button>
+            `
+        }
+    ]);
-- 
cgit