diff options
Diffstat (limited to 'stories/ng2-component-lab/dropdown.component.exp.ts')
| -rw-r--r-- | stories/ng2-component-lab/dropdown.component.exp.ts | 195 |
1 files changed, 0 insertions, 195 deletions
diff --git a/stories/ng2-component-lab/dropdown.component.exp.ts b/stories/ng2-component-lab/dropdown.component.exp.ts deleted file mode 100644 index 025409e..0000000 --- a/stories/ng2-component-lab/dropdown.component.exp.ts +++ /dev/null @@ -1,195 +0,0 @@ -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> - ` - } - ]); |