feat(ui): Added radiobutton-group to ui-libs. (TV-854)

Squashed commit of the following:

commit 04465cb065382fa481a0b257e5f9190b5dcb1c4d
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 4 15:21:21 2021 +0100

    Updated components to use radiobutton-group from ui-libs

commit 5aa465c04ce01659dfb4f339970ed821c4431f5a
Merge: a2f347bd 28d128c1
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 4 10:10:07 2021 +0100

    Merge branch 'develop' into feature/TV-854-radiobutton-group

commit a2f347bdb03411014819a48a935899c7bcffaca0
Merge: b326e0bb 5c12b2b7
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 4 08:35:44 2021 +0100

    Merge branch 'develop' into feature/TV-854-radiobutton-group

commit b326e0bbd843c43cc18661b53e06a214cb7259c8
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 4 08:01:38 2021 +0100

    WIP

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.html

@@ -127,11 +127,13 @@
                   af-name="wholeDay"
                   af-form="franvaro-report-form"
                 >
-                  <digi-ng-form-radiobutton-group
+                  <ui-radiobutton-group
-                    [afRadiobuttons]="wholeDayOrPartOfDayRadiobuttons"
+                    formControlName="wholeDay"
-                    [afRequired]="true"
+                    [uiRadiobuttons]="wholeDayOrPartOfDayRadiobuttons"
-                    [formControl]="wholeDayFormControl"
+                    [uiBooleanValues]="true"
-                  ></digi-ng-form-radiobutton-group>
+                    [uiRequired]="true"
+                    [uiAnnounceIfOptional]="true"
+                  ></ui-radiobutton-group>
                 </digi-form-fieldset>
               </div>
 

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.ts

@@ -1,4 +1,3 @@
-import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
@@ -9,6 +8,7 @@ import { CustomError } from '@msfa-models/error/custom-error';
 import { FranvaroReason } from '@msfa-models/franvaro-reason.model';
 import { Franvaro } from '@msfa-models/franvaro.model';
 import { formatDate } from '@msfa-utils/format-to-date.util';
+import { Radiobutton } from '@ui/radiobutton-group/radiobutton.model';
 import { addDays } from 'date-fns';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map, shareReplay, switchMap, take } from 'rxjs/operators';
