summaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/dropdown.component.exp.ts
diff options
context:
space:
mode:
Diffstat (limited to 'stories/ng2-component-lab/dropdown.component.exp.ts')
-rw-r--r--stories/ng2-component-lab/dropdown.component.exp.ts195
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>
+ `
+ }
+ ]);