@ukic/web-components 2.1.0-beta.1 → 2.1.0-beta.2

package/dist/collection/components/ic-page-header/ic-page-header.js

@@ -126,7 +126,7 @@ export class PageHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The title to render on the component."
+          "text": "The title to render on the page header."
         },
         "attribute": "heading",
         "reflect": false
@@ -143,7 +143,7 @@ export class PageHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The subtitle to render on the component."
+          "text": "The subtitle to render on the page header."
         },
         "attribute": "subheading",
         "reflect": false
@@ -165,7 +165,7 @@ export class PageHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "How the component should be aligned."
+          "text": "The alignment of the page header."
         },
         "attribute": "aligned",
         "reflect": false,
@@ -183,7 +183,7 @@ export class PageHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Whether the component uses small styling."
+          "text": "If `true`, the small styling will be applied to the page header."
         },
         "attribute": "small",
         "reflect": false,
@@ -201,7 +201,7 @@ export class PageHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Set whether the bottom border is used"
+          "text": "If `true`, a border will be displayed along the bottom of the page header."
         },
         "attribute": "border",
         "reflect": false,
@@ -219,7 +219,7 @@ export class PageHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Set whether the header is sticky at all breakpoints"
+          "text": "If `true`, the page header will be sticky at all breakpoints."
         },
         "attribute": "sticky",
         "reflect": false,
@@ -237,7 +237,7 @@ export class PageHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Set whether the header is only sticky for viewport widths of 992px and above"
+          "text": "If `true`, the page header will only be sticky for viewport widths of 992px and above."
         },
         "attribute": "sticky-desktop-only",
         "reflect": false,
@@ -255,7 +255,7 @@ export class PageHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Set whether the reading pattern and tab order change in the action area for viewport widths of above 576px and when actions have not wrapped"
+          "text": "If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped."
         },
         "attribute": "reverse-order",
         "reflect": false,

