Handle radio across shadowdom

Author: Templarian

src/components/pg/inputRadio/inputRadio.css

@@ -1,4 +1,5 @@
 [part=items] {
   display: flex;
   flex-direction: column;
+  gap: 0.25rem;
 }

src/components/pg/inputRadio/inputRadio.ts

@@ -23,6 +23,21 @@ export default class PgInputRadio extends HTMLElement {
       container: this.$items,
       items: this.items,
       type: () => PgInputRadioItem,
+      create: ($item: PgInputRadioItem) => {
+        $item.addEventListener('change', () => {
+          Array.from(this.$items.children).forEach(($ele: PgInputRadioItem) => {
+            if ($ele === $item) {
+              $ele.checked = true;
+            } else {
+              $ele.checked = false;
+            }
+          });
+        });
+      }
     });
   }
+
+  get radios() {
+    return [...this.$items.children];
+  }
 }

src/components/pg/inputRadioItem/inputRadioItem.css

@@ -23,4 +23,5 @@ label {
 svg {
   width: 1.5rem;
   height: 1.5rem;
+  margin-left: -0.5rem;
 }

src/components/pg/inputRadioItem/inputRadioItem.ts

@@ -11,16 +11,26 @@ import style from './inputRadioItem.css';
 export default class PgInputRadioItem extends HTMLElement {
   @Prop() label: string = '';
   @Prop() value: string = '';
+  @Prop() checked: boolean = false;
 
   @Part() $input: HTMLInputElement;
   @Part() $label: HTMLSpanElement;
 
+  connectedCallback() {
+    this.$input.addEventListener('change', () => {
+      this.dispatchEvent(new CustomEvent('change'));
+    });
+  }
+
   render(changes) {
     if (changes.label) {
       this.$label.textContent = this.label;
     }
     if (changes.value) {
       this.$input.textContent = this.label;
     }
+    if (changes.checked) {
+      this.$input.checked = this.checked;
+    }
   }
 }