@ukic/web-components 2.1.0-beta.9 → 2.2.0

package/dist/collection/components/ic-card/test/basic/ic-card.spec.js

@@ -0,0 +1,152 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Card } from "../../ic-card";
+describe("ic-card", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card heading="Card" message="This is a static card"></ic-card>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render as a button", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true></ic-card>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render as a link", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true href="/"></ic-card>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render full width variant", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card heading="Card" full-width=true message="This is a full width card" clickable=true></ic-card>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with a link parent", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<a href="/"><ic-card heading="Card" message="This is a clickable card" clickable=true></ic-card></a>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should apply 'focussed' style when parent is focussed", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<a href="/"><ic-card id="test-id" heading="Card" message="This is a clickable card" clickable=true></ic-card></a>`,
+    });
+    expect(page.root).not.toBeNull;
+    const element = await document.getElementById("test-id");
+    await expect(element.classList.contains("focussed")).toBeFalsy;
+    await element.focus();
+    await expect(element.classList.contains("focussed")).toBeTruthy;
+  });
+  it("should lose 'focussed' style when parent loses focus", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<a href="/"><ic-card id="test-card" heading="Card" message="This is a clickable card" clickable=true></ic-card></a>`,
+    });
+    expect(page.root).not.toBeNull;
+    const element = await document.getElementById("test-card");
+    await element.focus();
+    await expect(element.classList.contains("focussed")).toBeTruthy;
+    await element.blur();
+    await expect(element.classList.contains("focussed")).toBeFalsy;
+    await page.rootInstance.disconnectedCallback();
+  });
+  it("should stop immediate propagation of a click event when disabled", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card id="test-card" heading="Card" message="This is a clickable card" clickable=true disabled=true onclick="alert('test')"></ic-card>`,
+    });
+    jest.spyOn(window, "alert").mockImplementation();
+    const element = await document.getElementById("test-card");
+    element.click();
+    await page.waitForChanges();
+    await expect(window.alert).not.toHaveBeenCalled;
+  });
+  it("should render with a subheading", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"></ic-card>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with an interaction button", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><ic-button variant="primary" slot="interaction-button">Click here</ic-button></ic-card>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with a top image", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><div slot="image-top">Image placeholder</div></ic-card>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with a middle image", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><div slot="image-mid">Image placeholder</div></ic-card>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with interaction controls", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><ic-button slot="interaction-controls">Click here</ic-button></ic-card>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render as expandable", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card" expandable></ic-card>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render content in expanded area", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card" expandable><ic-typography slot="expanded-content">Extra content</ic-typography></ic-card>`,
+    });
+    page.rootInstance.areaExpanded = true;
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should toggle expanded content when expansion toggle is clicked", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card id="test-card" heading="Card" message="This is a clickable card" expandable><ic-typography slot="expanded-content">Expanded</ic-typography></ic-card>`,
+    });
+    expect(page.root).toMatchSnapshot();
+    page.rootInstance.toggleExpanded();
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should call 'setFocus' when card as a button is focused", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true></ic-card>`,
+    });
+    //Can't expect anything in this test - this is to increase code coverage only
+    await page.rootInstance.setFocus().toHaveBeenCalled;
+  });
+  it("should call 'setFocus' when card as a link is focused", async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true href="/"></ic-card>`,
+    });
+    //Can't expect anything in this test - this is to increase code coverage only
+    await page.rootInstance.setFocus().toHaveBeenCalled;
+  });
+});
+//# sourceMappingURL=ic-card.spec.js.map

package/dist/collection/components/ic-card/test/basic/ic-card.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-card.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-card/test/basic/ic-card.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Card } from \"../../ic-card\";\n\ndescribe(\"ic-card\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a static card\"></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a button\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a link\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render full width variant\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" full-width=true message=\"This is a full width card\" clickable=true></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a link parent\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card></a>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should apply 'focussed' style when parent is focussed\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card id=\"test-id\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-id\");\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n  });\n\n  it(\"should lose 'focussed' style when parent loses focus\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-card\");\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n\n    await element.blur();\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should stop immediate propagation of a click event when disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true disabled=true onclick=\"alert('test')\"></ic-card>`,\n    });\n\n    jest.spyOn(window, \"alert\").mockImplementation();\n\n    const element = await document.getElementById(\"test-card\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    await expect(window.alert).not.toHaveBeenCalled;\n  });\n\n  it(\"should render with a subheading\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with an interaction button\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"><ic-button variant=\"primary\" slot=\"interaction-button\">Click here</ic-button></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a top image\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"><div slot=\"image-top\">Image placeholder</div></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a middle image\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"><div slot=\"image-mid\">Image placeholder</div></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with interaction controls\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"><ic-button slot=\"interaction-controls\">Click here</ic-button></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as expandable\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\" expandable></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render content in expanded area\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\" expandable><ic-typography slot=\"expanded-content\">Extra content</ic-typography></ic-card>`,\n    });\n\n    page.rootInstance.areaExpanded = true;\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should toggle expanded content when expansion toggle is clicked\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" expandable><ic-typography slot=\"expanded-content\">Expanded</ic-typography></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.rootInstance.toggleExpanded();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should call 'setFocus' when card as a button is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should call 'setFocus' when card as a link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n});\n"]}