package/dist/collection/components/ic-page-header/ic-page-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-page-header.js","sourceRoot":"","sources":["../../../src/components/ic-page-header/ic-page-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment } from \"../../utils/types\";\n\nimport {\n  isSlotUsed,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/**\n * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n */\n\n@Component({\n  tag: \"ic-page-header\",\n  styleUrl: \"ic-page-header.css\",\n  shadow: true,\n})\nexport class PageHeader {\n  @Element() el: HTMLIcPageHeaderElement;\n  /**\n   * The title to render on the component.\n   */\n  @Prop() heading?: string;\n  /**\n   * The subtitle to render on the component.\n   */\n  @Prop() subheading?: string;\n  /**\n   * How the component should be aligned.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n  /**\n   * Whether the component uses small styling.\n   */\n  @Prop() small?: boolean = false;\n  /**\n   * Set whether the bottom border is used\n   */\n  @Prop() border?: boolean = true;\n  /**\n   * Set whether the header is sticky at all breakpoints\n   */\n  @Prop() sticky?: boolean = false;\n  /** Set whether the header is only sticky for viewport widths of 992px and above\n   */\n  @Prop() stickyDesktopOnly?: boolean = false;\n  /** Set whether the reading pattern and tab order change in the action area for viewport widths of above 576px and when actions have not wrapped\n   */\n  @Prop() reverseOrder?: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() areButtonsReversed: boolean = false;\n\n  @State() actionContent: Node[];\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = () => {\n    if (this.reverseOrder) {\n      this.applyReverseOrder();\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  private applyReverseOrder = (): void => {\n    const currSize = getCurrentDeviceSize();\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n\n    const actionArea = this.el.shadowRoot.querySelector(\n      \"div.action-area\"\n    ) as HTMLElement;\n    const actionHeights: number[] = [];\n\n    /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n    for (let i = 0; i < this.actionContent.length; i++) {\n      const action = this.actionContent[i] as HTMLElement;\n      let actionHeight = action.offsetHeight;\n      if (actionHeight === undefined) {\n        actionHeight = 0;\n      }\n      actionHeights.push(actionHeight);\n    }\n\n    const max = Math.max(...actionHeights);\n\n    /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoiint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n    let actionAreaHeight = actionArea.offsetHeight;\n\n    if (actionAreaHeight === undefined) {\n      actionAreaHeight = 0;\n    }\n\n    if (\n      this.deviceSize > DEVICE_SIZES.S &&\n      actionAreaHeight <= max &&\n      !this.areButtonsReversed\n    ) {\n      this.actionContent = this.actionContent.reverse();\n      this.actionContent.forEach((btn: string | Node) => {\n        this.el.append(btn);\n      });\n      this.areButtonsReversed = !this.areButtonsReversed;\n    } else if (\n      ((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n        this.deviceSize <= DEVICE_SIZES.S) &&\n      this.areButtonsReversed\n    ) {\n      this.actionContent = this.actionContent.reverse();\n      this.actionContent.forEach((btn: string | Node) => {\n        this.el.append(btn);\n      });\n      this.areButtonsReversed = !this.areButtonsReversed;\n    }\n  };\n\n  componentWillLoad(): void {\n    this.actionContent = Array.from(\n      this.el.querySelectorAll(`[slot=\"actions\"]`)\n    );\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const {\n      small,\n      border,\n      heading,\n      subheading,\n      aligned,\n      sticky,\n      stickyDesktopOnly,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"sticky\"]: sticky,\n          [\"sticky-desktop\"]: !sticky && stickyDesktopOnly,\n        }}\n      >\n        <header\n          class={{\n            [\"border-bottom\"]: border,\n            [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n          }}\n        >\n          <ic-section-container\n            aligned={aligned}\n            fullHeight={isSlotUsed(this.el, \"tabs\")}\n          >\n            {isSlotUsed(this.el, \"breadcrumbs\") && (\n              <div class=\"breadcrumb-area\">\n                <slot name=\"breadcrumbs\" />\n              </div>\n            )}\n            <div class=\"main-content\">\n              <div class=\"title-area\">\n                <div class=\"header-content\">\n                  <slot name=\"heading\">\n                    <ic-typography\n                      variant={small ? \"h4\" : \"h2\"}\n                      class=\"heading\"\n                    >\n                      <h2>{heading}</h2>\n                    </ic-typography>\n                  </slot>\n                  <slot name=\"heading-adornment\" />\n                </div>\n                <div>\n                  <slot name=\"subheading\">\n                    {subheading && (\n                      <ic-typography\n                        variant=\"body\"\n                        class={{ [\"subheading\"]: true, [\"small\"]: small }}\n                      >\n                        {subheading}\n                      </ic-typography>\n                    )}\n                  </slot>\n                </div>\n              </div>\n              {isSlotUsed(this.el, \"actions\") && (\n                <div class=\"action-area\">\n                  <slot name=\"actions\" />\n                </div>\n              )}\n              {isSlotUsed(this.el, \"input\") && (\n                <div class=\"input-area\">\n                  <slot name=\"input\" />\n                </div>\n              )}\n            </div>\n\n            {(isSlotUsed(this.el, \"stepper\") ||\n              isSlotUsed(this.el, \"tabs\")) && (\n              <div class=\"navigation-area\">\n                {isSlotUsed(this.el, \"stepper\") &&\n                  !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n                {isSlotUsed(this.el, \"tabs\") && (\n                  <nav\n                    class=\"tabs-slot\"\n                    aria-label=\"navigation-landmark-page-header\"\n                  >\n                    <slot name=\"tabs\" />\n                  </nav>\n                )}\n              </div>\n            )}\n          </ic-section-container>\n        </header>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-page-header.js","sourceRoot":"","sources":["../../../src/components/ic-page-header/ic-page-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment } from \"../../utils/types\";\n\nimport {\n  isSlotUsed,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/**\n * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n */\n\n@Component({\n  tag: \"ic-page-header\",\n  styleUrl: \"ic-page-header.css\",\n  shadow: true,\n})\nexport class PageHeader {\n  @Element() el: HTMLIcPageHeaderElement;\n  /**\n   * The title to render on the page header.\n   */\n  @Prop() heading?: string;\n  /**\n   * The subtitle to render on the page header.\n   */\n  @Prop() subheading?: string;\n  /**\n   * The alignment of the page header.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n  /**\n   * If `true`, the small styling will be applied to the page header.\n   */\n  @Prop() small?: boolean = false;\n  /**\n   * If `true`, a border will be displayed along the bottom of the page header.\n   */\n  @Prop() border?: boolean = true;\n  /**\n   * If `true`, the page header will be sticky at all breakpoints.\n   */\n  @Prop() sticky?: boolean = false;\n  /**\n   *  If `true`, the page header will only be sticky for viewport widths of 992px and above.\n   */\n  @Prop() stickyDesktopOnly?: boolean = false;\n  /**\n   * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.\n   */\n  @Prop() reverseOrder?: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() areButtonsReversed: boolean = false;\n\n  @State() actionContent: Node[];\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = () => {\n    if (this.reverseOrder) {\n      this.applyReverseOrder();\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  private applyReverseOrder = (): void => {\n    const currSize = getCurrentDeviceSize();\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n\n    const actionArea = this.el.shadowRoot.querySelector(\n      \"div.action-area\"\n    ) as HTMLElement;\n    const actionHeights: number[] = [];\n\n    /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n    for (let i = 0; i < this.actionContent.length; i++) {\n      const action = this.actionContent[i] as HTMLElement;\n      let actionHeight = action.offsetHeight;\n      if (actionHeight === undefined) {\n        actionHeight = 0;\n      }\n      actionHeights.push(actionHeight);\n    }\n\n    const max = Math.max(...actionHeights);\n\n    /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoiint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n    let actionAreaHeight = actionArea.offsetHeight;\n\n    if (actionAreaHeight === undefined) {\n      actionAreaHeight = 0;\n    }\n\n    if (\n      this.deviceSize > DEVICE_SIZES.S &&\n      actionAreaHeight <= max &&\n      !this.areButtonsReversed\n    ) {\n      this.actionContent = this.actionContent.reverse();\n      this.actionContent.forEach((btn: string | Node) => {\n        this.el.append(btn);\n      });\n      this.areButtonsReversed = !this.areButtonsReversed;\n    } else if (\n      ((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n        this.deviceSize <= DEVICE_SIZES.S) &&\n      this.areButtonsReversed\n    ) {\n      this.actionContent = this.actionContent.reverse();\n      this.actionContent.forEach((btn: string | Node) => {\n        this.el.append(btn);\n      });\n      this.areButtonsReversed = !this.areButtonsReversed;\n    }\n  };\n\n  componentWillLoad(): void {\n    this.actionContent = Array.from(\n      this.el.querySelectorAll(`[slot=\"actions\"]`)\n    );\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const {\n      small,\n      border,\n      heading,\n      subheading,\n      aligned,\n      sticky,\n      stickyDesktopOnly,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"sticky\"]: sticky,\n          [\"sticky-desktop\"]: !sticky && stickyDesktopOnly,\n        }}\n      >\n        <header\n          class={{\n            [\"border-bottom\"]: border,\n            [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n          }}\n        >\n          <ic-section-container\n            aligned={aligned}\n            fullHeight={isSlotUsed(this.el, \"tabs\")}\n          >\n            {isSlotUsed(this.el, \"breadcrumbs\") && (\n              <div class=\"breadcrumb-area\">\n                <slot name=\"breadcrumbs\" />\n              </div>\n            )}\n            <div class=\"main-content\">\n              <div class=\"title-area\">\n                <div class=\"header-content\">\n                  <slot name=\"heading\">\n                    <ic-typography\n                      variant={small ? \"h4\" : \"h2\"}\n                      class=\"heading\"\n                    >\n                      <h2>{heading}</h2>\n                    </ic-typography>\n                  </slot>\n                  <slot name=\"heading-adornment\" />\n                </div>\n                <div>\n                  <slot name=\"subheading\">\n                    {subheading && (\n                      <ic-typography\n                        variant=\"body\"\n                        class={{ [\"subheading\"]: true, [\"small\"]: small }}\n                      >\n                        {subheading}\n                      </ic-typography>\n                    )}\n                  </slot>\n                </div>\n              </div>\n              {isSlotUsed(this.el, \"actions\") && (\n                <div class=\"action-area\">\n                  <slot name=\"actions\" />\n                </div>\n              )}\n              {isSlotUsed(this.el, \"input\") && (\n                <div class=\"input-area\">\n                  <slot name=\"input\" />\n                </div>\n              )}\n            </div>\n\n            {(isSlotUsed(this.el, \"stepper\") ||\n              isSlotUsed(this.el, \"tabs\")) && (\n              <div class=\"navigation-area\">\n                {isSlotUsed(this.el, \"stepper\") &&\n                  !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n                {isSlotUsed(this.el, \"tabs\") && (\n                  <nav\n                    class=\"tabs-slot\"\n                    aria-label=\"navigation-landmark-page-header\"\n                  >\n                    <slot name=\"tabs\" />\n                  </nav>\n                )}\n              </div>\n            )}\n          </ic-section-container>\n        </header>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -111,7 +111,7 @@ export class RadioGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide a label for the input."
+          "text": "The label for the radio group to be displayed."
         },
         "attribute": "label",
         "reflect": false
