fix: change tap-radio-group to accept children rather than tap-radio (#181)

* fix: change tap-radio-group to accept children rather than tap-radio

* chore: change tap-radio-group storybook

* chore: change type in the tap-radio-group

* feat: add test cases for the relative scenario

* chore: remove unused var

* chore: change test case name

* revert bottom sheet changes

* fix: change the getter of radios to find radios recursively

* fix: use queryAssignedElements for getting elements

---------

Co-authored-by: Sara.Parsaee <Sara.Parsaee@Tapsi.cab>

Author: saraparsa13

src/radio-group/radio-group.stories.ts

@@ -1,5 +1,6 @@
 import { html, TemplateResult } from 'lit';
 import '../radio';
+import '../row';
 import './index.js';
 import { Meta } from '@storybook/web-components';
 
@@ -30,8 +31,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ value, direction }: ArgTypes) => html`
   <tap-radio-group value="${value}" direction="${direction}">
-    <tap-radio value="1"></tap-radio>
-    <tap-radio value="2"></tap-radio>
+  <tap-row>
+    <div slot="leading"><tap-radio value="1"></tap-radio></div>
+    <div slot="content">
+      <span>Label for Option 1</span>
+    </div>
+  </tap-row>
+  <tap-row>
+    <div slot="content">
+      <tap-radio value="2"></tap-radio>
+      <span>Label for Option 2</span>
+    </div>
+  </tap-row>
+  
     <tap-radio value="3"></tap-radio>
     <tap-radio value="4"></tap-radio>
   </tap-radio-group>

src/radio-group/radio-group.test.ts

@@ -0,0 +1,92 @@
+import '../../dist/radio-group/index.js';
+import '../../dist/radio/index.js';
+
+import { expect, fixture, html } from '@open-wc/testing';
+import { RadioGroup } from './radio-group.js';
+
+describe('tap-radio-group component', () => {
+    const value = '2';
+    it('should select the correct radio button based on the initial value', async () => {
+        const element = await fixture<RadioGroup>(html`
+      <tap-radio-group value=${value}>
+        <tap-radio value="1"></tap-radio>
+        <tap-radio value="2"></tap-radio>
+        <tap-radio value="3"></tap-radio>
+      </tap-radio-group>
+    `);
+
+        const radios = element.radios;
+
+        expect(radios.length).to.equal(3);
+        expect(radios.find(radio => radio.value === value)?.checked).to.be.true;
+    });
+
+    it('should select a radio button when a nested element is passed', async () => {
+        const rootElement = await fixture<RadioGroup>(html`
+          <tap-radio-group value="2">
+            <div>
+              <tap-radio value="1"></tap-radio>
+            </div>
+            <div>
+              <tap-radio value="2"></tap-radio>
+            </div>
+            <div>
+              <tap-radio value="3"></tap-radio>
+            </div>
+          </tap-radio-group>
+        `);
+
+        const slot = rootElement.shadowRoot?.querySelector('slot');
+        const elements = slot!.assignedElements({ flatten: true });
+
+        // TODO: use the element.radios 
+        const radios = elements.flatMap(element => {
+            if (element.nodeType === Node.ELEMENT_NODE) {
+                const el = element as HTMLElement;
+                const foundRadios = Array.from(el.querySelectorAll('tap-radio'));
+                return foundRadios;
+            }
+            return [];
+        });
+        expect(radios.length).to.equal(3);
+        expect(radios.find(radio => radio.value === value)?.value).to.equal(value);
+    });
+
+    it('should handle radio buttons nested inside other elements', async () => {
+        const rootElement = await fixture<RadioGroup>(html`
+          <tap-radio-group value=${value}>
+            <tap-row>
+              <div slot="leading"><tap-radio value="1"></tap-radio></div>
+              <div slot="content"><span>Label 1</span></div>
+            </tap-row>
+            <tap-row>
+              <div slot="content">
+                <tap-radio value="2"></tap-radio>
+                <span>Label 2</span>
+              </div>
+            </tap-row>
+            <tap-row>
+              <div slot="content">
+                <tap-radio value="3"></tap-radio>
+                <span>Label 3</span>
+              </div>
+            </tap-row>
+          </tap-radio-group>
+        `);
+
+        const slot = rootElement.shadowRoot?.querySelector('slot');
+        const elements = slot!.assignedElements({ flatten: true });
+
+        // TODO: use the element.radios 
+        const radios = elements.flatMap(element => {
+            if (element.nodeType === Node.ELEMENT_NODE) {
+                const el = element as HTMLElement;
+                const foundRadios = Array.from(el.querySelectorAll('tap-radio'));
+                return foundRadios;
+            }
+            return [];
+        });
+        expect(radios.length).to.equal(3);
+        expect(radios.find(radio => radio.value === value)?.value).to.equal(value);
+    });
+});

src/radio-group/radio-group.ts

@@ -7,13 +7,31 @@ export class RadioGroup extends LitElement {
     'vertical';
   @property({ reflect: true }) value = '';
 
-  @queryAssignedElements() private radios!: Radio[];
+  @queryAssignedElements() private elements!: Element[];
 
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('radio-input-change', this.handleRadioChangeClick);
   }
 
+  public get radios(): Radio[] {
+    const findRadios = (nodes: Element[]): Radio[] => {
+      let radios: Radio[] = [];
+      nodes.forEach((node) => {
+        if (node instanceof Radio) {
+          radios.push(node);
+        } else if (node instanceof HTMLElement) {
+          radios = radios.concat(
+            findRadios(Array.from(node.querySelectorAll('tap-radio')))
+          );
+        }
+      });
+      return radios;
+    };
+
+    return findRadios(this.elements);
+  }
+
   private selectDefaultOption() {
     if (!this.value) return;
     const selectedRadio = this.radios.find(

src/radio/radio.ts

@@ -6,6 +6,7 @@ export class Radio extends LitElement {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
   };
+  static readonly formAssociated = true;
 
   @property({ type: Boolean, reflect: true }) checked = false;