package/dist/collection/components/ic-checkbox/ic-checkbox.css

@@ -441,7 +441,7 @@ video {
 }
 
 
-:host([disabled]) {
+:host(.disabled) {
   color: var(--ic-architectural-200);
   pointer-events: none;
 }
@@ -452,9 +452,10 @@ video {
   width: fit-content;
   padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);
   margin-bottom: var(--ic-space-xxs);
+  align-items: center;
 }
 
-:host([small]) .container {
+:host(.small) .container {
   margin-bottom: var(--ic-space-xxxs);
 }
 
@@ -469,16 +470,17 @@ video {
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
   background-color: transparent;
-  border: 0.063rem solid var(--ic-architectural-300);
+  border: var(--ic-space-1px) solid var(--ic-architectural-300);
   border-radius: var(--ic-border-radius);
   outline: none;
   cursor: pointer;
   transition: var(--ic-easing-transition-fast);
+  flex-shrink: 0;
 }
 
 .checkbox:checked {
   background-color: var(--ic-action-default);
-  border: 0.063rem solid var(--ic-action-default);
+  border: var(--ic-space-1px) solid var(--ic-action-default);
   transition: var(--ic-easing-transition-slow);
 }
 
@@ -515,13 +517,13 @@ video {
 .checkbox:hover {
   background-color: var(--ic-action-default-bg-hover);
   box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);
-  border: 0.063rem solid var(--ic-action-default-hover);
+  border: var(--ic-space-1px) solid var(--ic-action-default-hover);
 }
 
 .checkbox:active {
   background-color: var(--ic-action-default-bg-active);
   box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);
-  border: 0.063rem solid var(--ic-action-default-active);
+  border: var(--ic-space-1px) solid var(--ic-action-default-active);
 }
 
 .checkbox:focus {
@@ -529,7 +531,7 @@ video {
 }
 
 .checkbox:disabled {
-  border: 0.063rem dashed var(--ic-architectural-200);
+  border: var(--ic-space-1px) dashed var(--ic-architectural-200);
 }
 
 .checkbox-label {
@@ -548,18 +550,19 @@ video {
   z-index: 1;
   background-color: transparent;
   pointer-events: none;
+  flex-shrink: 0;
 }
 
 .indeterminate-symbol {
   position: relative;
   width: 0.875rem;
   height: var(--ic-space-xxxs);
-  top: 0.688rem;
   right: -1.188rem;
   margin-left: -0.875rem;
   z-index: 1;
   background-color: var(--ic-action-default);
   pointer-events: none;
+  flex-shrink: 0;
 }
 
 .container:hover .indeterminate-symbol {

package/dist/collection/components/ic-checkbox/ic-checkbox.js

@@ -1,7 +1,12 @@
 import { Host, h, } from "@stencil/core";
-import { isSlotUsed, onComponentRequiredPropUndefined, renderHiddenInput, removeHiddenInput, addFormResetListener, removeFormResetListener, } from "../../utils/helpers";
+import { isSlotUsed, onComponentRequiredPropUndefined, renderHiddenInput, removeHiddenInput, addFormResetListener, removeFormResetListener, removeDisabledFalse, } from "../../utils/helpers";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class Checkbox {
   constructor() {
+    this.IC_TEXT_FIELD = "ic-text-field";
+    this.eventHandler = (event) => {
+      event.stopImmediatePropagation();
+    };
     this.handleClick = () => {
       this.checked = !this.checked;
       this.icCheck.emit();
@@ -10,29 +15,34 @@ export class Checkbox {
     this.handleFormReset = () => {
       this.checked = this.initiallyChecked;
     };
+    this.additionalFieldDisplay = "static";
     this.checked = false;
+    this.initiallyChecked = this.checked;
     this.disabled = false;
-    this.label = undefined;
-    this.value = undefined;
-    this.name = undefined;
-    this.groupLabel = undefined;
     this.dynamicText = "This selection requires additional answers";
-    this.additionalFieldDisplay = "static";
+    this.groupLabel = undefined;
     this.indeterminate = false;
-    this.initiallyChecked = this.checked;
+    this.label = undefined;
+    this.name = undefined;
+    this.small = false;
+    this.value = undefined;
   }
-  /**
-   * Sets focus on the checkbox.
-   */
-  async setFocus() {
-    const checkboxEl = this.host.shadowRoot.querySelector(".checkbox");
-    if (checkboxEl) {
-      checkboxEl.focus();
-    }
+  componentWillLoad() {
+    var _a;
+    removeDisabledFalse(this.disabled, this.host);
+    addFormResetListener(this.host, this.handleFormReset);
+    (_a = this.host
+      .querySelector(this.IC_TEXT_FIELD)) === null || _a === void 0 ? void 0 : _a.addEventListener("icChange", this.eventHandler);
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([
+      { prop: this.label, propName: "label" },
+      { prop: this.value, propName: "value" },
+    ], "Checkbox");
   }
   componentDidRender() {
     if (this.additionalFieldDisplay === "static") {
-      const textfield = this.host.querySelector("ic-text-field");
+      const textfield = this.host.querySelector(this.IC_TEXT_FIELD);
       if (!this.checked) {
         textfield && textfield.setAttribute("disabled", "");
       }
@@ -49,17 +59,20 @@ export class Checkbox {
       }
     }
   }
-  componentWillLoad() {
-    addFormResetListener(this.host, this.handleFormReset);
-  }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([
-      { prop: this.label, propName: "label" },
-      { prop: this.value, propName: "value" },
-    ], "Checkbox");
-  }
   disconnectedCallback() {
+    var _a;
     removeFormResetListener(this.host, this.handleFormReset);
+    (_a = this.host
+      .querySelector(this.IC_TEXT_FIELD)) === null || _a === void 0 ? void 0 : _a.removeEventListener("icChange", this.eventHandler);
+  }
+  /**
+   * Sets focus on the checkbox.
+   */
+  async setFocus() {
+    const checkboxEl = this.host.shadowRoot.querySelector(".checkbox");
+    if (checkboxEl) {
+      checkboxEl.focus();
+    }
   }
   render() {
     let id = `ic-checkbox-${this.label !== undefined ? this.label : this.value}-${this.groupLabel}`;
@@ -67,11 +80,11 @@ export class Checkbox {
     this.checked
       ? renderHiddenInput(true, this.host, this.name, this.checked && this.value, this.disabled)
       : removeHiddenInput(this.host);
-    return (h(Host, null, h("div", { class: { ["container"]: true, ["disabled"]: this.disabled } }, this.checked && !this.indeterminate && (h("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", null, "checkmark icon"), h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), this.checked && this.indeterminate && (h("div", { class: "indeterminate-symbol" })), h("input", { role: "checkbox", class: {
+    return (h(Host, { class: { ["disabled"]: this.disabled, ["small"]: this.small } }, h("div", { class: "container" }, this.checked && !this.indeterminate && (h("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", null, "checkmark icon"), h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), this.checked && this.indeterminate && (h("div", { class: "indeterminate-symbol" })), h("input", { role: "checkbox", class: {
         ["checkbox"]: true,
         ["checked"]: this.checked,
         ["indeterminate"]: this.indeterminate,
-      }, type: "checkbox", name: this.name, id: id, value: this.value, disabled: this.disabled ? true : null, checked: this.checked, indeterminate: this.indeterminate, onClick: this.handleClick }), h("ic-typography", { variant: "body" }, h("label", { class: "checkbox-label", htmlFor: id }, this.label))), isSlotUsed(this.host, "additional-field") && (h("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, this.additionalFieldDisplay === "dynamic" && (h("div", { class: "branch-corner" })), h("div", null, this.additionalFieldDisplay === "dynamic" && (h("ic-typography", { variant: "caption" }, h("p", { class: "dynamic-text", "aria-live": "polite" }, this.dynamicText))), h("div", { class: {
+      }, type: "checkbox", name: this.name, id: id, value: this.value, disabled: this.disabled ? true : null, checked: this.checked, indeterminate: this.indeterminate, onClick: this.handleClick }), h("ic-typography", { class: "checkbox-label", variant: "body" }, h("label", { htmlFor: id }, this.label))), isSlotUsed(this.host, "additional-field") && (h("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, this.additionalFieldDisplay === "dynamic" && (h("div", { class: "branch-corner" })), h("div", null, this.additionalFieldDisplay === "dynamic" && (h("ic-typography", { variant: "caption" }, h("p", { class: "dynamic-text", "aria-live": "polite" }, this.dynamicText))), h("div", { class: {
         "additional-field-wrapper": this.additionalFieldDisplay === "static",
       } }, h("slot", { name: "additional-field" })))))));
   }
@@ -90,6 +103,29 @@ export class Checkbox {
   }
   static get properties() {
     return {
+      "additionalFieldDisplay": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcAdditionalFieldTypes",
+          "resolved": "\"dynamic\" | \"static\"",
+          "references": {
+            "IcAdditionalFieldTypes": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The style of additionalField that will be displayed if used."
+        },
+        "attribute": "additional-field-display",
+        "reflect": true,
+        "defaultValue": "\"static\""
+      },
       "checked": {
         "type": "boolean",
         "mutable": true,
@@ -126,7 +162,7 @@ export class Checkbox {
         "reflect": false,
         "defaultValue": "false"
       },
-      "label": {
+      "dynamicText": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -134,16 +170,17 @@ export class Checkbox {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The label for the checkbox."
+          "text": "The text to be displayed when dynamic."
         },
-        "attribute": "label",
-        "reflect": false
+        "attribute": "dynamic-text",
+        "reflect": false,
+        "defaultValue": "\"This selection requires additional answers\""
       },
-      "value": {
+      "groupLabel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -151,33 +188,34 @@ export class Checkbox {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The value for the checkbox."
+          "text": "The group label for the checkbox."
         },
-        "attribute": "value",
+        "attribute": "group-label",
         "reflect": false
       },
-      "name": {
-        "type": "string",
+      "indeterminate": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name."
+          "text": "If `true`, the indeterminate state will be displayed when checked."
         },
-        "attribute": "name",
-        "reflect": false
+        "attribute": "indeterminate",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "groupLabel": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -185,16 +223,16 @@ export class Checkbox {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The group label for the checkbox."
+          "text": "The label for the checkbox."
         },
-        "attribute": "group-label",
+        "attribute": "label",
         "reflect": false
       },
-      "dynamicText": {
+      "name": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -206,52 +244,45 @@ export class Checkbox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The text to be displayed when dynamic."
+          "text": "The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name."
         },
-        "attribute": "dynamic-text",
-        "reflect": false,
-        "defaultValue": "\"This selection requires additional answers\""
+        "attribute": "name",
+        "reflect": false
       },
-      "additionalFieldDisplay": {
-        "type": "string",
+      "small": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "IcAdditionalFieldTypes",
-          "resolved": "\"dynamic\" | \"static\"",
-          "references": {
-            "IcAdditionalFieldTypes": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "The style of additionalField that will be displayed if used."
+          "text": "If true, the small styling will be applied to the checkbox."
         },
-        "attribute": "additional-field-display",
-        "reflect": true,
-        "defaultValue": "\"static\""
+        "attribute": "small",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "indeterminate": {
-        "type": "boolean",
+      "value": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the indeterminate state will be displayed when checked."
+          "text": "The value for the checkbox."
         },
-        "attribute": "indeterminate",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "value",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/ic-checkbox/ic-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-checkbox.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox/ic-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Checkbox {\n  /**\n   * If `true`, the checkbox will be set to the checked state.\n   */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: string;\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop() name: string;\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n\n  @State() initiallyChecked = this.checked;\n\n  @Element() host: HTMLIcCheckboxElement;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  private additionalFieldContainer: HTMLDivElement;\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.icCheck.emit();\n    this.checkboxChecked.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const checkboxEl: HTMLElement =\n      this.host.shadowRoot.querySelector(\".checkbox\");\n    if (checkboxEl) {\n      checkboxEl.focus();\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.checked) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    } else {\n      if (!this.checked) {\n        this.additionalFieldContainer.style.display = \"none\";\n      } else {\n        this.additionalFieldContainer.style.display = \"flex\";\n      }\n    }\n  }\n\n  componentWillLoad(): void {\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    let id = `ic-checkbox-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    id = id.replace(/ /g, \"-\");\n\n    this.checked\n      ? renderHiddenInput(\n          true,\n          this.host,\n          this.name,\n          this.checked && this.value,\n          this.disabled\n        )\n      : removeHiddenInput(this.host);\n\n    return (\n      <Host>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          {this.checked && !this.indeterminate && (\n            <svg\n              class=\"checkmark\"\n              width=\"1.5rem\"\n              height=\"1.5rem\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          {this.checked && this.indeterminate && (\n            <div class=\"indeterminate-symbol\" />\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              [\"checkbox\"]: true,\n              [\"checked\"]: this.checked,\n              [\"indeterminate\"]: this.indeterminate,\n            }}\n            type=\"checkbox\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.checked}\n            indeterminate={this.indeterminate}\n            onClick={this.handleClick}\n          ></input>\n          <ic-typography variant=\"body\">\n            <label class=\"checkbox-label\" htmlFor={id}>\n              {this.label}\n            </label>\n          </ic-typography>\n        </div>\n        {isSlotUsed(this.host, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {this.dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-checkbox.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox/ic-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n  private additionalFieldContainer: HTMLDivElement;\n  private IC_TEXT_FIELD: string = \"ic-text-field\";\n\n  @Element() host: HTMLIcCheckboxElement;\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  /**\n   * If `true`, the checkbox will be set to the checked state.\n   */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop() groupLabel: string;\n\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop() name: string;\n\n  /**\n   * If true, the small styling will be applied to the checkbox.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: string;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.host);\n\n    addFormResetListener(this.host, this.handleFormReset);\n    this.host\n      .querySelector(this.IC_TEXT_FIELD)\n      ?.addEventListener(\"icChange\", this.eventHandler);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(this.IC_TEXT_FIELD);\n      if (!this.checked) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    } else {\n      if (!this.checked) {\n        this.additionalFieldContainer.style.display = \"none\";\n      } else {\n        this.additionalFieldContainer.style.display = \"flex\";\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n    this.host\n      .querySelector(this.IC_TEXT_FIELD)\n      ?.removeEventListener(\"icChange\", this.eventHandler);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const checkboxEl: HTMLElement =\n      this.host.shadowRoot.querySelector(\".checkbox\");\n    if (checkboxEl) {\n      checkboxEl.focus();\n    }\n  }\n\n  private eventHandler = (event: CustomEvent) => {\n    event.stopImmediatePropagation();\n  };\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.icCheck.emit();\n    this.checkboxChecked.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  render() {\n    let id = `ic-checkbox-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    id = id.replace(/ /g, \"-\");\n\n    this.checked\n      ? renderHiddenInput(\n          true,\n          this.host,\n          this.name,\n          this.checked && this.value,\n          this.disabled\n        )\n      : removeHiddenInput(this.host);\n\n    return (\n      <Host class={{ [\"disabled\"]: this.disabled, [\"small\"]: this.small }}>\n        <div class=\"container\">\n          {this.checked && !this.indeterminate && (\n            <svg\n              class=\"checkmark\"\n              width=\"1.5rem\"\n              height=\"1.5rem\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          {this.checked && this.indeterminate && (\n            <div class=\"indeterminate-symbol\" />\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              [\"checkbox\"]: true,\n              [\"checked\"]: this.checked,\n              [\"indeterminate\"]: this.indeterminate,\n            }}\n            type=\"checkbox\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.checked}\n            indeterminate={this.indeterminate}\n            onClick={this.handleClick}\n          ></input>\n          <ic-typography class=\"checkbox-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n        {isSlotUsed(this.host, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {this.dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}