@@ -128,7 +128,7 @@ export class RadioGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide a name for the input."
+          "text": "The name for the radio group to differentiate from other groups."
         },
         "attribute": "name",
         "reflect": false
@@ -145,7 +145,7 @@ export class RadioGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specify if the input requires a value."
+          "text": "If `true`, the radio group will require a value."
         },
         "attribute": "required",
         "reflect": false,
@@ -163,7 +163,7 @@ export class RadioGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Hides the label and applies the required label value as an aria-label."
+          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
         },
         "attribute": "hide-label",
         "reflect": false,
@@ -181,7 +181,7 @@ export class RadioGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specify whether the input is disabled."
+          "text": "If `true`, the disabled state will be set."
         },
         "attribute": "disabled",
         "reflect": false,
@@ -199,7 +199,7 @@ export class RadioGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide helper text to display additional field guidance."
+          "text": "The helper text that will be displayed for additional field guidance."
         },
         "attribute": "helper-text",
         "reflect": false
@@ -216,7 +216,7 @@ export class RadioGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specify whether small styling is to be applied to the element."
+          "text": "If `true`, the small styling will be applied to the radio group."
         },
         "attribute": "small",
         "reflect": false,
@@ -239,7 +239,7 @@ export class RadioGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide validation status - 'error'"
+          "text": "The validation status - e.g. 'error' | 'warning' | 'success'."
         },
         "attribute": "validation-status",
         "reflect": false,
