@ukic/web-components 3.0.0-alpha.11 → 3.0.0-alpha.13

package/dist/cjs/ic-radio-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-radio-group.entry.cjs.js","mappings":"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","names":["slotHasContent","removeDisabledFalse","checkResizeObserver","onComponentRequiredPropUndefined","h","Host","hasValidationStatus"],"sources":["src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n\n  --ic-input-label-text-color: var(--ic-radio-button-input-field-label);\n  --ic-input-label-helper-text-color: var(\n    --ic-radio-button-input-field-subtitle\n  );\n  --ic-input-validation-status-text-color: var(--ic-radio-button-state-text);\n  --ic-input-validation-error: var(--ic-radio-button-state-icon-error);\n}\n\nic-input-label.error {\n  --ic-input-label-text-color: var(--ic-radio-button-input-field-label-error);\n}\n\nic-input-label.disabled {\n  --ic-input-label-text-color: var(\n    --ic-radio-button-input-field-label-disabled\n  );\n  --ic-input-label-helper-text-color: var(\n    --ic-radio-button-input-field-subtitle-disabled\n  );\n}\n\nic-input-validation {\n  margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small) ic-input-validation {\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-label ic-typography {\n  margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small) ic-input-label ic-typography {\n  margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host .radio-buttons-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ic-space-xxs);\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container {\n  gap: var(--ic-space-xxxs);\n}\n\n:host .radio-buttons-container.horizontal {\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container.horizontal {\n  gap: var(--ic-space-xl);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  hasValidationStatus,\n  slotHasContent,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n  IcInformationStatusOrEmpty,\n  IcOrientation,\n  IcSizesNoLarge,\n  IcThemeMode,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n  tag: \"ic-radio-group\",\n  styleUrl: \"ic-radio-group.css\",\n  shadow: true,\n})\nexport class RadioGroup {\n  private radioContainer: HTMLDivElement;\n  private radioOptions: HTMLIcRadioOptionElement[];\n  private resizeObserver: ResizeObserver = null;\n  private ADDITIONAL_FIELD = \"additional-field\";\n  private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n  private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n  @Element() el: HTMLIcRadioGroupElement;\n\n  @State() checkedValue: string = \"\";\n  @State() currentOrientation: IcOrientation;\n  @State() initialOrientation: IcOrientation;\n  @State() selectedChild: number = -1;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  @Watch(\"disabled\")\n  watchDisabledHandler(newValue: boolean): void {\n    this.radioOptions.forEach(\n      (radioOption) => (radioOption.disabled = newValue)\n    );\n    removeDisabledFalse(this.disabled, this.el);\n  }\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 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   * 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   * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n   */\n  @Prop() orientation: IcOrientation = \"vertical\";\n\n  /**\n   * If `true`, the radio group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The size of the radio group component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\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  @Watch(\"orientation\")\n  orientationChangeHandler(): void {\n    this.initialOrientation = this.orientation;\n    this.checkOrientation();\n  }\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n  @Watch(\"theme\")\n  watchThemeHandler(newValue: IcThemeMode): void {\n    this.radioOptions.forEach((radioOption) => (radioOption.theme = newValue));\n  }\n\n  /**\n   * Emitted when a user selects a radio.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n    this.radioContainer?.removeEventListener(\n      \"slotchange\",\n      this.setRadioOptions\n    );\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    this.orientationChangeHandler();\n    this.currentOrientation = this.initialOrientation;\n  }\n\n  componentDidLoad(): void {\n    this.setRadioOptions();\n    checkResizeObserver(this.runResizeObserver);\n    this.addSlotChangeListener();\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n\n    this.watchThemeHandler(this.theme);\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n    const selectedOption = target as HTMLIcRadioOptionElement;\n    if (selectedOption.parentElement === this.el) {\n      this.checkedValue = detail.value as string;\n      this.icChange.emit({\n        value: this.checkedValue,\n        selectedOption: {\n          radio: selectedOption,\n          textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n        },\n      });\n\n      if (this.radioOptions !== undefined) {\n        this.radioOptions.forEach((radioOption, index) => {\n          radioOption.selected = selectedOption === radioOption;\n          if (radioOption.selected) {\n            this.selectedChild = index;\n          }\n        });\n        this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n      }\n    }\n  }\n\n  @Listen(\"icSelectedChange\")\n  changeHandler(): void {\n    const selectedOption = this.radioOptions?.findIndex(\n      (radioOption) => radioOption.selected\n    );\n    if (selectedOption < 0) {\n      this.setFirstRadioOptionTabIndex(0);\n      this.selectedChild = selectedOption;\n    }\n  }\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkOrientation();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkOrientation() {\n    if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n      let totalWidth = 0;\n      if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n        this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n          totalWidth += clientWidth;\n          if (i < arr.length - 1) totalWidth += 40;\n        });\n      } else {\n        totalWidth = 0;\n      }\n\n      if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n        if (\n          this.radioOptions !== undefined &&\n          (this.radioOptions.length > 2 ||\n            (this.radioOptions.length === 2 &&\n              (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n                slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n        ) {\n          this.currentOrientation = this.RADIO_VERTICAL;\n        } else {\n          if (totalWidth >= this.radioContainer?.clientWidth) {\n            this.currentOrientation = this.RADIO_VERTICAL;\n          } else if (totalWidth < this.radioContainer?.clientWidth) {\n            this.currentOrientation = this.RADIO_HORIZONTAL;\n          }\n        }\n      }\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    const additionalFields = Array.from(\n      this.el.querySelectorAll<HTMLIcTextFieldElement>(\n        'ic-text-field[slot=\"additional-field\"]'\n      )\n    );\n    const activeEl = document.activeElement;\n    if (\n      additionalFields.length > 0 &&\n      this.radioOptions.map((el) =>\n        slotHasContent(el, this.ADDITIONAL_FIELD)\n      ) &&\n      additionalFields.map((el) => el == activeEl)\n    ) {\n      return;\n    }\n\n    event.stopPropagation();\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, true)\n        ].click();\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, false)\n        ].click();\n        event.preventDefault();\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numRadios = this.radioOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    //check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numRadios;\n    } else if (nextItem > numRadios) {\n      nextItem = 0;\n    }\n\n    //if next item is disabled then find next\n    if (this.radioOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  private addSlotChangeListener = () => {\n    this.radioContainer.addEventListener(\"slotchange\", this.setRadioOptions);\n  };\n\n  private setFirstRadioOptionTabIndex = (value: number) => {\n    this.radioOptions[0].setTabIndex(value);\n  };\n\n  private setRadioOptions = () => {\n    this.selectedChild = -1;\n    this.checkedValue = \"\";\n    this.radioOptions = Array.from(this.el.children).filter(\n      (el) => el.tagName === \"IC-RADIO-OPTION\"\n    ) as HTMLIcRadioOptionElement[];\n    if (this.radioOptions.length > 0) {\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        if (this.disabled) {\n          radioOption.disabled = true;\n        }\n      });\n      this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n      if (\n        this.initialOrientation === this.RADIO_HORIZONTAL &&\n        this.radioOptions !== undefined &&\n        (this.radioOptions.length > 2 ||\n          (this.radioOptions.length === 2 &&\n            (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n              slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n      ) {\n        this.currentOrientation = this.RADIO_VERTICAL;\n      }\n    }\n  };\n\n  render() {\n    const {\n      currentOrientation,\n      disabled,\n      handleKeyDown,\n      helperText,\n      hideLabel,\n      label,\n      required,\n      size,\n      validationStatus,\n      validationText,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        onKeyDown={handleKeyDown}\n        class={{\n          \"ic-radio-group-small\": size === \"small\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div\n          role=\"radiogroup\"\n          aria-label={`${label}${required ? \", required\" : \"\"}`}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              class={{ [`${validationStatus}`]: true, [\"disabled\"]: disabled }}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabled}\n            ></ic-input-label>\n          )}\n          <div\n            class={{\n              \"radio-buttons-container\": true,\n              horizontal: currentOrientation === this.RADIO_HORIZONTAL,\n            }}\n            ref={(el) => (this.radioContainer = el)}\n          >\n            <slot></slot>\n          </div>\n        </div>\n        {hasValidationStatus(validationStatus, disabled) && (\n          <ic-input-validation\n            ariaLiveMode=\"polite\"\n            status={validationStatus}\n            message={validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-radio-group.entry.cjs.js","mappings":"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","names":["slotHasContent","removeDisabledFalse","checkResizeObserver","onComponentRequiredPropUndefined","h","Host","hasValidationStatus"],"sources":["src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n\n  --ic-input-label-text-color: var(--ic-radio-button-input-field-label);\n  --ic-input-label-helper-text-color: var(\n    --ic-radio-button-input-field-subtitle\n  );\n  --ic-input-validation-status-text-color: var(--ic-radio-button-state-text);\n  --ic-input-validation-error: var(--ic-radio-button-state-icon-error);\n}\n\nic-input-label.error {\n  --ic-input-label-text-color: var(--ic-radio-button-input-field-label-error);\n}\n\nic-input-label.disabled {\n  --ic-input-label-text-color: var(\n    --ic-radio-button-input-field-label-disabled\n  );\n  --ic-input-label-helper-text-color: var(\n    --ic-radio-button-input-field-subtitle-disabled\n  );\n}\n\nic-input-validation {\n  margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small) ic-input-validation {\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-label ic-typography {\n  margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small) ic-input-label ic-typography {\n  margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host .radio-buttons-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ic-space-xxs);\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container {\n  gap: var(--ic-space-xxxs);\n}\n\n:host .radio-buttons-container.horizontal {\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container.horizontal {\n  gap: var(--ic-space-xl);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  hasValidationStatus,\n  slotHasContent,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n  IcInformationStatusOrEmpty,\n  IcOrientation,\n  IcSizesNoLarge,\n  IcThemeMode,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n  tag: \"ic-radio-group\",\n  styleUrl: \"ic-radio-group.css\",\n  shadow: true,\n})\nexport class RadioGroup {\n  private radioContainer?: HTMLDivElement;\n  private radioOptions: HTMLIcRadioOptionElement[];\n  private resizeObserver: ResizeObserver | null = null;\n  private ADDITIONAL_FIELD = \"additional-field\";\n  private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n  private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n  @Element() el: HTMLIcRadioGroupElement;\n\n  @State() checkedValue: string = \"\";\n  @State() currentOrientation: IcOrientation;\n  @State() initialOrientation: IcOrientation;\n  @State() selectedChild: number = -1;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @Watch(\"disabled\")\n  watchDisabledHandler(newValue: boolean): void {\n    this.radioOptions.forEach(\n      (radioOption) => (radioOption.disabled = newValue)\n    );\n    removeDisabledFalse(this.disabled, this.el);\n  }\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 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   * 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   * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n   */\n  @Prop() orientation?: IcOrientation = \"vertical\";\n\n  /**\n   * If `true`, the radio group will require a value.\n   */\n  @Prop() required?: boolean = false;\n\n  /**\n   * The size of the radio group component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\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  @Watch(\"orientation\")\n  orientationChangeHandler(): void {\n    this.initialOrientation = this.orientation!;\n    this.checkOrientation();\n  }\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n  @Watch(\"theme\")\n  watchThemeHandler(newValue: IcThemeMode): void {\n    this.radioOptions.forEach((radioOption) => (radioOption.theme = newValue));\n  }\n\n  /**\n   * Emitted when a user selects a radio.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n    this.radioContainer?.removeEventListener(\n      \"slotchange\",\n      this.setRadioOptions\n    );\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    this.orientationChangeHandler();\n    this.currentOrientation = this.initialOrientation;\n  }\n\n  componentDidLoad(): void {\n    this.setRadioOptions();\n    checkResizeObserver(this.runResizeObserver);\n    this.addSlotChangeListener();\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n\n    this.watchThemeHandler(this.theme!);\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n    const selectedOption = target as HTMLIcRadioOptionElement;\n    if (selectedOption.parentElement === this.el) {\n      this.checkedValue = detail.value as string;\n      this.icChange.emit({\n        value: this.checkedValue,\n        selectedOption: {\n          radio: selectedOption,\n          textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n        },\n      });\n\n      if (this.radioOptions !== undefined) {\n        this.radioOptions.forEach((radioOption, index) => {\n          radioOption.selected = selectedOption === radioOption;\n          if (radioOption.selected) {\n            this.selectedChild = index;\n          }\n        });\n        this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n      }\n    }\n  }\n\n  @Listen(\"icSelectedChange\")\n  changeHandler(): void {\n    const selectedOption = this.radioOptions?.findIndex(\n      (radioOption) => radioOption.selected\n    );\n    if (selectedOption < 0) {\n      this.setFirstRadioOptionTabIndex(0);\n      this.selectedChild = selectedOption;\n    }\n  }\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkOrientation();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkOrientation() {\n    if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n      let totalWidth = 0;\n      if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n        this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n          totalWidth += clientWidth;\n          if (i < arr.length - 1) totalWidth += 40;\n        });\n      } else {\n        totalWidth = 0;\n      }\n\n      if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n        if (\n          this.radioOptions !== undefined &&\n          (this.radioOptions.length > 2 ||\n            (this.radioOptions.length === 2 &&\n              (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n                slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n        ) {\n          this.currentOrientation = this.RADIO_VERTICAL;\n        } else {\n          if (this.radioContainer) {\n            if (totalWidth >= this.radioContainer.clientWidth) {\n              this.currentOrientation = this.RADIO_VERTICAL;\n            } else if (totalWidth < this.radioContainer.clientWidth) {\n              this.currentOrientation = this.RADIO_HORIZONTAL;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    const additionalFields = Array.from(\n      this.el.querySelectorAll<HTMLElement>(\n        'ic-text-field[slot=\"additional-field\"]'\n      )\n    );\n    const activeEl = document.activeElement;\n    if (\n      additionalFields.length > 0 &&\n      this.radioOptions.map((el) =>\n        slotHasContent(el, this.ADDITIONAL_FIELD)\n      ) &&\n      additionalFields.map((el) => el == activeEl)\n    ) {\n      return;\n    }\n\n    event.stopPropagation();\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, true)\n        ].click();\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, false)\n        ].click();\n        event.preventDefault();\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numRadios = this.radioOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    //check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numRadios;\n    } else if (nextItem > numRadios) {\n      nextItem = 0;\n    }\n\n    //if next item is disabled then find next\n    if (this.radioOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  private addSlotChangeListener = () => {\n    this.radioContainer?.addEventListener(\"slotchange\", this.setRadioOptions);\n  };\n\n  private setFirstRadioOptionTabIndex = (value: number) => {\n    this.radioOptions[0].setTabIndex(value);\n  };\n\n  private setRadioOptions = () => {\n    this.selectedChild = -1;\n    this.checkedValue = \"\";\n    this.radioOptions = Array.from(this.el.children).filter(\n      (el) => el.tagName === \"IC-RADIO-OPTION\"\n    ) as HTMLIcRadioOptionElement[];\n    if (this.radioOptions.length > 0) {\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        if (this.disabled) {\n          radioOption.disabled = true;\n        }\n      });\n      this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n      if (\n        this.initialOrientation === this.RADIO_HORIZONTAL &&\n        this.radioOptions !== undefined &&\n        (this.radioOptions.length > 2 ||\n          (this.radioOptions.length === 2 &&\n            (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n              slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n      ) {\n        this.currentOrientation = this.RADIO_VERTICAL;\n      }\n    }\n  };\n\n  render() {\n    const {\n      currentOrientation,\n      disabled,\n      handleKeyDown,\n      helperText,\n      hideLabel,\n      label,\n      required,\n      size,\n      validationStatus,\n      validationText,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        onKeyDown={handleKeyDown}\n        class={{\n          \"ic-radio-group-small\": size === \"small\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div\n          role=\"radiogroup\"\n          aria-label={`${label}${required ? \", required\" : \"\"}`}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              class={{\n                [`${validationStatus}`]: true,\n                [\"disabled\"]: !!disabled,\n              }}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabled}\n            ></ic-input-label>\n          )}\n          <div\n            class={{\n              \"radio-buttons-container\": true,\n              horizontal: currentOrientation === this.RADIO_HORIZONTAL,\n            }}\n            ref={(el) => (this.radioContainer = el)}\n          >\n            <slot></slot>\n          </div>\n        </div>\n        {hasValidationStatus(validationStatus, disabled) && (\n          <ic-input-validation\n            ariaLiveMode=\"polite\"\n            status={validationStatus}\n            message={validationText!}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-radio-option.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f982899d.js');
-const helpers = require('./helpers-eca4c27e.js');
+const index = require('./index-d337cd8a.js');
+const helpers = require('./helpers-08a9ec1c.js');
 
-const icRadioOptionCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}ic-radio-option{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}.additional-field-wrapper [slot=\"additional-field\"]{margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}ic-radio-option.ic-radio-option-disabled,ic-radio-option.ic-radio-option-disabled .radio-label{--ic-typography-color:var(--ic-radio-button-text-option-disabled)}.container input:focus+span.checkmark,.container:hover input:focus+span.checkmark,.container:active input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-radio-button-background-default);border:var(--ic-space-1px) solid var(--ic-radio-button-border-default);border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:var(--ic-border-width) solid var(--ic-radio-button-default-hover)}.container:hover input:checked~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:0.125rem solid var(--ic-radio-button-default-hover)}.container:hover:not(.disabled) input:checked~.checkmark::after{background-color:var(--ic-radio-button-default-hover)}.container:active input~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed);border:var(--ic-border-width) solid var(--ic-radio-button-default-pressed)}.container:active input:checked~.checkmark{border:0.125rem solid var(--ic-radio-button-default-pressed);box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed)}.container:active input:checked~.checkmark::after{background-color:var(--ic-radio-button-default-pressed)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-radio-button-default-active)}.container input:checked:disabled~.checkmark{border:0.125rem solid var(--ic-radio-button-border-disabled)}.container input:disabled~.checkmark{border:var(--ic-border-width) dashed var(--ic-radio-button-border-disabled)}.container input:disabled~.checkmark::after{background:var(--ic-radio-button-disabled)}.container:hover input:disabled~.checkmark{box-shadow:none;border:0.125rem solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-radio-button-disabled)}.container .checkmark::after{content:\"\";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-radio-button-default-active)}.radio-label{margin-left:var(--ic-space-md);--ic-typography-color:var(--ic-radio-button-text-option)}.additional-field-wrapper{margin-left:var(--ic-space-xs)}.branch-corner{color:var(--ic-radio-button-required-bar);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-radio-button-required-bar);border-left:0.125rem solid var(--ic-radio-button-required-bar);margin-left:calc(-1 * var(--ic-space-1px))}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-radio-button-required-text);--ic-typography-color:var(--ic-radio-button-required-text);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){ic-text-field{--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}";
+const icRadioOptionCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}ic-radio-option{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}.additional-field-wrapper [slot=\"additional-field\"]{margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}ic-radio-option.ic-radio-option-disabled,ic-radio-option.ic-radio-option-disabled .radio-label{--ic-typography-color:var(--ic-radio-button-text-option-disabled)}.container input:focus+span.checkmark,.container:hover input:focus+span.checkmark,.container:active input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-radio-button-background-default);border:var(--ic-space-1px) solid var(--ic-radio-button-border-default);border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:var(--ic-border-width) solid var(--ic-radio-button-default-hover)}.container:hover input:checked~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:0.125rem solid var(--ic-radio-button-default-hover)}.container:hover:not(.disabled) input:checked~.checkmark::after{background-color:var(--ic-radio-button-default-hover)}.container:active input~.checkmark{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed);border:var(--ic-border-width) solid var(--ic-radio-button-default-pressed)}.container:active input:checked~.checkmark{border:0.125rem solid var(--ic-radio-button-default-pressed);box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed)}.container:active input:checked~.checkmark::after{background-color:var(--ic-radio-button-default-pressed)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-radio-button-default-active)}.container input:checked:disabled~.checkmark{border:0.125rem solid var(--ic-radio-button-border-disabled)}.container input:disabled~.checkmark{border:var(--ic-border-width) dashed var(--ic-radio-button-border-disabled)}.container input:disabled~.checkmark::after{background:var(--ic-radio-button-disabled)}.container:hover input:disabled~.checkmark{box-shadow:none;border:0.125rem solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-radio-button-disabled)}.container .checkmark::after{content:\"\";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-radio-button-default-active)}.radio-label{margin-left:var(--ic-space-md);--ic-typography-color:var(--ic-radio-button-text-option)}.additional-field-wrapper{margin-left:var(--ic-space-xs)}.branch-corner{color:var(--ic-radio-button-required-bar);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-radio-button-required-bar);border-left:0.125rem solid var(--ic-radio-button-required-bar);margin-left:calc(-1 * var(--ic-space-1px))}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-radio-button-required-text);--ic-typography-color:var(--ic-radio-button-required-text);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){ic-text-field{--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}input[type=\"radio\"]:dir(rtl){right:0}.radio-label:dir(rtl){padding-right:var(--ic-space-sm);padding-left:0}.branch-corner:dir(rtl){border-radius:0 0 0.188rem 0;border-right:0.125rem solid var(--ic-action-default);border-left:none}.dynamic-container:dir(rtl){margin:var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0}";
+const IcRadioOptionStyle0 = icRadioOptionCss;
 
 const ADDITIONAL_FIELD = "additional-field";
 const RadioOption = class {
@@ -16,18 +17,39 @@ const RadioOption = class {
         this.defaultRadioValue = "";
         this.hasAdditionalField = false;
         this.skipFocus = false;
+        /**
+         * The style of additionalField that will be displayed if used.
+         */
+        this.additionalFieldDisplay = "static";
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         * The text to be displayed when dynamic.
+         */
+        this.dynamicText = "This selection requires additional answers";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * If `true`, the radio option will be displayed in a selected state.
+         */
+        this.selected = false;
+        this.initiallySelected = this.selected;
         this.handleClick = (event) => {
-            var _a;
+            var _a, _b;
             const clickedAdditionalField = event.target.matches(".dynamic-container:not(ic-radio-option, .checkmark), .dynamic-container *:not(ic-radio-option, .checkmark)");
             if (!this.disabled &&
                 (!clickedAdditionalField || event.target === this.radioElement)) {
                 event.stopPropagation();
                 if (this.skipFocus === false) {
-                    this.radioElement.focus();
+                    (_a = this.radioElement) === null || _a === void 0 ? void 0 : _a.focus();
                 }
                 this.skipFocus = false;
                 if (this.hasAdditionalField) {
-                    this.value = ((_a = this.getAdditionalField()) === null || _a === void 0 ? void 0 : _a.value) || this.defaultRadioValue;
+                    this.value = ((_b = this.getAdditionalField()) === null || _b === void 0 ? void 0 : _b.value) || this.defaultRadioValue;
                 }
                 this.icCheck.emit({
                     value: this.value,
@@ -45,17 +67,6 @@ const RadioOption = class {
             this.skipFocus = true;
             this.selected = this.initiallySelected;
         };
-        this.additionalFieldDisplay = "static";
-        this.disabled = false;
-        this.dynamicText = "This selection requires additional answers";
-        this.form = undefined;
-        this.groupLabel = undefined;
-        this.label = undefined;
-        this.name = undefined;
-        this.theme = "inherit";
-        this.value = undefined;
-        this.selected = false;
-        this.initiallySelected = this.selected;
     }
     watchDisabledHandler() {
         helpers.removeDisabledFalse(this.disabled, this.el);
@@ -124,7 +135,8 @@ const RadioOption = class {
      * @internal Sets the tabIndex of the radio option.
      */
     async setTabIndex(value) {
-        this.radioElement.tabIndex = value;
+        var _a;
+        (_a = this.radioElement) === null || _a === void 0 ? void 0 : _a.setAttribute("tabIndex", value.toString());
     }
     getAdditionalField() {
         const additionalField = this.el.querySelector('ic-text-field[slot="additional-field"]');
@@ -135,15 +147,15 @@ const RadioOption = class {
     render() {
         const { additionalFieldDisplay, disabled, dynamicText, form, groupLabel, handleClick, handleKeyDown, hasAdditionalField, label, name, selected, value, theme, } = this;
         const id = `ic-radio-option-${helpers.isPropDefined(label) || value}-${groupLabel}`;
-        return (index.h(index.Host, { onClick: handleClick, onKeyDown: handleKeyDown, class: {
-                ["ic-radio-option-disabled"]: disabled,
+        return (index.h(index.Host, { key: 'e51c6f675adeb824cebdd004e5c28a9f726cb5eb', onClick: handleClick, onKeyDown: handleKeyDown, class: {
+                ["ic-radio-option-disabled"]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("div", { class: { container: true, disabled } }, index.h("div", null, index.h("input", { tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled ? true : null, checked: selected, ref: (el) => (this.radioElement = el), form: form }), index.h("span", { class: "checkmark" })), index.h("ic-typography", { class: "radio-label", variant: "body" }, index.h("label", { htmlFor: id }, label))), hasAdditionalField && (index.h("div", { class: {
+            } }, index.h("div", { key: '5cfdadaeb79d3a7338231e1653e42751bd1d89bd', class: { container: true, disabled: !!disabled } }, index.h("div", { key: '917cfdee6607ecd950fd4c09e54ed02a3f6945c4' }, index.h("input", { key: '9ca5649b90f8f6c087710595842f38cadecd901c', tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled, checked: selected, ref: (el) => (this.radioElement = el), form: form }), index.h("span", { key: '8670450d9fa0cb5db352f60b6e0feff048604dbd', class: "checkmark" })), index.h("ic-typography", { key: '44c544df2f59735c82e01ad3d1e7892f47e53523', class: "radio-label", variant: "body" }, index.h("label", { key: '55e93f4241c0fdc6831fb6da6a670c2a44311412', htmlFor: id }, label))), hasAdditionalField && (index.h("div", { key: 'bfa342e1dda96334553cc65752e6c41a64c19f5a', class: {
                 "dynamic-container": true,
                 hidden: additionalFieldDisplay === "dynamic" && !selected,
-            } }, additionalFieldDisplay === "dynamic" && (index.h("div", { class: "branch-corner" })), index.h("div", null, additionalFieldDisplay === "dynamic" && (index.h("ic-typography", { variant: "caption" }, index.h("p", { class: "dynamic-text" }, dynamicText))), index.h("div", { class: {
+            } }, additionalFieldDisplay === "dynamic" && (index.h("div", { key: 'd9ab0bbac6d2f66dd363877b169ee2823802730b', class: "branch-corner" })), index.h("div", { key: 'a02719781e2362eef43f0b97b28f4e653a21eaa8' }, additionalFieldDisplay === "dynamic" && (index.h("ic-typography", { key: 'a1bfbd7ef7425ae4df7edca3ca07592263198cd9', variant: "caption" }, index.h("p", { key: 'd363e1bb13954c43b2a24f052594c661fb914935', class: "dynamic-text" }, dynamicText))), index.h("div", { key: '7229c529054fefe4b7d697c09eda18ce0e614ce7', class: {
                 "additional-field-wrapper": additionalFieldDisplay === "static",
-            } }, index.h("slot", { name: ADDITIONAL_FIELD })))))));
+            } }, index.h("slot", { key: '2e57b46d37a3430b8849e62db427bb7be66091fd', name: ADDITIONAL_FIELD })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -151,7 +163,7 @@ const RadioOption = class {
         "selected": ["watchSelectedHandler"]
     }; }
 };
-RadioOption.style = icRadioOptionCss;
+RadioOption.style = IcRadioOptionStyle0;
 
 exports.ic_radio_option = RadioOption;
 

package/dist/cjs/ic-radio-option.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-radio-option.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","removeFormResetListener","isSlotUsed","addFormResetListener","onComponentRequiredPropUndefined","slotHasContent","isPropDefined","h","Host"],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nic-radio-option {\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n}\n\n.additional-field-wrapper [slot=\"additional-field\"] {\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\nic-radio-option.ic-radio-option-disabled,\nic-radio-option.ic-radio-option-disabled .radio-label {\n  --ic-typography-color: var(--ic-radio-button-text-option-disabled);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n.container:hover input:focus + span.checkmark,\n.container:active input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n.container {\n  display: grid;\n  grid-template-columns: min-content auto;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: inline-block;\n  position: absolute;\n  cursor: pointer;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  border-radius: 50%;\n  border: none;\n}\n\n/* Create a custom radio button */\n.checkmark {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: var(--ic-radio-button-background-default);\n  border: var(--ic-space-1px) solid var(--ic-radio-button-border-default);\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\n  box-sizing: border-box;\n}\n\n/* Show the indicator (dot/circle) when checked */\n.container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n.container:hover input ~ .checkmark {\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n  border: var(--ic-border-width) solid var(--ic-radio-button-default-hover);\n}\n\n.container:hover input:checked ~ .checkmark {\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n  border: 0.125rem solid var(--ic-radio-button-default-hover);\n}\n\n.container:hover:not(.disabled) input:checked ~ .checkmark::after {\n  background-color: var(--ic-radio-button-default-hover);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n  border: var(--ic-border-width) solid var(--ic-radio-button-default-pressed);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-radio-button-default-pressed);\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-radio-button-default-pressed);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-radio-button-default-active);\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  border: 0.125rem solid var(--ic-radio-button-border-disabled);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: var(--ic-border-width) dashed var(--ic-radio-button-border-disabled);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n  background: var(--ic-radio-button-disabled);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n  box-shadow: none;\n  border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-radio-button-disabled);\n}\n\n/* Style the indicator (dot/circle) */\n.container .checkmark::after {\n  content: \"\";\n  position: absolute;\n  display: none;\n  top: calc(50% - var(--ic-space-xs));\n  left: calc(50% - var(--ic-space-xs));\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  border-radius: 50%;\n  background: var(--ic-radio-button-default-active);\n}\n\n.radio-label {\n  margin-left: var(--ic-space-md);\n  --ic-typography-color: var(--ic-radio-button-text-option);\n}\n\n.additional-field-wrapper {\n  margin-left: var(--ic-space-xs);\n}\n\n/* The line */\n.branch-corner {\n  color: var(--ic-radio-button-required-bar);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-radio-button-required-bar);\n  border-left: 0.125rem solid var(--ic-radio-button-required-bar);\n  margin-left: calc(-1 * var(--ic-space-1px));\n}\n\n/* The dynamic container */\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n  display: none;\n}\n\n.dynamic-text {\n  color: var(--ic-radio-button-required-text);\n\n  --ic-typography-color: var(--ic-radio-button-required-text);\n\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n  ic-text-field {\n    --input-width: 100%;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n\n  .container input:checked ~ .checkmark,\n  .container:active input:checked ~ .checkmark {\n    border-color: Highlight;\n  }\n\n  .container input:checked ~ .checkmark::after,\n  .container:active input:checked ~ .checkmark::after {\n    background-color: Highlight;\n  }\n\n  .container input:disabled ~ .checkmark,\n  .container input:checked:disabled ~ .checkmark {\n    border-color: GrayText;\n  }\n\n  .container input:disabled ~ .checkmark::after,\n  .container:active input:disabled ~ .checkmark::after {\n    background-color: GrayText;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcAdditionalFieldTypes,\n  IcThemeMode,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n  isPropDefined,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\n\n/**\n * @slot additional-field - Content to displayed alongside a radio option.\n */\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n})\nexport class RadioOption {\n  private defaultRadioValue: string = \"\";\n  private hasAdditionalField: boolean = false;\n  private radioElement: HTMLInputElement;\n  private skipFocus = false;\n\n  @Element() el: HTMLIcRadioOptionElement;\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 disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the radio with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The group label for the radio option.\n   */\n  @Prop() groupLabel: string;\n\n  /**\n   * The label for the radio option.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The name for the radio option.\n   */\n  @Prop() name: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The value for the radio option.\n   */\n  @Prop({ mutable: true }) value!: string;\n\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  @State() initiallySelected = this.selected;\n\n  @Watch(\"selected\")\n  watchSelectedHandler(): void {\n    this.icSelectedChange.emit();\n  }\n\n  /**\n   * Emitted when the radio option is selected.\n   */\n  @Event() icCheck: EventEmitter<IcValueEventDetail>;\n  @Listen(\"icCheck\")\n  handleCheck(ev: CustomEvent<IcValueEventDetail>): void {\n    if (\n      this.additionalFieldDisplay === \"static\" &&\n      Array.from(this.el.querySelectorAll(\"ic-radio-option\")).includes(\n        ev.target as HTMLIcRadioOptionElement\n      )\n    )\n      this.icCheck.emit({ value: this.value });\n  }\n\n  /**\n   * Emitted when the radio option is selected or deselected.\n   */\n  @Event() icSelectedChange: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n      this.hasAdditionalField = true;\n      this.getAdditionalField();\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentWillRender(): void {\n    const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);\n    if (hasSlot && !this.hasAdditionalField) {\n      this.hasAdditionalField = true;\n      this.getAdditionalField();\n    } else if (!hasSlot && this.hasAdditionalField) {\n      this.hasAdditionalField = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const additionalField = this.getAdditionalField();\n      if (!this.selected || this.disabled) {\n        additionalField?.setAttribute(\"disabled\", \"\");\n      } else {\n        additionalField?.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  @Listen(\"icChange\")\n  additionalFieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    if (this.selected) {\n      this.value = event.detail.value || this.defaultRadioValue;\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n\n    event.stopImmediatePropagation();\n  }\n\n  /**\n   * Sets focus on the radio option.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.radioElement?.focus();\n  }\n\n  /**\n   * @internal Sets the tabIndex of the radio option.\n   */\n  @Method()\n  async setTabIndex(value: number): Promise<void> {\n    this.radioElement.tabIndex = value;\n  }\n\n  private getAdditionalField(): HTMLIcTextFieldElement {\n    const additionalField = this.el.querySelector(\n      'ic-text-field[slot=\"additional-field\"]'\n    ) as HTMLIcTextFieldElement;\n    if (additionalField) additionalField.hiddenInput = false;\n    return additionalField;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const clickedAdditionalField = (event.target as Element).matches(\n      \".dynamic-container:not(ic-radio-option, .checkmark), .dynamic-container *:not(ic-radio-option, .checkmark)\"\n    );\n\n    if (\n      !this.disabled &&\n      (!clickedAdditionalField || event.target === this.radioElement)\n    ) {\n      event.stopPropagation();\n      if (this.skipFocus === false) {\n        this.radioElement.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        this.value = this.getAdditionalField()?.value || this.defaultRadioValue;\n      }\n\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const preventPropagationElements = [\"IC-DATE-INPUT\", \"IC-DATE-PICKER\"];\n\n    if (\n      this.getAdditionalField() == document.activeElement &&\n      preventPropagationElements.includes(this.getAdditionalField().nodeName)\n    ) {\n      event.stopPropagation();\n    }\n  };\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  render() {\n    const {\n      additionalFieldDisplay,\n      disabled,\n      dynamicText,\n      form,\n      groupLabel,\n      handleClick,\n      handleKeyDown,\n      hasAdditionalField,\n      label,\n      name,\n      selected,\n      value,\n      theme,\n    } = this;\n\n    const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;\n\n    return (\n      <Host\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        class={{\n          [\"ic-radio-option-disabled\"]: disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class={{ container: true, disabled }}>\n          <div>\n            <input\n              tabindex={selected ? \"0\" : \"-1\"}\n              type=\"radio\"\n              name={name}\n              id={id}\n              value={value}\n              disabled={disabled ? true : null}\n              checked={selected}\n              ref={(el) => (this.radioElement = el)}\n              form={form}\n            ></input>\n            <span class=\"checkmark\"></span>\n          </div>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{label}</label>\n          </ic-typography>\n        </div>\n\n        {hasAdditionalField && (\n          <div\n            class={{\n              \"dynamic-container\": true,\n              hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n            }}\n          >\n            {additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    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.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","removeFormResetListener","isSlotUsed","addFormResetListener","onComponentRequiredPropUndefined","slotHasContent","isPropDefined","h","Host"],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nic-radio-option {\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n}\n\n.additional-field-wrapper [slot=\"additional-field\"] {\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\nic-radio-option.ic-radio-option-disabled,\nic-radio-option.ic-radio-option-disabled .radio-label {\n  --ic-typography-color: var(--ic-radio-button-text-option-disabled);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n.container:hover input:focus + span.checkmark,\n.container:active input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n.container {\n  display: grid;\n  grid-template-columns: min-content auto;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: inline-block;\n  position: absolute;\n  cursor: pointer;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  border-radius: 50%;\n  border: none;\n}\n\n/* Create a custom radio button */\n.checkmark {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: var(--ic-radio-button-background-default);\n  border: var(--ic-space-1px) solid var(--ic-radio-button-border-default);\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\n  box-sizing: border-box;\n}\n\n/* Show the indicator (dot/circle) when checked */\n.container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n.container:hover input ~ .checkmark {\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n  border: var(--ic-border-width) solid var(--ic-radio-button-default-hover);\n}\n\n.container:hover input:checked ~ .checkmark {\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n  border: 0.125rem solid var(--ic-radio-button-default-hover);\n}\n\n.container:hover:not(.disabled) input:checked ~ .checkmark::after {\n  background-color: var(--ic-radio-button-default-hover);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n  border: var(--ic-border-width) solid var(--ic-radio-button-default-pressed);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-radio-button-default-pressed);\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-radio-button-default-pressed);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-radio-button-default-active);\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  border: 0.125rem solid var(--ic-radio-button-border-disabled);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: var(--ic-border-width) dashed var(--ic-radio-button-border-disabled);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n  background: var(--ic-radio-button-disabled);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n  box-shadow: none;\n  border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-radio-button-disabled);\n}\n\n/* Style the indicator (dot/circle) */\n.container .checkmark::after {\n  content: \"\";\n  position: absolute;\n  display: none;\n  top: calc(50% - var(--ic-space-xs));\n  left: calc(50% - var(--ic-space-xs));\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  border-radius: 50%;\n  background: var(--ic-radio-button-default-active);\n}\n\n.radio-label {\n  margin-left: var(--ic-space-md);\n  --ic-typography-color: var(--ic-radio-button-text-option);\n}\n\n.additional-field-wrapper {\n  margin-left: var(--ic-space-xs);\n}\n\n/* The line */\n.branch-corner {\n  color: var(--ic-radio-button-required-bar);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-radio-button-required-bar);\n  border-left: 0.125rem solid var(--ic-radio-button-required-bar);\n  margin-left: calc(-1 * var(--ic-space-1px));\n}\n\n/* The dynamic container */\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n  display: none;\n}\n\n.dynamic-text {\n  color: var(--ic-radio-button-required-text);\n\n  --ic-typography-color: var(--ic-radio-button-required-text);\n\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n  ic-text-field {\n    --input-width: 100%;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n\n  .container input:checked ~ .checkmark,\n  .container:active input:checked ~ .checkmark {\n    border-color: Highlight;\n  }\n\n  .container input:checked ~ .checkmark::after,\n  .container:active input:checked ~ .checkmark::after {\n    background-color: Highlight;\n  }\n\n  .container input:disabled ~ .checkmark,\n  .container input:checked:disabled ~ .checkmark {\n    border-color: GrayText;\n  }\n\n  .container input:disabled ~ .checkmark::after,\n  .container:active input:disabled ~ .checkmark::after {\n    background-color: GrayText;\n  }\n}\n\n/* Right to left */\ninput[type=\"radio\"]:dir(rtl) {\n  right: 0;\n}\n\n.radio-label:dir(rtl) {\n  padding-right: var(--ic-space-sm);\n  padding-left: 0;\n}\n\n.branch-corner:dir(rtl) {\n  border-radius: 0 0 0.188rem 0;\n  border-right: 0.125rem solid var(--ic-action-default);\n  border-left: none;\n}\n\n.dynamic-container:dir(rtl) {\n  margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcAdditionalFieldTypes,\n  IcThemeMode,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n  isPropDefined,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\n\n/**\n * @slot additional-field - Content to displayed alongside a radio option.\n */\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n})\nexport class RadioOption {\n  private defaultRadioValue: string = \"\";\n  private hasAdditionalField: boolean = false;\n  private radioElement?: HTMLInputElement;\n  private skipFocus = false;\n\n  @Element() el: HTMLIcRadioOptionElement;\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 disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText?: string = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the radio with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The group label for the radio option.\n   */\n  @Prop() groupLabel?: string;\n\n  /**\n   * The label for the radio option.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The name for the radio option.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The value for the radio option.\n   */\n  @Prop({ mutable: true }) value!: string;\n\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  @State() initiallySelected = this.selected;\n\n  @Watch(\"selected\")\n  watchSelectedHandler(): void {\n    this.icSelectedChange.emit();\n  }\n\n  /**\n   * Emitted when the radio option is selected.\n   */\n  @Event() icCheck: EventEmitter<IcValueEventDetail>;\n  @Listen(\"icCheck\")\n  handleCheck(ev: CustomEvent<IcValueEventDetail>): void {\n    if (\n      this.additionalFieldDisplay === \"static\" &&\n      Array.from(this.el.querySelectorAll(\"ic-radio-option\")).includes(\n        ev.target as HTMLIcRadioOptionElement\n      )\n    )\n      this.icCheck.emit({ value: this.value });\n  }\n\n  /**\n   * Emitted when the radio option is selected or deselected.\n   */\n  @Event() icSelectedChange: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n      this.hasAdditionalField = true;\n      this.getAdditionalField();\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentWillRender(): void {\n    const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);\n    if (hasSlot && !this.hasAdditionalField) {\n      this.hasAdditionalField = true;\n      this.getAdditionalField();\n    } else if (!hasSlot && this.hasAdditionalField) {\n      this.hasAdditionalField = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const additionalField = this.getAdditionalField();\n      if (!this.selected || this.disabled) {\n        additionalField?.setAttribute(\"disabled\", \"\");\n      } else {\n        additionalField?.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  @Listen(\"icChange\")\n  additionalFieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    if (this.selected) {\n      this.value = event.detail.value || this.defaultRadioValue;\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n\n    event.stopImmediatePropagation();\n  }\n\n  /**\n   * Sets focus on the radio option.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.radioElement?.focus();\n  }\n\n  /**\n   * @internal Sets the tabIndex of the radio option.\n   */\n  @Method()\n  async setTabIndex(value: number): Promise<void> {\n    this.radioElement?.setAttribute(\"tabIndex\", value.toString());\n  }\n\n  private getAdditionalField(): HTMLIcTextFieldElement {\n    const additionalField = this.el.querySelector(\n      'ic-text-field[slot=\"additional-field\"]'\n    ) as HTMLIcTextFieldElement;\n    if (additionalField) additionalField.hiddenInput = false;\n    return additionalField;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const clickedAdditionalField = (event.target as Element).matches(\n      \".dynamic-container:not(ic-radio-option, .checkmark), .dynamic-container *:not(ic-radio-option, .checkmark)\"\n    );\n\n    if (\n      !this.disabled &&\n      (!clickedAdditionalField || event.target === this.radioElement)\n    ) {\n      event.stopPropagation();\n      if (this.skipFocus === false) {\n        this.radioElement?.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        this.value = this.getAdditionalField()?.value || this.defaultRadioValue;\n      }\n\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const preventPropagationElements = [\"IC-DATE-INPUT\", \"IC-DATE-PICKER\"];\n\n    if (\n      this.getAdditionalField() == document.activeElement &&\n      preventPropagationElements.includes(this.getAdditionalField().nodeName)\n    ) {\n      event.stopPropagation();\n    }\n  };\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  render() {\n    const {\n      additionalFieldDisplay,\n      disabled,\n      dynamicText,\n      form,\n      groupLabel,\n      handleClick,\n      handleKeyDown,\n      hasAdditionalField,\n      label,\n      name,\n      selected,\n      value,\n      theme,\n    } = this;\n\n    const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;\n\n    return (\n      <Host\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        class={{\n          [\"ic-radio-option-disabled\"]: !!disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class={{ container: true, disabled: !!disabled }}>\n          <div>\n            <input\n              tabindex={selected ? \"0\" : \"-1\"}\n              type=\"radio\"\n              name={name}\n              id={id}\n              value={value}\n              disabled={disabled}\n              checked={selected}\n              ref={(el) => (this.radioElement = el)}\n              form={form}\n            ></input>\n            <span class=\"checkmark\"></span>\n          </div>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{label}</label>\n          </ic-typography>\n        </div>\n\n        {hasAdditionalField && (\n          <div\n            class={{\n              \"dynamic-container\": true,\n              hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n            }}\n          >\n            {additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    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}