4 files changed, 139 insertions, 0 deletions
diff --git a/src/angular/form-elements/radios/radio-button.model.ts b/src/angular/form-elements/radios/radio-button.model.ts
new file mode 100644
index 0000000..1ad4b3f
--- /dev/null
+++ b/src/angular/form-elements/radios/radio-button.model.ts
@@ -0,0 +1,15 @@
+export interface IRadioButtonModel {
+    label: string;
+    disabled: boolean;
+    name: string;
+    value: string;
+};
+
+export interface IOptionGroup {
+    items: IRadioButtonModel[];
+};
+
+export enum Direction {
+    vertical,
+    horizontal
+}
diff --git a/src/angular/form-elements/radios/radio-buttons-group.component.html.ts b/src/angular/form-elements/radios/radio-buttons-group.component.html.ts
new file mode 100644
index 0000000..28a27af
--- /dev/null
+++ b/src/angular/form-elements/radios/radio-buttons-group.component.html.ts
@@ -0,0 +1,20 @@
+export default `
+<label class='sdc-radio-group__legend'>{{legend}}</label>
+<div class='sdc-radio-group__radios {{direction}}'>
+    <template *ngFor="let item of options.items">
+        <div class="sdc-radio">
+            <label class="sdc-radio__animation-wrapper" SdcRippleClickAnimation [rippleClickDisabled]="disabled">
+                <input class="sdc-radio__input"
+                    type="radio"
+                    name="{{item.name}}"
+                    value="{{item.value}}"
+                    disabled="{{disabled || item.disabled || false}}"
+                    (change)="onValueChanged(item.value)"
+                    [(ngModel)]="value"
+                    />
+                <span class="sdc-radio__label">{{ item.label }}</span>
+            </label>
+        </div>
+    </template>
+</div>
+`;
diff --git a/src/angular/form-elements/radios/radio-buttons-group.component.spec.ts b/src/angular/form-elements/radios/radio-buttons-group.component.spec.ts
new file mode 100644
index 0000000..273a701
--- /dev/null
+++ b/src/angular/form-elements/radios/radio-buttons-group.component.spec.ts
@@ -0,0 +1,52 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RadioGroupComponent } from "./radio-buttons-group.component";
+import { FormsModule } from "@angular/forms";
+import { IRadioButtonModel } from "./radio-button.model";
+import { AnimationDirectivesModule } from "../../animations/animation-directives.module";
+
+
+describe("Radio Buttons unit-tests", ()=>{
+    let component: RadioGroupComponent;
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                RadioGroupComponent
+            ],
+            imports:[
+                FormsModule,
+                AnimationDirectivesModule
+            ]
+        }).compileComponents();
+
+        const fixture = TestBed.createComponent(RadioGroupComponent);
+        component = fixture.componentInstance;
+        component.disabled = false;//TODO constructor
+        component.options = {
+            items: []
+        };
+    }));
+
+    it('Component Created', async(()=> {
+        expect(component).toBeDefined();
+    }));
+
+    it('Not possible to choose value which not exists', async(() =>{
+        component.value = 'test';
+        expect(component.value).not.toEqual('test');
+    }));
+
+    it('Normal flow', async(() =>{
+        component.options.items = [ <IRadioButtonModel> {
+            value: 'val1',
+            name: 'exp6',
+            label: 'Label of Radio1'
+        }, <IRadioButtonModel> {
+            value: 'val2',
+            name: 'exp6',
+            label: 'Label of Radio2'
+        }];
+        component.value = component.options.items[0].value;
+        expect(component.value).toEqual(component.options.items[0].value);
+    }));
+
+});
diff --git a/src/angular/form-elements/radios/radio-buttons-group.component.ts b/src/angular/form-elements/radios/radio-buttons-group.component.ts
new file mode 100644
index 0000000..800d8b0
--- /dev/null
+++ b/src/angular/form-elements/radios/radio-buttons-group.component.ts
@@ -0,0 +1,52 @@
+import { Component, Input, Output, ViewEncapsulation, EventEmitter, HostBinding } from "@angular/core";
+import { Direction, IOptionGroup, IRadioButtonModel } from "./radio-button.model";
+import template from './radio-buttons-group.component.html';
+
+@Component({
+    selector: 'sdc-radio-group',
+    template: template,
+    encapsulation: ViewEncapsulation.None
+})
+export class RadioGroupComponent {
+
+    private _direction: Direction = Direction.vertical;
+    private _selectedValue: string;
+
+    @HostBinding('class') classes = 'sdc-radio-group';
+
+    @Input() public legend: string;
+    @Input() public options: IOptionGroup;
+    @Input() public disabled: boolean;
+
+    @Input()
+    get value(): string {
+        return this._selectedValue;
+    }
+    set value(value: string) {
+        if (this.isOptionExists(value)) {
+            this._selectedValue = value;
+        }
+    }
+
+    @Output() public valueChange: EventEmitter<string> = new EventEmitter<string>();
+
+    @Input()
+    get direction(): string {
+        return Direction[this._direction];
+    }
+    set direction(direction: string) {
+        this._direction = (direction === 'horizontal' ? Direction.horizontal : Direction.vertical);
+    }
+
+    public onValueChanged(value): void {
+        this.valueChange.emit(value);
+    }
+
+    private isOptionExists(value) {
+        const exist = this.options.items.find((item: IRadioButtonModel) => {
+            return item.value === value;
+        });
+        return exist !== undefined;
+    }
+
+}