@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukic/web-components",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "A web component UI library compiled with StencilJS",
   "author": "mi6",
   "bugs": {
@@ -96,5 +96,5 @@
     "webpack": "^5.76.0"
   },
   "license": "MIT",
-  "gitHead": "1c5671823f89c50f5e16d4f40e1bc15ae2310518"
+  "gitHead": "59d0e036de6def6644421e17bf1c5591eac0e34a"
 }

package/vscode-data.json

@@ -810,7 +810,7 @@
       "attributes": [
         {
           "name": "custom-color",
-          "description": "The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`.\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
+          "description": "The custom chip colour. This will override the theme colour.\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
         },
         {
           "name": "disabled",
@@ -839,9 +839,24 @@
             }
           ]
         },
+        {
+          "name": "theme",
+          "description": "Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\nSetting the \"customColor\" prop will override this.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "transparent-background",
-          "description": "If `true`, the outlined variant of chip will have a transparent background rather than white."
+          "description": "If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color."
         },
         {
           "name": "variant",
@@ -1618,18 +1633,6 @@
         "value": ""
       },
       "attributes": [
-        {
-          "name": "appearance",
-          "description": "The appearance of the loading indicator, e.g. dark or light.",
-          "values": [
-            {
-              "name": "dark"
-            },
-            {
-              "name": "light"
-            }
-          ]
-        },
         {
           "name": "description",
           "description": "The description that will be set as the aria-label of the loading indicator when not using a visible label."
@@ -1654,6 +1657,10 @@
           "name": "min",
           "description": "The minimum value that the progress value can take.\nUsed to calculate the proportional width of the progress bar."
         },
+        {
+          "name": "monochrome",
+          "description": "If `true`, the element will display as black and white."
+        },
         {
           "name": "progress",
           "description": "The current amount of progress made.\nIf not provided, component acts as an indeterminate loading indicator."
@@ -1676,6 +1683,21 @@
             }
           ]
         },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
         {
           "name": "type",
           "description": "The type of indicator, either linear or circular.",
@@ -2915,11 +2937,14 @@
       },
       "attributes": [
         {
-          "name": "appearance",
-          "description": "The appearance of the skeleton.",
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
           "values": [
             {
-              "name": "default"
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
             },
             {
               "name": "light"
@@ -3087,25 +3112,28 @@
           ]
         },
         {
-          "name": "appearance",
-          "description": "The appearance of the stepper.",
+          "name": "connector-width",
+          "description": "The length of the connector between each step in pixels. Minimum length is 100px."
+        },
+        {
+          "name": "hide-step-info",
+          "description": "If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper."
+        },
+        {
+          "name": "theme",
+          "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.",
           "values": [
             {
-              "name": "default"
+              "name": "dark"
+            },
+            {
+              "name": "inherit"
             },
             {
               "name": "light"
             }
           ]
         },
-        {
-          "name": "connector-width",
-          "description": "The length of the connector between each step in pixels. Minimum length is 100px."
-        },
-        {
-          "name": "hide-step-info",
-          "description": "If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper."
-        },
         {
           "name": "variant",
           "description": "The variant of the stepper.",

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

@@ -1,339 +0,0 @@
-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 = await radioButton1.find("input");
-        const radioButton2 = await page.find("ic-radio-option[value='test2']");
-        const input2 = await radioButton2.find("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 = await radioButton.find("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'] .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'] .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 = await radioButton.find("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 = await radioButton2.find("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 = await radioButton2.find("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 = await radioButton1.find("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 = await radioButton1.find("input");
-        expect(input.tabIndex).toBe(0);
-    });
-    it("should work in 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("should pass 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.findAll('input[name="test"]'))[1].getProperty("value");
-        expect(value).toBe("test2");
-    });
-    it("should pass 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.findAll('input[name="test"]'))[1].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.findAll('input[name="test"]'))[1].getProperty("value");
-        expect(value).toBe("test2");
-    });
-    it("should pass the value of radio button and textfield correctly when already selected and has a value in textfield", 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.findAll('input[name="test"]'))[1].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/test/basic/ic-radio-group.e2e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ic-radio-group.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-radio-group/test/basic/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 = await radioButton1.find(\"input\");\n\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n    const input2 = await radioButton2.find(\"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 = await radioButton.find(\"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.querySelector(\n        \"ic-radio-option[value='test2'] .dynamic-container\"\n      );\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.querySelector(\n        \"ic-radio-option[value='test2'] .dynamic-container\"\n      );\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 = await radioButton.find(\"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 = await radioButton2.find(\"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 = await radioButton2.find(\"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 = await radioButton1.find(\"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 = await radioButton1.find(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"should work in 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(\"should pass 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.findAll('input[name=\"test\"]')\n    )[1].getProperty(\"value\");\n\n    expect(value).toBe(\"test2\");\n  });\n\n  it(\"should pass 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.findAll('input[name=\"test\"]')\n    )[1].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 (\n      await page.findAll('input[name=\"test\"]')\n    )[1].getProperty(\"value\");\n\n    expect(value).toBe(\"test2\");\n  });\n\n  it(\"should pass the value of radio button and textfield correctly when already selected and has a value in textfield\", 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.findAll('input[name=\"test\"]')\n    )[1].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"]}