@@ -257,7 +257,7 @@ export class RadioGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide validation text - 'error'"
+          "text": "The validation text - e.g. 'error' | 'warning' | 'success'."
         },
         "attribute": "validation-text",
         "reflect": false,

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  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } 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   * Provide a label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Provide a name for the input.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Specify if the input requires a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * Specify whether the input is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText: string;\n\n  /**\n   * Specify whether small styling is to be applied to the element.\n   */\n  @Prop() small: boolean = false;\n  /**\n   * Provide validation status - 'error'\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * Provide validation text - 'error'\n   */\n  @Prop() validationText: string = \"\";\n  /**\n   * Provide 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(\"radioOptionSelect\")\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    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n  }\n\n  render() {\n    const hadValidationStatus = hasValidationStatus(\n      this.validationStatus,\n      this.disabled\n    );\n\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}>\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          <slot></slot>\n        </div>\n        <ic-input-validation\n          ariaLiveMode=\"polite\"\n          status={hadValidationStatus ? this.validationStatus : \"\"}\n          message={hadValidationStatus ? this.validationText : \"\"}\n        ></ic-input-validation>\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  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } 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   * 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(\"radioOptionSelect\")\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    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n  }\n\n  render() {\n    const hadValidationStatus = hasValidationStatus(\n      this.validationStatus,\n      this.disabled\n    );\n\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}>\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          <slot></slot>\n        </div>\n        <ic-input-validation\n          ariaLiveMode=\"polite\"\n          status={hadValidationStatus ? this.validationStatus : \"\"}\n          message={hadValidationStatus ? this.validationText : \"\"}\n        ></ic-input-validation>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -125,7 +125,7 @@ export class RadioOption {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determines whether the radio should be in selected state."
+          "text": "If `true`, the radio option will be displayed in a selected state."
         },
         "attribute": "selected",
         "reflect": true,
