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

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

@@ -44,40 +44,18 @@ const RadioGroup = class {
       }
       return nextItem;
     };
+    this.checkedValue = "";
+    this.selectedChild = -1;
+    this.disabled = false;
+    this.helperText = undefined;
+    this.hideLabel = false;
     this.label = undefined;
     this.name = undefined;
-    this.required = false;
     this.orientation = "vertical";
-    this.hideLabel = false;
-    this.disabled = false;
-    this.helperText = undefined;
+    this.required = false;
     this.small = false;
     this.validationStatus = "";
     this.validationText = "";
-    this.checkedValue = "";
-    this.selectedChild = -1;
-  }
-  selectHandler(event) {
-    var _a;
-    this.checkedValue = event.detail.value;
-    const selectedOption = event.target;
-    this.icChange.emit({
-      value: this.checkedValue,
-      selectedOption: {
-        radio: selectedOption,
-        textFieldValue: (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.value,
-      },
-    });
-    if (this.radioOptions !== undefined) {
-      this.radioOptions.forEach((radioOption, index) => {
-        radioOption.selected = this.checkedValue === radioOption.value;
-        if (radioOption.selected) {
-          this.selectedChild = index;
-        }
-      });
-      this.radioOptions[0].shadowRoot.querySelector("input").tabIndex =
-        this.selectedChild > 0 ? -1 : 0;
-    }
   }
   componentWillLoad() {
     helpers.removeDisabledFalse(this.disabled, this.host);
@@ -110,6 +88,35 @@ const RadioGroup = class {
       { prop: this.name, propName: "name" },
     ], "Radio Group");
   }
