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
-                    [afRadiobuttons]="wholeDayOrPartOfDayRadiobuttons"
-                    [afRequired]="true"
-                    [formControl]="wholeDayFormControl"
-                  ></digi-ng-form-radiobutton-group>
+                  <ui-radiobutton-group
+                    formControlName="wholeDay"
+                    [uiRadiobuttons]="wholeDayOrPartOfDayRadiobuttons"
+                    [uiBooleanValues]="true"
+                    [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) {
-    this.dateFormControl.valueChanges.subscribe(value => console.log(value));
-  }
+  constructor(private franvaroReportFormService: FranvaroReportFormService, private activatedRoute: ActivatedRoute) {}
 
   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
-                [afRadiobuttons]="distanceRadiobuttons"
+              <ui-radiobutton-group
                 formControlName="distance"
-                [afRequired]="true"
-                [afRadiobuttonGroupDirection]="RadiobuttonGroupDirection.HORIZONTAL"
-              ></digi-ng-form-radiobutton-group>
+                [uiBooleanValues]="true"
+                [uiRequired]="true"
+                [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
-                    [afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL"
-                    [afRadiobuttons]="[{label:'Ja', value: true}, {label:'Nej', value: false}]"
-                    [formControl]="hasOfferedLanguageSupportFormControl"
-                    [afRequired]="true"
-                    class="periodisk-redovisning-form__radio-buttons"
-                    [ngClass]="{'periodisk-redovisning-form__radio-buttons--invalid': formControlIsInvalid(hasOfferedLanguageSupportFormControl)}"
-                  ></digi-ng-form-radiobutton-group>
+                  <ui-radiobutton-group
+                    formControlName="hasOfferedLanguageSupport"
+                    [uiBooleanValues]="true"
+                    [uiRequired]="true"
+                    [uiAnnounceIfOptional]="true"
+                    [uiRadiobuttons]="yesNoRadiobuttons"
+                    [uiInvalid]="formControlIsInvalid(hasOfferedLanguageSupportFormControl)"
+                    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
-                    [afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL"
-                    [afRadiobuttons]="[{label:'Ja', value: true}, {label:'Nej', value: false}]"
-                    [formControl]="hasOfferedJobFormControl"
-                    class="periodisk-redovisning-form__radio-buttons"
-                    [ngClass]="{'periodisk-redovisning-form__radio-buttons--invalid': formControlIsInvalid(hasOfferedJobFormControl)}"
-                  ></digi-ng-form-radiobutton-group>
+                  <ui-radiobutton-group
+                    formControlName="hasOfferedJob"
+                    [uiBooleanValues]="true"
+                    [uiRequired]="true"
+                    [uiAnnounceIfOptional]="true"
+                    [uiRadiobuttons]="yesNoRadiobuttons"
+                    [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
-                [afRadiobuttons]="omfattningRadioButtons"
-                [afRequired]="true"
-                [formControl]="omfattningFormControl"
-              ></digi-ng-form-radiobutton-group>
+              <ui-radiobutton-group
+                formControlName="omfattning"
+                [uiRequired]="true"
+                [uiAnnounceIfOptional]="true"
+                [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: 'Utbildning',
-      value: 'utbildning',
-    },
+    { name: 'Arbete', value: 'arbete' },
+    { name: 'Utbildning', value: 'utbildning' },
   ];
 
-  omfattningRadioButtons: RadiobuttonModel[] = [
-    {
-      label: 'Heltid',
-      value: 'heltid',
-    },
-    {
-      label: 'Deltid',
-      value: 'deltid',
-    },
+  omfattningRadioButtons: Radiobutton[] = [
+    { label: 'Heltid', 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,