Let a single radio button option be disabled (#4419)

libs/components/src/radio-button/radio-button.component.html

@@ -4,7 +4,7 @@
     bitRadio
     [id]="inputId"
     [name]="name"
-    [disabled]="disabled"
+    [disabled]="groupDisabled || disabled"
     [value]="value"
     [checked]="selected"
     (change)="onInputChange()"

libs/components/src/radio-button/radio-button.component.ts

@@ -11,6 +11,7 @@ let nextId = 0;
 export class RadioButtonComponent {
   @HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;
   @Input() value: unknown;
+  @Input() disabled = false;
 
   constructor(private groupComponent: RadioGroupComponent) {}
 
@@ -26,7 +27,7 @@ export class RadioButtonComponent {
     return this.groupComponent.selected === this.value;
   }
 
-  get disabled() {
+  get groupDisabled() {
     return this.groupComponent.disabled;
   }
 

libs/components/src/radio-button/radio-button.stories.ts

@@ -14,7 +14,7 @@ const template = `
       <bit-label *ngIf="label">Group of radio buttons</bit-label>
       <bit-radio-button [value]="TestValue.First" id="radio-first">First</bit-radio-button>
       <bit-radio-button [value]="TestValue.Second" id="radio-second">Second</bit-radio-button>
-      <bit-radio-button [value]="TestValue.Third" id="radio-third">Third</bit-radio-button>
+      <bit-radio-button [value]="TestValue.Third" [disabled]="optionDisabled" id="radio-third">Third</bit-radio-button>
     </bit-radio-group>
   </form>`;
 
@@ -41,7 +41,7 @@ class ExampleComponent {
     this.formObj.patchValue({ radio: value });
   }
 
-  @Input() set disabled(disable: boolean) {
+  @Input() set groupDisabled(disable: boolean) {
     if (disable) {
       this.formObj.disable();
     } else {
@@ -49,6 +49,8 @@ class ExampleComponent {
     }
   }
 
+  @Input() optionDisabled = false;
+
   constructor(private formBuilder: FormBuilder) {}
 }
 
@@ -81,7 +83,8 @@ export default {
   },
   args: {
     selected: TestValue.First,
-    disabled: false,
+    groupDisabled: false,
+    optionDisabled: false,
     label: true,
   },
   argTypes: {
@@ -101,7 +104,7 @@ export default {
 
 const DefaultTemplate: Story<ExampleComponent> = (args: ExampleComponent) => ({
   props: args,
-  template: `<app-example [selected]="selected" [disabled]="disabled" [label]="label"></app-example>`,
+  template: `<app-example [selected]="selected" [groupDisabled]="groupDisabled" [optionDisabled]="optionDisabled" [label]="label"></app-example>`,
 });
 
 export const Default = DefaultTemplate.bind({});