+  selectHandler(event) {
+    var _a;
+    this.checkedValue = event.detail.value;
+    const selectedOption = event.target;
+    this.icChange.emit({
+      value: this.checkedValue,
+      selectedOption: {
+        radio: selectedOption,
+        textFieldValue: (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.value,
+      },
+    });
+    if (this.radioOptions !== undefined) {
+      this.radioOptions.forEach((radioOption, index) => {
+        radioOption.selected = this.checkedValue === radioOption.value;
+        if (radioOption.selected) {
+          this.selectedChild = index;
+        }
+      });
+      this.radioOptions[0].shadowRoot.querySelector("input").tabIndex =
+        this.selectedChild > 0 ? -1 : 0;
+    }
+  }
+  changeHandler() {
+    const selectedOption = this.radioOptions.findIndex((radioOption) => radioOption.selected);
+    if (selectedOption < 0) {
+      this.radioOptions[0].shadowRoot.querySelector("input").tabIndex = 0;
+      this.selectedChild = selectedOption;
+    }
+  }
   render() {
     helpers.renderHiddenInput(true, this.host, this.name, this.checkedValue, this.disabled);
     return (index.h(index.Host, { onKeyDown: this.handleKeyDown, class: { small: this.small } }, index.h("div", { role: "radiogroup", "aria-label": `${this.label}${this.required ? ", required" : ""}` }, !this.hideLabel && (index.h("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled })), index.h("div", { class: "radio-buttons-container" }, index.h("slot", null))), helpers.hasValidationStatus(this.validationStatus, this.disabled) && (index.h("ic-input-validation", { ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));

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

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

@@ -11,9 +11,11 @@ const icRadioOptionCss = "/*! normalize.css v8.0.1 | MIT License | github.com/ne
 const RadioOption = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.radioOptionSelect = index.createEvent(this, "radioOptionSelect", 7);
     this.icCheck = index.createEvent(this, "icCheck", 7);
+    this.radioOptionSelect = index.createEvent(this, "radioOptionSelect", 7);
+    this.icSelectedChange = index.createEvent(this, "icSelectedChange", 7);
     this.defaultRadioValue = "";
+    this.hasAdditionalField = false;
     this.skipFocus = false;
     this.handleClick = () => {
       if (!this.disabled) {
@@ -37,28 +39,25 @@ const RadioOption = class {
     this.swallowClick = (event) => {
       event.stopPropagation();
     };
-    this.hasAdditionalField = false;
     this.handleFormReset = () => {
       this.skipFocus = true;
       this.selected = this.initiallySelected;
     };
-    this.selected = false;
+    this.additionalFieldDisplay = "static";
     this.disabled = false;
+    this.dynamicText = "This selection requires additional answers";
+    this.groupLabel = undefined;
     this.label = undefined;
-    this.value = undefined;
     this.name = undefined;
-    this.groupLabel = undefined;
-    this.dynamicText = "This selection requires additional answers";
-    this.additionalFieldDisplay = "static";
+    this.value = undefined;
+    this.selected = false;
     this.initiallySelected = this.selected;
   }
-  /**
-   * Sets focus on the radio option.
-   */
-  async setFocus() {
-    if (this.host.shadowRoot.querySelector("input")) {
-      this.host.shadowRoot.querySelector("input").focus();
-    }
+  watchSelectedHandler() {
+    this.icSelectedChange.emit();
+  }
+  disconnectedCallback() {
+    helpers.removeFormResetListener(this.host, this.handleFormReset);
   }
   componentWillLoad() {
     const additonalFieldContent = helpers.getSlotContent(this.host, "additional-field");
@@ -74,6 +73,20 @@ const RadioOption = class {
     helpers.addFormResetListener(this.host, this.handleFormReset);
     helpers.removeDisabledFalse(this.disabled, this.host);
   }
+  componentDidLoad() {
+    helpers.onComponentRequiredPropUndefined([{ prop: this.value, propName: "value" }], "Radio Option");
+  }
+  componentDidRender() {
+    if (this.additionalFieldDisplay === "static") {
+      const textfield = this.host.querySelector("ic-text-field");
+      if (!this.selected) {
+        textfield && textfield.setAttribute("disabled", "");
+      }
+      else {
+        textfield && textfield.removeAttribute("disabled");
+      }
+    }
+  }
   textfieldValueHandler(event) {
     const textFieldValue = event.detail.value;
     if (this.selected) {
@@ -98,23 +111,14 @@ const RadioOption = class {
     }
     event.stopImmediatePropagation();
   }
-  componentDidLoad() {
-    helpers.onComponentRequiredPropUndefined([{ prop: this.value, propName: "value" }], "Radio Option");
-  }
-  componentDidRender() {
-    if (this.additionalFieldDisplay === "static") {
-      const textfield = this.host.querySelector("ic-text-field");
-      if (!this.selected) {
-        textfield && textfield.setAttribute("disabled", "");
-      }
-      else {
-        textfield && textfield.removeAttribute("disabled");
-      }
+  /**
+   * Sets focus on the radio option.
+   */
+  async setFocus() {
+    if (this.host.shadowRoot.querySelector("input")) {
+      this.host.shadowRoot.querySelector("input").focus();
     }
   }
-  disconnectedCallback() {
-    helpers.removeFormResetListener(this.host, this.handleFormReset);
-  }
   render() {
     const id = `ic-radio-option-${this.label !== undefined ? this.label : this.value}-${this.groupLabel}`;
     return (index.h(index.Host, { onClick: this.handleClick, class: { disabled: this.disabled } }, index.h("div", { class: { ["container"]: true, ["disabled"]: this.disabled } }, index.h("div", null, index.h("input", { role: "radio", tabindex: this.selected ? "0" : "-1", type: "radio", name: this.name, id: id, value: this.value, disabled: this.disabled ? true : null, checked: this.selected, ref: (el) => (this.radioElement = el) }), index.h("span", { class: "checkmark" })), index.h("ic-typography", { class: "radio-label", variant: "body" }, index.h("label", { htmlFor: id }, this.label))), this.hasAdditionalField && (index.h("div", { onClick: this.swallowClick, class: {
@@ -126,6 +130,9 @@ const RadioOption = class {
   }
   static get delegatesFocus() { return true; }
   get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "selected": ["watchSelectedHandler"]
+  }; }
 };
 RadioOption.style = icRadioOptionCss;
 

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":["getSlotContent","addFormResetListener","removeDisabledFalse","onComponentRequiredPropUndefined","removeFormResetListener","h","Host"],"sources":["./src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","./src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-text-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  */\n:host(.disabled) {\n  color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container 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: transparent;\n  border: var(--ic-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  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n  border: var(--ic-space-1px) solid var(--ic-action-default);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: var(--ic-space-1px) solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 0.125rem solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-action-default-active);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-action-default);\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  background-color: transparent;\n  border: 0.125rem solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: var(--ic-space-1px) dashed var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n  background: var(--ic-architectural-200);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n  background-color: transparent;\n  box-shadow: none;\n  border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-architectural-200);\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-action-default);\n}\n\n.radio-label {\n  margin-left: var(--ic-space-md);\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-action-default);\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-action-default);\n  border-left: 0.125rem solid var(--ic-action-default);\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-action-default);\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  ::slotted(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} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcValueEventDetail } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\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   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when a radio is selected.\n   */\n  @Event() icCheck: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Sets focus on the radio option.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.host.shadowRoot.querySelector(\"input\")) {\n      this.host.shadowRoot.querySelector(\"input\").focus();\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.icCheck.emit({\n        value: this.value,\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    removeDisabledFalse(this.disabled, this.host);\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.icCheck.emit({\n          value: this.value,\n        });\n        this.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\n        this.icCheck.emit({\n          value: this.defaultRadioValue,\n        });\n        this.radioOptionSelect.emit({\n          value: this.defaultRadioValue,\n        });\n      }\n    }\n\n    event.stopImmediatePropagation();\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} class={{ disabled: this.disabled }}>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          <div>\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          </div>\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                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-radio-option.entry.cjs.js","mappings":"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","names":["removeFormResetListener","getSlotContent","addFormResetListener","removeDisabledFalse","onComponentRequiredPropUndefined","h","Host"],"sources":["./src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","./src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-text-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  */\n:host(.disabled) {\n  color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container 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: transparent;\n  border: var(--ic-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  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n  border: var(--ic-space-1px) solid var(--ic-action-default);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: var(--ic-space-1px) solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 0.125rem solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-action-default-active);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-action-default);\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  background-color: transparent;\n  border: 0.125rem solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: var(--ic-space-1px) dashed var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n  background: var(--ic-architectural-200);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n  background-color: transparent;\n  box-shadow: none;\n  border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-architectural-200);\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-action-default);\n}\n\n.radio-label {\n  margin-left: var(--ic-space-md);\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-action-default);\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-action-default);\n  border-left: 0.125rem solid var(--ic-action-default);\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-action-default);\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  ::slotted(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 { IcAdditionalFieldTypes, IcValueEventDetail } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class RadioOption {\n  private defaultRadioValue: string = \"\";\n  private hasAdditionalField: boolean = false;\n  private radioElement: HTMLInputElement;\n  private skipFocus = false;\n\n  @Element() host: 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\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The group label for the 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   * 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\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\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.host, this.handleFormReset);\n  }\n\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    removeDisabledFalse(this.disabled, this.host);\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  @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.icCheck.emit({\n          value: this.value,\n        });\n        this.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\n        this.icCheck.emit({\n          value: this.defaultRadioValue,\n        });\n        this.radioOptionSelect.emit({\n          value: this.defaultRadioValue,\n        });\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    if (this.host.shadowRoot.querySelector(\"input\")) {\n      this.host.shadowRoot.querySelector(\"input\").focus();\n    }\n  }\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.icCheck.emit({\n        value: this.value,\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 handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\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} class={{ disabled: this.disabled }}>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          <div>\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          </div>\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                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}