@@ -143,7 +143,7 @@ export class RadioOption {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determines whether the radio should be in disabled state."
+          "text": "If `true`, the disabled state will be set."
         },
         "attribute": "disabled",
         "reflect": false,
@@ -161,7 +161,7 @@ export class RadioOption {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide a label for the input."
+          "text": "The label for the radio option."
         },
         "attribute": "label",
         "reflect": false
@@ -178,7 +178,7 @@ export class RadioOption {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide a value for the input."
+          "text": "The value for the radio option."
         },
         "attribute": "value",
         "reflect": false
@@ -195,7 +195,7 @@ export class RadioOption {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide a name for the input."
+          "text": "The name for the radio option."
         },
         "attribute": "name",
         "reflect": false
@@ -212,7 +212,7 @@ export class RadioOption {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide a group label for the input."
+          "text": "The group label for the radio option."
         },
         "attribute": "group-label",
         "reflect": false
@@ -229,7 +229,7 @@ export class RadioOption {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide a text prop for the dynamic text."
+          "text": "The text to be displayed when dynamic."
         },
         "attribute": "dynamic-text",
         "reflect": false,
@@ -252,7 +252,7 @@ export class RadioOption {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Determines type of additional text field in relation to radio option"
+          "text": "The style of additionalField that will be displayed if used."
         },
         "attribute": "additional-field-display",
         "reflect": true,
