summaryrefslogtreecommitdiffstats
path: root/src/angular/form-elements/radios
diff options
context:
space:
mode:
Diffstat (limited to 'src/angular/form-elements/radios')
-rw-r--r--src/angular/form-elements/radios/radio-button.model.ts15
-rw-r--r--src/angular/form-elements/radios/radio-buttons-group.component.html.ts20
-rw-r--r--src/angular/form-elements/radios/radio-buttons-group.component.spec.ts52
-rw-r--r--src/angular/form-elements/radios/radio-buttons-group.component.ts52
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;
+ }
+
+}