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
2021-11-04 16:07:33 +01:00
parent 28d128c1e2
commit b9a14ef3cd
20 changed files with 308 additions and 80 deletions
--- a/libs/ui/src/radiobutton-group/radiobutton-group.component.ts
+++ b/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;
+  }
+}