@ukic/web-components 3.23.0 → 3.25.0

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

@@ -1 +1 @@
-{"file":"ic-radio-option.js","mappings":"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","names":[],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=scoped","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers.\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Render the `main` element consistently in IE.\n   */\n\nmain {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * Remove the gray background on active links in IE 10.\n   */\n\na {\n  background-color: transparent;\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57-\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Remove the border on images inside links in IE 10.\n   */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers.\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n   * Remove the default vertical scrollbar in IE 10+.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10.\n   * 2. Remove the padding in IE 10.\n   */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding in Chrome and Safari on macOS.\n   */\n\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in Edge, IE 10+, and Firefox.\n   */\n\ndetails {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10+.\n   */\n\ntemplate {\n  display: none;\n}\n\n/**\n   * Add the correct display in IE 10.\n   */\n\n[hidden] {\n  display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-style: inherit;\n  vertical-align: baseline;\n}\n\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n:host .additional-field-wrapper-static::slotted([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  */\n:host(.ic-radio-option-disabled),\n:host(.ic-radio-option-disabled) .radio-label {\n  --ic-typography-color: var(--ic-radio-button-text-option-disabled);\n}\n\n/* Focus states */\n:host .radio-option-container input:focus + span.checkmark,\n:host .radio-option-container:hover input:focus + span.checkmark,\n:host .radio-option-container:active input:focus + span.checkmark,\n:host(:focus) .radio-option-container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n:host .radio-option-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:host(.ic-radio-option-small) .radio-option-container {\n  margin: 0 0 0 var(--ic-space-xxs);\n}\n\n:host .radio-option-container.disabled,\n:host .radio-option-container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n:host .radio-option-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:host(.ic-radio-option-small) .radio-option-container input {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n/* Create a custom radio button */\n:host .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:host(.ic-radio-option-small) .checkmark {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n/* Show the indicator (dot/circle) when checked */\n:host .radio-option-container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n:host .radio-option-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:host .radio-option-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:host\n  .radio-option-container:hover:not(.disabled)\n  input:checked\n  ~ .checkmark::after {\n  background-color: var(--ic-radio-button-default-hover);\n}\n\n/* When pressed, adds the active colours */\n:host .radio-option-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:host .radio-option-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:host(.ic-radio-option-small)\n  .radio-option-container\n  input:checked\n  ~ .checkmark {\n  border-width: var(--ic-space-1px);\n}\n\n/* When pressed and selected, adds the active colours */\n:host .radio-option-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:host .radio-option-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:host .radio-option-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:host .radio-option-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:host .radio-option-container input:disabled ~ .checkmark::after {\n  background: var(--ic-radio-button-disabled);\n}\n\n/* On mouse-over inactive */\n:host .radio-option-container:hover input:disabled ~ .checkmark {\n  box-shadow: none;\n  border: 0.125rem solid none;\n}\n\n:host .radio-option-container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-radio-button-disabled);\n}\n\n/* Style the indicator (dot/circle) */\n:host .radio-option-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:host(.ic-radio-option-small) .radio-option-container .checkmark::after {\n  top: 50%;\n  left: 50%;\n  width: 0.625rem;\n  height: 0.625rem;\n  border-radius: 50%;\n  background: var(--ic-radio-button-default-active);\n  transform: translate(-50%, -50%);\n}\n\n:host .radio-label {\n  margin-left: var(--ic-space-md);\n\n  --ic-typography-color: var(--ic-radio-button-text-option);\n}\n\n:host(.ic-radio-option-small) .radio-label {\n  margin-left: var(--ic-space-xs);\n}\n\n:host .additional-field-wrapper-static {\n  margin-left: var(--ic-space-xs);\n}\n\n/* The line */\n:host .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:host .dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n:host(.ic-radio-option-small) .dynamic-container {\n  margin-left: 12px;\n}\n\n:host .dynamic-container.hidden {\n  display: none;\n}\n\n:host .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  :host .additional-field-wrapper-dynamic::slotted(ic-text-field),\n  :host .additional-field-wrapper-static::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  :host .radio-option-container input:checked ~ .checkmark,\n  :host .radio-option-container:active input:checked ~ .checkmark {\n    border-color: Highlight;\n  }\n\n  :host .radio-option-container input:checked ~ .checkmark::after,\n  :host .radio-option-container:active input:checked ~ .checkmark::after {\n    background-color: Highlight;\n  }\n\n  :host .radio-option-container input:disabled ~ .checkmark,\n  :host .radio-option-container input:checked:disabled ~ .checkmark {\n    border-color: GrayText;\n  }\n\n  :host .radio-option-container input:disabled ~ .checkmark::after,\n  :host .radio-option-container:active input:disabled ~ .checkmark::after {\n    background-color: GrayText;\n  }\n}\n\n/* Right to left */\n:host input[type=\"radio\"]:dir(rtl) {\n  right: 0;\n}\n\n:host .radio-label:dir(rtl) {\n  padding-right: var(--ic-space-sm);\n  padding-left: 0;\n}\n\n:host .branch-corner:dir(rtl) {\n  border-radius: 0 0 0.188rem;\n  border-right: 0.125rem solid var(--ic-action-default);\n  border-left: none;\n}\n\n:host .dynamic-container:dir(rtl) {\n  margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host .checkmark {\n    transition: none;\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  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"],"version":3}
+{"file":"ic-radio-option.js","mappings":"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","names":[],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=scoped","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n}\n\n:host .additional-field-wrapper-static::slotted([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  */\n:host(.ic-radio-option-disabled),\n:host(.ic-radio-option-disabled) .radio-label {\n  --ic-typography-color: var(--ic-radio-button-text-option-disabled);\n}\n\n/* Focus states */\n:host .radio-option-container input:focus + span.checkmark,\n:host .radio-option-container:hover input:focus + span.checkmark,\n:host .radio-option-container:active input:focus + span.checkmark,\n:host(:focus) .radio-option-container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n:host .radio-option-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:host(.ic-radio-option-small) .radio-option-container {\n  margin: 0 0 0 var(--ic-space-xxs);\n}\n\n:host .radio-option-container.disabled,\n:host .radio-option-container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n:host .radio-option-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:host(.ic-radio-option-small) .radio-option-container input {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n:host(.ic-radio-option-large) .radio-option-container input {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n}\n\n/* Create a custom radio button */\n:host .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:host(.ic-radio-option-small) .checkmark {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n:host(.ic-radio-option-large) .checkmark {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n}\n\n/* Show the indicator (dot/circle) when checked */\n:host .radio-option-container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n:host .radio-option-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:host .radio-option-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:host\n  .radio-option-container:hover:not(.disabled)\n  input:checked\n  ~ .checkmark::after {\n  background-color: var(--ic-radio-button-default-hover);\n}\n\n/* When pressed, adds the active colours */\n:host .radio-option-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:host .radio-option-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:host(.ic-radio-option-small)\n  .radio-option-container\n  input:checked\n  ~ .checkmark {\n  border-width: var(--ic-space-1px);\n}\n\n/* When pressed and selected, adds the active colours */\n:host .radio-option-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:host .radio-option-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:host .radio-option-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:host .radio-option-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:host .radio-option-container input:disabled ~ .checkmark::after {\n  background: var(--ic-radio-button-disabled);\n}\n\n/* On mouse-over inactive */\n:host .radio-option-container:hover input:disabled ~ .checkmark {\n  box-shadow: none;\n  border: 0.125rem solid none;\n}\n\n:host .radio-option-container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-radio-button-disabled);\n}\n\n/* Style the indicator (dot/circle) */\n:host .radio-option-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:host(.ic-radio-option-small) .radio-option-container .checkmark::after {\n  top: 50%;\n  left: 50%;\n  width: 0.625rem;\n  height: 0.625rem;\n  border-radius: 50%;\n  background: var(--ic-radio-button-default-active);\n  transform: translate(-50%, -50%);\n}\n\n:host(.ic-radio-option-large) .radio-option-container .checkmark::after {\n  top: 50%;\n  left: 50%;\n  width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  border-radius: 50%;\n  background: var(--ic-radio-button-default-active);\n  transform: translate(-50%, -50%);\n}\n\n:host .radio-label {\n  margin-left: var(--ic-space-md);\n\n  --ic-typography-color: var(--ic-radio-button-text-option);\n}\n\n:host(.ic-radio-option-small) .radio-label {\n  margin-left: var(--ic-space-xs);\n}\n\n:host(.ic-radio-option-large) .radio-label {\n  margin-left: var(--ic-space-md);\n}\n\n:host .additional-field-wrapper-static {\n  margin-left: var(--ic-space-xs);\n}\n\n/* The line */\n:host .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:host .dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n:host(.ic-radio-option-small) .dynamic-container {\n  margin-left: var(--ic-space-sm);\n}\n\n:host(.ic-radio-option-large) .dynamic-container {\n  margin-left: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host .dynamic-container.hidden {\n  display: none;\n}\n\n:host .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  :host .additional-field-wrapper-dynamic::slotted(ic-text-field),\n  :host .additional-field-wrapper-static::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  :host .radio-option-container input:checked ~ .checkmark,\n  :host .radio-option-container:active input:checked ~ .checkmark {\n    border-color: Highlight;\n  }\n\n  :host .radio-option-container input:checked ~ .checkmark::after,\n  :host .radio-option-container:active input:checked ~ .checkmark::after {\n    background-color: Highlight;\n  }\n\n  :host .radio-option-container input:disabled ~ .checkmark,\n  :host .radio-option-container input:checked:disabled ~ .checkmark {\n    border-color: GrayText;\n  }\n\n  :host .radio-option-container input:disabled ~ .checkmark::after,\n  :host .radio-option-container:active input:disabled ~ .checkmark::after {\n    background-color: GrayText;\n  }\n}\n\n/* Right to left */\n:host input[type=\"radio\"]:dir(rtl) {\n  right: 0;\n}\n\n:host .radio-label:dir(rtl) {\n  padding-right: var(--ic-space-sm);\n  padding-left: 0;\n}\n\n:host .branch-corner:dir(rtl) {\n  border-radius: 0 0 0.188rem;\n  border-right: 0.125rem solid var(--ic-action-default);\n  border-left: none;\n}\n\n:host .dynamic-container:dir(rtl) {\n  margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host .checkmark {\n    transition: none;\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  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          [\"ic-radio-option-large\"]:\n            this.el.parentElement?.tagName === \"IC-RADIO-GROUP\" &&\n            this.el.parentElement?.className.includes(\"ic-radio-group-large\"),\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"],"version":3}

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { W as getFilteredMenuOptions, X as getLabelFromValue, h as handleHiddenFormButtonClick, r as removeDisabledFalse, V as debounceEvent, o as onComponentRequiredPropUndefined, w as getInputDescribedByText, u as renderHiddenInput } from './helpers.js';
+import { V as getFilteredMenuOptions, W as getLabelFromValue, h as handleHiddenFormButtonClick, r as removeDisabledFalse, U as debounceEvent, o as onComponentRequiredPropUndefined, w as getInputDescribedByText, u as renderHiddenInput } from './helpers.js';
 import { d as defineCustomElement$9 } from './ic-button2.js';
 import { d as defineCustomElement$8 } from './ic-input-component-container2.js';
 import { d as defineCustomElement$7 } from './ic-input-container2.js';
@@ -558,39 +558,39 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         const menuRendered = menuOpen && value.length >= charactersUntilSuggestion;
         const labelValue = getLabelFromValue(value, options, valueField, labelField);
         renderHiddenInput(this.el, value, name, disabledMode);
-        return (h(Host, { key: '04e5c15ac492b502e560a905f83f3a250412ca06', class: {
+        return (h(Host, { key: 'f9ec3f2c47607e817cf0352546d0f72653b433ae', class: {
                 "ic-search-bar-search": true,
                 "ic-search-bar-full-width": fullWidth,
                 "ic-search-bar-disabled": disabled,
                 "ic-search-bar-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: '8fef7c014864aef9293542ab21524aa45d9241ac', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '43f1de8b93e14b829f581e0d394a75cb03c9d946', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, h("slot", { key: 'f5f1c33908f9083f84e162e6967e8b40d903f264', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '9fa5ed5c57101c905259eacdf81a1d7f8189f086', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '853c5c33a1760d96d447332df4c3bff6e79f91f8', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
+            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: 'fde0dc358fd80f81d23927eb18b6bd73e9694bcc', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '3c2a138a07c5a637842bf0330a857cd8a4c05be5', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, h("slot", { key: '4e5d465c5f4486826f3a634a4dd5ed2ecf01b249', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '62ad9581a1280af102d990de7fcac4055f800bec', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '196cad9c551d68276d99af9a60bd07a141130bd9', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
                 "no-left-pad": readonly,
                 readonly,
                 "truncate-value": truncateValue,
-            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : undefined, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": options.length > 0 && menuRendered ? `${menuOpen}` : undefined, "aria-owns": menuRendered ? menuId : undefined, "aria-describedby": describedById, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 && menuRendered ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }), h("div", { key: '0d72210be324fa78ae66ce350c163e9633917978', class: {
+            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : undefined, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": options.length > 0 && menuRendered ? `${menuOpen}` : undefined, "aria-owns": menuRendered ? menuId : undefined, "aria-describedby": describedById, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 && menuRendered ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }), h("div", { key: '94889d1ffab13321ea522704aacd7ebf0e0c3d00', class: {
                 "clear-button-container": true,
                 "clear-button-visible": !!value && !disabledMode && showClearButton,
-            } }, h("ic-button", { key: 'be2a08dde69a638dc26f0c479c691e65d80ece9e', id: "clear-button", class: {
+            } }, h("ic-button", { key: 'd0a3c5b6288c249ba8be2a4bcbbd2a33f1a30025', id: "clear-button", class: {
                 "clear-button": true,
                 "clear-button-unfocused": !clearButtonFocused,
-            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "button", variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }), h("div", { key: '5043e6629e6c2c925bc8464a65339bad98e915dc', class: "divider" })), h("div", { key: 'a36f9243178a2dc0da8e45e7dfe649816cf2b978', class: {
+            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "button", variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }), h("div", { key: '3965e828aba0dd8f88051ec717c7fafcb237a271', class: "divider" })), h("div", { key: 'c143dbc227dce558f5f87e1e2f7e3a014b9d250c', class: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            } }, h("ic-button", { key: '9bdca735d409bd35d38d586b69172a72673fd275', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
+            } }, h("ic-button", { key: '98e79886a69703ab39c8d6f5f97c147fb406870d', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
                 "search-submit-button": true,
                 "search-submit-button-small": size === "small",
                 "search-submit-button-unfocused": !searchSubmitFocused,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: searchButtonType, variant: "icon-tertiary", theme: searchSubmitFocused ? "light" : "dark" }))), h("div", { key: '642e60a52c92b6fda82276a827236c4651d0cbf7', class: {
+            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: searchButtonType, variant: "icon-tertiary", theme: searchSubmitFocused ? "light" : "dark" }))), h("div", { key: '4b0377230ac437eda9f5674876e87a7a72a0779c', class: {
                 "menu-container": true,
                 fullwidth: fullWidth,
-            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: '025843659ad91751380c71f373c8e8f9fa118eb1', class: {
+            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: '8be3e2accba616f85a408e8c82304433e98f7715', class: {
                 "no-results": this.hadNoOptions() ||
                     (filteredOptions.length === 1 &&
                         (filteredOptions[0][labelField] === loadingLabel ||
                             filteredOptions[0][labelField] === loadingErrorLabel)),
-            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: labelField, valueField: valueField, searchBar: true })))), h("div", { key: '17f2a14197fa3051a70345fd10e30a5cb98a13de', "aria-live": "polite", role: "status", class: "search-results-status" })));
+            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: labelField, valueField: valueField, searchBar: true })))), h("div", { key: '09953fbff84f3e27a6522da365ef49e96b21fa62', "aria-live": "polite", role: "status", class: "search-results-status" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/ic-section-container2.js

@@ -19,12 +19,12 @@ const SectionContainer = /*@__PURE__*/ proxyCustomElement(class SectionContainer
     }
     render() {
         const { aligned, fullHeight } = this;
-        return (h(Host, { key: '141dc39bbd1e9fda7617f8bff574f1e25ada9fe8', class: {
+        return (h(Host, { key: 'b72248434ac227221b9854880dd5103733052170', class: {
                 ["aligned-left"]: aligned === "left" || aligned === null,
                 ["aligned-center"]: aligned === "center",
                 ["aligned-full-width"]: aligned === "full-width",
                 ["no-vertical-padding"]: !!fullHeight,
-            } }, h("slot", { key: '8f1f0cdc5a22c0de9e0e3346ba1b7dcc8c3bf295' })));
+            } }, h("slot", { key: '749c9299c6116291ec9555bbd2a9586585e7480d' })));
     }
     static get style() { return IcSectionContainerStyle0; }
 }, [1, "ic-section-container", {

package/dist/components/ic-select2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { T as checkSlotInChildMutations, r as removeDisabledFalse, t as removeFormResetListener, s as addFormResetListener, w as getInputDescribedByText, u as renderHiddenInput, i as isSlotUsed, U as isMobileOrTablet, A as IcInformationStatus } from './helpers.js';
+import { S as checkSlotInChildMutations, r as removeDisabledFalse, t as removeFormResetListener, s as addFormResetListener, w as getInputDescribedByText, u as renderHiddenInput, i as isSlotUsed, T as isMobileOrTablet, A as IcInformationStatus } from './helpers.js';
 import { I as IC_INHERITED_ARIA } from './constants.js';
 import { d as defineCustomElement$9 } from './ic-button2.js';
 import { d as defineCustomElement$8 } from './ic-input-component-container2.js';
@@ -367,7 +367,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 if (filteredOptions.length > 0) {
                     const firstOption = filteredOptions[0];
                     if ("children" in firstOption) {
-                        this.value = firstOption.children[0].value;
+                        if (firstOption.children) {
+                            this.value = firstOption.children[0].value;
+                        }
                     }
                     else {
                         this.value = firstOption.value;
@@ -634,19 +636,19 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                     "loading" in menuOptions[0] ||
                     "timedOut" in menuOptions[0]));
         renderHiddenInput(this.el, value, name || inputId, disabled);
-        const ClearButton = () => (h("ic-button", { key: '983b6bfae4f3a9d439f23fe022652605d91f0a1e', ref: (el) => (this.clearButton = el), id: "clear-button", "aria-label": this.searchable ? "Clear input" : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onBlur: this.handleBlur, size: size, variant: "icon-tertiary" }));
-        const NativeSelect = () => (h("select", Object.assign({ key: '2fb628398e722cff8c3759229af969600e553485', ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid ? "true" : "false", onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleNativeSelectKeyDown, form: form }, inheritedAttributes), h("option", { key: '5fb827fef7ab7c597a2361ac4d019f9e07adb55f', value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => "children" in option ? (h("optgroup", { label: option.label }, option.children.map((child) => this.renderNativeOption(child)))) : (this.renderNativeOption(option)))));
-        const SelectButton = () => (h("div", { key: '47ad04d6da391fcb88a8b6a6a841dec93f53cd74', class: "select-container" }, h("button", { key: '7ee23a4f16c4aca4b287391ac5bf5f6ee4441b07', class: "select-input", role: "combobox", ref: (el) => (this.selectElement = el), id: inputId, "aria-label": `${label}, ${(multiple && value
+        const ClearButton = () => (h("ic-button", { key: '3892a327f660eb5c8add2dad6b0234e98c1763df', ref: (el) => (this.clearButton = el), id: "clear-button", "aria-label": this.searchable ? "Clear input" : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onBlur: this.handleBlur, size: size, variant: "icon-tertiary" }));
+        const NativeSelect = () => (h("select", Object.assign({ key: '9dbff7cad48e70c9ecb5bdaf5188bf76ebb21bc9', ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid ? "true" : "false", onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleNativeSelectKeyDown, form: form }, inheritedAttributes), h("option", { key: '4899ac51e4735de3a3a6d1674a107d496d136f8d', value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => "children" in option && option.children ? (h("optgroup", { label: option.label }, option.children.map((child) => this.renderNativeOption(child)))) : (this.renderNativeOption(option)))));
+        const SelectButton = () => (h("div", { key: 'a54b55c792c30da50db55cdf579a7b5112733ab2', class: "select-container" }, h("button", { key: '566288c0b7ba2c08f437d0894f1e7e8d050dbec9', class: "select-input", role: "combobox", ref: (el) => (this.selectElement = el), id: inputId, "aria-label": `${label}, ${(multiple && value
                 ? `${value.length} of ${this.flatOptions.length} selected, ${this.getLabelString()}`
-                : this.getLabelString()) || placeholder}`, onClick: this.handleClick, "aria-describedby": describedBy, "aria-invalid": invalid ? "true" : "false", "aria-haspopup": "listbox", "aria-expanded": `${open}`, "aria-controls": menuId, "aria-required": `${required}`, disabled: disabled, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-activedescendant": ariaActiveDescendant }, h("ic-typography", { key: '438cce7c257e37d0a0aef5247d28d31586725a1e', variant: "body", class: {
+                : this.getLabelString()) || placeholder}`, onClick: this.handleClick, "aria-describedby": describedBy, "aria-invalid": invalid ? "true" : "false", "aria-haspopup": "listbox", "aria-expanded": `${open}`, "aria-controls": menuId, "aria-required": `${required}`, disabled: disabled, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-activedescendant": ariaActiveDescendant }, h("ic-typography", { key: 'f5fb6dcd933444aa16b0e481f3cfcd606d266027', variant: "body", class: {
                 "value-text": true,
                 "with-clear-button": !!isClearable,
                 placeholder: !value,
-            } }, this.getLabelString()), h("div", { key: '8926d05851401339717c159651b802fb41e53096', class: "select-input-end" }, isClearable && h("div", { key: '5c94e4ba98ad972001890d639b00c82887e0fb5d', class: "divider" }), h("span", { key: '23569f5196d66f2b4a834d44006f6a05446598cd', class: {
+            } }, this.getLabelString()), h("div", { key: '2a0f71ba4314bf48c042c08d6542a7e5d290cfa1', class: "select-input-end" }, isClearable && h("div", { key: 'aab9235d7bed234a7faa3b76f946723a6fd733b5', class: "divider" }), h("span", { key: 'bbcb55feda8598bed785a7d97ffbfda9beace9b6', class: {
                 "expand-icon": true,
                 "expand-icon-open": open,
-            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && h(ClearButton, { key: 'e4165cb01b0bdc1681e3d9490007182b934f40ea' }), h("div", { key: '6208229358ee8ba7a007a08f5e551d494015a347', "aria-live": "polite", "aria-atomic": "true", class: "aria-live-hidden-text" }, selectButtonAriaLiveText)));
-        const SelectInput = () => (h("div", { key: 'af39791c29e8d792c16fed1fffe08db8f621fcac', class: "searchable-select-container" }, h("input", { key: '366bd3c57ad76f130d73ab2390c557b9e8fe98c8', class: {
+            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && h(ClearButton, { key: '7be9270208022eec818d3d11e787e97b3e9781a4' }), h("div", { key: '66a002a41aaae04ff167acd5bc41df446d1c7185', "aria-live": "polite", "aria-atomic": "true", class: "aria-live-hidden-text" }, selectButtonAriaLiveText)));
+        const SelectInput = () => (h("div", { key: '8c8bc17e0e8d6b2a19c2b6546a7dc1927003ffe6', class: "searchable-select-container" }, h("input", { key: 'b9f94d2533162b38c766f003a9befcbadff6def8', class: {
                 "value-text": true,
                 "select-input": true,
                 "with-clear-button": !!searchableSelectInputValue,
@@ -654,25 +656,25 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 ? ""
                 : value
                     ? this.getLabelString()
-                    : searchableSelectInputValue || undefined, disabled: disabled, placeholder: placeholder, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, form: form }), isClearable && (h("div", { key: 'e9260358a6c8ac3683d1de3015064665d32d907f', class: "clear-button-container" }, h(ClearButton, { key: '0c05ed1cf92ac8fde61ba55192a8a1511338239e' }), h("div", { key: 'e44933edcc7c79459f1ecd551eec43a86fd53b11', class: "divider" }))), h("span", { key: '36e7fe34e7d438caab2967fae27bfe4fb2e49041', onMouseDown: this.handleExpandIconMouseDown, class: {
+                    : searchableSelectInputValue || undefined, disabled: disabled, placeholder: placeholder, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, form: form }), isClearable && (h("div", { key: '2fa369c2f909206cda3e533fdc1b4f61f49e5367', class: "clear-button-container" }, h(ClearButton, { key: '7c6f3009ca83d1f1ad53bbfe9356663a777b01b8' }), h("div", { key: 'f7928645b4eac91f7a65e88fa493032f9036e520', class: "divider" }))), h("span", { key: '01223cbc2bb20344cc6e18d6d7c899ed9eb73565', onMouseDown: this.handleExpandIconMouseDown, class: {
                 "expand-icon": true,
                 "expand-icon-open": open,
-            }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { key: 'c3e06f04e62b273b8a7a6f9df0aa27bf71060ed4', "aria-live": "polite", role: "status", class: "aria-live-hidden-text" }, selectInputAriaLiveText)));
-        const ReadOnly = () => (h("ic-typography", { key: '979d342f453fdb2ed79a6cf231d9a40275662a44' }, h("p", { key: '221530958da8731657b5ad4d455041dc3934718f' }, this.getLabelString() === placeholder ? "" : this.getLabelString())));
-        return (h(Host, { key: 'efbdccb0f0b7e86142cd530d52a86f7ce95d6c1c', class: {
+            }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { key: '3ad6ae8f699743bdf8277a4b5c50afa4fa0ddc22', "aria-live": "polite", role: "status", class: "aria-live-hidden-text" }, selectInputAriaLiveText)));
+        const ReadOnly = () => (h("ic-typography", { key: 'dac815c30b87420c94c68e65eaa27ec3b0902a12' }, h("p", { key: '828de16f7df4fa23e8387f2ef9cf84b1994a91a3' }, this.getLabelString() === placeholder ? "" : this.getLabelString())));
+        return (h(Host, { key: '91899d31f22ef6d7417710d110499cc72e97f230', class: {
                 "ic-select-disabled": disabled,
                 "ic-select-searchable": searchable,
                 [`ic-select-${size}`]: size !== "medium",
                 "ic-select-full-width": fullWidth,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-input-container", { key: '48fe83c1c79ec578f94a2d8af4b8b452570a421f', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: '8410dabe6d0d62c7c1459991631807cfa6546735', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, h("slot", { key: '77ce0ab9ca879ecf515de633ff27ba8e2320cf2c', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '699375a82eb49f5eb351cf95b4822b4cad7bcc1a', ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, isSlotUsed(this.el, "icon") &&
+            } }, h("ic-input-container", { key: '2c314323d9b410363eefdfb6fbdcb8b4360109d0', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: '28269a9d64624f0c646fa46bf8199716cefdc220', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, h("slot", { key: '235bdb195e5feeae8d82360efa17aa576df9cff4', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: 'a936a39d3dbdf43d406d994594b4dd72f1aa59e2', ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, isSlotUsed(this.el, "icon") &&
             !disabled &&
-            (!readonly || !!value) && (h("span", { key: 'fcfec6b75fdb0eb41950460af3c6d7dc5ad43657', slot: "left-icon", class: {
+            (!readonly || !!value) && (h("span", { key: '67c88b6a8c00524eff7575fc71150ea5aabeb847', slot: "left-icon", class: {
                 readonly,
                 "has-value": !!value,
-            } }, h("slot", { key: '08d321011ba86b6d50bf3c8c85bf16595c8df657', name: "icon" }))), isMobileOrTablet() && this.useNativeSelectOnMobile && !multiple ? (h(NativeSelect, null)) : readonly ? (h(ReadOnly, null)) : !searchable ? (h(SelectButton, null)) : (h(SelectInput, null))), !(isMobileOrTablet() &&
+            } }, h("slot", { key: '92f2c3c41210287a28e524afa4511a08204a5544', name: "icon" }))), isMobileOrTablet() && this.useNativeSelectOnMobile && !multiple ? (h(NativeSelect, null)) : readonly ? (h(ReadOnly, null)) : !searchable ? (h(SelectButton, null)) : (h(SelectInput, null))), !(isMobileOrTablet() &&
             this.useNativeSelectOnMobile &&
-            !multiple) && (h("ic-menu", { key: '3fc0ee9172a93e744174e2f2b7a16c4f327a82c9', ref: (el) => (this.menu = el), class: { "no-results": noOptions }, inputEl: searchable ? this.searchableSelectElement : this.selectElement, allowMenuFocus: false, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: open, options: this.getOptions(), value: multiple ? value : value, fullWidth: fullWidth, selectOnEnter: selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onTimeoutBlur: this.handleTimeoutBlur, onMenuOptionId: this.updateAriaActiveDescendant, onClick: this.setFocus, parentEl: this.el, activationType: searchable || multiple || selectOnEnter ? "manual" : "automatic", onRetryButtonClicked: this.handleRetry, closeOnSelect: !multiple, multiSelect: multiple, searchableSelect: searchable })), h("ic-input-validation", { key: '6b8bd66f22d67776d418e0aac1b41d2f03f3c9cd', class: {
+            !multiple) && (h("ic-menu", { key: '644f853a4caad5efbcab0c9228e0bf18595ecb91', ref: (el) => (this.menu = el), class: { "no-results": noOptions }, inputEl: searchable ? this.searchableSelectElement : this.selectElement, allowMenuFocus: false, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: open, options: this.getOptions(), value: multiple ? value : value, fullWidth: fullWidth, selectOnEnter: selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onTimeoutBlur: this.handleTimeoutBlur, onMenuOptionId: this.updateAriaActiveDescendant, onClick: this.setFocus, parentEl: this.el, activationType: searchable || multiple || selectOnEnter ? "manual" : "automatic", onRetryButtonClicked: this.handleRetry, closeOnSelect: !multiple, multiSelect: multiple, searchableSelect: searchable })), h("ic-input-validation", { key: '00ca9a2788bf404fb096c2497e46aa138c32ea76', class: {
                 "menu-open": open,
             }, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "", for: inputId }))));
     }