@ukic/web-components 3.15.0 → 3.16.0

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

@@ -441,35 +441,34 @@ video {
 }
 
 
-ic-radio-option {
+:host {
   display: flex;
   flex-direction: column;
   width: -moz-fit-content;
   width: fit-content;
 }
 
-.additional-field-wrapper [slot="additional-field"] {
+:host .additional-field-wrapper-static::slotted([slot="additional-field"]) {
   margin-top: calc(var(--ic-space-sm) / 2);
   margin-left: var(--ic-space-xl);
 }
 
 /* The label turns grey when disabled  */
-ic-radio-option.ic-radio-option-disabled,
-ic-radio-option.ic-radio-option-disabled .radio-label {
+:host(.ic-radio-option-disabled),
+:host(.ic-radio-option-disabled) .radio-label {
   --ic-typography-color: var(--ic-radio-button-text-option-disabled);
 }
 
 /* Focus states */
-
-.container input:focus + span.checkmark,
-.container:hover input:focus + span.checkmark,
-.container:active input:focus + span.checkmark,
-:host(:focus) .container input:checked + span.checkmark {
+:host .radio-option-container input:focus + span.checkmark,
+:host .radio-option-container:hover input:focus + span.checkmark,
+:host .radio-option-container:active input:focus + span.checkmark,
+:host(:focus) .radio-option-container input:checked + span.checkmark {
   box-shadow: var(--ic-border-focus);
 }
 
 /* The container */
-.container {
+:host .radio-option-container {
   display: grid;
   grid-template-columns: min-content auto;
   position: relative;
@@ -478,17 +477,17 @@ ic-radio-option.ic-radio-option-disabled .radio-label {
   margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);
 }
 
-.ic-radio-group-small .container {
+:host(.ic-radio-option-small) .radio-option-container {
   margin: 0 0 0 var(--ic-space-xxs);
 }
 
-.container.disabled,
-.container.disabled input:disabled {
+:host .radio-option-container.disabled,
+:host .radio-option-container.disabled input:disabled {
   cursor: default;
 }
 
 /* Hide the browser's default radio button */
-.container input {
+:host .radio-option-container input {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -501,13 +500,13 @@ ic-radio-option.ic-radio-option-disabled .radio-label {
   border: none;
 }
 
-.ic-radio-group-small .container input {
+:host(.ic-radio-option-small) .radio-option-container input {
   height: var(--ic-space-md);
   width: var(--ic-space-md);
 }
 
 /* Create a custom radio button */
-.checkmark {
+:host .checkmark {
   display: block;
   position: relative;
   top: 0;
@@ -521,84 +520,90 @@ ic-radio-option.ic-radio-option-disabled .radio-label {
   box-sizing: border-box;
 }
 
-.ic-radio-group-small .checkmark {
+:host(.ic-radio-option-small) .checkmark {
   height: var(--ic-space-md);
   width: var(--ic-space-md);
 }
 
 /* Show the indicator (dot/circle) when checked */
-.container input:checked ~ .checkmark::after {
+:host .radio-option-container input:checked ~ .checkmark::after {
   display: inline-block;
 }
 
 /* On mouse-over, add a light blue background color */
-.container:hover input ~ .checkmark {
+:host .radio-option-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 {
+:host .radio-option-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 {
+:host
+  .radio-option-container:hover:not(.disabled)
+  input:checked
+  ~ .checkmark::after {
   background-color: var(--ic-radio-button-default-hover);
 }
 
 /* When pressed, adds the active colours */
-.container:active input ~ .checkmark {
+:host .radio-option-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);
 }
 
 /* When pressed, adds the active colours */
-.container:active input:checked ~ .checkmark {
+:host .radio-option-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);
 }
 
-.ic-radio-group-small .container input:checked ~ .checkmark {
+:host(.ic-radio-option-small)
+  .radio-option-container
+  input:checked
+  ~ .checkmark {
   border-width: var(--ic-space-1px);
 }
 
 /* When pressed and selected, adds the active colours */
-.container:active input:checked ~ .checkmark::after {
+:host .radio-option-container:active input:checked ~ .checkmark::after {
   background-color: var(--ic-radio-button-default-pressed);
 }
 
 /* When the radio button is checked */
-.container input:checked ~ .checkmark {
+:host .radio-option-container input:checked ~ .checkmark {
   border: 0.125rem solid var(--ic-radio-button-default-active);
 }
 
 /* When the radio button is checked and disabled */
-.container input:checked:disabled ~ .checkmark {
+:host .radio-option-container input:checked:disabled ~ .checkmark {
   border: 0.125rem solid var(--ic-radio-button-border-disabled);
 }
 
 /* When the radio button is disabled */
-.container input:disabled ~ .checkmark {
+:host .radio-option-container input:disabled ~ .checkmark {
   border: var(--ic-border-width) dashed var(--ic-radio-button-border-disabled);
 }
 
 /* When the radio button is disabled */
-.container input:disabled ~ .checkmark::after {
+:host .radio-option-container input:disabled ~ .checkmark::after {
   background: var(--ic-radio-button-disabled);
 }
 
 /* On mouse-over inactive */
-.container:hover input:disabled ~ .checkmark {
+:host .radio-option-container:hover input:disabled ~ .checkmark {
   box-shadow: none;
   border: 0.125rem solid none;
 }
 
-.container:active input:disabled ~ .checkmark::after {
+:host .radio-option-container:active input:disabled ~ .checkmark::after {
   background-color: var(--ic-radio-button-disabled);
 }
 
 /* Style the indicator (dot/circle) */
-.container .checkmark::after {
+:host .radio-option-container .checkmark::after {
   content: "";
   position: absolute;
   display: none;
@@ -610,7 +615,7 @@ ic-radio-option.ic-radio-option-disabled .radio-label {
   background: var(--ic-radio-button-default-active);
 }
 
-.ic-radio-group-small .container .checkmark::after {
+:host(.ic-radio-option-small) .radio-option-container .checkmark::after {
   top: 50%;
   left: 50%;
   width: 0.625rem;
@@ -620,22 +625,22 @@ ic-radio-option.ic-radio-option-disabled .radio-label {
   transform: translate(-50%, -50%);
 }
 
-.radio-label {
+:host .radio-label {
   margin-left: var(--ic-space-md);
 
   --ic-typography-color: var(--ic-radio-button-text-option);
 }
 
-.ic-radio-group-small .radio-label {
+:host(.ic-radio-option-small) .radio-label {
   margin-left: var(--ic-space-xs);
 }
 
-.additional-field-wrapper {
+:host .additional-field-wrapper-static {
   margin-left: var(--ic-space-xs);
 }
 
 /* The line */
-.branch-corner {
+:host .branch-corner {
   color: var(--ic-radio-button-required-bar);
   height: var(--ic-space-md);
   width: var(--ic-space-xl);
@@ -646,22 +651,22 @@ ic-radio-option.ic-radio-option-disabled .radio-label {
 }
 
 /* The dynamic container */
-.dynamic-container {
+:host .dynamic-container {
   display: flex;
   position: relative;
   margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-md);
   gap: var(--ic-space-xs);
 }
 
-.ic-radio-group-small .dynamic-container {
+:host(.ic-radio-option-small) .dynamic-container {
   margin-left: 12px;
 }
 
-.dynamic-container.hidden {
+:host .dynamic-container.hidden {
   display: none;
 }
 
-.dynamic-text {
+:host .dynamic-text {
   color: var(--ic-radio-button-required-text);
 
   --ic-typography-color: var(--ic-radio-button-required-text);
@@ -672,7 +677,8 @@ ic-radio-option.ic-radio-option-disabled .radio-label {
 }
 
 @media (max-width: 576px) {
-  ic-text-field {
+  :host .additional-field-wrapper-dynamic::slotted(ic-text-field),
+  :host .additional-field-wrapper-static::slotted(ic-text-field) {
     --input-width: 100%;
   }
 }
@@ -680,43 +686,43 @@ ic-radio-option.ic-radio-option-disabled .radio-label {
 @media (forced-colors: active) {
   /* Styles here only apply to Forced Colors Mode */
 
-  .container input:checked ~ .checkmark,
-  .container:active input:checked ~ .checkmark {
+  :host .radio-option-container input:checked ~ .checkmark,
+  :host .radio-option-container:active input:checked ~ .checkmark {
     border-color: Highlight;
   }
 
-  .container input:checked ~ .checkmark::after,
-  .container:active input:checked ~ .checkmark::after {
+  :host .radio-option-container input:checked ~ .checkmark::after,
+  :host .radio-option-container:active input:checked ~ .checkmark::after {
     background-color: Highlight;
   }
 
-  .container input:disabled ~ .checkmark,
-  .container input:checked:disabled ~ .checkmark {
+  :host .radio-option-container input:disabled ~ .checkmark,
+  :host .radio-option-container input:checked:disabled ~ .checkmark {
     border-color: GrayText;
   }
 
-  .container input:disabled ~ .checkmark::after,
-  .container:active input:disabled ~ .checkmark::after {
+  :host .radio-option-container input:disabled ~ .checkmark::after,
+  :host .radio-option-container:active input:disabled ~ .checkmark::after {
     background-color: GrayText;
   }
 }
 
 /* Right to left */
-input[type="radio"]:dir(rtl) {
+:host input[type="radio"]:dir(rtl) {
   right: 0;
 }
 
-.radio-label:dir(rtl) {
+:host .radio-label:dir(rtl) {
   padding-right: var(--ic-space-sm);
   padding-left: 0;
 }
 
-.branch-corner:dir(rtl) {
+:host .branch-corner:dir(rtl) {
   border-radius: 0 0 0.188rem;
   border-right: 0.125rem solid var(--ic-action-default);
   border-left: none;
 }
 
-.dynamic-container:dir(rtl) {
+:host .dynamic-container:dir(rtl) {
   margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;
 }

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

@@ -137,19 +137,23 @@ export class RadioOption {
         return additionalField;
     }
     render() {
+        var _a, _b;
         const { additionalFieldDisplay, disabled, dynamicText, form, groupLabel, handleClick, handleKeyDown, hasAdditionalField, label, name, selected, value, theme, } = this;
         const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;
-        return (h(Host, { key: '3d233946c372788a34128912099c47d6858d7ea9', onClick: handleClick, onKeyDown: handleKeyDown, class: {
+        return (h(Host, { key: '0a7177993a68c85ed54198b8ee213811aa2e130a', onClick: handleClick, onKeyDown: handleKeyDown, class: {
                 ["ic-radio-option-disabled"]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: 'e932a0827c6b0620522f9f3df3f5a06316098949', class: { container: true, disabled: !!disabled } }, h("div", { key: '64eeea95469af9831655f56701e2332255bf6669' }, h("input", { key: '32f7a8840d8a14a89f1a79b9c61890e0e2fe23a0', tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled, checked: selected, ref: (el) => (this.radioElement = el), form: form }), h("span", { key: '6cbea9714c51eb75b7be07a509049f0c330ffca5', class: "checkmark" })), h("ic-typography", { key: '55164cf8d231d449267b74389f9d7cd8193ab6db', class: "radio-label", variant: "body" }, h("label", { key: '54014827aa5c16641bc3fa864974382bf0715335', htmlFor: id }, label))), hasAdditionalField && (h("div", { key: '5f3e1054494365c3fafdfd421bed64523307406b', class: {
+                ["ic-radio-option-small"]: ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === "IC-RADIO-GROUP" &&
+                    ((_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.className.includes("ic-radio-group-small")),
+            } }, h("div", { key: '64bac9a6440919352131dc732648034a90d7e92e', class: { "radio-option-container": true, disabled: !!disabled } }, h("div", { key: '419dc17817ca4c9945025268e0e00de83db01790' }, h("input", { key: '0885bab10d42cd69eda2e0d78702c6c2afcff615', tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled, checked: selected, ref: (el) => (this.radioElement = el), form: form }), h("span", { key: 'df142dc79e23d240abd15f5088d703b6d388456b', class: "checkmark" })), h("ic-typography", { key: '4d5a779bbef4ccb65fbe7ebf6b3aeceafb9227e0', class: "radio-label", variant: "body" }, h("label", { key: '6d2778eb36c462f3c7fa25ed9ae5d8733b0fcb20', htmlFor: id }, label))), hasAdditionalField && (h("div", { key: '9772fd4d064854c3db492f430b90098eccd13701', class: {
                 "dynamic-container": true,
                 hidden: additionalFieldDisplay === "dynamic" && !selected,
-            } }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'd9c292dd502569650dcf327a3e48716cde723593', class: "branch-corner" })), h("div", { key: '3994230df8af7e9c5215646a1c5c3d5687961637' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: '0b92403d743c4517ca099586a2845e71d528c329', variant: "caption", role: "alert" }, h("p", { key: '0b689ea686ff2cb08b27858920a2f0548c197aa7', class: "dynamic-text" }, dynamicText))), h("div", { key: '7e023eb75b14dd0a75acbe5321ecd676de0a67d4', class: {
-                "additional-field-wrapper": additionalFieldDisplay === "static",
-            } }, h("slot", { key: 'b3f82b1650ef67a732b35a32c5088745f31d1f31', name: ADDITIONAL_FIELD })))))));
+            } }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'a237b8043bf912d5fb1be67014ae0bde41c5a2a4', class: "branch-corner" })), h("div", { key: '70524014fa4d75197460d321f47824ab20503806' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: '2f652884ff6ac334fd6cb688e52d05d0bdabf3de', variant: "caption", role: "alert" }, h("p", { key: '36cc2915b063c8d85e61dd18a3c384460b996d4f', class: "dynamic-text" }, dynamicText))), h("div", { key: 'd8386ddb6c70fd7893544d3c6d1720b349bb378b', class: {
+                [`additional-field-wrapper-${additionalFieldDisplay}`]: true,
+            } }, h("slot", { key: 'f9b72315938873b57c52af87730ee72b24a413af', name: ADDITIONAL_FIELD })))))));
     }
     static get is() { return "ic-radio-option"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["ic-radio-option.css"]

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

@@ -1 +1 @@
-{"version":3,"file":"ic-radio-option.js","sourceRoot":"","sources":["../../../src/components/ic-radio-option/ic-radio-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  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        {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\" role=\"alert\">\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.js","sourceRoot":"","sources":["../../../src/components/ic-radio-option/ic-radio-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  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  scoped: true,\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          [\"ic-radio-option-small\"]:\n            this.el.parentElement?.tagName === \"IC-RADIO-GROUP\" &&\n            this.el.parentElement?.className.includes(\"ic-radio-group-small\"),\n        }}\n      >\n        <div class={{ \"radio-option-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        {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\" role=\"alert\">\n                  <p class=\"dynamic-text\">{dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  [`additional-field-wrapper-${additionalFieldDisplay}`]: true,\n                }}\n              >\n                <slot name={ADDITIONAL_FIELD}></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-search-bar/ic-search-bar.css

@@ -651,3 +651,11 @@ input[type="search"].truncate-value {
     fill: GrayText;
   }
 }
+
+/* Breakpoint value chosen as it's a small amount bigger than the search bar's default width */
+@media screen AND (max-width: 22rem) {
+  .menu-container {
+    max-width: var(--menu-width, var(--input-width, 20rem));
+    width: 100%;
+  }
+}

package/dist/collection/components/ic-search-bar/ic-search-bar.stories.js

@@ -27,7 +27,7 @@ export default {
 };
 
 export const Default = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar label="What is your favourite coffee?">
     </ic-search-bar>`,
 
@@ -35,7 +35,7 @@ export const Default = {
 };
 
 export const Basic = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar label="What is your favourite coffee?"></ic-search-bar>
       <script>
         document.querySelector("ic-search-bar").options = [
@@ -54,7 +54,7 @@ export const Basic = {
 };
 
 export const WithCustomLabelAndValueFields = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         label-field="urn"
@@ -77,7 +77,7 @@ export const WithCustomLabelAndValueFields = {
 };
 
 export const WithOptions = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         value="Flat White"
@@ -103,7 +103,7 @@ export const WithOptions = {
 };
 
 export const WithOptionsNoFiltering = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         disable-auto-filtering
@@ -125,7 +125,7 @@ export const WithOptionsNoFiltering = {
 };
 
 export const InAForm = {
-  render: (args) =>
+  render: () =>
     html` <form>
       <ic-search-bar
         name="search-01"
@@ -137,7 +137,7 @@ export const InAForm = {
 };
 
 export const HelperText = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         helper-text="Some helper text"
@@ -168,7 +168,7 @@ export const HelperText = {
 };
 
 export const Small = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
       label="What is your favourite coffee?"
       size="small"
@@ -178,7 +178,7 @@ export const Small = {
 };
 
 export const HiddenLabel = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
       label="What is your favourite coffee?"
       hide-label
@@ -188,7 +188,7 @@ export const HiddenLabel = {
 };
 
 export const Disabled = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
       label="What is your favourite coffee?"
       disabled
@@ -198,7 +198,7 @@ export const Disabled = {
 };
 
 export const FullWidth = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         full-width
@@ -224,7 +224,7 @@ export const FullWidth = {
 };
 
 export const ExternalFiltering = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="Search for coffee"
         placeholder="Type to search"
@@ -288,7 +288,7 @@ export const ExternalFiltering = {
 };
 
 export const ExternalFilteringWithLoading = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="Search for coffee"
         placeholder="Type to search"
@@ -356,7 +356,7 @@ export const ExternalFilteringWithLoading = {
 };
 
 export const ExternalFilteringWithCustomLoadingMessages = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="Search for coffee"
         placeholder="Type to search"
@@ -426,7 +426,7 @@ export const ExternalFilteringWithCustomLoadingMessages = {
 };
 
 export const QuerySearchMode = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         search-mode="query"
@@ -447,7 +447,7 @@ export const QuerySearchMode = {
 };
 
 export const EmptyOptionListText = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         empty-option-list-text="There's nothing here"
@@ -468,7 +468,7 @@ export const EmptyOptionListText = {
 };
 
 export const CharactersUntilSuggestion = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         characters-until-suggestion="5"
@@ -489,7 +489,7 @@ export const CharactersUntilSuggestion = {
 };
 
 export const HintText = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         assistive-hint-text="You can use up and down arrows to navigate the options when they are available, and press enter to select an option."
@@ -511,7 +511,7 @@ export const HintText = {
 };
 
 export const LongOptionLabels = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar label="What is your favourite coffee?"></ic-search-bar>
       <script>
         document.querySelector("ic-search-bar").options = [