@@ -52,14 +52,12 @@ export class FranvaroReportFormComponent {
   reasons$: Observable<FranvaroReason[]> = this.franvaroReportFormService.reasons$;
   otherKnownReasons$: Observable<FranvaroReason[]> = this.franvaroReportFormService.otherKnownReasons$;
 
-  wholeDayOrPartOfDayRadiobuttons: RadiobuttonModel[] = [
+  wholeDayOrPartOfDayRadiobuttons: Radiobutton[] = [
     { label: 'Heldag', value: true },
     { label: 'Del av dag', value: false },
   ];
 
-  constructor(private franvaroReportFormService: FranvaroReportFormService, private activatedRoute: ActivatedRoute) {
+  constructor(private franvaroReportFormService: FranvaroReportFormService, private activatedRoute: ActivatedRoute) {}
-    this.dateFormControl.valueChanges.subscribe(value => console.log(value));
-  }
 
   get showOtherKnownReasonsSelect(): boolean {
     return this.reasonFormControl.value === ANNAN_KAND_ORSAK_ID;

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.module.ts

@@ -1,7 +1,6 @@
 import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
 import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
-import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgFormValidationMessageModule } from '@af/digi-ng/_form/form-validation-message';
 import { CommonModule } from '@angular/common';
@@ -11,6 +10,7 @@ import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { UiTextareaModule } from '@ui/textarea/textarea.module';
 import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
@@ -32,12 +32,12 @@ import { FranvaroReportFormService } from './franvaro-report-form.service';
     ReportDescriptionListModule,
     DigiNgFormSelectModule,
     DigiNgFormDatepickerModule,
-    DigiNgFormRadiobuttonGroupModule,
     UiSkeletonModule,
     DigiNgFormInputModule,
     DigiNgFormValidationMessageModule,
     DigiNgDialogModule,
     UiTextareaModule,
+    UiRadiobuttonGroupModule,
   ],
   providers: [FranvaroReportFormService],
   exports: [FranvaroReportFormComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.html

@@ -46,12 +46,14 @@
               af-name="distance"
               af-form="gemensam-planering-form-form"
             >
-              <digi-ng-form-radiobutton-group
+              <ui-radiobutton-group
-                [afRadiobuttons]="distanceRadiobuttons"
                 formControlName="distance"
-                [afRequired]="true"
+                [uiBooleanValues]="true"
-                [afRadiobuttonGroupDirection]="RadiobuttonGroupDirection.HORIZONTAL"
+                [uiRequired]="true"
-              ></digi-ng-form-radiobutton-group>
+                [uiAnnounceIfOptional]="true"
+                [uiRadiobuttons]="distanceRadiobuttons"
+                uiDirection="horizontal"
+              ></ui-radiobutton-group>
             </digi-form-fieldset>
             <digi-form-fieldset af-legend="Aktiviteter" af-name="aktivitetsIds" af-form="gemensam-planering-form-form">
               <p>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.ts

@@ -1,4 +1,4 @@
-import { RadiobuttonGroupDirection, RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
+import { RadiobuttonGroupDirection } from '@af/digi-ng/_form/form-radiobutton-group';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
@@ -9,6 +9,7 @@ import {
   GemensamPlanering,
   mapGemensamPlaneringToGemensamPlaneringPostRequest,
 } from '@msfa-models/gemensam-planering.model';
+import { Radiobutton } from '@ui/radiobutton-group/radiobutton.model';
 import { addDays } from 'date-fns';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map, shareReplay, switchMap, take } from 'rxjs/operators';
@@ -48,7 +49,7 @@ export class GemensamPlaneringFormComponent {
     [GemensamPlaneringFormValidator.isGemensamPlaneringValid(this.obligatoryActivityIds)]
   );
 
-  distanceRadiobuttons: RadiobuttonModel[] = [
+  distanceRadiobuttons: Radiobutton[] = [
     { label: 'Ja', value: true },
     { label: 'Nej', value: false },
   ];

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts

@@ -1,6 +1,5 @@
 import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
-import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -9,6 +8,7 @@ import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
@@ -23,7 +23,7 @@ import { GemensamPlaneringFormService } from './gemensam-planering-form.service'
     RouterModule.forChild([{ path: '', component: GemensamPlaneringFormComponent }]),
     LayoutModule,
     DigiNgProgressProgressbarModule,
-    DigiNgFormRadiobuttonGroupModule,
+    UiRadiobuttonGroupModule,
     ReactiveFormsModule,
     ReportLayoutModule,
     BackLinkModule,

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html

@@ -51,23 +51,17 @@
                   af-name="languageSupport"
                   af-form="periodisk-redovisning-form"
                 >
-                  <digi-ng-form-radiobutton-group
+                  <ui-radiobutton-group
-                    [afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL"
+                    formControlName="hasOfferedLanguageSupport"
-                    [afRadiobuttons]="[{label:'Ja', value: true}, {label:'Nej', value: false}]"
+                    [uiBooleanValues]="true"
-                    [formControl]="hasOfferedLanguageSupportFormControl"
+                    [uiRequired]="true"
-                    [afRequired]="true"
+                    [uiAnnounceIfOptional]="true"
-                    class="periodisk-redovisning-form__radio-buttons"
+                    [uiRadiobuttons]="yesNoRadiobuttons"
-                    [ngClass]="{'periodisk-redovisning-form__radio-buttons--invalid': formControlIsInvalid(hasOfferedLanguageSupportFormControl)}"
+                    [uiInvalid]="formControlIsInvalid(hasOfferedLanguageSupportFormControl)"
-                  ></digi-ng-form-radiobutton-group>
+                    uiValidationMessage="Ett val är obligatoriskt"
+                    uiDirection="horizontal"
+                  ></ui-radiobutton-group>
                 </digi-form-fieldset>
-                <div aria-atomic="true" role="alert">
-                  <digi-form-validation-message
-                    *ngIf="formControlIsInvalid(hasOfferedLanguageSupportFormControl)"
-                    af-variation="error"
-                  >
-                    Ett val är obligatoriskt
-                  </digi-form-validation-message>
-                </div>
               </div>
 
               <div>
@@ -76,22 +70,17 @@
                   af-name="jobOffered"
                   af-form="periodisk-redovisning-form"
                 >
-                  <digi-ng-form-radiobutton-group
+                  <ui-radiobutton-group
-                    [afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL"
+                    formControlName="hasOfferedJob"
-                    [afRadiobuttons]="[{label:'Ja', value: true}, {label:'Nej', value: false}]"
+                    [uiBooleanValues]="true"
-                    [formControl]="hasOfferedJobFormControl"
+                    [uiRequired]="true"
-                    class="periodisk-redovisning-form__radio-buttons"
+                    [uiAnnounceIfOptional]="true"
-                    [ngClass]="{'periodisk-redovisning-form__radio-buttons--invalid': formControlIsInvalid(hasOfferedJobFormControl)}"
+                    [uiRadiobuttons]="yesNoRadiobuttons"
-                  ></digi-ng-form-radiobutton-group>
+                    [uiInvalid]="formControlIsInvalid(hasOfferedJobFormControl)"
+                    uiValidationMessage="Ett val är obligatoriskt"
+                    uiDirection="horizontal"
+                  ></ui-radiobutton-group>
                 </digi-form-fieldset>
-                <div aria-atomic="true" role="alert">
-                  <digi-form-validation-message
-                    *ngIf="formControlIsInvalid(hasOfferedJobFormControl)"
-                    af-variation="error"
-                  >
-                    Ett val är obligatoriskt
-                  </digi-form-validation-message>
-                </div>
               </div>
 
               <div>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.ts

@@ -14,6 +14,7 @@ import { CustomError } from '@msfa-models/error/custom-error';
 import { capitalizeWords } from '@msfa-utils/capitalize-words.util';
 import { formatDate, formatToDate } from '@msfa-utils/format-to-date.util';
 import { RequiredValidator } from '@msfa-validators/required.validator';
+import { Radiobutton } from '@ui/radiobutton-group/radiobutton.model';
 import { subMonths } from 'date-fns';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { map, shareReplay, switchMap, take } from 'rxjs/operators';
@@ -67,6 +68,11 @@ export class PeriodiskRedovisningFormComponent implements OnInit {
     shareReplay(1)
   );
 
+  yesNoRadiobuttons: Radiobutton[] = [
+    { label: 'Ja', value: true },
+    { label: 'Nej', value: false },
+  ];
+
   periods$: Observable<AvropPeriod[]> = this.avrop$.pipe(
     map(avrop => extractAvropPeriods(avrop.startDate, avrop.endDate))
   );

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts

@@ -1,6 +1,5 @@
 import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
-import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -9,6 +8,7 @@ import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
@@ -30,8 +30,8 @@ import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.se
     UiSkeletonModule,
     DigiNgDialogModule,
     DigiNgFormSelectModule,
-    DigiNgFormRadiobuttonGroupModule,
     DigiNgFormCheckboxModule,
+    UiRadiobuttonGroupModule,
   ],
   providers: [PeriodiskRedovisningFormService],
   exports: [PeriodiskRedovisningFormComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.html

@@ -44,11 +44,12 @@
           </div>
           <div class="signal-form__form-item">
             <digi-form-fieldset af-legend="Omfattning" af-name="omfattning" af-form="signal-form">
-              <digi-ng-form-radiobutton-group
+              <ui-radiobutton-group
-                [afRadiobuttons]="omfattningRadioButtons"
+                formControlName="omfattning"
-                [afRequired]="true"
+                [uiRequired]="true"
-                [formControl]="omfattningFormControl"
+                [uiAnnounceIfOptional]="true"
-              ></digi-ng-form-radiobutton-group>
+                [uiRadiobuttons]="omfattningRadioButtons"
+              ></ui-radiobutton-group>
             </digi-form-fieldset>
             <div aria-atomic="true" role="alert">
               <digi-ng-form-validation-message

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.ts

@@ -1,4 +1,3 @@
-import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
 import { FormSelectItem } from '@af/digi-ng/_form/form-select';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
@@ -8,6 +7,7 @@ import { Avrop } from '@msfa-models/avrop.model';
 import { CustomError } from '@msfa-models/error/custom-error';
 import { Signal } from '@msfa-models/signal.model';
 import { formatDate } from '@msfa-utils/format-to-date.util';
+import { Radiobutton } from '@ui/radiobutton-group/radiobutton.model';
 import { add } from 'date-fns';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map, shareReplay, switchMap, take } from 'rxjs/operators';
@@ -45,25 +45,13 @@ export class SignalFormComponent {
   );
 
   typeSelectItems: FormSelectItem[] = [
-    {
+    { name: 'Arbete', value: 'arbete' },
-      name: 'Arbete',
+    { name: 'Utbildning', value: 'utbildning' },
-      value: 'arbete',
-    },
-    {
-      name: 'Utbildning',
-      value: 'utbildning',
-    },
   ];
 
-  omfattningRadioButtons: RadiobuttonModel[] = [
+  omfattningRadioButtons: Radiobutton[] = [
-    {
+    { label: 'Heltid', value: 'heltid' },
-      label: 'Heltid',
+    { label: 'Deltid', value: 'deltid' },
-      value: 'heltid',
-    },
-    {
-      label: 'Deltid',
-      value: 'deltid',
-    },
   ];
 
   constructor(private signalFormService: SignalFormService, private activatedRoute: ActivatedRoute) {}

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.module.ts

@@ -1,10 +1,8 @@
 import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
-import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 import { DigiNgFormRangeModule } from '@af/digi-ng/_form/form-range';
 import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgFormValidationMessageModule } from '@af/digi-ng/_form/form-validation-message';
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -12,6 +10,8 @@ import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { SignalFormComponent } from './signal-form.component';
 import { SignalFormService } from './signal-form.service';
@@ -27,7 +27,7 @@ import { SignalFormService } from './signal-form.service';
     ReportLayoutModule,
     ConfirmDialogModule,
     BackLinkModule,
-    DigiNgFormRadiobuttonGroupModule,
+    UiRadiobuttonGroupModule,
     DigiNgFormDatepickerModule,
     UiSkeletonModule,
     DigiNgDialogModule,

libs/ui/src/radiobutton-group/radiobutton-group-direction.enum.ts

@@ -0,0 +1,4 @@
+export enum RadiobuttonGroupDirection {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical',
+}

libs/ui/src/radiobutton-group/radiobutton-group.component.html

@@ -0,0 +1,21 @@
+<div class="ui-radiobutton-group" [ngClass]="{'ui-radiobutton-group--invalid': uiInvalid}">
+  <div class="ui-radiobutton-group__radiobuttons" [ngClass]="radiobuttonsModifierClass">
+    <digi-form-radiobutton
+      *ngFor="let item of uiRadiobuttons"
+      class="ui-radiobutton-group__radiobutton"
+      [afLabel]="getLabelText(item.label)"
+      [afValue]="item.value"
+      [afChecked]="currentValue === item.value"
+      [afName]="name"
+      [afRequired]="uiRequired"
+      [afValidation]="uiInvalid ? 'error' : 'neutral'"
+      [afVariation]="uiSecondary ? 'secondary' : 'primary'"
+      (afOnChange)="checkForChange($event.detail.target.value)"
+    ></digi-form-radiobutton>
+  </div>
+  <div aria-atomic="true" role="alert">
+    <digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
+      >{{uiValidationMessage}}</digi-form-validation-message
+    >
+  </div>
+</div>

libs/ui/src/radiobutton-group/radiobutton-group.component.scss

@@ -0,0 +1,37 @@
+@import 'variables/gutters';
+
+.ui-radiobutton-group {
+  display: flex;
+  flex-direction: column;
+
+  &--invalid {
+    gap: var(--digi--layout--gutter--xs);
+  }
+
+  &__radiobuttons {
+    display: flex;
+    gap: var(--digi--layout--gutter--s);
+    flex-direction: column;
+
+    &--horizontal {
+      flex-direction: row;
+      align-items: center;
+      gap: $digi--layout--gutter--l;
+    }
+  }
+
+  &__radiobutton {
+    ::ng-deep .digi-form-radiobutton__circle {
+      top: 50% !important;
+      transform: translateY(-50%);
+
+      &::after {
+        top: 50% !important;
+        left: 50% !important;
+      }
+    }
+    ::ng-deep .digi-form-radiobutton__input:focus ~ .digi-form-radiobutton__circle {
+      box-shadow: var(--digi--ui--box-shadow--focus) !important;
+    }
+  }
+}

libs/ui/src/radiobutton-group/radiobutton-group.component.spec.ts

@@ -0,0 +1,26 @@
+/* tslint:disable:no-unused-variable */
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RadiobuttonGroupComponent } from './radiobutton-group.component';
+
+describe('RadiobuttonGroupComponent', () => {
+  let component: RadiobuttonGroupComponent;
+  let fixture: ComponentFixture<RadiobuttonGroupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RadiobuttonGroupComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RadiobuttonGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/ui/src/radiobutton-group/radiobutton-group.component.stories.ts

@@ -0,0 +1,16 @@
+import { ReactiveFormsModule } from '@angular/forms';
+import { RadiobuttonGroupComponent } from './radiobutton-group.component';
+import { UiRadiobuttonGroupModule } from './radiobutton-group.module';
+
+export default { title: 'RadiobuttonGroup', component: RadiobuttonGroupComponent };
+
+const componentModule = {
+  moduleMetadata: {
+    imports: [ReactiveFormsModule, UiRadiobuttonGroupModule],
+  },
+};
+
+export const standard = () => ({
+  ...componentModule,
+  template: '<ui-radiobutton-group></ui-radiobutton-group>',
+});

libs/ui/src/radiobutton-group/radiobutton-group.component.ts

@@ -0,0 +1,122 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Injector,
+  Input,
+  OnChanges,
+  Output,
+} from '@angular/core';
+import { ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { RadiobuttonGroupDirection } from './radiobutton-group-direction.enum';
+import { Radiobutton } from './radiobutton.model';
+
+/**
+ * A radiobutton-group component.
+ *
+ * ## Usage
+ * ``import {UiRadiobuttonGroupModule} from '@ui/radiobutton-group/radiobutton-group.module';``
+ */
+@Component({
+  selector: 'ui-radiobutton-group',
+  templateUrl: './radiobutton-group.component.html',
+  styleUrls: ['./radiobutton-group.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: RadiobuttonGroupComponent,
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RadiobuttonGroupComponent implements ControlValueAccessor, AfterViewInit, OnChanges {
+  @Input() uiDirection: RadiobuttonGroupDirection;
+  @Input() uiInvalid: boolean;
+  @Input() uiValidationMessage: string;
+  @Input() uiRadiobuttons: Radiobutton[];
+  @Input() uiBooleanValues: boolean;
+  @Input() uiSecondary: boolean;
+  @Input() uiRequired: boolean;
+  @Input() uiName: string;
+  @Input() uiAnnounceIfOptional: boolean;
+  @Output() uiOnChange = new EventEmitter<any>();
+
+  name: string | number;
+  onTouched: () => {};
+  private onChange: (value: any) => {};
+  private _value: any;
+
+  constructor(private injector: Injector, private changeDetectorRef: ChangeDetectorRef) {}
+
+  get currentValue(): any {
+    return this._value;
+  }
+
+  get radiobuttonsModifierClass(): string {
+    if (this.uiDirection === RadiobuttonGroupDirection.HORIZONTAL) {
+      return `ui-radiobutton-group__radiobuttons--horizontal`;
+    }
+    return '';
+  }
+
+  private _transformValue(value: any): any {
+    return this.uiBooleanValues ? value === 'true' : value;
+  }
+
+  private get _requiredText() {
+    if (this.uiRequired && !this.uiAnnounceIfOptional) {
+      return ' (obligatoriskt)';
+    }
+
+    if (!this.uiRequired && this.uiAnnounceIfOptional) {
+      return ' (frivilligt)';
+    }
+
+    return '';
+  }
+
+  getLabelText(label: string): string {
+    return `${label}${this._requiredText}`;
+  }
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get(NgControl, null);
+    if (ngControl) {
+      this.name = ngControl.name || this.uiName;
+    }
+  }
+
+  ngOnChanges(): void {
+    const ngControl: NgControl = this.injector.get(NgControl, null);
+    if (ngControl) {
+      this.name = ngControl.name || this.uiName;
+    }
+  }
+
+  checkForChange(rawValue: any): void {
+    const value = this._transformValue(rawValue);
+    if (this._value !== value) {
+      if (this.onChange) {
+        this.onChange(value);
+      }
+      this._value = value;
+      this.uiOnChange.emit(value);
+    }
+  }
+
+  writeValue(value: any): void {
+    this._value = value;
+    this.changeDetectorRef.detectChanges();
+  }
+
+  registerOnChange(fn: (value: any) => {}) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => {}) {
+    this.onTouched = fn;
+  }
+}

libs/ui/src/radiobutton-group/radiobutton-group.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RadiobuttonGroupComponent } from './radiobutton-group.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [CommonModule],
+  declarations: [RadiobuttonGroupComponent],
+  exports: [RadiobuttonGroupComponent],
+})
+export class UiRadiobuttonGroupModule {}

libs/ui/src/radiobutton-group/radiobutton.model.ts

@@ -0,0 +1,4 @@
+export interface Radiobutton {
+  value: any;
+  label: string;
+}