@ukic/web-components 2.9.0 → 2.10.0

package/dist/core/p-e278242f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icInputComponentContainerCss","InputComponentContainer","render","small","size","validationStatus","disabled","readonly","multiLine","fullWidth","dark","appearance","validationInline","this","hasValidationStatus","h","Host","class","isSlotUsed","el","name","IcInformationStatus","Success","innerHTML","successIcon","icInputContainerCss","InputContainer","icMenuCss","Menu","disabledOptionSelected","hasPreviouslyBlurred","hasTimedOut","isLoading","isSearchBar","isSearchableSelect","preventClickOpen","ungroupedOptions","handleClearListener","optionHighlighted","handleSubmitSearch","highlightedOptionIndex","options","findIndex","option","valueField","setInputValue","handleMenuChange","open","focusInput","menuStateChange","emit","inputEl","focus","setNextOptionValue","selectedOptionIndex","menuOptionSelect","value","optionId","getOptionId","setPreviousOptionValue","length","getParentEl","parent","tagName","getAttribute","undefined","arrowBehaviour","event","preventDefault","setMenuOptions","setHighlightedOption","highlightedIndex","menuOptions","timedOut","autoSetInputValueKeyboardOpen","keyboardNav","key","target","id","manSetInputValueKeyboardOpen","index","_a","Array","from","host","querySelectorAll","isOpen","menuOptionId","preventIncorrectTabOrder","focusFromSearchKeypress","stopImmediatePropagation","parentEl","setFocus","searchMode","handleOptionClick","label","dataset","handleRetry","retryButtonClicked","handleRetryKeyDown","ev","keyPressed","handleBlur","relatedTarget","menu","contains","handleMouseDown","handleMenuKeyDown","activationType","autoSetValueOnMenuKeyDown","emitMenuKeyPress","isNavKey","menuKeyPress","cancelBubble","handleMenuKeyUp","shiftKey","menuId","getOptionAriaLabel","parentOption","ariaLabel","labelField","description","element","getSortedOptions","sorted","sort","optionA","optionB","recommended","isManualMode","scrollToSelected","selectedOption","selectOnEnter","querySelector","elTop","offsetTop","offsetHeight","scrollTop","loadUngroupedOptions","map","children","push","ungroupedOptionsSet","setMenuScrollbar","optionsHeight","forEach","clientHeight","classList","add","handleTimeoutBlur","timeoutBlur","optionContent","Fragment","loading","icon","variant","component","toLowerCase","Check","displayOption","initialOptionsListRender","timeout","role","tabindex","onClick","onBlur","onMouseDown","xmlns","viewBox","fill","d","onKeyDown","watchOpenHandler","popperInstance","destroy","watchOptionsHandler","newOptions","some","opt","watchValueHandler","menuValueChange","connectedCallback","disconnectedCallback","removeEventListener","componentWillLoad","addEventListener","_b","componentDidLoad","disableFilter","onComponentRequiredPropUndefined","prop","propName","inputLabel","componentDidUpdate","inputValueInOptions","optionHighlightedIsSet","autoFocusOnSelected","highlightedEl","componentDidRender","anchorEl","initPopperJs","handleClickOpen","handleKeyboardOpen","handleSetFirstOption","anchor","createPopper","placement","modifiers","offset","fallbackPlacements","rootBoundary","ref","onKeyUp","childOption"],"sources":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","src/components/ic-input-component-container/ic-input-component-container.tsx","src/components/ic-input-container/ic-input-container.css?tag=ic-input-container","src/components/ic-input-container/ic-input-container.tsx","src/components/ic-menu/ic-menu.css?tag=ic-menu&encapsulation=scoped","src/components/ic-menu/ic-menu.tsx"],"sourcesContent":["ic-input-component-container {\n  /**\n   * @prop --border-color: Border colour of the input component container\n   */\n\n  display: flex;\n  border: var(--ic-border-width) solid\n    var(--border-color, var(--ic-architectural-400));\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-easing-transition-slow);\n  height: 2.5rem;\n  width: var(--input-width, 20rem);\n  padding: var(--ic-space-1px);\n  background-color: var(--ic-architectural-white);\n  box-sizing: border-box;\n  fill: var(--ic-architectural-400);\n  outline: none;\n}\n\nic-input-component-container.fullwidth {\n  width: 100%;\n}\n\nic-input-component-container.disabled,\nic-input-component-container.disabled:hover {\n  border: var(--ic-border-width) dashed var(--ic-architectural-200);\n}\n\nic-input-component-container.readonly,\nic-input-component-container.readonly:hover {\n  border: none;\n  padding: 0;\n}\n\nic-input-component-container.error {\n  border: var(--ic-error-border-default);\n  padding: 0;\n}\n\nic-input-component-container.error:hover {\n  border: var(--ic-error-border-hover);\n}\n\nic-input-component-container.error:focus-within {\n  border: var(--ic-error-border-pressed);\n}\n\nic-input-component-container.warning {\n  border: var(--ic-warning-border-default);\n  padding: 0;\n}\n\nic-input-component-container.warning:hover {\n  border: var(--ic-warning-border-hover);\n}\n\nic-input-component-container.warning:focus-within {\n  border: var(--ic-warning-border-pressed);\n}\n\nic-input-component-container.success {\n  border: var(--ic-success-border-default);\n  padding: 0;\n}\n\nic-input-component-container.success:hover {\n  border: var(--ic-success-border-hover);\n}\n\nic-input-component-container.success:focus-within {\n  border: var(--ic-success-border-pressed);\n}\n\nic-input-component-container.small {\n  height: var(--ic-space-xl);\n}\n\nic-input-component-container.multiline {\n  height: auto;\n}\n\nic-input-component-container .icon-container {\n  margin-top: var(--ic-space-xxs);\n  margin-left: 0.438rem;\n  display: flex;\n  align-items: center;\n}\n\nic-input-component-container.multiline .icon-container,\nic-input-component-container.multiline.small .icon-container {\n  margin-top: 0.375rem;\n  display: block;\n}\n\nic-input-component-container.readonly .icon-container {\n  margin-left: -0.313rem;\n}\n\nic-input-component-container.disabled ::placeholder {\n  display: none;\n}\n\nic-input-component-container .inline-success {\n  margin: var(--ic-space-xs) 0.375rem;\n  display: flex;\n  align-items: center;\n}\n\nic-input-component-container.dark:hover {\n  --border-color: var(--ic-architectural-400);\n}\n\nic-input-component-container .inline-success > svg {\n  fill: var(--ic-status-success);\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\nic-input-component-container:hover {\n  border: var(--ic-border-hover);\n  color: var(--ic-action-dark-hover);\n}\n\nic-input-component-container:focus {\n  border: var(--ic-border-pressed);\n}\n\n.focus-indicator {\n  display: flex;\n  width: 100%;\n  margin: -0.125rem;\n  padding: 0.125rem;\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n  box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.dark:focus-within {\n  box-shadow: var(--ic-border-focus);\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n  ic-input-component-container,\n  .focus-indicator {\n    transition: none;\n  }\n\n  ic-input-component-container:focus-within {\n    border: var(--ic-border-width) solid Highlight;\n    outline: 0.125rem solid Highlight;\n  }\n\n  ic-input-component-container.disabled,\n  ic-input-component-container.disabled:hover {\n    border: var(--ic-border-width) dashed GrayText;\n  }\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n  IcSizesNoLarge,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot left-icon - Content will be placed to the left of the input.\n */\n@Component({\n  tag: \"ic-input-component-container\",\n  styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n  @Element() el: HTMLIcInputComponentContainerElement;\n\n  /**\n   * The appearance of the input component container.\n   */\n  @Prop() appearance?: \"dark\" | \"default\" = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `appearance` to \"dark\" instead.\n   */\n  @Prop() dark?: boolean = false;\n\n  /**\n   *  If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   *  If `true`, the input component container will fill the width of the container it is in.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   *  If `true`, the input component container will allow for multiple lines.\n   */\n  @Prop() multiLine: boolean = false;\n\n  /**\n   *  If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * The size of the input component container component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   *  If `true`, the validation will display inline.\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  render() {\n    const {\n      small,\n      size,\n      validationStatus,\n      disabled,\n      readonly,\n      multiLine,\n      fullWidth,\n      dark,\n      appearance,\n      validationInline,\n    } = this;\n    const hasValidationStatus =\n      this.validationStatus !== \"\" && !this.disabled && !this.readonly\n        ? true\n        : false;\n    return (\n      <Host\n        class={{\n          [\"small\"]: small || size === \"small\",\n          [validationStatus]: hasValidationStatus,\n          [\"disabled\"]: disabled,\n          [\"readonly\"]: readonly,\n          [\"multiline\"]: multiLine,\n          [\"fullwidth\"]: fullWidth,\n          [\"dark\"]: dark || appearance === \"dark\",\n        }}\n      >\n        <div\n          class={{\n            \"focus-indicator\": true,\n            dark: dark || appearance === \"dark\",\n          }}\n        >\n          {isSlotUsed(this.el, \"left-icon\") && (\n            <div\n              class={{\n                [\"icon-container\"]: true,\n              }}\n            >\n              <slot name=\"left-icon\" />\n            </div>\n          )}\n          <slot></slot>\n\n          {validationInline &&\n            validationStatus === IcInformationStatus.Success && (\n              <span\n                class={{\n                  [\"inline-success\"]: true,\n                }}\n                innerHTML={successIcon}\n              />\n            )}\n        </div>\n      </Host>\n    );\n  }\n}\n","ic-input-container .component-container {\n  display: flex;\n  flex-direction: column;\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-input-container\",\n  styleUrl: \"ic-input-container.css\",\n})\nexport class InputContainer {\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly?: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            [\"component-container\"]: true,\n            [\"disabled\"]: this.disabled,\n            [\"readonly\"]: this.readonly,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-menu: z-index of menu\n */\n\n@media (prefers-reduced-motion: no-preference) {\n  :host(.open) .menu {\n    transition: max-height var(--ic-transition-duration-slow);\n  }\n}\n\n:host {\n  border-radius: var(--ic-border-radius);\n  max-height: 0;\n  width: var(--input-width, 20rem);\n  color: var(--ic-color-primary-text);\n  background-color: var(--ic-architectural-white);\n  position: relative;\n  z-index: var(--ic-z-index-menu);\n  box-sizing: border-box;\n  box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(:not(.no-focus):focus-within) {\n  box-shadow: var(--ic-border-focus);\n}\n\n#retry-button::part(button) {\n  height: var(--ic-space-lg);\n}\n\n.small #retry-button::part(button) {\n  height: var(--ic-space-md);\n}\n\n:host(.on-dialog) {\n  inset: auto !important;\n}\n\n.menu {\n  text-decoration: none;\n  list-style-type: none;\n  border: var(--ic-border-width) solid var(--ic-architectural-400);\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-architectural-white);\n  visibility: hidden;\n  max-height: 0;\n  overflow-y: hidden;\n}\n\n.menu-scroll {\n  overflow-y: auto;\n}\n\n.menu:focus-visible {\n  outline: none;\n}\n\n:host(.open) {\n  max-height: none;\n  display: block;\n}\n\n:host(.open) .menu {\n  visibility: visible;\n  max-height: 20.125rem;\n}\n\n:host(.full-width) {\n  width: 100%;\n}\n\n.option {\n  padding: 0.5rem 0.438rem;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n\n.option:not(.loading-option) {\n  justify-content: space-between;\n}\n\n:host(.small) .option {\n  padding: 0.25rem 0.438rem;\n}\n\n.option:last-child {\n  border-radius: 0 0 var(--ic-space-1px) var(--ic-space-1px);\n}\n\n.option:first-child {\n  border-radius: var(--ic-space-1px) var(--ic-space-1px) 0 0;\n}\n\n.option:not(.disabled-option):hover {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n.option:not(.disabled-option):active {\n  background-color: var(--ic-action-dark-bg-active);\n}\n\n.option:focus-visible {\n  outline: var(--ic-hc-focus-outline);\n}\n\n.option:not(.disabled-option) .option-description {\n  color: var(--ic-color-secondary-text);\n}\n\n.option .option-label {\n  display: flex;\n  flex-direction: row;\n  align-items: top;\n}\n\n.option .option-element {\n  margin-top: var(--ic-space-xxs);\n}\n\n.option .option-icon {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n  margin-top: var(--ic-space-xxs);\n  margin-right: var(--ic-space-xxxs);\n}\n\n.option-text-container {\n  pointer-events: none;\n}\n\n.option.loading-option .option-text-container {\n  margin-left: 0.625rem;\n  color: var(--ic-color-secondary-text);\n}\n\n.error-icon-svg {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n  fill: var(--ic-status-error);\n  align-self: center;\n  display: flex;\n  margin-right: calc(var(--ic-space-xxs) * 1.2);\n}\n\n.loading-error-info {\n  display: flex;\n}\n\n.check-icon {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  margin-left: 0.5rem;\n  pointer-events: none;\n}\n\n.focused-option .check-icon * {\n  fill: currentcolor;\n}\n\n.option-group-title {\n  padding: 1.5rem 0.438rem 0.5rem;\n  color: var(--ic-color-tertiary-text);\n}\n\n:host(.small) .option-group-title {\n  padding: 0.75rem 0.438rem 0.25rem;\n}\n\n.last-recommended-option {\n  border-bottom: var(--ic-border-default);\n}\n\n.disabled-option {\n  color: var(--ic-architectural-200);\n  cursor: default;\n  pointer-events: none;\n}\n\n.focused-option,\n.focused-option .option-description {\n  background-color: var(--ic-focus-blue) !important;\n  color: var(--ic-color-white-text) !important;\n}\n\n:host(.no-results) li {\n  cursor: no-drop;\n}\n\n:host(.no-results) li:hover {\n  background-color: transparent;\n}\n\n@media (forced-colors: active) {\n  .focused-option:focus {\n    outline: none;\n    border: 0.125rem solid transparent;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Method,\n  State,\n  Watch,\n  Fragment,\n} from \"@stencil/core\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\nimport {\n  IcActivationTypes,\n  IcMenuOption,\n  IcSizesNoLarge,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n  IcOptionSelectEventDetail,\n  IcMenuChangeEventDetail,\n  IcMenuOptionIdEventDetail,\n} from \"./ic-menu.types\";\nimport { IcSearchBarSearchModes } from \"../ic-search-bar/ic-search-bar.types\";\n\n@Component({\n  tag: \"ic-menu\",\n  styleUrl: \"ic-menu.css\",\n  scoped: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Menu {\n  private disabledOptionSelected: boolean = false;\n  private hasPreviouslyBlurred: boolean = false;\n  private hasTimedOut: boolean = false;\n  private isLoading: boolean = false;\n  private isSearchBar: boolean = false;\n  private isSearchableSelect: boolean = false;\n  private menu: HTMLUListElement;\n  private popperInstance: PopperInstance;\n  // Prevents menu re-opening immediately after it is closed on blur when clicking input.\n  private preventClickOpen: boolean = false;\n  private ungroupedOptions: IcMenuOption[] = [];\n\n  @Element() host: HTMLIcMenuElement;\n\n  @State() focusFromSearchKeypress: boolean = false;\n  @State() initialOptionsListRender: boolean = false;\n  @State() keyboardNav: boolean = false;\n  @State() optionHighlighted: string;\n  @State() preventIncorrectTabOrder: boolean = false;\n\n  /**\n   * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.\n   */\n  @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n  /**\n   * The reference to an anchor element the menu will position itself from when rendered.\n   */\n  @Prop() anchorEl!: HTMLElement;\n\n  /**\n   * @internal If `true`, autofocus will be applied on selected item when menu is open.\n   */\n  @Prop() autoFocusOnSelected: boolean = true;\n\n  /**\n   *  If `true`, the menu will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The reference to the input element.\n   */\n  @Prop() inputEl!: HTMLElement;\n\n  /**\n   * The label for the input element.\n   */\n  @Prop() inputLabel!: string;\n\n  /**\n   * The custom name for the label field for IcMenuOption.\n   */\n  @Prop() labelField: string = \"label\";\n\n  /**\n   * The ID of the menu.\n   */\n  @Prop() menuId!: string;\n\n  /**\n   * If `true`, the menu will be displayed open.\n   */\n  @Prop({ reflect: true }) open!: boolean;\n\n  @Watch(\"open\")\n  watchOpenHandler(): void {\n    if (!this.open && this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  /**\n   * @internal - The parent element if ic-menu is nested inside another component.\n   */\n  @Prop() parentEl?: HTMLElement;\n\n  /**\n   * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.\n   */\n  @Prop() searchMode?: IcSearchBarSearchModes = \"navigation\";\n\n  /**\n   * @internal If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.\n   */\n  @Prop() selectOnEnter?: boolean = false;\n\n  /**\n   * The size of the menu component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The possible menu selection options.\n   */\n  @Prop() options!: IcMenuOption[];\n\n  @Watch(\"options\")\n  watchOptionsHandler(newOptions: IcMenuOption[]): void {\n    this.hasTimedOut = newOptions.some((opt) => opt.timedOut);\n    this.isLoading = newOptions.some((opt) => opt.loading);\n    this.ungroupedOptions = [];\n    this.loadUngroupedOptions();\n  }\n\n  /**\n   * The value of the currently selected option.\n   */\n  @Prop({ mutable: true }) value!: string;\n\n  @Watch(\"value\")\n  watchValueHandler(): void {\n    this.menuValueChange.emit({ value: this.value });\n  }\n\n  /**\n   * The custom name for the value field for IcMenuOption.\n   */\n  @Prop() valueField: string = \"value\";\n\n  /**\n   * @internal Emitted when key is pressed while menu is open\n   */\n  @Event() menuKeyPress: EventEmitter<{ isNavKey: boolean; key: string }>;\n\n  /**\n   * @internal Emitted when an option has been highlighted\n   */\n  @Event() menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;\n\n  /**\n   * @internal Emitted when an option is selected.\n   */\n  @Event() menuOptionSelect!: EventEmitter<IcOptionSelectEventDetail>;\n\n  /**\n   * @internal Emitted when state of menu changes (i.e. open or close).\n   */\n  @Event() menuStateChange!: EventEmitter<IcMenuChangeEventDetail>;\n\n  /**\n   * @internal Emitted when menu value changes.\n   */\n  @Event() menuValueChange: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * @internal Emitted when the retry button is clicked\n   */\n  @Event() retryButtonClicked: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * @internal Emitted when the timeout menu loses focus\n   */\n  @Event() timeoutBlur: EventEmitter<{ ev: FocusEvent }>;\n\n  /**\n   * @internal Emitted when the ungrouped options have been set.\n   */\n  @Event() ungroupedOptionsSet: EventEmitter<{ options: IcMenuOption[] }>;\n\n  connectedCallback(): void {\n    this.getParentEl(this.parentEl);\n\n    if (this.isSearchBar) {\n      if (this.searchMode === \"navigation\") this.setHighlightedOption(0);\n      this.initialOptionsListRender = true;\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n    }\n    this.parentEl.removeEventListener(\"icClear\", this.handleClearListener);\n    this.parentEl.removeEventListener(\n      \"icSubmitSearch\",\n      this.handleSubmitSearch\n    );\n  }\n\n  componentWillLoad(): void {\n    this.loadUngroupedOptions();\n    this.parentEl.addEventListener(\"icClear\", this.handleClearListener);\n    this.parentEl.addEventListener(\"icSubmitSearch\", this.handleSubmitSearch);\n    this.hasTimedOut = this.options?.some((opt) => opt.timedOut);\n    this.isLoading = this.options?.some((opt) => opt.loading);\n  }\n\n  componentDidLoad(): void {\n    if (\n      this.isSearchBar &&\n      (this.parentEl as HTMLIcSearchBarElement).disableFilter\n    ) {\n      this.focusFromSearchKeypress = true;\n    }\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.open, propName: \"open\" },\n        { prop: this.options, propName: \"options\" },\n        { prop: this.menuId, propName: \"menu-id\" },\n        { prop: this.inputLabel, propName: \"input-label\" },\n        //NOTE: no check for value, input-el or anchor-el as otherwise get console errors on first load of select component\n      ],\n      \"Menu\"\n    );\n  }\n\n  componentDidUpdate(): void {\n    const inputValueInOptions: boolean = this.options.some(\n      (option) => option[this.valueField] === this.value\n    );\n\n    const optionHighlightedIsSet =\n      this.optionHighlighted !== null &&\n      this.optionHighlighted !== undefined &&\n      this.optionHighlighted !== \"\";\n\n    if (this.open && this.options.length !== 0) {\n      if (\n        this.value &&\n        this.keyboardNav &&\n        inputValueInOptions &&\n        this.autoFocusOnSelected &&\n        !this.isSearchableSelect\n      ) {\n        this.scrollToSelected(this.menu);\n      } else if (\n        this.inputEl.tagName !== \"IC-TEXT-FIELD\" &&\n        this.inputEl.tagName !== \"INPUT\"\n      ) {\n        this.menu.focus();\n      } else if (\n        optionHighlightedIsSet &&\n        !this.focusFromSearchKeypress &&\n        !this.preventIncorrectTabOrder\n      ) {\n        const highlightedEl = this.host.querySelector(\n          `li[data-value=\"${this.optionHighlighted}\"]`\n        ) as HTMLElement;\n\n        if (highlightedEl) {\n          highlightedEl.focus();\n        }\n      }\n    }\n\n    if (this.open && !this.value && this.selectOnEnter) {\n      this.scrollToSelected(this.menu);\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.open && !this.popperInstance && this.anchorEl) {\n      this.initPopperJs(this.anchorEl);\n    }\n\n    if (this.open && !!this.options.length) {\n      this.setMenuScrollbar();\n    }\n  }\n\n  /**\n   * @internal If menu is opened with the mouse, emit menuStateChange custom event.\n   */\n  @Method()\n  async handleClickOpen(): Promise<void> {\n    if (!this.preventClickOpen) {\n      this.menuStateChange.emit({ open: !this.open });\n      this.keyboardNav = false;\n    }\n    this.preventClickOpen = false;\n  }\n\n  /**\n   * Used alongside activationType\n   * If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.\n   * @param {KeyboardEvent} event The keyboard event which is available when handleKeyboardOpen is invoked.\n   */\n  @Method()\n  async handleKeyboardOpen(event: KeyboardEvent): Promise<void> {\n    this.keyboardNav = false;\n\n    if (this.activationType === \"automatic\") {\n      this.autoSetInputValueKeyboardOpen(event);\n    } else {\n      this.manSetInputValueKeyboardOpen(event);\n    }\n  }\n\n  /**\n   * @internal Used to highlight the first option in the menu.\n   */\n  @Method()\n  async handleSetFirstOption(): Promise<void> {\n    this.setHighlightedOption(0);\n  }\n\n  /**\n   * @internal Used to initialize popperJS with an anchor element.\n   * 5/12/2023: Tested with Floating UI, however, discovered inconsistent\n   * boundary behaviour so sticking with PopperJS.\n   */\n  @Method()\n  async initPopperJs(anchor: HTMLElement) {\n    this.popperInstance = createPopper(anchor, this.host, {\n      placement: \"bottom\",\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 7],\n          },\n        },\n        {\n          name: \"flip\",\n          options: {\n            fallbackPlacements: [\"top\"],\n            rootBoundary: \"viewport\",\n          },\n        },\n      ],\n    });\n  }\n\n  private handleClearListener = (): void => {\n    this.optionHighlighted = \"\";\n  };\n\n  private handleSubmitSearch = (): void => {\n    const highlightedOptionIndex = this.options.findIndex(\n      (option) => option[this.valueField] === this.optionHighlighted\n    );\n\n    this.setInputValue(highlightedOptionIndex);\n  };\n\n  private handleMenuChange = (open: boolean, focusInput?: boolean): void => {\n    this.menuStateChange.emit({ open, focusInput });\n\n    if (!open && focusInput !== false) {\n      this.inputEl.focus();\n      this.preventClickOpen = false;\n    }\n  };\n\n  private setNextOptionValue = (selectedOptionIndex: number): void => {\n    if (this.ungroupedOptions[selectedOptionIndex + 1]) {\n      this.menuOptionSelect.emit({\n        value: this.ungroupedOptions[selectedOptionIndex + 1][this.valueField],\n        optionId: this.getOptionId(\n          this.ungroupedOptions[selectedOptionIndex + 1][this.valueField]\n        ),\n      });\n    } else {\n      this.menuOptionSelect.emit({\n        value: this.ungroupedOptions[0][this.valueField],\n        optionId: this.getOptionId(this.ungroupedOptions[0][this.valueField]),\n      });\n    }\n  };\n\n  private setPreviousOptionValue = (selectedOptionIndex: number): void => {\n    if (this.ungroupedOptions[selectedOptionIndex - 1]) {\n      this.menuOptionSelect.emit({\n        value: this.ungroupedOptions[selectedOptionIndex - 1][this.valueField],\n        optionId: this.getOptionId(\n          this.ungroupedOptions[selectedOptionIndex - 1][this.valueField]\n        ),\n      });\n    } else {\n      this.menuOptionSelect.emit({\n        value:\n          this.ungroupedOptions[this.ungroupedOptions.length - 1][\n            this.valueField\n          ],\n        optionId: this.getOptionId(\n          this.ungroupedOptions[this.ungroupedOptions.length - 1][\n            this.valueField\n          ]\n        ),\n      });\n    }\n  };\n\n  private getParentEl = (parent: HTMLElement) => {\n    if (parent.tagName === \"IC-SEARCH-BAR\") {\n      this.isSearchBar = true;\n    } else if (\n      parent.tagName === \"IC-SELECT\" &&\n      parent.getAttribute(\"searchable\") !== null &&\n      parent.getAttribute(\"searchable\") !== undefined\n    ) {\n      this.isSearchableSelect = true;\n    }\n  };\n\n  private arrowBehaviour = (event: KeyboardEvent): void => {\n    event.preventDefault();\n    this.handleMenuChange(true);\n  };\n\n  private setMenuOptions = () =>\n    this.isSearchBar ? this.options : this.ungroupedOptions;\n\n  private setHighlightedOption = (highlightedIndex: number): void => {\n    const menuOptions = this.setMenuOptions();\n\n    menuOptions[highlightedIndex] &&\n      !menuOptions[highlightedIndex].timedOut &&\n      (this.optionHighlighted =\n        menuOptions[highlightedIndex][this.valueField] || undefined);\n  };\n\n  private autoSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n    const selectedOptionIndex = this.ungroupedOptions.findIndex(\n      (option) => option[this.valueField] === this.value\n    );\n\n    this.keyboardNav = false;\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        this.keyboardNav = true;\n        this.arrowBehaviour(event);\n        this.setNextOptionValue(selectedOptionIndex);\n        break;\n      case \"ArrowUp\":\n        this.keyboardNav = true;\n        this.arrowBehaviour(event);\n        this.setPreviousOptionValue(selectedOptionIndex);\n        break;\n      case \" \":\n      case \"Enter\":\n        if ((event.target as HTMLElement).id !== \"clear-button\") {\n          this.handleMenuChange(true);\n        }\n        break;\n    }\n  };\n\n  private manSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n    const menuOptions = this.setMenuOptions();\n\n    this.keyboardNav = false;\n\n    const highlightedOptionIndex = menuOptions.findIndex(\n      (option) => option[this.valueField] === this.optionHighlighted\n    );\n\n    const getOptionId = (index: number): string =>\n      Array.from(this.host.querySelectorAll(\"li\"))[index]?.id;\n\n    const isOpen: boolean =\n      this.isSearchBar || this.isSearchableSelect || this.open;\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        this.keyboardNav = true;\n        this.arrowBehaviour(event);\n        if (highlightedOptionIndex < menuOptions.length - 1) {\n          this.setHighlightedOption(highlightedOptionIndex + 1);\n          this.menuOptionId.emit({\n            optionId: getOptionId(highlightedOptionIndex + 1),\n          });\n        } else {\n          this.setHighlightedOption(0);\n          this.menuOptionId.emit({\n            optionId: getOptionId(0),\n          });\n        }\n        this.preventIncorrectTabOrder = false;\n        this.focusFromSearchKeypress = false;\n        break;\n      case \"ArrowUp\":\n        this.keyboardNav = true;\n        this.arrowBehaviour(event);\n        if (\n          highlightedOptionIndex <= 0 ||\n          highlightedOptionIndex > menuOptions.length + 1\n        ) {\n          this.setHighlightedOption(menuOptions.length - 1);\n          this.menuOptionId.emit({\n            optionId: getOptionId(menuOptions.length - 1),\n          });\n        } else {\n          this.setHighlightedOption(highlightedOptionIndex - 1);\n          this.menuOptionId.emit({\n            optionId: getOptionId(highlightedOptionIndex - 1),\n          });\n        }\n        this.preventIncorrectTabOrder = false;\n        this.focusFromSearchKeypress = false;\n        break;\n      case \"Home\":\n        this.keyboardNav = true;\n        event.preventDefault();\n        this.arrowBehaviour(event);\n        this.setHighlightedOption(0);\n        this.menuOptionId.emit({\n          optionId: getOptionId(0),\n        });\n        break;\n      case \"End\":\n        this.keyboardNav = true;\n        event.preventDefault();\n        this.arrowBehaviour(event);\n        this.setHighlightedOption(menuOptions.length - 1);\n        this.menuOptionId.emit({\n          optionId: getOptionId(menuOptions.length - 1),\n        });\n        break;\n      case \" \":\n        if (this.isSearchBar || this.isSearchableSelect) {\n          break;\n        } else {\n          if ((event.target as HTMLElement).id !== \"clear-button\") {\n            this.handleMenuChange(true);\n          }\n        }\n        break;\n      case \"Enter\":\n        event.preventDefault();\n        if (isOpen) {\n          if (highlightedOptionIndex >= 0) {\n            if (menuOptions[highlightedOptionIndex] !== undefined) {\n              if (\n                this.isSearchBar &&\n                menuOptions[highlightedOptionIndex].disabled === true\n              ) {\n                this.disabledOptionSelected = true;\n              } else {\n                this.setInputValue(highlightedOptionIndex);\n                this.value =\n                  menuOptions[highlightedOptionIndex][this.valueField];\n              }\n            }\n          } else {\n            this.setInputValue(highlightedOptionIndex);\n          }\n        } else {\n          this.handleMenuChange(true);\n        }\n        break;\n      case \"Escape\":\n        if (this.open) {\n          event.stopImmediatePropagation();\n        }\n        this.handleMenuChange(false);\n        this.menuOptionId.emit({ optionId: undefined });\n        break;\n      case \"Shift\":\n      case \"Tab\":\n        if (this.isSearchBar) {\n          this.keyboardNav = true;\n        }\n        this.preventIncorrectTabOrder = true;\n        break;\n      case \"Backspace\":\n        if (this.isSearchBar) {\n          (this.parentEl as HTMLIcSearchBarElement).setFocus();\n          if (this.searchMode === \"navigation\") this.setHighlightedOption(0);\n        } else if (this.isSearchableSelect) {\n          (this.parentEl as HTMLIcSelectElement).setFocus();\n        }\n        this.focusFromSearchKeypress = true;\n        break;\n      default:\n        if (event.key !== \"Tab\") {\n          if (this.isSearchBar) {\n            (this.parentEl as HTMLIcSearchBarElement).setFocus();\n            if (this.searchMode === \"navigation\") this.setHighlightedOption(0);\n          } else if (this.isSearchableSelect) {\n            (this.parentEl as HTMLIcSelectElement).setFocus();\n          }\n          this.focusFromSearchKeypress = true;\n        }\n        break;\n    }\n  };\n\n  private setInputValue = (highlightedOptionIndex: number) => {\n    const menuOptions = this.setMenuOptions();\n\n    if (menuOptions[highlightedOptionIndex] !== undefined) {\n      this.menuOptionSelect.emit({\n        value: menuOptions[highlightedOptionIndex][this.valueField],\n      });\n      this.optionHighlighted = undefined;\n      this.menuOptionId.emit({ optionId: undefined });\n    }\n    if (!this.hasTimedOut) this.handleMenuChange(false);\n    else (this.parentEl as HTMLIcSearchBarElement).setFocus();\n  };\n\n  private handleOptionClick = (event: Event): void => {\n    const { value, label } = (event.target as HTMLLIElement).dataset;\n    this.menuOptionSelect.emit({ value, label });\n    this.handleMenuChange(false);\n  };\n\n  private handleRetry = (): void => {\n    this.retryButtonClicked.emit({ value: this.value });\n  };\n\n  private handleRetryKeyDown = (ev: KeyboardEvent): void => {\n    if (ev.key === \"Enter\" || ev.key === \" \") {\n      ev.preventDefault();\n      this.retryButtonClicked.emit({ value: this.value, keyPressed: ev.key });\n    }\n  };\n\n  private handleBlur = (event: FocusEvent): void => {\n    if (event.relatedTarget !== this.inputEl) {\n      if (!this.menu.contains(event.relatedTarget as HTMLElement)) {\n        this.handleMenuChange(false, this.hasPreviouslyBlurred);\n      }\n    } else {\n      this.handleMenuChange(false);\n      this.preventClickOpen = true;\n    }\n    if (!this.isSearchBar) this.hasPreviouslyBlurred = !!event.relatedTarget;\n  };\n\n  private handleMouseDown = (event: Event): void => {\n    event.preventDefault();\n  };\n\n  private handleMenuKeyDown = (event: KeyboardEvent) => {\n    if (this.activationType === \"automatic\") {\n      this.autoSetValueOnMenuKeyDown(event);\n    } else if (this.activationType === \"manual\" && !this.isSearchBar) {\n      this.manSetInputValueKeyboardOpen(event);\n    }\n  };\n\n  private emitMenuKeyPress = (isNavKey: boolean, key: string) => {\n    this.menuKeyPress.emit({ isNavKey: isNavKey, key: key });\n  };\n\n  private autoSetValueOnMenuKeyDown = (event: KeyboardEvent): void => {\n    event.cancelBubble = true;\n    const selectedOptionIndex = this.ungroupedOptions.findIndex(\n      (option) => option[this.valueField] === this.value\n    );\n\n    const isSearchableSelect = this.inputEl.tagName === \"INPUT\";\n\n    this.keyboardNav = false;\n\n    switch (event.key) {\n      case \" \":\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n        if (!this.hasTimedOut) {\n          event.preventDefault();\n          this.setPreviousOptionValue(selectedOptionIndex);\n          this.keyboardNav = true;\n        }\n        break;\n      case \"ArrowDown\":\n        if (!this.hasTimedOut) {\n          event.preventDefault();\n          this.setNextOptionValue(selectedOptionIndex);\n          this.keyboardNav = true;\n        }\n        break;\n      case \"Home\":\n        this.menuOptionSelect.emit({\n          value: this.ungroupedOptions[0][this.valueField],\n        });\n        this.keyboardNav = true;\n        break;\n      case \"End\":\n        this.menuOptionSelect.emit({\n          value:\n            this.ungroupedOptions[this.ungroupedOptions.length - 1][\n              this.valueField\n            ],\n        });\n        this.keyboardNav = true;\n        break;\n      case \"Enter\":\n        !this.hasTimedOut && this.handleMenuChange(false);\n        break;\n      case \"Escape\":\n        this.handleMenuChange(false);\n        break;\n      case \"Backspace\":\n        if (isSearchableSelect) {\n          this.inputEl.focus();\n        }\n        break;\n      case \"Shift\":\n        break;\n      default:\n        if (isSearchableSelect && event.key !== \"Tab\" && !this.hasTimedOut) {\n          this.inputEl.focus();\n        }\n        if (event.key.length === 1) {\n          this.keyboardNav = true;\n        }\n        break;\n    }\n    this.emitMenuKeyPress(this.keyboardNav, event.key);\n  };\n\n  private handleMenuKeyUp = (event: KeyboardEvent): void => {\n    if (event.key === \"Tab\" && event.shiftKey) {\n      this.preventClickOpen = false;\n    }\n    if (event.key === \"Enter\" && this.disabledOptionSelected) {\n      this.disabledOptionSelected = false;\n      event.stopImmediatePropagation();\n    }\n  };\n\n  private getOptionId = (value: string): string => {\n    return `${this.menuId}-${value}`;\n  };\n\n  private getOptionAriaLabel = (\n    option: IcMenuOption,\n    parentOption: IcMenuOption\n  ): string => {\n    let ariaLabel = option[this.labelField];\n\n    if (option.description) {\n      ariaLabel = `${ariaLabel}, ${option.description}`;\n    }\n\n    if (option.element) {\n      ariaLabel = `${ariaLabel}, ${option.element.ariaLabel}`;\n    }\n\n    if (parentOption) {\n      return `${ariaLabel}, ${parentOption[this.labelField]} group`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  private getSortedOptions = (options: IcMenuOption[]): IcMenuOption[] => {\n    let sorted: IcMenuOption[] = [];\n    if (options.sort) {\n      sorted = options.sort((optionA, optionB) =>\n        optionA.recommended && !optionB.recommended ? -1 : 0\n      );\n    }\n    return sorted;\n  };\n\n  private isManualMode = this.activationType === \"manual\";\n\n  private scrollToSelected = (menu: HTMLUListElement) => {\n    const selectedOption = this.selectOnEnter\n      ? (this.host.querySelector(\n          `li[data-value=\"${this.optionHighlighted}\"]`\n        ) as HTMLElement)\n      : (menu.querySelector(\".option[aria-selected]\") as HTMLElement);\n\n    if (selectedOption) {\n      const elTop = selectedOption.offsetTop + selectedOption.offsetHeight;\n      if (\n        elTop > menu.scrollTop + menu.offsetHeight ||\n        elTop < menu.scrollTop + menu.offsetHeight\n      ) {\n        menu.scrollTop = selectedOption.offsetTop;\n      }\n      selectedOption.focus();\n    }\n  };\n\n  private loadUngroupedOptions = () => {\n    if (this.options.length > 0 && this.options.map) {\n      this.options.map((option) => {\n        if (option.children) {\n          option.children.map(\n            (option) => !option.disabled && this.ungroupedOptions.push(option)\n          );\n        } else if (!option.disabled) {\n          this.ungroupedOptions.push(option);\n        }\n      });\n    }\n    this.ungroupedOptions = this.getSortedOptions(this.ungroupedOptions);\n    this.ungroupedOptionsSet.emit({ options: this.ungroupedOptions });\n  };\n\n  private setMenuScrollbar = () => {\n    let optionsHeight = 0;\n    this.host\n      .querySelectorAll(\".option\")\n      .forEach((option) => (optionsHeight += option.clientHeight));\n\n    if (optionsHeight >= 320) {\n      this.menu.classList.add(\"menu-scroll\");\n    }\n  };\n\n  private handleTimeoutBlur = (ev: FocusEvent) => {\n    this.timeoutBlur.emit({ ev });\n  };\n\n  private optionContent = (option: IcMenuOption) => {\n    return (\n      <Fragment>\n        {option.loading && <ic-loading-indicator size=\"icon\" />}\n        <div class=\"option-text-container\">\n          <div class=\"option-label\">\n            {option.icon && (\n              <div\n                class=\"option-icon\"\n                innerHTML={option.icon}\n                aria-hidden=\"true\"\n              ></div>\n            )}\n            <ic-typography variant=\"body\" aria-hidden=\"true\">\n              <p>{option[this.labelField]}</p>\n            </ic-typography>\n          </div>\n          {option.description && (\n            <ic-typography\n              id={`${this.getOptionId(option[this.valueField])}-description`}\n              class=\"option-description\"\n              variant=\"caption\"\n              aria-hidden=\"true\"\n            >\n              <p>{option.description}</p>\n            </ic-typography>\n          )}\n          {option.element && (\n            <div\n              class=\"option-element\"\n              innerHTML={option.element.component}\n              aria-hidden=\"true\"\n            ></div>\n          )}\n        </div>\n        {!!option[this.valueField] &&\n          !!this.value &&\n          option[this.valueField].toLowerCase() === this.value?.toLowerCase() &&\n          this.parentEl.tagName !== \"IC-SEARCH-BAR\" && (\n            <span class=\"check-icon\" innerHTML={Check} />\n          )}\n      </Fragment>\n    );\n  };\n\n  private displayOption = (\n    option: IcMenuOption,\n    index?: number,\n    parentOption?: IcMenuOption\n  ): HTMLLIElement => {\n    const {\n      open,\n      value,\n      keyboardNav,\n      isManualMode,\n      initialOptionsListRender,\n      optionHighlighted,\n      options,\n    } = this;\n\n    return (\n      <li\n        id={this.getOptionId(option[this.valueField])}\n        class={{\n          option: true,\n          \"focused-option\": isManualMode\n            ? (keyboardNav || initialOptionsListRender) &&\n              option[this.valueField] === optionHighlighted\n            : keyboardNav && option[this.valueField] === value,\n          \"last-recommended-option\":\n            option.recommended &&\n            options[index + 1] &&\n            !options[index + 1].recommended,\n          \"disabled-option\": option.disabled,\n          \"loading-option\": option.loading,\n          timeout: option.timedOut,\n        }}\n        role=\"option\"\n        tabindex={\n          open &&\n          (option[this.valueField] === value ||\n            option[this.valueField] === optionHighlighted) &&\n          keyboardNav\n            ? \"0\"\n            : \"-1\"\n        }\n        aria-label={this.getOptionAriaLabel(option, parentOption)}\n        aria-selected={option[this.valueField] === value}\n        aria-disabled={option.disabled ? \"true\" : \"false\"}\n        onClick={!option.timedOut && !option.loading && this.handleOptionClick}\n        onBlur={this.handleBlur}\n        onMouseDown={this.handleMouseDown}\n        data-value={option[this.valueField]}\n        data-label={option[this.labelField]}\n      >\n        {option.timedOut ? (\n          <Fragment>\n            <div class=\"loading-error-info\">\n              <svg\n                class=\"error-icon-svg\"\n                aria-labelledby=\"error-title\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"#000000\"\n              >\n                <title id=\"error-title\">Error</title>\n                <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n                <path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\" />\n              </svg>\n              <ic-typography variant=\"label\">\n                {option[this.labelField]}\n              </ic-typography>\n            </div>\n            <ic-button\n              size=\"small\"\n              variant=\"tertiary\"\n              onClick={this.handleRetry}\n              onKeyDown={this.handleRetryKeyDown}\n              onBlur={this.handleTimeoutBlur}\n              id=\"retry-button\"\n            >\n              Retry\n            </ic-button>\n          </Fragment>\n        ) : (\n          this.optionContent(option)\n        )}\n      </li>\n    );\n  };\n\n  render() {\n    const {\n      inputLabel,\n      options,\n      menuId,\n      value,\n      fullWidth,\n      hasTimedOut,\n      isLoading,\n      small,\n      size,\n      open,\n      inputEl,\n      keyboardNav,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          \"full-width\": fullWidth,\n          \"no-focus\": inputEl?.tagName === \"INPUT\" || hasTimedOut || isLoading,\n          small: small || size === \"small\",\n          open: open,\n        }}\n      >\n        {options.length !== 0 && (\n          <ul\n            id={menuId}\n            class=\"menu\"\n            role=\"listbox\"\n            aria-label={inputLabel}\n            aria-activedescendant={\n              value != null && value !== \"\" ? this.getOptionId(value) : \"\"\n            }\n            tabindex={\n              open && !keyboardNav && inputEl?.tagName !== \"INPUT\" ? \"0\" : \"-1\"\n            }\n            ref={(el) => (this.menu = el)}\n            onKeyDown={this.handleMenuKeyDown}\n            onKeyUp={this.handleMenuKeyUp}\n            onBlur={this.handleBlur}\n          >\n            {this.getSortedOptions(options).map((option, index) => {\n              if (option.children) {\n                if (option.children.length > 0) {\n                  return (\n                    <div>\n                      <ic-typography\n                        class=\"option-group-title\"\n                        role=\"presentation\"\n                        variant=\"subtitle-small\"\n                      >\n                        <p>{option[this.labelField]}</p>\n                      </ic-typography>\n                      {option.children.map((childOption) =>\n                        this.displayOption(childOption, index, option)\n                      )}\n                    </div>\n                  );\n                } else {\n                  return null;\n                }\n              } else {\n                return this.displayOption(option, index);\n              }\n            })}\n          </ul>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-ee97e2a5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icTextFieldCss","inputIds","TextField","this","inheritedAttributes","showLeftIcon","hasLeftIconSlot","getMaxLengthExceeded","value","numChars","length","type","minValueUnattained","Number","min","maxValueExceeded","max","maxLength","maxLengthExceeded","onInput","ev","target","icInput","emit","onBlur","icBlur","onFocus","icFocus","isTextArea","rows","getInlineValidationText","getValidationText","validationText","hasStatus","status","disabled","showStatusText","IcInformationStatus","Success","validationInline","validationInlineInternal","handleFormReset","initialValue","undefined","inputId","debounceChanged","icChange","debounceEvent","debounce","watchValueHandler","newValue","inputEl","connectedCallback","disconnectedCallback","removeFormResetListener","el","componentWillLoad","inheritAttributes","IC_INHERITED_ARIA","readonly","addFormResetListener","removeDisabledFalse","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","handleKeyDown","icKeydown","event","setFocus","focus","iconEl","querySelector","render","name","required","size","placeholder","helperText","resize","validationStatus","spellcheck","inputmode","fullWidth","truncateValue","hiddenInput","disabledMode","placeholderText","currentStatus","Error","currentValidationText","maxNumChars","messageAriaLive","multiline","hiddenCharCountDescId","describedBy","getInputDescribedByText","trim","invalid","disabledText","renderHiddenInput","h","Host","class","hideLabel","for","multiLine","slot","Object","assign","id","ref","ariaActiveDescendant","ariaExpanded","ariaOwns","autocomplete","autocapitalize","autoFocus","role","isSlotUsed","isEmptyString","message","ariaLiveMode","variant","hidden"],"sources":["src/components/ic-text-field/ic-text-field.css?tag=ic-text-field&encapsulation=shadow","src/components/ic-text-field/ic-text-field.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  /**\n   * @prop --input-width: Width of the input field\n   */\n  display: block;\n}\n\n:host(.fullwidth) {\n  width: 100%;\n}\n\n::placeholder {\n  color: var(--ic-color-tertiary-text);\n  opacity: 1;\n}\n\ninput,\ntextarea {\n  border: 0;\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-architectural-white);\n  line-height: 1.5rem;\n  letter-spacing: 0.005rem;\n  width: 100%;\n  padding-right: var(--ic-space-xs);\n  padding-left: var(--ic-space-xs);\n}\n\ntextarea {\n  min-height: var(--ic-space-lg);\n  resize: vertical;\n  padding-top: 0.375rem;\n}\n\ninput:focus,\ntextarea:focus {\n  border: 0;\n  outline: 0;\n}\n\ninput:disabled,\ntextarea:disabled {\n  color: var(--ic-architectural-200);\n}\n\ninput.readonly,\ntextarea.readonly {\n  color: var(--ic-color-primary-text);\n}\n\n/* Chrome, Safari, Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\ninput[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\ntextarea.no-resize {\n  resize: none;\n}\n\n.maxlengthtext {\n  color: var(--ic-color-secondary-text);\n}\n\n.no-left-pad {\n  padding-left: 0;\n}\n\n::slotted([slot=\"icon\"]) {\n  fill: var(--ic-color-tertiary-text);\n}\n\n.has-value ::slotted([slot=\"icon\"]) {\n  fill: var(--ic-color-primary-text);\n}\n\n.charcount {\n  margin-right: calc(-1 * var(--ic-space-xxxs));\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n  display: none;\n}\n\ninput[type=\"search\"].truncate-value {\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n@media (forced-colors: active) {\n  input.readonly,\n  textarea.readonly {\n    color: canvastext;\n  }\n\n  .has-value ::slotted([slot=\"icon\"]) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  Method,\n  h,\n} from \"@stencil/core\";\nimport {\n  IcInformationStatus,\n  IcAutocompleteTypes,\n  IcAutocorrectStates,\n  IcInformationStatusOrEmpty,\n  IcValueEventDetail,\n  IcSizesNoLarge,\n} from \"../../utils/types\";\nimport {\n  inheritAttributes,\n  debounceEvent,\n  getInputDescribedByText,\n  renderHiddenInput,\n  isEmptyString,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  isSlotUsed,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcAriaAutocompleteTypes,\n  IcTextFieldInputModes,\n  IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n  tag: \"ic-text-field\",\n  styleUrl: \"ic-text-field.css\",\n  shadow: true,\n})\nexport class TextField {\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private inputEl: HTMLInputElement | HTMLTextAreaElement;\n  private showLeftIcon: boolean = this.hasLeftIconSlot();\n\n  @Element() el: HTMLIcTextFieldElement;\n\n  @State() numChars: number = 0;\n  @State() maxLengthExceeded: boolean = false;\n  @State() maxValueExceeded: boolean = false;\n  @State() minValueUnattained: boolean = false;\n\n  /**\n   * @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n   * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n   * @slot menu - an ic-menu component will appear below the input.\n   */\n\n  /**\n   * @internal The active element when focus is on the ic-menu items.\n   */\n  @Prop() ariaActiveDescendant?: string;\n\n  /**\n   * @internal Used to identify whether inputting any text triggers more predictions\n   */\n  @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n  /**\n   * @internal Used to identify if the slotted menu is rendered\n   */\n  @Prop() ariaExpanded: string;\n\n  /**\n   * @internal Used to identify any related child component\n   */\n  @Prop() ariaOwns: string;\n\n  /**\n   * The automatic capitalisation of the text value as it is entered/edited by the user.\n   * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n   */\n  @Prop() autocapitalize = \"off\";\n\n  /**\n   * The state of autocompletion the browser can apply on the text value.\n   */\n  @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n  /**\n   * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n  /**\n   * If `true`, the form control will have input focus when the page loads.\n   */\n  @Prop() autoFocus = false;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Specify whether the text field fills the full width of the container.\n   * If `true`, this overrides the --input-width CSS variable.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * @internal If `true`, the hidden form input will stop rendering for form submission.\n   */\n  @Prop() hiddenInput: boolean = true;\n\n  /**\n   * The ID for the input.\n   */\n  @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n   * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n   */\n  @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n   */\n  @Prop() max: string | number = undefined;\n\n  /**\n   * The maximum number of characters that can be entered in the field.\n   */\n  @Prop() maxLength: number = 0;\n\n  /**\n   * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n   */\n  @Prop() min: string | number = undefined;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * The placeholder value to be displayed.\n   */\n  @Prop() placeholder: string = \"\";\n\n  /**\n   * If `true`, the read only state will be set.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * If `true`, the input will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the multiline text area will be resizeable.\n   */\n  @Prop() resize: boolean = false;\n\n  /**\n   * @internal Used to set the role if not default textbox;\n   */\n  @Prop() role: string;\n\n  /**\n   * The number of rows to transform the text field into a text area with a specific height.\n   */\n  @Prop() rows: number = 1;\n\n  /**\n   * The size of the text field component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * If `true`, the value of the text field will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n  /**\n   * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n   */\n  @Prop() truncateValue?: boolean;\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop() type: IcTextFieldTypes = \"text\";\n\n  /**\n   * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   *  @internal If `true`, the validation will display inline.\n   */\n  @Prop() validationInlineInternal: boolean = false;\n\n  /**\n   * The validation state - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The validation state - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n   */\n  @Prop() debounce: number = 0;\n\n  @Watch(\"debounce\")\n  private debounceChanged() {\n    this.icChange = debounceEvent(this.icChange, this.debounce);\n  }\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\n  @State() initialValue = this.value;\n\n  @Watch(\"value\")\n  private watchValueHandler(newValue: string): void {\n    if (this.inputEl && this.inputEl.value !== newValue) {\n      this.inputEl.value = newValue;\n    }\n\n    this.getMaxLengthExceeded(newValue);\n\n    this.icChange.emit({ value: newValue });\n  }\n\n  /**\n   * @internal Emitted when the validationInlineInternal is `true`\n   */\n  @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when input loses focus.\n   */\n  @Event() icBlur: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when input gains focus.\n   */\n  @Event() icFocus: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() icInput: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when a keydown event occurred.\n   */\n  @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n  connectedCallback(): void {\n    this.debounceChanged();\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    if (this.value !== this.initialValue) {\n      this.watchValueHandler(this.value);\n    }\n\n    this.getMaxLengthExceeded(this.value);\n\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"title\",\n    ]);\n\n    if (this.readonly) {\n      this.maxLengthExceeded = false;\n      this.maxValueExceeded = false;\n      this.minValueUnattained = false;\n    }\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Text Field\"\n    );\n    if (this.validationInlineInternal) {\n      this.getInlineValidationText();\n    }\n  }\n\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    this.icKeydown.emit({ event: ev });\n  }\n\n  /**\n   * Sets focus on the native `input`.\n   */\n\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.inputEl) {\n      this.inputEl.focus();\n    }\n  }\n\n  private getMaxLengthExceeded = (value: string) => {\n    this.numChars = value.length;\n\n    if (this.type === \"number\") {\n      this.minValueUnattained =\n        value && Number(value) < Number(this.min) ? true : false;\n      this.maxValueExceeded = Number(value) > Number(this.max) ? true : false;\n    }\n\n    if (this.maxLength > 0) {\n      this.maxLengthExceeded = value.length > this.maxLength ? true : false;\n    }\n  };\n\n  private onInput = (ev: Event) => {\n    this.value = (ev.target as HTMLInputElement).value;\n    this.icInput.emit({ value: this.value });\n  };\n\n  private onBlur = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icBlur.emit({ value: value });\n  };\n\n  private onFocus = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icFocus.emit({ value: value });\n  };\n\n  private isTextArea = (): boolean => {\n    return this.rows > 1;\n  };\n\n  private getInlineValidationText = () => {\n    this.getValidationText.emit({ value: this.validationText });\n  };\n\n  private hasLeftIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    return iconEl !== null;\n  }\n\n  private hasStatus = (status: IcInformationStatusOrEmpty): boolean => {\n    return status !== \"\" && !this.disabled;\n  };\n\n  private showStatusText = (status: IcInformationStatusOrEmpty): boolean => {\n    return (\n      this.hasStatus(status) &&\n      !(status == IcInformationStatus.Success && this.validationInline) &&\n      !this.validationInlineInternal\n    );\n  };\n\n  private handleFormReset = (): void => {\n    this.value = this.initialValue;\n  };\n\n  render() {\n    const {\n      inputId,\n      name,\n      label,\n      required,\n      size,\n      placeholder,\n      helperText,\n      rows,\n      resize,\n      disabled,\n      value,\n      min,\n      max,\n      maxLength,\n      numChars,\n      readonly,\n      maxLengthExceeded,\n      minValueUnattained,\n      maxValueExceeded,\n      validationStatus,\n      validationText,\n      validationInline,\n      validationInlineInternal,\n      spellcheck,\n      inputmode,\n      fullWidth,\n      truncateValue,\n      hiddenInput,\n    } = this;\n\n    const disabledMode = readonly ? true : disabled;\n\n    const placeholderText = disabled ? \"\" : placeholder;\n\n    const currentStatus =\n      maxLengthExceeded || maxValueExceeded || minValueUnattained\n        ? IcInformationStatus.Error\n        : validationStatus;\n\n    const currentValidationText = maxLengthExceeded\n      ? \"Maximum length exceeded\"\n      : maxValueExceeded\n      ? `Maximum value of ${max} exceeded`\n      : minValueUnattained\n      ? `Minimum value of ${min} not met`\n      : validationText;\n\n    const maxNumChars = readonly ? 0 : maxLength;\n\n    const messageAriaLive =\n      maxLengthExceeded ||\n      maxValueExceeded ||\n      minValueUnattained ||\n      (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n        ? \"assertive\"\n        : \"polite\";\n\n    const showStatusText = this.showStatusText(currentStatus);\n    const multiline = this.isTextArea();\n    const hiddenCharCountDescId =\n      maxLength > 0 ? inputId + \"-charcount-desc\" : \"\";\n    const describedBy = (\n      hiddenCharCountDescId +\n      \" \" +\n      getInputDescribedByText(inputId, helperText !== \"\", showStatusText)\n    ).trim();\n\n    if (this.showLeftIcon && !readonly && disabledMode) {\n      this.showLeftIcon = false;\n    }\n\n    const invalid =\n      currentStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n    const disabledText = disabledMode && !readonly;\n\n    if (hiddenInput) {\n      renderHiddenInput(true, this.el, name, value, disabledMode);\n    }\n    return (\n      <Host class={{ [\"fullwidth\"]: fullWidth }}>\n        <ic-input-container readonly={readonly} disabled={disabledMode}>\n          {!this.hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabledText}\n              readonly={readonly}\n            ></ic-input-label>\n          )}\n\n          <ic-input-component-container\n            size={size}\n            validationStatus={currentStatus}\n            multiLine={multiline}\n            disabled={disabledMode}\n            readonly={readonly}\n            validationInline={validationInline}\n            fullWidth={fullWidth}\n          >\n            {this.showLeftIcon && (\n              <span\n                class={{\n                  [\"readonly\"]: readonly,\n                  [\"has-value\"]: value.length > 0,\n                }}\n                slot=\"left-icon\"\n              >\n                <slot name=\"icon\" />\n              </span>\n            )}\n\n            {!multiline && (\n              <input\n                id={inputId}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLInputElement)}\n                type={this.type}\n                min={min}\n                max={max}\n                value={value}\n                class={{\n                  [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n                  [\"readonly\"]: readonly,\n                  [\"truncate-value\"]: truncateValue,\n                }}\n                placeholder={placeholderText}\n                required={required}\n                disabled={disabledMode}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                aria-activedescendant={this.ariaActiveDescendant}\n                aria-expanded={this.ariaExpanded}\n                aria-owns={this.ariaOwns}\n                autocomplete={this.autocomplete}\n                autocapitalize={this.autocapitalize}\n                autoFocus={this.autoFocus}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                role={this.role}\n                {...this.inheritedAttributes}\n              ></input>\n            )}\n            {multiline && (\n              <textarea\n                id={inputId}\n                class={{\n                  [\"no-resize\"]: resize === false || readonly,\n                  [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n                  [\"readonly\"]: readonly,\n                }}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n                value={value}\n                rows={rows}\n                required={required}\n                disabled={disabledMode}\n                placeholder={placeholderText}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                autocapitalize={this.autocapitalize}\n                autoFocus={this.autoFocus}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                {...this.inheritedAttributes}\n              ></textarea>\n            )}\n            {isSlotUsed(this.el, \"clear-button\") && (\n              <slot name=\"clear-button\"></slot>\n            )}\n            {isSlotUsed(this.el, \"search-submit-button\") && (\n              <slot name=\"search-submit-button\"></slot>\n            )}\n          </ic-input-component-container>\n          {isSlotUsed(this.el, \"menu\") && <slot name=\"menu\"></slot>}\n          {(!isEmptyString(validationStatus) ||\n            !isEmptyString(validationText) ||\n            maxNumChars > 0 ||\n            maxValueExceeded ||\n            minValueUnattained) &&\n            !validationInlineInternal && (\n              <ic-input-validation\n                status={\n                  this.hasStatus(currentStatus) === false ||\n                  (currentStatus === IcInformationStatus.Success &&\n                    validationInline) ||\n                  validationInlineInternal\n                    ? \"\"\n                    : currentStatus\n                }\n                message={showStatusText ? currentValidationText : \"\"}\n                ariaLiveMode={messageAriaLive}\n                for={inputId}\n                fullWidth={fullWidth}\n              >\n                {!readonly && maxNumChars > 0 && (\n                  <div slot=\"validation-message-adornment\">\n                    <ic-typography\n                      variant=\"caption\"\n                      class={{\n                        [\"maxlengthtext\"]: true,\n                        [\"error\"]: maxLengthExceeded,\n                        [\"disabled\"]: disabledText,\n                      }}\n                    >\n                      <span\n                        aria-live=\"polite\"\n                        id={`${inputId}-charcount`}\n                        class=\"charcount\"\n                      >\n                        {numChars}/{maxNumChars}\n                      </span>\n                      <span hidden={true} id={hiddenCharCountDescId}>\n                        Field can contain a maximum of {maxNumChars} characters.\n                      </span>\n                    </ic-typography>\n                  </div>\n                )}\n              </ic-input-validation>\n            )}\n        </ic-input-container>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/types/components/ic-accordion-group/test/a11y/ic-accordion-group.test.a11y.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/components/ic-alert/test/a11y/ic-alert.test.a11y.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/components/ic-back-to-top/test/a11y/ic-back-to-top.test.a11y.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/components/ic-badge/test/a11y/ic-badge.test.a11y.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/components/ic-classification-banner/test/a11y/ic-classification-banner.test.a11y.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/components/ic-toast/test/a11y/ic-toast.test.a11y.d.ts

@@ -1 +0,0 @@
-export {};