chore: radio button click functionality implemented

Author: ArathyKumar

elements/pf-radio/pf-radio.ts

@@ -11,30 +11,59 @@ import { property } from 'lit/decorators/property.js';
 @customElement('pf-radio')
 export class PfRadio extends LitElement {
   static readonly styles: CSSStyleSheet[] = [styles];
-  @property() checked = false;
+  static formAssociated = true;
+  static shadowRootOptions: ShadowRootInit = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  @property({
+    type: Boolean,
+    // attribute: 'inline-filter',
+    converter: {
+      fromAttribute: value => value === 'true',
+    },
+    reflect: true,
+  })
+  checked = false;
+
   @property({ reflect: true }) name = 'radio-test';
   @property({ reflect: true }) label?: string;
-  // #input:any
+  @property({ reflect: true }) value = '';
 
   constructor() {
     super();
   }
 
   connectedCallback(): void {
     super.connectedCallback();
+  }
 
-    const root = this.getRootNode();
-    if (root instanceof Document || root instanceof ShadowRoot) {
-      const group = root.querySelectorAll(`pf-radio`);
-      // console.log("------------- the group is", group);
+  #onRadioButtonClick(event: Event) {
+    if (!this.checked) {
+      const root: Node = this.getRootNode();
+      let radioGroup: NodeListOf<PfRadio>;
+      if (root instanceof Document || root instanceof ShadowRoot) {
+        radioGroup = root.querySelectorAll('pf-radio');
+        radioGroup.forEach(radio => {
+          const element: HTMLElement = radio as HTMLElement;
+          element?.removeAttribute('checked');
+        });
+        this.checked = true;
+      }
     }
   }
 
-
   render(): TemplateResult<1> {
     return html`
-      <label for=input>${this.label}</label>
-      <input id=input class="pf-radio" .name=${this.name} type="radio" .checked="${this.checked}">
+      <label for='input'>${this.label}</label>
+      <input
+        @click=${(e: Event) => this.#onRadioButtonClick(e)}
+        id='input'
+        .name=${this.name}
+        type='radio'
+        .checked='${this.checked}'
+      />
     `;
   }
 }