Change RadioSelectorComponent to not use input radio elements.

AzureFunctions.AngularClient/src/app/radio-selector/radio-selector.component.html

@@ -1,27 +1,8 @@
-<div class="switch" *ngIf="_options && _options.length === 2">
-    <input type="radio"
-           class="switch-input"
-           name="view"
-           [attr.id]="_options[0].id"
-           [checked]="_options[0].value === defaultValue"
-           (click)="select(_options[0])"
-           [attr.disabled]="disabled ? true : null">
-
-    <label [attr.for]="_options[0].id" class="switch-label switch-label-off">
-        {{_options[0].displayLabel}}
-    </label>
-
-    <input type="radio"
-           class="switch-input"
-           name="view"
-           [attr.id]="_options[1].id"
-           [checked]="_options[1].value === defaultValue"
-           (click)="select(_options[1])"
-           [attr.disabled]="disabled ? true : null">
-
-    <label [attr.for]="_options[1].id" class="switch-label switch-label-on">
-        {{_options[1].displayLabel}}
-    </label>
-
-    <span class="switch-selection"></span>
+<div class="switch" *ngIf="options">
+    <div *ngFor="let option of options"
+        class="switch-label"
+        [class.selected]="option.value === defaultValue"
+        (click)="select(option)">
+        {{option.displayLabel}}
+    </div>
 </div>

AzureFunctions.AngularClient/src/app/radio-selector/radio-selector.component.scss

@@ -30,32 +30,16 @@
         font-weight: bold;
     }
 
-.switch-label-off {
-    padding-left: 2px;
-}
-
-.switch-label-on {
-    padding-right: 2px;
-}
-
 .switch-input {
     display: none;
 }
     .switch-input:checked + .switch-label {
         font-weight: bold;
         color: white;
     }
-    .switch-input:checked + .switch-label-on ~ .switch-selection {
-        left: 100px;
-    }
 
-.switch-selection {
+.selected {
     display: block;
-    position: absolute;
     z-index: 1;
-    top: 2px;
-    left: 2px;
-    width: 98px;
-    height: 21px;
     background: $primary-color;
 }

AzureFunctions.AngularClient/src/app/radio-selector/radio-selector.component.ts

@@ -1,42 +1,26 @@
-import { Subject } from 'rxjs/Rx';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import {SelectOption} from '../shared/models/select-option';
+import { Subject } from 'rxjs/Subject';
+import { SelectOption } from '../shared/models/select-option';
+
 @Component({
   selector: 'radio-selector',
   templateUrl: './radio-selector.component.html',
   styleUrls: ['./radio-selector.component.scss'],
 })
 export class RadioSelectorComponent<T> {
+    @Input() options: SelectOption<T>[];
     @Input() disabled: boolean;
     @Input() public defaultValue: T;
     @Output() public value: Subject<T>;
-    public _options: SelectOption<T>[];
 
     constructor() {
         this.value = new EventEmitter<T>();
     }
 
-    @Input('options') set options(value: SelectOption<T>[]) {
-        this._options = [];
-        for (let i = 0; i < value.length; i++) {
-            this._options.push({
-                id: this.getRandomInt(),
-                displayLabel: value[i].displayLabel,
-                value: value[i].value
-            });
-        }
-    }
-
     select(option: SelectOption<T>) {
         if (!this.disabled) {
             this.defaultValue = option.value;
             this.value.next(option.value);
         }
     }
-
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
-    getRandomInt() {
-        let min = 1, max = 10000;
-       return Math.floor(Math.random() * (max - min + 1)) + min;
-    }
 }