docs(cb-a11y): Building examples - Form controls

Author: AlmeroSteyn

public/docs/_examples/cb-a11y/ts/app/a11y-form-controls.component.html

@@ -18,16 +18,18 @@
         Choose your favourite Angular 2 language:
     </a11y-radiobuttons>
 
+    <a11y-select [optionsModel]="selectOptions">Why are you interested in a11y?</a11y-select>
 
-    <div class="form-group">
-        <label>Why are you interested in a11y?
-            <select name="a11yreason" class="form-control">
-                <option value="1">Curiosity</option>
-                <option value="2">Increased userbase</option>
-                <option value="3">Legal reasons</option>
-            </select>
-        </label>
-    </div>
+
+    <!--<div class="form-group">-->
+        <!--<label>Why are you interested in a11y?-->
+            <!--<select class="form-control">-->
+                <!--<option value="1">Curiosity</option>-->
+                <!--<option value="2">Increased userbase</option>-->
+                <!--<option value="3">Legal reasons</option>-->
+            <!--</select>-->
+        <!--</label>-->
+    <!--</div>-->
 
     <!--<label for="fortextArea">-->
         <!--Label for text area:-->

public/docs/_examples/cb-a11y/ts/app/a11y-form-controls.component.ts

@@ -5,23 +5,27 @@ import {A11yInputExplicit} from "./a11y-input-explicit.component";
 import {A11yCheckboxes} from "./a11y-checkboxes.component";
 import {A11yHelper} from "./services/a11y-helper.service";
 import {A11yRadiobuttons} from "./a11y-radiobuttons.component";
+import {A11ySelect} from "./a11y-select.component";
 
 @Component({
     selector: 'a11y-form-controls',
     templateUrl: './app/a11y-form-controls.component.html',
-    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, A11yInput, A11yInputExplicit, A11yCheckboxes, A11yRadiobuttons]
+    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, A11yInput, A11yInputExplicit,
+        A11yCheckboxes, A11yRadiobuttons, A11ySelect]
 })
 export class A11yFormControls implements OnInit{
 
     checkBoxes: any;
     radioButtons: any;
+    selectOptions: any;
 
     constructor(private _a11yHelper: A11yHelper){
     }
 
     ngOnInit(){
         this.checkBoxes = this._a11yHelper.getCheckboxModel();
         this.radioButtons = this._a11yHelper.getRadiobuttonsModel();
+        this.selectOptions = this._a11yHelper.getSelectOptions();
     }
 
     submit(formValue: any):void{

public/docs/_examples/cb-a11y/ts/app/a11y-select.component.html

@@ -0,0 +1,7 @@
+<div class="form-group">
+    <label><ng-content></ng-content>
+        <select class="form-control">
+            <option *ngFor="#option of optionsModel" [value]="option.value">{{option.name}}</option>
+        </select>
+    </label>
+</div>

public/docs/_examples/cb-a11y/ts/app/a11y-select.component.ts

@@ -0,0 +1,12 @@
+import {Input, Component} from "angular2/core";
+
+@Component({
+    selector: 'a11y-select',
+    templateUrl: './app/a11y-select.component.html'
+})
+export class A11ySelect{
+
+    @Input()
+    optionsModel: any
+
+}

public/docs/_examples/cb-a11y/ts/app/services/a11y-helper.service.ts

@@ -55,6 +55,23 @@ export class A11yHelper {
         ];
     }
 
+    getSelectOptions(): any {
+        return [
+            {
+                name: 'Curiosity',
+                value: 0
+            },
+            {
+                name: 'Increased userbase',
+                value: 1
+            },
+            {
+                name: 'Legal reasons',
+                value: 2
+            }
+        ];
+    }
+
     private randomGuidSnippet():string {
         return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
     }