Rename interface option and fix styling optional label

projects/dxc-ngx-cdk-site/src/app/components/examples/radio-group/properties/radio-group-properties/radio-group-properties.component.html

@@ -40,11 +40,11 @@
     </td>
   </tr>
   <tr>
-    <td>options: Option[]</td>
+    <td>options: RadioItem[]</td>
     <td></td>
     <td>
       An array of objects representing the selectable options. Each object
-      Option has the following properties: <br />
+      RadioItem has the following properties: <br />
       <ul>
         <li>
           <b>label: string:</b> Label of the option placed next to the radio
@@ -107,8 +107,8 @@
     <td>
       This function will be called when the radio group loses the focus. An
       object including the value and the error will be passed to this function.
-      An example of this object is: {{ '{' }} value: value, error: error {{ '}' }}. If there is
-      no error, error will not be defined.
+      An example of this object is: {{ "{" }} value: value, error: error
+      {{ "}" }}. If there is no error, error will not be defined.
     </td>
   </tr>
   <tr>
@@ -123,8 +123,6 @@
   <tr>
     <td>tabIndex: number</td>
     <td></td>
-    <td>
-      Value of the tabindex attribute.
-    </td>
+    <td>Value of the tabindex attribute.</td>
   </tr>
 </dxc-table>

projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.ts

@@ -15,7 +15,7 @@ import { BehaviorSubject, Subscription } from "rxjs";
 import { CssUtils } from "../utils";
 import {
   BlurEvent,
-  Option,
+  RadioItem,
   RadioGroupProperties,
 } from "./dxc-radio-group.types";
 import { RadioGroupService } from "./services/radio-group.service";
@@ -57,7 +57,7 @@ export class DxcRadioGroupComponent implements OnInit {
   defaultValue: string;
 
   @Input()
-  options: Option[];
+  options: RadioItem[];
 
   @Input()
   stacking: "row" | "column" = "column";
@@ -78,7 +78,7 @@ export class DxcRadioGroupComponent implements OnInit {
 
   radioGroupId = "";
 
-  public optionList: Option[] = [];
+  public optionList: RadioItem[] = [];
   public indexToFocus: number = 0;
 
   private isControlled: boolean = false;
@@ -269,7 +269,7 @@ export class DxcRadioGroupComponent implements OnInit {
           : "margin-bottom: var(--radioGroup-groupLabelMargin);"}
       }
       .helperText,
-      .optional {
+      .optionalLabel {
         color: ${inputs.disabled
           ? "var(--radioGroup-disabledHelperTextFontColor)"
           : "var(--radioGroup-helperTextFontColor)"};

projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.types.ts

@@ -6,20 +6,19 @@ export interface RadioGroupProperties {
   readOnly?: boolean;
   disabled?: boolean;
   defaultValue?: string;
-  options: Option[];
-  stacking?: "row"|"column";
+  options: RadioItem[];
+  stacking?: "row" | "column";
   tabIndex?: number;
   error?: string;
 }
 
-export type Option = {
+export type RadioItem = {
   label: string;
   value: string;
   disabled?: boolean;
 };
 
 export type BlurEvent = {
-  value: string,
-  error: string
+  value: string;
+  error: string;
 };
-

projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio/dxc-radio.component.ts

@@ -11,7 +11,7 @@ import { css } from "emotion";
 import { BehaviorSubject } from "rxjs";
 import { v4 as uuidv4 } from "uuid";
 import { RadioGroupService } from "../services/radio-group.service";
-import { Option } from "../dxc-radio-group.types";
+import { RadioItem } from "../dxc-radio-group.types";
 
 @Component({
   selector: "dxc-radio-group-item",
@@ -42,7 +42,7 @@ export class DxcRadioGroupItemComponent implements OnInit {
 
   radioLabelId = "";
 
-  defaultInputs = new BehaviorSubject<Option>({
+  defaultInputs = new BehaviorSubject<RadioItem>({
     label: "",
     value: undefined,
     disabled: false,
@@ -152,7 +152,8 @@ export class DxcRadioGroupItemComponent implements OnInit {
           box-sizing: border-box;
           width: 18px;
           height: 18px;
-          border: var(--radioGroup-radioInputBorderWidth) var(--radioGroup-radioInputBorderStyle);;
+          border: var(--radioGroup-radioInputBorderWidth)
+            var(--radioGroup-radioInputBorderStyle);
           border-color: ${this.getBorderColor()};
           border-radius: 50%;
           box-shadow: 0 0 0 2px transparent;

projects/dxc-ngx-cdk/src/lib/dxc-radio-group/services/radio-group.service.ts

@@ -1,12 +1,12 @@
 import { Injectable } from "@angular/core";
 import { BehaviorSubject, Subject } from "rxjs";
-import { Option } from "../dxc-radio-group.types";
+import { RadioItem } from "../dxc-radio-group.types";
 
 @Injectable({
   providedIn: "root",
 })
 export class RadioGroupService {
-  public optionList: BehaviorSubject<Option[]> = new BehaviorSubject(null);
+  public optionList: BehaviorSubject<RadioItem[]> = new BehaviorSubject(null);
 
   public selectedValue: BehaviorSubject<string> = new BehaviorSubject(
     undefined
@@ -17,5 +17,4 @@ export class RadioGroupService {
   public newValue: BehaviorSubject<string> = new BehaviorSubject(undefined);
 
   public firstTabbedFocus: boolean = false;
-
 }