@@ -267,21 +267,6 @@ export class RadioOption {
   }
   static get events() {
     return [{
-        "method": "icCheck",
-        "name": "icCheck",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when radio is checked"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }, {
         "method": "radioOptionSelect",
         "name": "radioOptionSelect",
         "bubbles": true,

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

@@ -1 +1 @@
-{"version":3,"file":"ic-radio-option.js","sourceRoot":"","sources":["../../../src/components/ic-radio-option/ic-radio-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  State,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcValueEventDetail } from \"../../interface\";\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: true,\n})\nexport class RadioOption {\n  private radioElement: HTMLInputElement;\n  /**\n   * Determines whether the radio should be in selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  /**\n   * Determines whether the radio should be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label?: string;\n  /**\n   * Provide a value for the input.\n   */\n  @Prop({ mutable: true }) value!: string;\n  /**\n   * Provide a name for the input.\n   */\n  @Prop() name: string;\n  /**\n   * Provide a group label for the input.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * Provide a text prop for the dynamic text.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /** Determines type of additional text field in relation to radio option */\n\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  @State() initiallySelected = this.selected;\n\n  @Element() host: HTMLIcRadioOptionElement;\n\n  /**\n   * Emitted when radio is checked\n   */\n  @Event() icCheck!: EventEmitter<void>;\n\n  /**\n   * Emitted when a radio is selected.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n  @Watch(\"selected\")\n  selectedChangeHandler(selected: boolean): void {\n    if (selected) {\n      this.handleClick();\n    }\n  }\n\n  private defaultRadioValue: string = \"\";\n  private skipFocus = false;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      if (this.skipFocus === false) {\n        this.radioElement.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        const textfield = this.host.querySelector(\"ic-text-field\");\n        this.value =\n          textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n      }\n\n      this.radioOptionSelect.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private swallowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  private hasAdditionalField: boolean = false;\n  componentWillLoad(): void {\n    const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n    if (additonalFieldContent !== null) {\n      this.hasAdditionalField = true;\n      const Element = additonalFieldContent[0] as HTMLElement;\n      if (Element.tagName === \"IC-TEXT-FIELD\") {\n        const textField = Element as HTMLIcTextFieldElement;\n        textField.hiddenInput = false;\n      }\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  @Listen(\"icChange\")\n  textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    const textFieldValue = event.detail.value;\n\n    if (this.selected) {\n      if (textFieldValue !== \"\") {\n        this.value = event.detail.value;\n        this.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\n        this.radioOptionSelect.emit({\n          value: this.defaultRadioValue,\n        });\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.selected) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    const id = `ic-radio-option-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    return (\n      <Host onClick={this.handleClick}>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          <input\n            role=\"radio\"\n            tabindex={this.selected ? \"0\" : \"-1\"}\n            type=\"radio\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.selected}\n            ref={(el) => (this.radioElement = el)}\n          ></input>\n          <span class=\"checkmark\"></span>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n\n        {this.hasAdditionalField && (\n          <div\n            onClick={this.swallowClick}\n            class={{\n              \"dynamic-container\": true,\n              hidden:\n                this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n            }}\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\">{this.dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"addition-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-radio-option.js","sourceRoot":"","sources":["../../../src/components/ic-radio-option/ic-radio-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  State,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcValueEventDetail } from \"../../interface\";\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: true,\n})\nexport class RadioOption {\n  private radioElement: HTMLInputElement;\n  /**\n   * If `true`, the radio option will be displayed in a selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The label for the radio option.\n   */\n  @Prop() label?: string;\n  /**\n   * The value for the radio option.\n   */\n  @Prop({ mutable: true }) value!: string;\n  /**\n   * The name for the radio option.\n   */\n  @Prop() name: string;\n  /**\n   * The group label for the radio option.\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  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  @State() initiallySelected = this.selected;\n\n  @Element() host: HTMLIcRadioOptionElement;\n\n  /**\n   * Emitted when a radio is selected.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n  @Watch(\"selected\")\n  selectedChangeHandler(selected: boolean): void {\n    if (selected) {\n      this.handleClick();\n    }\n  }\n\n  private defaultRadioValue: string = \"\";\n  private skipFocus = false;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      if (this.skipFocus === false) {\n        this.radioElement.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        const textfield = this.host.querySelector(\"ic-text-field\");\n        this.value =\n          textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n      }\n\n      this.radioOptionSelect.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private swallowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  private hasAdditionalField: boolean = false;\n  componentWillLoad(): void {\n    const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n    if (additonalFieldContent !== null) {\n      this.hasAdditionalField = true;\n      const Element = additonalFieldContent[0] as HTMLElement;\n      if (Element.tagName === \"IC-TEXT-FIELD\") {\n        const textField = Element as HTMLIcTextFieldElement;\n        textField.hiddenInput = false;\n      }\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  @Listen(\"icChange\")\n  textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    const textFieldValue = event.detail.value;\n\n    if (this.selected) {\n      if (textFieldValue !== \"\") {\n        this.value = event.detail.value;\n        this.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\n        this.radioOptionSelect.emit({\n          value: this.defaultRadioValue,\n        });\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.selected) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    const id = `ic-radio-option-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    return (\n      <Host onClick={this.handleClick}>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          <input\n            role=\"radio\"\n            tabindex={this.selected ? \"0\" : \"-1\"}\n            type=\"radio\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.selected}\n            ref={(el) => (this.radioElement = el)}\n          ></input>\n          <span class=\"checkmark\"></span>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n\n        {this.hasAdditionalField && (\n          <div\n            onClick={this.swallowClick}\n            class={{\n              \"dynamic-container\": true,\n              hidden:\n                this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n            }}\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\">{this.dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"addition-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"]}