arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Erik Tiekstra
2021-11-04 16:07:33 +01:00
parent 28d128c1e2
commit b9a14ef3cd
20 changed files with 308 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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;

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

@@ -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],

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

@@ -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>

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

@@ -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 },
];

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

@@ -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,

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

@@ -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>

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

@@ -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))
);

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

@@ -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],

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

@@ -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

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

@@ -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) {}

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

@@ -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,

4
libs/ui/src/radiobutton-group/radiobutton-group-direction.enum.ts Normal file
View File

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

21
libs/ui/src/radiobutton-group/radiobutton-group.component.html Normal file
View File

@@ -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>

37
libs/ui/src/radiobutton-group/radiobutton-group.component.scss Normal file
View File

@@ -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;
}
}
}

26
libs/ui/src/radiobutton-group/radiobutton-group.component.spec.ts Normal file
View File

@@ -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();
});
});

16
libs/ui/src/radiobutton-group/radiobutton-group.component.stories.ts Normal file
View File

@@ -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>',
});

122
libs/ui/src/radiobutton-group/radiobutton-group.component.ts Normal file
View File

@@ -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;
}
}

11
libs/ui/src/radiobutton-group/radiobutton-group.module.ts Normal file
View File

@@ -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 {}

4
libs/ui/src/radiobutton-group/radiobutton.model.ts Normal file
View File

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