@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.16

package/dist/collection/components/ic-radio-group/ic-radio-group.e2e.js

@@ -0,0 +1,343 @@
+import { newE2EPage } from "@stencil/core/testing";
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+describe("ic-radio-group component", () => {
+  it("Should have tabIndex of first option 0, when no options are selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" ></ic-radio-option>    
+        <ic-radio-option value="test2" ></ic-radio-option>    
+        </ic-radio-group>
+      `);
+    await page.waitForChanges();
+    const radioButton1 = await page.find("ic-radio-option[value='test1']");
+    const input1 = radioButton1.shadowRoot.querySelector("input");
+    const radioButton2 = await page.find("ic-radio-option[value='test2']");
+    const input2 = radioButton2.shadowRoot.querySelector("input");
+    expect(input1.tabIndex).toBe(0);
+    expect(input2.tabIndex).toBe(-1);
+  });
+  it("Should not be clickable when disabled", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" disabled></ic-radio-option>    
+        <ic-radio-option value="test2" disabled></ic-radio-option>    
+        </ic-radio-group>
+      `);
+    const radioButton = await page.find("ic-radio-option[value='test2']");
+    await radioButton.click();
+    await page.waitForChanges();
+    expect(await radioButton.getProperty("selected")).toBe(false);
+  });
+  it("Should be selected when clicked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" ></ic-radio-option>    
+        <ic-radio-option value="test2" ></ic-radio-option>    
+        </ic-radio-group>
+      `);
+    let radioButton = await page.find("ic-radio-option[value='test2']");
+    await radioButton.click();
+    await page.waitForChanges();
+    expect(await radioButton.getProperty("selected")).toBe(true);
+    radioButton = await page.find("ic-radio-option[value='test2']");
+    const input = radioButton.shadowRoot.querySelector("input");
+    expect(input.tabIndex).toBe(0);
+  });
+  it("Should enable textfield when associated option is selected when static", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" ></ic-radio-option>    
+        <ic-radio-option value="test2" selected>
+          <ic-text-field
+              slot="additional-field"
+              label="Test label"
+          ></ic-text-field>
+        </ic-radio-option>    
+        </ic-radio-group>
+      `);
+    const radioButton = await page.find("ic-radio-option[value='test1']");
+    const textfield = await page.find("ic-text-field");
+    expect(textfield).not.toHaveAttribute("disabled");
+    await radioButton.click();
+    await page.waitForChanges();
+    expect(textfield).toHaveAttribute("disabled");
+  });
+  it("Should display textfield when associated option is selected when dynamic", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" ></ic-radio-option>    
+        <ic-radio-option value="test2" additional-field-display="dynamic">
+          <ic-text-field
+              slot="additional-field"
+              label="Test label"
+          ></ic-text-field>
+        </ic-radio-option>    
+        </ic-radio-group>
+      `);
+    const radioButton = await page.find("ic-radio-option[value='test2']");
+    let additionalFieldDisplay = await page.evaluate(() => {
+      const additionalField = document
+        .querySelector("ic-radio-option[value='test2']")
+        .shadowRoot.querySelector(".dynamic-container");
+      return window.getComputedStyle(additionalField).display;
+    });
+    expect(additionalFieldDisplay).toBe("none");
+    await radioButton.click();
+    await page.waitForChanges();
+    additionalFieldDisplay = await page.evaluate(() => {
+      const additionalField = document
+        .querySelector("ic-radio-option[value='test2']")
+        .shadowRoot.querySelector(".dynamic-container");
+      return window.getComputedStyle(additionalField).display;
+    });
+    expect(additionalFieldDisplay).not.toBe("none");
+  });
+  it("Should emit icChange event when radio option is selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" ></ic-radio-option>    
+        <ic-radio-option value="test2" >
+        </ic-radio-option>    
+        </ic-radio-group>
+      `);
+    const radioButton = await page.find("ic-radio-option[value='test2']");
+    const icChange = await page.spyOnEvent("icChange");
+    await radioButton.click();
+    await page.waitForChanges();
+    const radioElement = await page.evaluate(() => document.querySelector("ic-radio-option[value='test2']"));
+    expect(icChange).toHaveReceivedEventDetail({
+      selectedOption: {
+        radio: radioElement,
+      },
+      value: "test2",
+    });
+  });
+  it("Should emit icCheck event when radio option is selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" ></ic-radio-option>    
+        <ic-radio-option value="test2" ></ic-radio-option>    
+        </ic-radio-group>
+      `);
+    const radioButton = await page.find("ic-radio-option[value='test2']");
+    const icChecked = await page.spyOnEvent("icCheck");
+    await radioButton.click();
+    await page.waitForChanges();
+    expect(icChecked).toHaveReceivedEventDetail({
+      value: "test2",
+    });
+  });
+  it("Should select when spacebar is pressed", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" ></ic-radio-option>    
+        <ic-radio-option value="test2" >
+        </ic-radio-option>    
+        </ic-radio-group>
+      `);
+    const radioButton = await page.find("ic-radio-option[value='test1']");
+    expect(await radioButton.getProperty("selected")).toBe(false);
+    await page.keyboard.press("Tab");
+    await radioButton.press(" ");
+    await page.waitForChanges();
+    expect(await radioButton.getProperty("selected")).toBe(true);
+    const input = radioButton.shadowRoot.querySelector("input");
+    expect(input.tabIndex).toBe(0);
+  });
+  it("Should select next radio option down when arrow down is used", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" ></ic-radio-option>    
+        <ic-radio-option value="test2" ></ic-radio-option>    
+        <ic-radio-option value="test3" ></ic-radio-option>    
+        </ic-radio-group>
+      `);
+    const radioButton1 = await page.find("ic-radio-option[value='test1']");
+    const radioButton2 = await page.find("ic-radio-option[value='test2']");
+    await page.keyboard.press("Tab");
+    await radioButton1.press(" ");
+    await page.waitForChanges();
+    await radioButton1.press("ArrowDown");
+    await page.waitForChanges();
+    const input = radioButton2.shadowRoot.querySelector("input");
+    expect(input.tabIndex).toBe(0);
+  });
+  it("Should select next radio option down when arrow right is used", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" ></ic-radio-option>    
+        <ic-radio-option value="test2" ></ic-radio-option>    
+        <ic-radio-option value="test3" ></ic-radio-option>    
+        </ic-radio-group>
+      `);
+    const radioButton1 = await page.find("ic-radio-option[value='test1']");
+    const radioButton2 = await page.find("ic-radio-option[value='test2']");
+    await page.keyboard.press("Tab");
+    await radioButton1.press(" ");
+    await page.waitForChanges();
+    await radioButton1.press("ArrowRight");
+    await page.waitForChanges();
+    const input = radioButton2.shadowRoot.querySelector("input");
+    expect(input.tabIndex).toBe(0);
+  });
+  it("Should select next radio option down when arrow up is used", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" ></ic-radio-option>    
+        <ic-radio-option value="test2" ></ic-radio-option>    
+        <ic-radio-option value="test3" ></ic-radio-option>    
+        </ic-radio-group>
+      `);
+    const radioButton2 = await page.find("ic-radio-option[value='test2']");
+    const radioButton1 = await page.find("ic-radio-option[value='test1']");
+    await radioButton2.click();
+    await page.waitForChanges();
+    await radioButton2.press("ArrowUp");
+    await page.waitForChanges();
+    const input = radioButton1.shadowRoot.querySelector("input");
+    expect(input.tabIndex).toBe(0);
+  });
+  it("Should select next radio option down when arrow left is used", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" ></ic-radio-option>    
+        <ic-radio-option value="test2" ></ic-radio-option>    
+        <ic-radio-option value="test3" ></ic-radio-option>    
+        </ic-radio-group>
+      `);
+    const radioButton2 = await page.find("ic-radio-option[value='test2']");
+    const radioButton1 = await page.find("ic-radio-option[value='test1']");
+    await radioButton2.click();
+    await page.waitForChanges();
+    await radioButton2.press("ArrowLeft");
+    await page.waitForChanges();
+    const input = radioButton1.shadowRoot.querySelector("input");
+    expect(input.tabIndex).toBe(0);
+  });
+  it("Works on a form", async () => {
+    const page = await newE2EPage();
+    await page.setContent(` <form>
+          <ic-radio-group label="this is a label" name="1">
+          <ic-radio-option
+              value="valueName1"
+              label="Unselected / Default"
+          ></ic-radio-option>
+          <ic-radio-option
+              value="valueName2"
+              label="Selected / Default"
+              selected
+          ></ic-radio-option>
+          <ic-radio-option
+              value="valueName3"
+              label="Unselected / Disabled"
+              disabled
+          ></ic-radio-option>
+          </ic-radio-group>
+        <input type="submit" value="Submit">
+      </form>
+      <script>document.querySelector('form').addEventListener('submit', (ev) => {
+        ev.preventDefault();
+      })
+      </script>
+      `);
+    await page.waitForChanges();
+    const radioButton = await page.find("ic-radio-option[value='valueName1']");
+    await radioButton.click();
+    await page.waitForChanges();
+    const value = await (await page.find('input[name="1"]')).getProperty("value");
+    expect(value).toBe("valueName1");
+  });
+  it("Passes the value of radio button correctly when already selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" ></ic-radio-option>    
+        <ic-radio-option value="test2" selected ></ic-radio-option>    
+        </ic-radio-group>
+      `);
+    await page.waitForChanges();
+    const value = await (await page.find('input[name="test"]')).getProperty("value");
+    expect(value).toBe("test2");
+  });
+  it("Passes the value of radio button and textfield correctly when already selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+    <ic-radio-option value="test1" ></ic-radio-option>    
+    <ic-radio-option value="test2" additional-field-display="dynamic" >
+      <ic-text-field
+          slot="additional-field"
+          label="Test label"
+      ></ic-text-field>
+    </ic-radio-option>    
+    </ic-radio-group>
+  `);
+    const radioButton = await page.find("ic-radio-option[value='test2']");
+    await radioButton.click();
+    await page.waitForChanges();
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    await page.keyboard.press("t");
+    await page.keyboard.press("e");
+    await page.keyboard.press("s");
+    await page.keyboard.press("t");
+    await page.waitForChanges();
+    let value = await (await page.find('input[name="test"]')).getProperty("value");
+    expect(value).toBe("test");
+    await page.keyboard.press("Backspace");
+    await page.keyboard.press("Backspace");
+    await page.keyboard.press("Backspace");
+    await page.keyboard.press("Backspace");
+    await page.waitForChanges();
+    value = await (await page.find('input[name="test"]')).getProperty("value");
+    expect(value).toBe("test2");
+  });
+  it("Passes the value of radio button and textfield correctly when already selected and has a value in texfield", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-radio-group label="test label" name="test">
+    <ic-radio-option value="test1" ></ic-radio-option>    
+    <ic-radio-option value="test2" additional-field-display="dynamic" >
+      <ic-text-field
+          slot="additional-field"
+          label="Test label"
+          value="testValue1"
+      ></ic-text-field>
+    </ic-radio-option>    
+    </ic-radio-group>
+  `);
+    const radioButton = await page.find("ic-radio-option[value='test2']");
+    await radioButton.click();
+    await page.waitForChanges();
+    const value = await (await page.find('input[name="test"]')).getProperty("value");
+    expect(value).toBe("testValue1");
+  });
+  it("Should reset to initial state on form reset event", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<form><ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test1" ></ic-radio-option>    
+        <ic-radio-option value="test2" selected></ic-radio-option>    
+        </ic-radio-group>
+        <button type="reset" id="resetButton">Reset</button>
+        </form>
+      `);
+    await page.waitForChanges();
+    let radioButton1 = await page.find("ic-radio-option[value='test1']");
+    let radioButton2 = await page.find("ic-radio-option[value='test2']");
+    expect(await radioButton1.getProperty("selected")).toBe(false);
+    expect(await radioButton2.getProperty("selected")).toBe(true);
+    await radioButton1.click();
+    await page.waitForChanges();
+    radioButton1 = await page.find("ic-radio-option[value='test1']");
+    radioButton2 = await page.find("ic-radio-option[value='test2']");
+    expect(await radioButton1.getProperty("selected")).toBe(true);
+    expect(await radioButton2.getProperty("selected")).toBe(false);
+    const resetButton = await page.find("#resetButton");
+    await resetButton.click();
+    await page.waitForChanges();
+    radioButton1 = await page.find("ic-radio-option[value='test1']");
+    radioButton2 = await page.find("ic-radio-option[value='test2']");
+    expect(await radioButton1.getProperty("selected")).toBe(false);
+    expect(await radioButton2.getProperty("selected")).toBe(true);
+  });
+});
+//# sourceMappingURL=ic-radio-group.e2e.js.map

