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

1 files changed, 195 insertions, 0 deletions

diff --git a/stories/ng2-component-lab/dropdown.component.exp.ts b/stories/ng2-component-lab/dropdown.component.exp.ts
new file mode 100644
index 0000000..025409e
--- /dev/null
+++ b/stories/ng2-component-lab/dropdown.component.exp.ts
@@ -0,0 +1,195 @@
+import { experimentOn } from '@islavi/ng2-component-lab';
+import { IDropDownOption, DropDownOptionType, DropDownTypes } from "../../src/angular/form-elements/dropdown/dropdown-models";
+
+const options1: IDropDownOption[] = [
+    {
+        label: 'First Option Label',
+        value: 'firstOptionValue',
+    },
+    {
+        label: 'Second Option Label',
+        value: 'secondOptionValue',
+    },
+    {
+        label: 'Third Option Label',
+        value: 'thirdOptionValue',
+        type: DropDownOptionType.Simple
+    }
+];
+
+const options2: IDropDownOption[] = [
+    {
+        label: 'Header Label',
+        value: 'headerValue',
+        type: DropDownOptionType.Header
+    },
+    {
+        label: 'First Option Label',
+        value: 'firstOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Disabled Option Label',
+        value: 'headerValue',
+        type: DropDownOptionType.Disable
+    },
+    {
+        label: 'Second Option Label',
+        value: 'secondOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Ruler Label',
+        value: 'rulerValue',
+        type: DropDownOptionType.HorizontalLine
+    },
+    {
+        label: 'Third Option Label',
+        value: 'thirdOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Fourth Option Label',
+        value: 'FourthOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Fifth Option Label',
+        value: 'fifthOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Ruler Label',
+        value: 'rulerValue',
+        type: DropDownOptionType.HorizontalLine
+    },
+    {
+        label: 'Third Option Label',
+        value: 'thirdOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Fourth Option Label',
+        value: 'FourthOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Fifth Option Label',
+        value: 'fifthOptionValue',
+        type: DropDownOptionType.Simple
+    }
+];
+
+export default experimentOn('DropDown')
+    .group("DropDown", [
+        {
+            id: 'normalDropDown',
+            showSource: true,
+            context: {
+                options: options1,
+                onChange: function(option) {
+                    this.valueSelected = option.value;
+                }
+            },
+            title: 'Normal DropDown',
+            description: 'Normal DropDown',
+            template: `
+            <sdc-dropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options" (changed)="onChange($event)"></sdc-dropdown>
+            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 700">{{valueSelected}}</strong></div>
+            `
+        }, {
+            id: 'groupDropDown',
+            showSource: true,
+            context: {
+                options: options2,
+                onChange: function(option) {
+                    this.valueSelected = option.value;
+                }
+            },
+            title: 'DropDown with groups',
+            description: 'DropDown with groups',
+            template: `
+            <sdc-dropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options" (changed)="onChange($event)"></sdc-dropdown>
+            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
+            `
+        },
+        {
+            id: 'groupDropDownPreSelect',
+            showSource: true,
+            context: {
+                options: options2,
+                onChange: function(option) {
+                    this.valueSelected = option.value;
+                }
+            },
+            title: 'DropDown with groups and pre-selected value',
+            description: 'DropDown with groups and pre-selected value',
+            template: `
+            <sdc-dropdown label="Hi I am a label"
+                            placeHolder="Please choose option"
+                            [options]="options"
+                            [selectedOption]="{label: 'does not matter', value: 'firstOptionValue'}"
+                            (changed)="onChange($event)"></sdc-dropdown>
+            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
+            `
+        },
+        {
+            id: 'headlesspDropDown',
+            showSource: true,
+            context: {
+                options: options2,
+                dropDownHedlessType: DropDownTypes.Headless,
+                onChange: function(option) {
+                    this.valueSelected = option.value;
+                }
+            },
+            title: 'Headless and Labeless DropDown',
+            description: 'Headless and labeless DropDown',
+            template: `
+            <button style="margin-bottom: 10px;" SdcDropdownTrigger [dropDown]="dropDown1">Click to toggle!</button>
+            <sdc-dropdown #dropDown1 [options]="options" [type]="dropDownHedlessType" (changed)="onChange($event)"></sdc-dropdown>
+            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
+            `
+        },
+        {
+            id: 'disabledDropDown',
+            showSource: true,
+            context: {
+                options: options2,
+                onChange: function(option) {
+                    this.valueSelected = option.value;
+                }
+            },
+            title: 'Disabled DropDown',
+            description: 'Disabled DropDown',
+            template: `
+            <sdc-dropdown   label="Hi I am a label"
+                            placeHolder="Please choose option"
+                            disabled="true"
+                            [options]="options"
+                            (changed)="onChange($event)"></sdc-dropdown>
+            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
+            `
+        },
+        {
+            id: 'normalAutoDropDown',
+            showSource: true,
+            context: {
+                options: options1,
+                dropDownAutoType: DropDownTypes.Auto,
+                onChange: function(option) {
+                    this.valueSelected = option.value;
+                }
+            },
+            title: 'Normal Auto DropDown',
+            description: 'Normal Auto DropDown',
+            template: `
+            <sdc-dropdown label="Hi I am a label"
+                            placeHolder="Please choose option"
+                            [type]="dropDownAutoType"
+                            [options]="options"
+                            (changed)="onChange($event)"></sdc-dropdown>
+            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
+            `
+        }
+    ]);