🐛 fix(bal-checkbox-group): Disabled property not passed down to bal-c…

…heckbox-button (#1264)

* Create PR for #1253

* fix(radio&checkbox): update disabled and invalid state to children

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>

.changeset/four-buses-sin.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+The radio and checkbox group component now updates its children when there are changes in the disabled or invalid status.

packages/components/src/components.d.ts

@@ -595,6 +595,10 @@ export namespace Components {
           * Defines the layout of the checkbox button
          */
         "interface"?: BalProps.BalCheckboxGroupInterface;
+        /**
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        "invalid"?: boolean;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -5645,6 +5649,10 @@ declare namespace LocalJSX {
           * Defines the layout of the checkbox button
          */
         "interface"?: BalProps.BalCheckboxGroupInterface;
+        /**
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        "invalid"?: boolean;
         /**
           * The name of the control, which is submitted with the form data.
          */

packages/components/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx

@@ -91,6 +91,25 @@ export class CheckboxGroup
    */
   @Prop() expanded = false
 
+  /**
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+   */
+  @Prop() invalid?: boolean = undefined
+
+  @Watch('invalid')
+  invalidChanged(value: boolean | undefined) {
+    if (this.control) {
+      if (value !== undefined) {
+        this.getCheckboxes().forEach(child => {
+          child.invalid = value
+        })
+        this.getCheckboxButtons().forEach(child => {
+          child.invalid = value
+        })
+      }
+    }
+  }
+
   /**
    * If `true`, the user cannot interact with the checkboxes.
    */
@@ -103,6 +122,9 @@ export class CheckboxGroup
         this.getCheckboxes().forEach(child => {
           child.disabled = value
         })
+        this.getCheckboxButtons().forEach(child => {
+          child.disabled = value
+        })
       }
     }
   }
@@ -119,6 +141,9 @@ export class CheckboxGroup
         this.getCheckboxes().forEach(child => {
           child.readonly = value
         })
+        this.getCheckboxButtons().forEach(child => {
+          child.readonly = value
+        })
       }
     }
   }

packages/components/src/components/bal-radio/bal-radio-group/bal-radio-group.tsx

@@ -110,6 +110,9 @@ export class RadioGroup
       this.getRadios().forEach(radio => {
         radio.invalid = value
       })
+      this.getRadioButtons().forEach(radio => {
+        radio.invalid = value
+      })
     }
   }
 
@@ -124,6 +127,9 @@ export class RadioGroup
       this.getRadios().forEach(radio => {
         radio.disabled = value
       })
+      this.getRadioButtons().forEach(radio => {
+        radio.disabled = value
+      })
     }
   }
 
@@ -138,6 +144,9 @@ export class RadioGroup
       this.getRadios().forEach(radio => {
         radio.readonly = value
       })
+      this.getRadioButtons().forEach(radio => {
+        radio.readonly = value
+      })
     }
   }