package/dist/collection/components/ic-radio-group/ic-radio-group.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-radio-group.e2e.js","sourceRoot":"","sources":["../../../src/components/ic-radio-group/ic-radio-group.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-radio-group component\", () => {\n  it(\"Should have tabIndex of first option 0, when no options are selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    await page.waitForChanges();\n\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    const input1 = radioButton1.shadowRoot.querySelector(\"input\");\n\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n    const input2 = radioButton2.shadowRoot.querySelector(\"input\");\n\n    expect(input1.tabIndex).toBe(0);\n    expect(input2.tabIndex).toBe(-1);\n  });\n  it(\"Should not be clickable when disabled\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" disabled></ic-radio-option>    \n        <ic-radio-option value=\"test2\" disabled></ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    await radioButton.click();\n    await page.waitForChanges();\n    expect(await radioButton.getProperty(\"selected\")).toBe(false);\n  });\n  it(\"Should be selected when clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    let radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    await radioButton.click();\n    await page.waitForChanges();\n\n    expect(await radioButton.getProperty(\"selected\")).toBe(true);\n\n    radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    const input = radioButton.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"Should enable textfield when associated option is selected when static\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" selected>\n          <ic-text-field\n              slot=\"additional-field\"\n              label=\"Test label\"\n          ></ic-text-field>\n        </ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton = await page.find(\"ic-radio-option[value='test1']\");\n    const textfield = await page.find(\"ic-text-field\");\n    expect(textfield).not.toHaveAttribute(\"disabled\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    expect(textfield).toHaveAttribute(\"disabled\");\n  });\n  it(\"Should display textfield when associated option is selected when dynamic\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" additional-field-display=\"dynamic\">\n          <ic-text-field\n              slot=\"additional-field\"\n              label=\"Test label\"\n          ></ic-text-field>\n        </ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n\n    let additionalFieldDisplay = await page.evaluate(() => {\n      const additionalField = document\n        .querySelector(\"ic-radio-option[value='test2']\")\n        .shadowRoot.querySelector(\".dynamic-container\");\n\n      return window.getComputedStyle(additionalField).display;\n    });\n    expect(additionalFieldDisplay).toBe(\"none\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    additionalFieldDisplay = await page.evaluate(() => {\n      const additionalField = document\n        .querySelector(\"ic-radio-option[value='test2']\")\n        .shadowRoot.querySelector(\".dynamic-container\");\n\n      return window.getComputedStyle(additionalField).display;\n    });\n    expect(additionalFieldDisplay).not.toBe(\"none\");\n  });\n  it(\"Should emit icChange event when radio option is selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" >\n        </ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    const icChange = await page.spyOnEvent(\"icChange\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    const radioElement = await page.evaluate(\n      () =>\n        document.querySelector(\n          \"ic-radio-option[value='test2']\"\n        ) as HTMLIcRadioOptionElement\n    );\n\n    expect(icChange).toHaveReceivedEventDetail({\n      selectedOption: {\n        radio: radioElement,\n      },\n      value: \"test2\",\n    });\n  });\n  it(\"Should emit icCheck event when radio option is selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    const icChecked = await page.spyOnEvent(\"icCheck\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    expect(icChecked).toHaveReceivedEventDetail({\n      value: \"test2\",\n    });\n  });\n  it(\"Should select when spacebar is pressed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" >\n        </ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton = await page.find(\"ic-radio-option[value='test1']\");\n    expect(await radioButton.getProperty(\"selected\")).toBe(false);\n\n    await page.keyboard.press(\"Tab\");\n    await radioButton.press(\" \");\n    await page.waitForChanges();\n\n    expect(await radioButton.getProperty(\"selected\")).toBe(true);\n    const input = radioButton.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"Should select next radio option down when arrow down is used\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        <ic-radio-option value=\"test3\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    await page.keyboard.press(\"Tab\");\n    await radioButton1.press(\" \");\n    await page.waitForChanges();\n    await radioButton1.press(\"ArrowDown\");\n    await page.waitForChanges();\n\n    const input = radioButton2.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"Should select next radio option down when arrow right is used\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        <ic-radio-option value=\"test3\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    await page.keyboard.press(\"Tab\");\n    await radioButton1.press(\" \");\n    await page.waitForChanges();\n    await radioButton1.press(\"ArrowRight\");\n    await page.waitForChanges();\n\n    const input = radioButton2.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"Should select next radio option down when arrow up is used\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        <ic-radio-option value=\"test3\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n\n    await radioButton2.click();\n    await page.waitForChanges();\n    await radioButton2.press(\"ArrowUp\");\n    await page.waitForChanges();\n\n    const input = radioButton1.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"Should select next radio option down when arrow left is used\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        <ic-radio-option value=\"test3\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n\n    await radioButton2.click();\n    await page.waitForChanges();\n    await radioButton2.press(\"ArrowLeft\");\n    await page.waitForChanges();\n\n    const input = radioButton1.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"Works on a form\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(` <form>\n          <ic-radio-group label=\"this is a label\" name=\"1\">\n          <ic-radio-option\n              value=\"valueName1\"\n              label=\"Unselected / Default\"\n          ></ic-radio-option>\n          <ic-radio-option\n              value=\"valueName2\"\n              label=\"Selected / Default\"\n              selected\n          ></ic-radio-option>\n          <ic-radio-option\n              value=\"valueName3\"\n              label=\"Unselected / Disabled\"\n              disabled\n          ></ic-radio-option>\n          </ic-radio-group>\n        <input type=\"submit\" value=\"Submit\">\n      </form>\n      <script>document.querySelector('form').addEventListener('submit', (ev) => {\n        ev.preventDefault();\n      })\n      </script>\n      `);\n    await page.waitForChanges();\n\n    const radioButton = await page.find(\"ic-radio-option[value='valueName1']\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n    const value = await (\n      await page.find('input[name=\"1\"]')\n    ).getProperty(\"value\");\n\n    expect(value).toBe(\"valueName1\");\n  });\n  it(\"Passes the value of radio button correctly when already selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" selected ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    await page.waitForChanges();\n\n    const value = await (\n      await page.find('input[name=\"test\"]')\n    ).getProperty(\"value\");\n\n    expect(value).toBe(\"test2\");\n  });\n\n  it(\"Passes the value of radio button and textfield correctly when already selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n    <ic-radio-option value=\"test1\" ></ic-radio-option>    \n    <ic-radio-option value=\"test2\" additional-field-display=\"dynamic\" >\n      <ic-text-field\n          slot=\"additional-field\"\n          label=\"Test label\"\n      ></ic-text-field>\n    </ic-radio-option>    \n    </ic-radio-group>\n  `);\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    await page.keyboard.press(\"t\");\n    await page.keyboard.press(\"e\");\n    await page.keyboard.press(\"s\");\n    await page.keyboard.press(\"t\");\n\n    await page.waitForChanges();\n\n    let value = await (\n      await page.find('input[name=\"test\"]')\n    ).getProperty(\"value\");\n\n    expect(value).toBe(\"test\");\n\n    await page.keyboard.press(\"Backspace\");\n    await page.keyboard.press(\"Backspace\");\n    await page.keyboard.press(\"Backspace\");\n    await page.keyboard.press(\"Backspace\");\n\n    await page.waitForChanges();\n\n    value = await (await page.find('input[name=\"test\"]')).getProperty(\"value\");\n\n    expect(value).toBe(\"test2\");\n  });\n\n  it(\"Passes the value of radio button and textfield correctly when already selected and has a value in texfield\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n    <ic-radio-option value=\"test1\" ></ic-radio-option>    \n    <ic-radio-option value=\"test2\" additional-field-display=\"dynamic\" >\n      <ic-text-field\n          slot=\"additional-field\"\n          label=\"Test label\"\n          value=\"testValue1\"\n      ></ic-text-field>\n    </ic-radio-option>    \n    </ic-radio-group>\n  `);\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    const value = await (\n      await page.find('input[name=\"test\"]')\n    ).getProperty(\"value\");\n\n    expect(value).toBe(\"testValue1\");\n  });\n\n  it(\"Should reset to initial state on form reset event\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<form><ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" selected></ic-radio-option>    \n        </ic-radio-group>\n        <button type=\"reset\" id=\"resetButton\">Reset</button>\n        </form>\n      `);\n\n    await page.waitForChanges();\n\n    let radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    let radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    expect(await radioButton1.getProperty(\"selected\")).toBe(false);\n    expect(await radioButton2.getProperty(\"selected\")).toBe(true);\n\n    await radioButton1.click();\n    await page.waitForChanges();\n\n    radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    expect(await radioButton1.getProperty(\"selected\")).toBe(true);\n    expect(await radioButton2.getProperty(\"selected\")).toBe(false);\n\n    const resetButton = await page.find(\"#resetButton\");\n    await resetButton.click();\n\n    await page.waitForChanges();\n\n    radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    expect(await radioButton1.getProperty(\"selected\")).toBe(false);\n    expect(await radioButton2.getProperty(\"selected\")).toBe(true);\n  });\n});\n"]}

package/dist/collection/components/ic-radio-group/ic-radio-group.js

@@ -1,17 +1,17 @@
 import { Host, h, } from "@stencil/core";
-import { hasValidationStatus, isSlotUsed, onComponentRequiredPropUndefined, renderHiddenInput, } from "../../utils/helpers";
+import { hasValidationStatus, isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, renderHiddenInput, } from "../../utils/helpers";
 export class RadioGroup {
   constructor() {
     this.handleKeyDown = (event) => {
       switch (event.key) {
         case "ArrowDown":
         case "ArrowRight":
-          this.radioOptions[this.getNextItemToSelect(this.selectedChild, true)].selected = true;
+          this.radioOptions[this.getNextItemToSelect(this.selectedChild, true)].click();
           event.preventDefault();
           break;
         case "ArrowUp":
         case "ArrowLeft":
-          this.radioOptions[this.getNextItemToSelect(this.selectedChild, false)].selected = true;
+          this.radioOptions[this.getNextItemToSelect(this.selectedChild, false)].click();
           event.preventDefault();
       }
     };
@@ -48,8 +48,16 @@ export class RadioGroup {
     this.selectedChild = -1;
   }
   selectHandler(event) {
+    var _a;
     this.checkedValue = event.detail.value;
-    this.icChange.emit({ value: this.checkedValue });
+    const selectedOption = event.target;
+    this.icChange.emit({
+      value: this.checkedValue,
+      selectedOption: {
+        radio: selectedOption,
+        textFieldValue: (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.value,
+      },
+    });
     if (this.radioOptions !== undefined) {
       this.radioOptions.forEach((radioOption, index) => {
         radioOption.selected = this.checkedValue === radioOption.value;
@@ -61,6 +69,9 @@ export class RadioGroup {
         this.selectedChild > 0 ? -1 : 0;
     }
   }
+  componentWillLoad() {
+    removeDisabledFalse(this.disabled, this.host);
+  }
   componentDidLoad() {
     this.radioOptions = Array.from(this.host.querySelectorAll("ic-radio-option"));
     this.radioOptions.forEach((radioOption, index) => {
@@ -314,12 +325,12 @@ export class RadioGroup {
           "text": "Emitted when a user selects a radio."
         },
         "complexType": {
-          "original": "IcValueEventDetail",
-          "resolved": "IcValueEventDetail",
+          "original": "IcChangeEventDetail",
+          "resolved": "IcChangeEventDetail",
           "references": {
-            "IcValueEventDetail": {
+            "IcChangeEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "./ic-radio-group.types"
             }
           }
         }

package/dist/collection/components/ic-radio-group/ic-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-radio-group.js","sourceRoot":"","sources":["../../../src/components/ic-radio-group/ic-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  hasValidationStatus,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty, IcOrientation } from \"../../utils/types\";\nimport { IcValueEventDetail } from \"../../interface\";\n\n@Component({\n  tag: \"ic-radio-group\",\n  styleUrl: \"ic-radio-group.css\",\n  shadow: true,\n})\nexport class RadioGroup {\n  private radioOptions: HTMLIcRadioOptionElement[];\n\n  @Element() host: HTMLIcRadioGroupElement;\n\n  /**\n   * The label for the radio group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the radio group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * If `true`, the radio group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n   */\n  @Prop({ reflect: true, mutable: true }) orientation: IcOrientation =\n    \"vertical\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string;\n\n  /**\n   * If `true`, the small styling will be applied to the radio group.\n   */\n  @Prop() small: boolean = false;\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n  /**\n   * The checked state.\n   */\n  @State() checkedValue: string = \"\";\n  @State() selectedChild: number = -1;\n\n  /**\n   * Emitted when a user selects a radio.\n   */\n  @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n  @Listen(\"icCheck\")\n  selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n    this.checkedValue = event.detail.value;\n    this.icChange.emit({ value: this.checkedValue });\n\n    if (this.radioOptions !== undefined) {\n      this.radioOptions.forEach((radioOption, index) => {\n        radioOption.selected = this.checkedValue === radioOption.value;\n        if (radioOption.selected) {\n          this.selectedChild = index;\n        }\n      });\n      this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n        this.selectedChild > 0 ? -1 : 0;\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, true)\n        ].selected = true;\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, false)\n        ].selected = true;\n        event.preventDefault();\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numRadios = this.radioOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    //check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numRadios;\n    } else if (nextItem > numRadios) {\n      nextItem = 0;\n    }\n\n    //if next item is disabled then find next\n    if (this.radioOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  componentDidLoad(): void {\n    this.radioOptions = Array.from(\n      this.host.querySelectorAll(\"ic-radio-option\")\n    );\n\n    this.radioOptions.forEach((radioOption, index) => {\n      if (!radioOption.selected) {\n        radioOption.selected = this.checkedValue === radioOption.value;\n      }\n      radioOption.name = this.name;\n      radioOption.groupLabel = this.label;\n      if (radioOption.selected) {\n        this.selectedChild = index;\n        this.checkedValue = radioOption.value;\n      }\n    });\n    this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n      this.selectedChild > 0 ? -1 : 0;\n\n    if (\n      this.orientation === \"horizontal\" &&\n      this.radioOptions !== undefined &&\n      (this.radioOptions.length > 2 ||\n        (this.radioOptions.length === 2 &&\n          (isSlotUsed(this.radioOptions[0], \"additional-field\") ||\n            isSlotUsed(this.radioOptions[1], \"additional-field\"))))\n    ) {\n      this.orientation = \"vertical\";\n    }\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n  }\n\n  render() {\n    renderHiddenInput(\n      true,\n      this.host,\n      this.name,\n      this.checkedValue,\n      this.disabled\n    );\n\n    return (\n      <Host onKeyDown={this.handleKeyDown} class={{ small: this.small }}>\n        <div\n          role=\"radiogroup\"\n          aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n        >\n          {!this.hideLabel && (\n            <ic-input-label\n              class={{ [`${this.validationStatus}`]: true }}\n              label={this.label}\n              helperText={this.helperText}\n              required={this.required}\n              disabled={this.disabled}\n            ></ic-input-label>\n          )}\n          <div class=\"radio-buttons-container\">\n            <slot></slot>\n          </div>\n        </div>\n        {hasValidationStatus(this.validationStatus, this.disabled) && (\n          <ic-input-validation\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-radio-group.js","sourceRoot":"","sources":["../../../src/components/ic-radio-group/ic-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  hasValidationStatus,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderHiddenInput,\n} from \"../../utils/helpers\";\nimport {\n  IcInformationStatusOrEmpty,\n  IcOrientation,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n  tag: \"ic-radio-group\",\n  styleUrl: \"ic-radio-group.css\",\n  shadow: true,\n})\nexport class RadioGroup {\n  private radioOptions: HTMLIcRadioOptionElement[];\n\n  @Element() host: HTMLIcRadioGroupElement;\n\n  /**\n   * The label for the radio group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the radio group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * If `true`, the radio group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n   */\n  @Prop({ reflect: true, mutable: true }) orientation: IcOrientation =\n    \"vertical\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string;\n\n  /**\n   * If `true`, the small styling will be applied to the radio group.\n   */\n  @Prop() small: boolean = false;\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n  /**\n   * The checked state.\n   */\n  @State() checkedValue: string = \"\";\n  @State() selectedChild: number = -1;\n\n  /**\n   * Emitted when a user selects a radio.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  @Listen(\"icCheck\")\n  selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n    this.checkedValue = event.detail.value;\n    const selectedOption = event.target as HTMLIcRadioOptionElement;\n    this.icChange.emit({\n      value: this.checkedValue,\n      selectedOption: {\n        radio: selectedOption,\n        textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n      },\n    });\n\n    if (this.radioOptions !== undefined) {\n      this.radioOptions.forEach((radioOption, index) => {\n        radioOption.selected = this.checkedValue === radioOption.value;\n        if (radioOption.selected) {\n          this.selectedChild = index;\n        }\n      });\n      this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n        this.selectedChild > 0 ? -1 : 0;\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, true)\n        ].click();\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, false)\n        ].click();\n        event.preventDefault();\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numRadios = this.radioOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    //check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numRadios;\n    } else if (nextItem > numRadios) {\n      nextItem = 0;\n    }\n\n    //if next item is disabled then find next\n    if (this.radioOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.host);\n  }\n\n  componentDidLoad(): void {\n    this.radioOptions = Array.from(\n      this.host.querySelectorAll(\"ic-radio-option\")\n    );\n\n    this.radioOptions.forEach((radioOption, index) => {\n      if (!radioOption.selected) {\n        radioOption.selected = this.checkedValue === radioOption.value;\n      }\n      radioOption.name = this.name;\n      radioOption.groupLabel = this.label;\n      if (radioOption.selected) {\n        this.selectedChild = index;\n        this.checkedValue = radioOption.value;\n      }\n    });\n    this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n      this.selectedChild > 0 ? -1 : 0;\n\n    if (\n      this.orientation === \"horizontal\" &&\n      this.radioOptions !== undefined &&\n      (this.radioOptions.length > 2 ||\n        (this.radioOptions.length === 2 &&\n          (isSlotUsed(this.radioOptions[0], \"additional-field\") ||\n            isSlotUsed(this.radioOptions[1], \"additional-field\"))))\n    ) {\n      this.orientation = \"vertical\";\n    }\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n  }\n\n  render() {\n    renderHiddenInput(\n      true,\n      this.host,\n      this.name,\n      this.checkedValue,\n      this.disabled\n    );\n\n    return (\n      <Host onKeyDown={this.handleKeyDown} class={{ small: this.small }}>\n        <div\n          role=\"radiogroup\"\n          aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n        >\n          {!this.hideLabel && (\n            <ic-input-label\n              class={{ [`${this.validationStatus}`]: true }}\n              label={this.label}\n              helperText={this.helperText}\n              required={this.required}\n              disabled={this.disabled}\n            ></ic-input-label>\n          )}\n          <div class=\"radio-buttons-container\">\n            <slot></slot>\n          </div>\n        </div>\n        {hasValidationStatus(this.validationStatus, this.disabled) && (\n          <ic-input-validation\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"]}