@ukho/admiralty-core 4.0.0-next.7 → 4.0.0-next.8

package/dist/admiralty/p-e11fb21b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["watchForOptions","containerEl","tagName","onChange","MutationObserver","mutation","mutationList","getSelectedOption","observe","childList","subtree","newOption","forEach","mut","i","addedNodes","length","findCheckedOption","node","nodeType","undefined","el","options","toUpperCase","Array","from","querySelectorAll","find","o","value","autocompleteCss","AdmiraltyAutocompleteStyle0","keyCodes","isIosDevice","navigator","userAgent","match","isPrintableKeyCode","keyCode","filterOptions","searchTerm","filter","text","toLowerCase","indexOf","filterOptionsByValue","AutocompleteComponent","this","internalId","nextId","elementReferences","source","onValueChange","newVal","_","matches","matchFound","validChoiceMade","option","query","menuOpen","ariaHint","admiraltyChange","emit","_b","_a","onFocusedChange","oldVal","componentLostFocus","focused","focusedChanged","focusDifferentElement","focus","focusedInput","componentGainedFocus","selectAllText","inputElement","setSelectionRange","isQueryAnOption","map","templateInputValue","connectedCallback","async","childOpts","textContent","_c","forceUpdate","disconnectedCallback","clearTimeout","$pollInput","pollInputElement","getDirectInputChanges","setTimeout","inputReference","queryHasChanged","handleInputChange","target","hasAutoselect","autoselect","templateSuggestion","handleComponentBlur","newState","newQuery","confirmOnBlur","selected","handleListMouseLeave","hovered","handleOptionBlur","event","index","focusingOutsideComponent","relatedTarget","focusingInput","focusingAnotherOption","blurComponent","keepMenuOpen","handleInputBlur","focusingAnOption","queryEmpty","queryChanged","queryLongEnough","minLength","searchForOptions","showAllValues","optionsAvailable","handleInputClick","handleInputFocus","shouldReopenMenu","handleOptionFocus","handleOptionMouseEnter","handleOptionClick","selectedOption","handleOptionMouseDown","preventDefault","handleUpArrow","isNotAtTop","allowMoveUp","handleDownArrow","isNotAtBottom","allowMoveDown","handleSpace","focusIsOnOption","handleEnter","hasSelectedOption","handlePrintableKey","eventIsOnInput","handleKeyDown","render","id","inputId","hintId","errorId","inputFocused","noOptionsAvailable","queryNotEmpty","showNoOptionsFound","wrapperClassName","cssNamespace","optionFocused","optionClassName","assistiveHintID","ariaProps","hint","invalid","inputClassName","inputClassList","componentIsFocused","push","inputClasses","invalidMessage","disabled","menuClassName","menuModifierDisplayMenu","displayMenu","menuIsVisible","menuModifierVisibility","menuClassList","menuClasses","menuAttributes","class","_d","className","_e","_f","computedMenuAttributes","Object","assign","role","onMouseLeave","h","key","onKeyDown","label","for","autoComplete","join","onClick","onBlur","onInput","onFocus","name","placeholder","ref","type","required","showFocused","optionModifierFocused","iosPosinsetHtml","innerHTML","onMouseDown","onMouseEnter","optionEl","tabIndex","style","display","assistiveHint","visibility"],"sources":["src/components/autocomplete/optionsWatcher.ts","src/components/autocomplete/autocomplete.scss?tag=admiralty-autocomplete&encapsulation=scoped","src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["export const watchForOptions = <T extends HTMLElement>(containerEl: HTMLElement, tagName: string, onChange: (el: T | undefined) => void) => {\n  if (typeof MutationObserver === 'undefined') {\n    return;\n  }\n\n  const mutation = new MutationObserver(mutationList => {\n    onChange(getSelectedOption<T>(mutationList, tagName));\n  });\n  mutation.observe(containerEl, {\n    childList: true,\n    subtree: true,\n  });\n  return mutation;\n};\n\nconst getSelectedOption = <T extends HTMLElement>(mutationList: MutationRecord[], tagName: string): T | undefined => {\n  let newOption: T | undefined;\n  mutationList.forEach(mut => {\n    // eslint-disable-next-line @typescript-eslint/prefer-for-of\n    for (let i = 0; i < mut.addedNodes.length; i++) {\n      newOption = findCheckedOption<T>(mut.addedNodes[i], tagName) || newOption;\n    }\n  });\n  return newOption;\n};\n\n/**\n * The \"value\" key is only set on some components such as ion-select-option.\n * As a result, we create a default union type of HTMLElement and the \"value\" key.\n * However, implementers are required to provide the appropriate component type\n * such as HTMLIonSelectOptionElement.\n */\nexport const findCheckedOption = <T extends HTMLElement & { value?: any | null }>(node: Node, tagName: string) => {\n  /**\n   * https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n   * The above check ensures \"node\" is an Element (nodeType 1).\n   */\n  if (node.nodeType !== 1) {\n    return undefined;\n  }\n\n  // HTMLElement inherits from Element, so we cast \"el\" as T.\n  const el = node as T;\n\n  const options: T[] = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));\n\n  return options.find((o: T) => o.value === el.value);\n};\n","@import './autocomplete.vars';\n\n.autocomplete__wrapper {\n  position: relative;\n}\n\n.autocomplete__hint,\n.autocomplete__input {\n  appearance: none;\n  border: 2px solid $autocomplete-input-border-colour;\n  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */\n  box-sizing: border-box;\n  color: $autocomplete-text-colour;\n  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */\n  line-height: 1.5;\n  width: 100%;\n}\n\n.autocomplete__label {\n  background-color: transparent;\n  position: relative;\n  font-size: $autocomplete-label-font-size;\n}\n\n.autocomplete__input {\n  background-color: transparent;\n  position: relative;\n}\n\n.autocomplete__hint {\n  color: $autocomplete-text-colour;\n  position: absolute;\n}\n\n.autocomplete__input-wrapper {\n  position: relative;\n}\n\n.autocomplete__input--default {\n  padding: 12px;\n}\n\n.autocomplete__input--focused {\n  outline: 3px solid $autocomplete-focus-colour;\n  outline-offset: 0;\n  box-shadow: inset 0 0 0 2px $autocomplete-text-colour;\n}\n\n.autocomplete__input--show-all-values {\n  padding: 12px 35px 12px 12px; /* Space for arrow. Other padding should match .autocomplete__input--default. */\n  cursor: pointer;\n}\n\n.autocomplete__input--invalid {\n  border-color: $autocomplete-error-border-colour;\n}\n\n.autocomplete__input--disabled {\n  border-color: $autocomplete-disabled-border-colour;\n}\n\n.autocomplete__menu {\n  background-color: $autocomplete-background-colour;\n  border: 2px solid $autocomplete-input-border-colour;\n  border-top: 0;\n  color: $autocomplete-text-colour;\n  margin: 0;\n  max-height: 342px;\n  overflow-x: hidden;\n  padding: 0;\n  width: 100%;\n  width: calc(100% - 4px);\n}\n\n.autocomplete__menu--visible {\n  display: block;\n}\n\n.autocomplete__menu--hidden {\n  display: none;\n}\n\n.autocomplete__menu--overlay {\n  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;\n  left: 0;\n  position: absolute;\n  top: 100%;\n  z-index: 100;\n}\n\n.autocomplete__menu--inline {\n  position: relative;\n}\n\n.autocomplete__option {\n  border-bottom: solid $autocomplete-option-border-colour;\n  border-width: 1px 0;\n  color: $autocomplete-text-colour;\n  cursor: pointer;\n  display: block;\n  position: relative;\n  margin-bottom: 0;\n}\n\n.autocomplete__option:before {\n  content: none;\n}\n\n.autocomplete__option > * {\n  pointer-events: none;\n}\n\n.autocomplete__option:first-of-type {\n  border-top-width: 0;\n}\n\n.autocomplete__option:last-of-type {\n  border-bottom-width: 0;\n}\n\n.autocomplete__option--focused,\n.autocomplete__option:hover {\n  background-color: $autocomplete-option-hover-background-colour;\n  border-color: $autocomplete-option-hover-background-colour;\n  color: $autocomplete-option-hover-text-colour;\n  outline: none;\n}\n\n.autocomplete__option--no-results {\n  background-color: $autocomplete-option-no-results-background-colour;\n  color: $autocomplete-option-no-results-text-colour;\n  text-align: center;\n\n  margin-top: 50px;\n  margin-bottom: 50px;\n  cursor: not-allowed;\n}\n.autocomplete__option--no-results:hover {\n  background-color: $autocomplete-option-no-results-background-colour;\n  border-color: $autocomplete-option-no-results-background-colour;\n  color: $autocomplete-option-no-results-text-colour;\n  text-align: center;\n\n  margin-top: 50px;\n  margin-bottom: 50px;\n  cursor: not-allowed;\n}\n\n.autocomplete__hint,\n.autocomplete__input,\n.autocomplete__option {\n  font-size: $autocomplete-option-font-size;\n  font-weight: $autocomplete-option-font-weight;\n}\n\n.autocomplete__hint,\n.autocomplete__option {\n  padding: 10px;\n}\n\n.autocomplete-down-icon {\n  font-size: $autocomplete-icon-font-size;\n  font-weight: $autocomplete-icon-font-weight;\n  pointer-events: none;\n  position: absolute;\n  right: 12px;\n  top: 14px;\n}\n\nadmiralty-icon.disabled {\n  color: $autocomplete-dropdown-icon-colour;\n}\n\nadmiralty-input-invalid {\n  margin-top: 6px;\n}\n","/**\n * This component takes heavy inspiration from the autocomplete component created by alphagov: https://github.com/alphagov/accessible-autocomplete\n */\n\nimport { Component, forceUpdate, Prop, State, h, Element, EventEmitter, Event, Watch } from '@stencil/core';\nimport { watchForOptions } from './optionsWatcher';\nimport { AutoCompleteChangeEventDetail } from './autocomplete.interface';\n\ninterface Option {\n  text: string;\n  value: any;\n}\n\nconst keyCodes = {\n  13: 'enter',\n  27: 'escape',\n  32: 'space',\n  38: 'up',\n  40: 'down',\n};\n\nfunction isIosDevice() {\n  return typeof navigator !== 'undefined' && !!(navigator.userAgent.match(/(iPod|iPhone|iPad)/g) && navigator.userAgent.match(/AppleWebKit/g));\n}\n\nfunction isPrintableKeyCode(keyCode) {\n  return (\n    (keyCode > 47 && keyCode < 58) || // number keys\n    keyCode === 32 ||\n    keyCode === 8 || // spacebar or backspace\n    (keyCode > 64 && keyCode < 91) || // letter keys\n    (keyCode > 95 && keyCode < 112) || // numpad keys\n    (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)\n    (keyCode > 218 && keyCode < 223) // [\\]' (in order)\n  );\n}\n\nfunction filterOptions(options: Option[], searchTerm: string) {\n  return options.filter(({ text }) => text.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1);\n}\n\nfunction filterOptionsByValue(options: Option[], searchTerm: string) {\n  return options.filter(({ value }) => value.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1);\n}\n\n@Component({\n  tag: 'admiralty-autocomplete',\n  styleUrl: 'autocomplete.scss',\n  scoped: true,\n})\nexport class AutocompleteComponent {\n  private internalId = ++nextId;\n\n  @Element() el!: HTMLAdmiraltyAutocompleteElement;\n\n  /**\n   * Automatically select the first matching option.\n   */\n  @Prop() autoselect: boolean = false;\n  /**\n   * The default CSS namespace.\n   */\n  @Prop() cssNamespace: string = 'autocomplete';\n  /**\n   * When set to `overlay` this option will display the menu as an absolutely positioned overlay instead of inline.\n   */\n  @Prop() displayMenu: string = 'inline';\n  /**\n   * Prevent displaying options until the minimum string length is reached. Ignored when show all values is enabled.\n   */\n  @Prop() minLength: number = 0;\n  /**\n   * The name for the `<input>` element.\n   */\n  @Prop() name: string;\n  /**\n   * Populate the placeholder attribute on the `<input>` element.\n   */\n  @Prop() placeholder: string = '';\n  /**\n   * Toggle automatically confirming a selection when the field is blurred.\n   */\n  @Prop() confirmOnBlur: boolean = true;\n  /**\n   * Toggle whether to display the \"No results found\" message.\n   */\n  @Prop() showNoOptionsFound: boolean = true;\n  /**\n   * Toggle showing all values when the input is clicked, like a default dropdown.\n   */\n  @Prop() showAllValues: boolean = true;\n  /**\n   * Populates the required field on the `<input>` element.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * The hint that is provided to assistive users.\n   */\n  @Prop() assistiveHint: string =\n    'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.';\n\n  /**\n   * Sets HTML attributes and their values on the generated `ul` menu element. Useful for adding `aria-labelledby`\n   * and setting to the value of the `id` attribute on your existing label, to provide context to an assistive\n   * technology user. e.g.\n   * ```\n   * const menuAttributes = {\n   *   className: 'custom-className',\n   *   class: 'custom-class',\n   *   id: 'custom-id',\n   *   role: 'custom-role'\n   * }\n   * ```\n   * */\n  @Prop() menuAttributes: any;\n  /**\n   * Classes to add to the component's `<input>` element.\n   */\n  @Prop() inputClasses: string;\n  /**\n   * Classes to add to the menu displaying the options.\n   */\n  @Prop() menuClasses: string;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() label: string = null;\n  /**\n   * TThe text which will be used under the label to describe the input.\n   */\n  @Prop() hint: string = null;\n  /**\n   * Whether to show that the component is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n  /**\n   * The message to show when the component is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n  /**\n   * When `true`, the component cannot be interacted with.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | null = null;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyChange: EventEmitter<AutoCompleteChangeEventDetail>;\n\n  elementReferences = {};\n  $pollInput: NodeJS.Timeout;\n\n  source: Option[] = [];\n\n  @State() focused: number | null = null;\n  @State() hovered: number | null = null;\n  @State() menuOpen: boolean = false;\n  @State() options: Option[] = [];\n  @State() option: Option = null;\n  @State() query: string = null;\n  @State() validChoiceMade: boolean = false;\n  @State() selected: number | null = null;\n  @State() ariaHint: boolean = true;\n\n  @Watch('value')\n  onValueChange(newVal: string, _: string) {\n    if (this.source.length === 0) {\n      // If this is the initial render, the options won't have been set yet, so do nothing\n      return;\n    }\n    if (newVal && newVal.length > 0) {\n      const matches = filterOptionsByValue(this.source, newVal);\n      const matchFound = matches.length > 0;\n      this.options = matches;\n      this.validChoiceMade = matchFound;\n      this.option = matches[0];\n      this.query = matchFound ? matches[0].text : '';\n      this.menuOpen = false;\n      this.ariaHint = false;\n    } else {\n      this.options = [];\n      this.option = null;\n      this.query = '';\n      this.ariaHint = true;\n    }\n\n    this.admiraltyChange.emit({ value: this.option?.value ?? '' });\n  }\n\n  @Watch('focused')\n  onFocusedChange(newVal: number | null, oldVal: number | null) {\n    const componentLostFocus = this.focused === null;\n    const focusedChanged = oldVal !== newVal;\n    const focusDifferentElement = focusedChanged && !componentLostFocus;\n    if (focusDifferentElement) {\n      this.elementReferences[this.focused]?.focus();\n    }\n    const focusedInput = this.focused === -1;\n    const componentGainedFocus = focusedChanged && oldVal === null;\n    const selectAllText = focusedInput && componentGainedFocus;\n    if (selectAllText) {\n      const inputElement = this.elementReferences[this.focused];\n      inputElement.setSelectionRange(0, inputElement.value.length);\n    }\n  }\n\n  isQueryAnOption(query: string, options: Option[]) {\n    return options.map(({ text }) => this.templateInputValue(text).toLowerCase()).indexOf(query.toLowerCase()) !== -1;\n  }\n\n  connectedCallback() {\n    this.mutation = watchForOptions<HTMLAdmiraltyAutocompleteOptionElement>(this.el, 'admiralty-autocomplete-option', async () => {\n      this.source = this.childOpts.map(({ textContent, value }) => ({\n        text: textContent?.length > 0 ? textContent : value,\n        value: value ?? textContent,\n      }));\n      if (this.query === null && this.value?.length > 0) {\n        const matches = filterOptionsByValue(this.source, this.value);\n        this.options = matches;\n        this.option = matches[0];\n        this.query = matches[0]?.text ?? '';\n      }\n      forceUpdate(this);\n    });\n    // this.pollInputElement();\n  }\n\n  disconnectedCallback() {\n    clearTimeout(this.$pollInput);\n  }\n\n  // Applications like Dragon NaturallySpeaking will modify the\n  // `input` field by directly changing its `.value`. These events\n  // don't trigger our JavaScript event listeners, so we need to poll\n  // to handle when and if they occur.\n  pollInputElement() {\n    this.getDirectInputChanges();\n    this.$pollInput = setTimeout(() => {\n      this.pollInputElement();\n    }, 100);\n  }\n\n  getDirectInputChanges() {\n    const inputReference = this.elementReferences[-1];\n    const queryHasChanged = inputReference && inputReference.value !== this.query;\n\n    if (queryHasChanged) {\n      this.handleInputChange({ target: { value: inputReference.value } });\n    }\n  }\n\n  mutation: MutationObserver;\n\n  private get childOpts() {\n    return Array.from(this.el.querySelectorAll('admiralty-autocomplete-option'));\n  }\n\n  hasAutoselect() {\n    return isIosDevice() ? false : this.autoselect;\n  }\n\n  // This template is used when converting from a state.options object into a state.query.\n  templateInputValue(value) {\n    // const inputValueTemplate = this.templates && this.templates.inputValue;\n    // return inputValueTemplate ? inputValueTemplate(value) : value;\n    return value;\n  }\n\n  // This template is used when displaying results / suggestions.\n  templateSuggestion(value) {\n    // const suggestionTemplate = this.templates && this.templates.suggestion;\n    // return suggestionTemplate ? suggestionTemplate(value) : value;\n    return value;\n  }\n\n  handleComponentBlur(newState: { menuOpen: boolean; query: string }) {\n    let newQuery: string;\n    if (this.confirmOnBlur) {\n      newQuery = newState.query || this.query;\n      const matches = filterOptions(this.source, newQuery);\n      const matchFound = newQuery?.length > 0 && matches.length > 0;\n      const option = matchFound ? matches[0] : { value: null, text: '' };\n      this.value = option.value;\n    } else {\n      newQuery = this.query;\n    }\n    this.focused = null;\n    this.menuOpen = newState.menuOpen || false;\n    this.selected = null;\n    this.validChoiceMade = this.isQueryAnOption(newQuery, this.options);\n  }\n\n  handleListMouseLeave() {\n    this.hovered = null;\n  }\n\n  handleOptionBlur(event, index) {\n    const focusingOutsideComponent = event.relatedTarget === null;\n    const focusingInput = event.relatedTarget === this.elementReferences[-1];\n    const focusingAnotherOption = this.focused !== index && this.focused !== -1;\n    const blurComponent = (!focusingAnotherOption && focusingOutsideComponent) || !(focusingAnotherOption || focusingInput);\n    if (blurComponent) {\n      const keepMenuOpen = this.menuOpen && isIosDevice();\n      this.handleComponentBlur({\n        menuOpen: keepMenuOpen,\n        query: this.templateInputValue(this.options[this.selected]?.text ?? ''),\n      });\n    }\n  }\n\n  handleInputBlur(_) {\n    const focusingAnOption = this.focused !== -1;\n    if (!focusingAnOption) {\n      const keepMenuOpen = this.menuOpen && isIosDevice();\n      this.handleComponentBlur({\n        menuOpen: keepMenuOpen,\n        query: this.query,\n      });\n    }\n  }\n\n  handleInputChange(event) {\n    const autoselect = this.hasAutoselect();\n    const query = event.target.value;\n    const queryEmpty = query.length === 0;\n    const queryChanged = this.query !== query;\n    const queryLongEnough = query.length >= this.minLength;\n\n    this.query = query;\n    this.ariaHint = queryEmpty;\n\n    const searchForOptions = this.showAllValues || (!queryEmpty && queryChanged && queryLongEnough);\n    if (searchForOptions) {\n      const matches = filterOptions(this.source, this.query);\n      const optionsAvailable = matches.length > 0;\n      this.menuOpen = optionsAvailable;\n      this.options = matches;\n      this.selected = autoselect && optionsAvailable ? 0 : -1;\n      this.validChoiceMade = false;\n    } else if (queryEmpty || !queryLongEnough) {\n      this.menuOpen = false;\n      this.options = [];\n    }\n  }\n\n  handleInputClick(event) {\n    this.handleInputChange(event);\n  }\n\n  handleInputFocus(_) {\n    const shouldReopenMenu = !this.validChoiceMade && this.query?.length >= this.minLength && this.options.length > 0;\n\n    if (shouldReopenMenu) {\n      this.focused = -1;\n      this.menuOpen = shouldReopenMenu || this.menuOpen;\n      this.selected = -1;\n    } else {\n      this.focused = -1;\n    }\n  }\n\n  handleOptionFocus(index) {\n    this.focused = index;\n    this.hovered = null;\n    this.selected = index;\n  }\n\n  handleOptionMouseEnter(index) {\n    // iOS Safari prevents click event if mouseenter adds hover background colour\n    // See: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW4\n    if (!isIosDevice()) {\n      this.hovered = index;\n    }\n  }\n\n  handleOptionClick(_, index) {\n    const selectedOption = this.options[index];\n    this.value = selectedOption.value;\n    this.focused = -1;\n    this.hovered = null;\n    this.menuOpen = false;\n    this.selected = index;\n    this.validChoiceMade = true;\n    forceUpdate(this);\n  }\n\n  handleOptionMouseDown(event) {\n    // Safari triggers focusOut before click, but if you\n    // preventDefault on mouseDown, you can stop that from happening.\n    // If this is removed, clicking on an option in Safari will trigger\n    // `handleOptionBlur`, which closes the menu, and the click will\n    // trigger on the element underneath instead.\n    // See: http://stackoverflow.com/questions/7621711/how-to-prevent-blur-running-when-clicking-a-link-in-jquery\n    event.preventDefault();\n  }\n\n  handleUpArrow(event) {\n    event.preventDefault();\n    const isNotAtTop = this.selected !== -1;\n    const allowMoveUp = isNotAtTop && this.menuOpen;\n    if (allowMoveUp) {\n      this.handleOptionFocus(this.selected - 1);\n    }\n  }\n\n  handleDownArrow(event) {\n    event.preventDefault();\n    // if not open, open\n    if (this.showAllValues && this.menuOpen === false) {\n      event.preventDefault();\n      const matches = filterOptions(this.source, '');\n      this.menuOpen = true;\n      this.options = matches;\n      this.selected = 0;\n      this.focused = 0;\n      this.hovered = null;\n    } else if (this.menuOpen === true) {\n      const isNotAtBottom = this.selected !== this.options.length - 1;\n      const allowMoveDown = isNotAtBottom && this.menuOpen;\n      if (allowMoveDown) {\n        this.handleOptionFocus(this.selected + 1);\n      }\n    }\n  }\n\n  handleSpace(event) {\n    // if not open, open\n    if (this.showAllValues && this.menuOpen === false && this.query === '') {\n      event.preventDefault();\n      const matches = filterOptions(this.source, '');\n      this.menuOpen = true;\n      this.options = matches;\n    }\n    const focusIsOnOption = this.focused !== -1;\n    if (focusIsOnOption) {\n      event.preventDefault();\n      this.handleOptionClick(event, this.focused);\n    }\n  }\n\n  handleEnter(event) {\n    if (this.menuOpen) {\n      event.preventDefault();\n      const hasSelectedOption = this.selected >= 0;\n      if (hasSelectedOption) {\n        this.handleOptionClick(event, this.selected);\n      }\n    }\n  }\n\n  handlePrintableKey(event) {\n    const inputElement = this.elementReferences[-1];\n    const eventIsOnInput = event.target === inputElement;\n    if (!eventIsOnInput) {\n      // FIXME: This would be better if it was in componentDidUpdate,\n      // but using setState to trigger that seems to not work correctly\n      // in preact@8.1.0.\n      inputElement.focus();\n    }\n  }\n\n  handleKeyDown(event) {\n    switch (keyCodes[event.keyCode]) {\n      case 'up':\n        this.handleUpArrow(event);\n        break;\n      case 'down':\n        this.handleDownArrow(event);\n        break;\n      case 'space':\n        this.handleSpace(event);\n        break;\n      case 'enter':\n        this.handleEnter(event);\n        break;\n      case 'escape':\n        this.handleComponentBlur({\n          query: this.query,\n          menuOpen: this.menuOpen,\n        });\n        break;\n      default:\n        if (isPrintableKeyCode(event.keyCode)) {\n          this.handlePrintableKey(event);\n        }\n        break;\n    }\n  }\n\n  render() {\n    const id = this.el.id != '' ? this.el.id : `admiralty-autocomplete-${this.internalId}`;\n    const inputId = `${id}-input`;\n    const hintId = `${id}-hint`;\n    const errorId = `${id}-error`;\n\n    const inputFocused = this.focused === -1;\n    const noOptionsAvailable = this.options.length === 0;\n    const queryNotEmpty = this.query?.length !== 0;\n    const queryLongEnough = this.query?.length >= this.minLength;\n    const showNoOptionsFound = this.showNoOptionsFound && inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough;\n\n    const wrapperClassName = `${this.cssNamespace}__wrapper`;\n    const optionFocused = this.focused !== -1 && this.focused !== null;\n\n    const optionClassName = `${this.cssNamespace}__option`;\n\n    const assistiveHintID = id + '__assistiveHint';\n    const ariaProps = {\n      'aria-describedby': `${this.hint ? hintId : ''} ${this.ariaHint ? assistiveHintID : ''} ${this.invalid ? errorId : ''}`,\n      'aria-expanded': this.menuOpen ? 'true' : 'false',\n      'aria-activedescendant': optionFocused ? `${id}__option--${this.focused}` : null,\n      'aria-owns': `${id}__listbox`,\n      'aria-autocomplete': this.hasAutoselect() ? 'both' : 'list',\n    };\n\n    const inputClassName = `${this.cssNamespace}__input`;\n    const inputClassList = [inputClassName, this.showAllValues ? `${inputClassName}--show-all-values` : `${inputClassName}--default`];\n\n    const componentIsFocused = this.focused !== null;\n    if (componentIsFocused) {\n      inputClassList.push(`${inputClassName}--focused`);\n    }\n\n    if (this.inputClasses) {\n      inputClassList.push(this.inputClasses);\n    }\n\n    if (this.invalid && this.invalidMessage) {\n      inputClassList.push(`${inputClassName}--invalid`);\n    }\n\n    if (this.disabled) {\n      inputClassList.push(`${inputClassName}--disabled`);\n    }\n\n    const menuClassName = `${this.cssNamespace}__menu`;\n    const menuModifierDisplayMenu = `${menuClassName}--${this.displayMenu}`;\n    const menuIsVisible = this.menuOpen || showNoOptionsFound;\n    const menuModifierVisibility = `${menuClassName}--${menuIsVisible ? 'visible' : 'hidden'}`;\n\n    const menuClassList = [menuClassName, menuModifierDisplayMenu, menuModifierVisibility];\n\n    if (this.menuClasses) {\n      menuClassList.push(this.menuClasses);\n    }\n\n    if (this.menuAttributes?.class || this.menuAttributes?.className) {\n      menuClassList.push(this.menuAttributes?.class || this.menuAttributes?.className);\n    }\n\n    const computedMenuAttributes = {\n      // Copy the attributes passed as props\n      ...this.menuAttributes,\n      // And add the values computed for the autocomplete\n      id: `${id}__listbox`,\n      role: 'listbox',\n      onMouseLeave: this.handleListMouseLeave,\n    };\n\n    // Preact would override our computed `className`\n    // with the `class` from the `menuAttributes` so\n    // we need to clean it up from the computed attributes\n    delete computedMenuAttributes.class;\n\n    return (\n      <div class={wrapperClassName} onKeyDown={event => this.handleKeyDown(event)}>\n        {this.label ? (\n          <admiralty-label class=\"autocomplete__label\" disabled={this.disabled} for={inputId}>\n            {this.label}\n          </admiralty-label>\n        ) : null}\n        {this.hint ? (\n          <admiralty-hint id={hintId} disabled={this.disabled}>\n            {this.hint}\n          </admiralty-hint>\n        ) : null}\n        <div class=\"autocomplete__input-wrapper\">\n          <input\n            {...ariaProps}\n            disabled={this.disabled}\n            aria-disabled={this.disabled}\n            autoComplete=\"off\"\n            class={inputClassList.join(' ')}\n            id={inputId}\n            onClick={event => this.handleInputClick(event)}\n            onBlur={event => this.handleInputBlur(event)}\n            onInput={event => this.handleInputChange(event)}\n            onFocus={event => this.handleInputFocus(event)}\n            name={this.name}\n            placeholder={this.placeholder}\n            ref={inputElement => {\n              this.elementReferences[-1] = inputElement;\n            }}\n            type=\"text\"\n            role=\"combobox\"\n            required={this.required}\n            value={this.query}\n          />\n          <admiralty-icon class={`autocomplete-down-icon ${this.disabled ? 'disabled' : ''}`} icon-name={this.menuOpen || showNoOptionsFound ? 'angle-up' : 'angle-down'} />\n        </div>\n\n        <ul {...computedMenuAttributes} class={menuClassList.join(' ')}>\n          {this.options.map((option, index) => {\n            const showFocused = this.focused === -1 ? this.selected === index : this.focused === index;\n            const optionModifierFocused = showFocused && this.hovered === null ? ` ${optionClassName}--focused` : '';\n            const iosPosinsetHtml = isIosDevice()\n              ? `<span id=${id}__option-suffix--${index} style=\"border:0;clip:rect(0 0 0 0);height:1px;` +\n                'marginBottom:-1px;marginRight:-1px;overflow:hidden;padding:0;position:absolute;' +\n                'whiteSpace:nowrap;width:1px\">' +\n                ` ${index + 1} of ${this.options.length}</span>`\n              : '';\n\n            return (\n              <li\n                aria-selected={this.focused === index ? 'true' : 'false'}\n                class={`${optionClassName}${optionModifierFocused}`}\n                innerHTML={this.templateSuggestion(option.text) + iosPosinsetHtml}\n                id={`${id}__option--${index}`}\n                key={index}\n                onBlur={event => this.handleOptionBlur(event, index)}\n                onClick={event => this.handleOptionClick(event, index)}\n                onMouseDown={event => this.handleOptionMouseDown(event)}\n                onMouseEnter={() => this.handleOptionMouseEnter(index)}\n                ref={optionEl => {\n                  this.elementReferences[index] = optionEl;\n                }}\n                role=\"option\"\n                tabIndex={-1}\n                aria-posinset={index + 1}\n                aria-setsize={this.options.length}\n              />\n            );\n          })}\n\n          {showNoOptionsFound && <li class={`${optionClassName} ${optionClassName}--no-results`}>No results found</li>}\n        </ul>\n\n        <span id={assistiveHintID} style={{ display: 'none' }}>\n          {this.assistiveHint}\n        </span>\n        {this.invalid && this.invalidMessage && (\n          <admiralty-input-invalid id={errorId} style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>\n            {this.invalidMessage}\n          </admiralty-input-invalid>\n        )}\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"mappings":"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","ignoreList":[]}

package/dist/admiralty/p-f8e1cfce.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["progressBarCss","AdmiraltyProgressBarStyle0","ProgressBarComponent","this","id","progressId","progression","progressionChanged","progressionValue","render","label","error","h","key","class","for","value","max"],"sources":["src/components/progress-bar/progress-bar.scss?tag=admiralty-progress-bar&encapsulation=scoped","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@import 'progress-bar.vars.scss';\n\nprogress {\n  appearance: none;\n  background: $progress-bar-background-colour;\n  border: none;\n  box-sizing: border-box;\n  color: $progress-bar-text-colour;\n  display: inline-block;\n  font-size: $progress-bar-font-size;\n  flex: 1;\n  height: 1em;\n  width: 100%;\n\n  &[value].error::-webkit-progress-value {\n    background-color: $progress-bar-error-colour;\n  }\n\n  &[value].error::-moz-progress-bar {\n    background-color: $progress-bar-error-colour;\n  }\n\n  &[value]::-webkit-progress-value {\n    background-color: $progress-bar-success-colour;\n  }\n\n  &[value]::-moz-progress-bar {\n    background-color: $progress-bar-success-colour;\n  }\n}\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  scoped: true,\n})\nexport class ProgressBarComponent {\n  private id = `admiralty-progress-${++progressId}`;\n\n  /**\n   * If set, adds a label above the progress bar\n   */\n  @Prop() label?: string;\n\n  /**   * A value from 0 - 100 that visually represents the current progression\n   */\n  @Prop() progression: number = 0;\n\n  /**\n   * Set to true to indicate an error (turns the progress bar red)\n   */\n  @Prop() error: boolean = false;\n\n  /**\n   * Progress value, min:0, max: 100\n   */\n\n  @State() progressionValue: number = this.progression;\n\n  /**\n   * @internal\n   * Watches the progression prop for changes\n   * then updates the progressionValue state if the progression value is valid\n   */\n  @Watch('progression')\n  protected progressionChanged() {\n    if (this.progression && this.progression >= 0 && this.progression <= 100) {\n      this.progressionValue = this.progression;\n    }\n  }\n\n  render() {\n    const { id, label, error, progressionValue } = this;\n\n    return (\n      <div class=\"admiralty-progress\">\n        {label ? <admiralty-label for={id}>{label}</admiralty-label> : null}\n        <progress id={id} class={{ error: error }} value={progressionValue} max=\"100\" />\n      </div>\n    );\n  }\n}\n\nlet progressId = 0;\n"],"mappings":"sCAAA,MAAMA,EAAiB,+yDACvB,MAAAC,EAAeD,E,MCMFE,EAAoB,M,yBACvBC,KAAAC,GAAK,wBAAwBC,I,sCASP,E,WAKL,M,sBAMWF,KAAKG,W,CAQ/B,kBAAAC,GACR,GAAIJ,KAAKG,aAAeH,KAAKG,aAAe,GAAKH,KAAKG,aAAe,IAAK,CACxEH,KAAKK,iBAAmBL,KAAKG,W,EAIjC,MAAAG,GACE,MAAML,GAAEA,EAAEM,MAAEA,EAAKC,MAAEA,EAAKH,iBAAEA,GAAqBL,KAE/C,OACES,EAAA,OAAAC,IAAA,2CAAKC,MAAM,sBACRJ,EAAQE,EAAA,mBAAiBG,IAAKX,GAAKM,GAA2B,KAC/DE,EAAA,YAAAC,IAAA,2CAAUT,GAAIA,EAAIU,MAAO,CAAEH,MAAOA,GAASK,MAAOR,EAAkBS,IAAI,Q,oEAMhF,IAAIZ,EAAa,E","ignoreList":[]}

package/dist/cjs/Keys-019752ee.js

@@ -1,16 +0,0 @@
-'use strict';
-
-exports.Keys = void 0;
-(function (Keys) {
-    Keys["UP_ARROW"] = "ArrowUp";
-    Keys["DOWN_ARROW"] = "ArrowDown";
-    Keys["LEFT_ARROW"] = "ArrowLeft";
-    Keys["RIGHT_ARROW"] = "ArrowRight";
-    Keys["ENTER"] = "Enter";
-    Keys["TAB"] = "Tab";
-    Keys["HOME"] = "Home";
-    Keys["END"] = "End";
-    Keys["SPACE"] = " ";
-})(exports.Keys || (exports.Keys = {}));
-
-//# sourceMappingURL=Keys-019752ee.js.map

package/dist/cjs/Keys-019752ee.js.map

@@ -1 +0,0 @@
-{"file":"Keys-019752ee.js","mappings":";;AAAYA;AAAZ,WAAY,IAAI;IACd,4BAAoB,CAAA;IACpB,gCAAwB,CAAA;IACxB,gCAAwB,CAAA;IACxB,kCAA0B,CAAA;IAC1B,uBAAe,CAAA;IACf,mBAAW,CAAA;IACX,qBAAa,CAAA;IACb,mBAAW,CAAA;IACX,mBAAW,CAAA;AACb,CAAC,EAVWA,YAAI,KAAJA,YAAI;;","names":["Keys"],"sources":["src/components/Keys.ts"],"sourcesContent":["export enum Keys {\n  UP_ARROW = 'ArrowUp',\n  DOWN_ARROW = 'ArrowDown',\n  LEFT_ARROW = 'ArrowLeft',\n  RIGHT_ARROW = 'ArrowRight',\n  ENTER = 'Enter',\n  TAB = 'Tab',\n  HOME = 'Home',\n  END = 'End',\n  SPACE = ' '\n}\n"],"version":3}

package/dist/cjs/admiralty-type-ahead-item.cjs.entry.js

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2aa80b51.js');
-
-const typeAheadItemCss = ".sc-admiralty-type-ahead-item-h{display:block}";
-const AdmiraltyTypeAheadItemStyle0 = typeAheadItemCss;
-
-const AdmiraltyTypeAheadItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.value = undefined;
-    }
-    render() {
-        return index.h(index.Host, { key: 'b6ccf51ad68ce75c2c5e9670d1d8bb407cdc2ca8', value: this.value });
-    }
-};
-AdmiraltyTypeAheadItem.style = AdmiraltyTypeAheadItemStyle0;
-
-exports.admiralty_type_ahead_item = AdmiraltyTypeAheadItem;
-
-//# sourceMappingURL=admiralty-type-ahead-item.cjs.entry.js.map

package/dist/cjs/admiralty-type-ahead-item.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"admiralty-type-ahead-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,gDAAgD,CAAC;AAC1E,qCAAe,gBAAgB;;MCMlB,sBAAsB;;;;;IAGjC,MAAM;QACJ,OAAOA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAS,CAAC;KACzC;;;;;;","names":["h","Host"],"sources":["src/components/type-ahead-item/type-ahead-item.scss?tag=admiralty-type-ahead-item&encapsulation=scoped","src/components/type-ahead-item/type-ahead-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-type-ahead-item',\n  styleUrl: 'type-ahead-item.scss',\n  scoped: true,\n})\nexport class AdmiraltyTypeAheadItem {\n  @Prop() value: string;\n\n  render() {\n    return <Host value={this.value}></Host>;\n  }\n}\n"],"version":3}

package/dist/cjs/admiralty-type-ahead.cjs.entry.js

@@ -1,204 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2aa80b51.js');
-const Keys = require('./Keys-019752ee.js');
-
-const typeAheadCss = ".visually-hidden.sc-admiralty-type-ahead:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-type-ahead{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-type-ahead{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-type-ahead{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-type-ahead{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-type-ahead{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-type-ahead{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-type-ahead{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-type-ahead{display:none}}*.sc-admiralty-type-ahead{margin:0px;padding:0px}.text-input-wrap.sc-admiralty-type-ahead{height:auto !important}.filterTextInput.sc-admiralty-type-ahead{width:100%}.typeahead-list-container.sc-admiralty-type-ahead{position:relative}.typeahead-list-container.sc-admiralty-type-ahead .typeahead-list.sc-admiralty-type-ahead{position:absolute;left:0px;top:-24px;background-color:var(--admiralty-background-colour);width:100%;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);border:2px solid var(--admiralty-text-colour);border-top:none;box-sizing:border-box;max-height:180px;overflow-y:auto;z-index:1;list-style:none}.typeahead-list-container.sc-admiralty-type-ahead .typeahead-list.sc-admiralty-type-ahead li.sc-admiralty-type-ahead{cursor:pointer;transform:unset !important;padding:6px;min-height:24px;margin:0}.typeahead-list-container.sc-admiralty-type-ahead .typeahead-list.sc-admiralty-type-ahead li.sc-admiralty-type-ahead:before{content:none}.typeahead-list-container.sc-admiralty-type-ahead .typeahead-list.sc-admiralty-type-ahead li.highlighted.sc-admiralty-type-ahead{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}";
-const AdmiraltyTypeAheadStyle0 = typeAheadCss;
-
-const TypeAheadComponent = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.selectionChanged = index.createEvent(this, "selectionChanged", 7);
-        this.valueChanged = index.createEvent(this, "valueChanged", 7);
-        this.internalId = ++id;
-        this.filterList = [];
-        this.selectedItemIndex = -1;
-        this.isFocused = false;
-        this.isSilenced = false;
-        this.isAlternateStatusSection = false;
-        this.originalSearch = '';
-        this.hasBeenFocusedAtLeastOnce = false;
-        this.filterResult = new Array();
-        this.value = undefined;
-        this.label = undefined;
-        this.hint = undefined;
-        this.placeholder = undefined;
-        this.resultsOnInitFocus = false;
-    }
-    get inputValue() {
-        return this.inputControl.value.toString();
-    }
-    set inputValue(value) {
-        this.inputControl.value = value;
-    }
-    componentDidLoad() {
-        if (this.value) {
-            this.inputValue = this.value;
-        }
-    }
-    connectedCallback() {
-        this.mutation = new MutationObserver(() => {
-            this.populateFilterList();
-            index.forceUpdate(this);
-        });
-        this.mutation.observe(this.el, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    disconnectedCallback() {
-        if (this.mutation) {
-            this.mutation.disconnect();
-            this.mutation = undefined;
-        }
-    }
-    populateFilterList() {
-        const slotItems = this.el.querySelectorAll('admiralty-type-ahead-item');
-        this.filterList = [];
-        slotItems.forEach(el => {
-            this.filterList.push(el.getAttribute('value'));
-        });
-    }
-    handleFocusIn() {
-        if (this.resultsOnInitFocus && !this.hasBeenFocusedAtLeastOnce) {
-            this.performFilter('');
-            this.hasBeenFocusedAtLeastOnce = true;
-        }
-        this.isFocused = true;
-        this.isSilenced = false;
-    }
-    handleFocusOut() {
-        this.isFocused = false;
-        this.statusText = null;
-        this.isSilenced = true;
-    }
-    textChanged(value) {
-        this.originalSearch = value;
-        this.performFilter(value);
-        this.isSilenced = false;
-        this.valueChanged.emit(value);
-    }
-    handleKeyPressed(event) {
-        event.stopImmediatePropagation();
-        if (event.key === Keys.Keys.UP_ARROW || event.key === Keys.Keys.DOWN_ARROW) {
-            this.navigateSuggestions(event.key);
-            this.updateScroll();
-        }
-        else if (event.key !== Keys.Keys.ENTER) {
-            this.textChanged(this.inputValue);
-            this.selectCurrentItem();
-        }
-    }
-    handleKeyDown(event) {
-        event.stopImmediatePropagation();
-        if (event.key === Keys.Keys.TAB || event.key === Keys.Keys.ENTER) {
-            this.selectCurrentItem();
-        }
-    }
-    handleItemSelected(value) {
-        this.inputValue = value;
-        this.textChanged(value);
-        this.filterResult = new Array();
-        this.selectionChanged.emit(value);
-    }
-    performFilter(value) {
-        const filter = (filterList, text) => {
-            const filterResult = filterList.filter(value => {
-                return text === null || text.length < 1 || value.toLowerCase().indexOf(text.toLowerCase()) > -1;
-            });
-            return filterResult;
-        };
-        this.filterResult = filter(this.filterList, value);
-        this.selectedItemIndex = -1;
-    }
-    addHighlight() {
-        if (this.selectedItemIndex > -1) {
-            const listItem = this.el.querySelector(`#${this.getListItemId(this.selectedItemIndex)}`);
-            listItem.classList.add('highlighted');
-        }
-    }
-    removeHighlight(i) {
-        if (i > -1) {
-            const listItem = this.el.querySelector(`#${this.getListItemId(i)}`);
-            listItem.classList.remove('highlighted');
-        }
-    }
-    selectCurrentItem() {
-        if (this.selectedItemIndex >= 0) {
-            const selectedItemText = this.filterResult[this.selectedItemIndex];
-            this.handleItemSelected(selectedItemText);
-        }
-    }
-    handleItemHovered(index) {
-        this.removeHighlight(this.selectedItemIndex);
-        this.selectedItemIndex = index;
-        this.addHighlight();
-    }
-    handleComponentFocusOut() {
-        var _a;
-        // Ensure dropdown closed on clicking or tabbing away from this component
-        if (((_a = this.filterResult) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            this.filterResult = new Array();
-            this.hasBeenFocusedAtLeastOnce = false;
-        }
-    }
-    /**
-     * Check if the selected option is in view, and scroll if not
-     */
-    updateScroll() {
-        const container = this.listContainer;
-        const ul = container.querySelector('ul');
-        const selectedItem = Array.from(ul.childNodes).find((item) => item.ariaPosInSet === `${this.selectedItemIndex + 1}`);
-        if (container && selectedItem && container.scrollHeight + container.clientHeight) {
-            selectedItem.scrollIntoView();
-        }
-    }
-    navigateSuggestions(key) {
-        if (key === Keys.Keys.UP_ARROW) {
-            this.removeHighlight(this.selectedItemIndex);
-            this.selectedItemIndex--;
-            if (this.selectedItemIndex === -2) {
-                this.selectedItemIndex = this.filterResult.length - 1;
-            }
-        }
-        if (key === Keys.Keys.DOWN_ARROW) {
-            this.removeHighlight(this.selectedItemIndex);
-            this.selectedItemIndex++;
-            if (this.selectedItemIndex > this.filterResult.length - 1) {
-                this.selectedItemIndex = -1;
-            }
-        }
-        if (this.selectedItemIndex === -1) {
-            this.inputValue = this.originalSearch;
-        }
-        else {
-            const value = this.filterResult[this.selectedItemIndex];
-            this.inputValue = value;
-            this.addHighlight();
-        }
-    }
-    getListItemId(i) {
-        const id = this.getId();
-        return `${id}-list-item-${i}`;
-    }
-    getId() {
-        return this.el.id != '' ? this.el.id : `admiralty-typeahead-${this.internalId}`;
-    }
-    render() {
-        const id = this.getId();
-        const inputId = `${id}-input`;
-        const hintId = `${id}-assistive-hint`;
-        const listId = `${id}-list`;
-        return (index.h(index.Host, { key: 'a31dfc130539fc7998a1a858780180c3f58a3dca', onFocusout: _ev => this.handleComponentFocusOut() }, index.h("div", { key: '2b1d16a096aedc73730e3456a786c79bbb649087', class: "visually-hidden" }, index.h("div", { key: '7a4ffe9d200afbb32759292ad537af595b46d377', class: "results-status-a", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !this.isSilenced && this.isAlternateStatusSection ? this.statusText : ''), index.h("div", { key: '246dd3d76841a08ec9304156956279b1319ae956', class: "results-status-b", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !this.isSilenced && !this.isAlternateStatusSection ? this.statusText : '')), index.h("admiralty-input", { key: '9226118ea71b0c055c3b8b12bdaf183b8d0f1be0', type: "text", ref: el => (this.inputControl = el), id: inputId, label: this.label, hint: this.hint, placeholder: this.placeholder, class: "filterTextInput", onKeyUp: ev => this.handleKeyPressed(ev), onKeyDown: ev => this.handleKeyDown(ev), onFocusin: _ev => this.handleFocusIn(), onFocusout: _ev => this.handleFocusOut(), "aria-expanded": this.isFocused && this.filterResult.length > 0 }), index.h("span", { key: '2802b19f095e15fef7e346311014f4944578804d', id: hintId, class: "visually-hidden" }, "When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures."), this.filterResult.length > 0 ? (index.h("div", { class: "typeahead-list-container", ref: el => (this.listContainer = el) }, index.h("ul", { class: "typeahead-list", id: listId, role: "listbox" }, this.filterResult.map((item, i) => (index.h("li", { id: this.getListItemId(i), onMouseDown: _ev => this.handleItemSelected(item), onMouseOver: _ev => this.handleItemHovered(i), "aria-selected": i === this.selectedItemIndex, role: "option", tabindex: "-1", "aria-posinset": i + 1, "aria-setsize": this.filterResult.length }, item)))))) : null, index.h("slot", { key: '52fb739eff8fe71caa9e39ae6add139cbb4db1a7' })));
-    }
-    get el() { return index.getElement(this); }
-};
-let id = 0;
-TypeAheadComponent.style = AdmiraltyTypeAheadStyle0;
-
-exports.admiralty_type_ahead = TypeAheadComponent;
-
-//# sourceMappingURL=admiralty-type-ahead.cjs.entry.js.map

package/dist/cjs/admiralty-type-ahead.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"admiralty-type-ahead.entry.cjs.js","mappings":"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","names":["forceUpdate","Keys","h","Host"],"sources":["src/components/type-ahead/type-ahead.scss?tag=admiralty-type-ahead&encapsulation=scoped","src/components/type-ahead/type-ahead.tsx"],"sourcesContent":["@import 'type-ahead.vars';\n\n* {\n  margin: 0px;\n  padding: 0px;\n}\n\n.text-input-wrap {\n  height: auto !important;\n}\n\n.filterTextInput {\n  width: 100%;\n}\n\n.typeahead-list-container {\n  position: relative;\n\n  .typeahead-list {\n    position: absolute;\n    left: 0px;\n    top: -24px;\n    background-color: $type-ahead-background-colour;\n    width: 100%;\n    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\n    border: 2px solid $type-ahead-border-colour;\n    border-top: none;\n    box-sizing: border-box;\n    max-height: 180px;\n    overflow-y: auto;\n    z-index: 1;\n    list-style: none;\n\n    li {\n      cursor: pointer;\n      transform: unset !important;\n      padding: 6px;\n      min-height: 24px;\n      margin: 0;\n    }\n\n    li:before {\n      content: none;\n    }\n\n    li.highlighted {\n      background-color: $type-ahead-highlighted-background-colour;\n      color: $type-ahead-highlighted-text-colour;\n    }\n  }\n}\n","import { Component, EventEmitter, Host, Prop, Event, h, State, Element, forceUpdate } from '@stencil/core';\nimport { Keys } from '../Keys';\n\n@Component({\n  tag: 'admiralty-type-ahead',\n  styleUrl: 'type-ahead.scss',\n  scoped: true,\n})\nexport class TypeAheadComponent {\n  private internalId = ++id;\n\n  @Element() el: HTMLElement;\n\n  listContainer!: HTMLDivElement;\n  inputControl!: HTMLAdmiraltyInputElement;\n\n  @State() filterResult: string[] = new Array<string>();\n\n  filterList: Array<string> = [];\n\n  selectedItemIndex = -1;\n  isFocused = false;\n\n  isSilenced = false;\n  isAlternateStatusSection = false;\n  statusText: string;\n\n  private mutation: MutationObserver;\n\n  private originalSearch = '';\n  private hasBeenFocusedAtLeastOnce = false;\n\n  private get inputValue() {\n    return this.inputControl.value.toString();\n  }\n\n  private set inputValue(value: string) {\n    this.inputControl.value = value;\n  }\n\n  /**\n   * The value of the textinput\n   */\n  @Prop() value: string;\n\n  /**\n   * The text content of the label for the input box\n   */\n  @Prop() label: string;\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * The placeholder text for the input field\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Optional property to show results when input box is initally focused\n   */\n  @Prop() resultsOnInitFocus: boolean = false;\n\n  /**\n   * Optional function that will be executed when the user selects an item from the typeahead\n   */\n  @Event() selectionChanged: EventEmitter<string>;\n\n  /**\n   * Event that is fired whenever the value of the typeahead changes\n   * e.g. selection from the dropdown or manually typed entry\n   */\n  @Event() valueChanged: EventEmitter<string>;\n\n  componentDidLoad() {\n    if (this.value) {\n      this.inputValue = this.value;\n    }\n  }\n\n  connectedCallback() {\n    this.mutation = new MutationObserver(() => {\n      this.populateFilterList();\n      forceUpdate(this);\n    });\n    this.mutation.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.mutation) {\n      this.mutation.disconnect();\n      this.mutation = undefined;\n    }\n  }\n\n  populateFilterList() {\n    const slotItems = this.el.querySelectorAll('admiralty-type-ahead-item');\n    this.filterList = [];\n    slotItems.forEach(el => {\n      this.filterList.push(el.getAttribute('value'));\n    });\n  }\n\n  handleFocusIn() {\n    if (this.resultsOnInitFocus && !this.hasBeenFocusedAtLeastOnce) {\n      this.performFilter('');\n      this.hasBeenFocusedAtLeastOnce = true;\n    }\n\n    this.isFocused = true;\n    this.isSilenced = false;\n  }\n\n  handleFocusOut() {\n    this.isFocused = false;\n    this.statusText = null;\n    this.isSilenced = true;\n  }\n\n  private textChanged(value: string): void {\n    this.originalSearch = value;\n    this.performFilter(value);\n    this.isSilenced = false;\n    this.valueChanged.emit(value);\n  }\n\n  handleKeyPressed(event: KeyboardEvent): void {\n    event.stopImmediatePropagation();\n\n    if (event.key === Keys.UP_ARROW || event.key === Keys.DOWN_ARROW) {\n      this.navigateSuggestions(event.key);\n      this.updateScroll();\n    } else if (event.key !== Keys.ENTER) {\n      this.textChanged(this.inputValue);\n      this.selectCurrentItem();\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent): void {\n    event.stopImmediatePropagation();\n\n    if (event.key === Keys.TAB || event.key === Keys.ENTER) {\n      this.selectCurrentItem();\n    }\n  }\n\n  handleItemSelected(value: string): void {\n    this.inputValue = value;\n    this.textChanged(value);\n    this.filterResult = new Array<string>();\n    this.selectionChanged.emit(value);\n  }\n\n  private performFilter(value: string) {\n    const filter = (filterList: string[], text: string) => {\n      const filterResult = filterList.filter(value => {\n        return text === null || text.length < 1 || value.toLowerCase().indexOf(text.toLowerCase()) > -1;\n      });\n      return filterResult;\n    };\n\n    this.filterResult = filter(this.filterList, value);\n\n    this.selectedItemIndex = -1;\n  }\n\n  private addHighlight() {\n    if (this.selectedItemIndex > -1) {\n      const listItem = this.el.querySelector(`#${this.getListItemId(this.selectedItemIndex)}`);\n      listItem.classList.add('highlighted');\n    }\n  }\n\n  private removeHighlight(i: number) {\n    if (i > -1) {\n      const listItem = this.el.querySelector(`#${this.getListItemId(i)}`);\n      listItem.classList.remove('highlighted');\n    }\n  }\n\n  private selectCurrentItem(): void {\n    if (this.selectedItemIndex >= 0) {\n      const selectedItemText = this.filterResult[this.selectedItemIndex];\n      this.handleItemSelected(selectedItemText);\n    }\n  }\n\n  handleItemHovered(index: number): void {\n    this.removeHighlight(this.selectedItemIndex);\n    this.selectedItemIndex = index;\n    this.addHighlight();\n  }\n\n  handleComponentFocusOut() {\n    // Ensure dropdown closed on clicking or tabbing away from this component\n    if (this.filterResult?.length > 0) {\n      this.filterResult = new Array<string>();\n      this.hasBeenFocusedAtLeastOnce = false;\n    }\n  }\n\n  /**\n   * Check if the selected option is in view, and scroll if not\n   */\n  private updateScroll() {\n    const container = this.listContainer;\n\n    const ul = container.querySelector('ul');\n    const selectedItem: any = Array.from(ul.childNodes).find((item: any) => item.ariaPosInSet === `${this.selectedItemIndex + 1}`);\n\n    if (container && selectedItem && container.scrollHeight + container.clientHeight) {\n      selectedItem.scrollIntoView();\n    }\n  }\n\n  private navigateSuggestions(key: Keys) {\n    if (key === Keys.UP_ARROW) {\n      this.removeHighlight(this.selectedItemIndex);\n      this.selectedItemIndex--;\n      if (this.selectedItemIndex === -2) {\n        this.selectedItemIndex = this.filterResult.length - 1;\n      }\n    }\n    if (key === Keys.DOWN_ARROW) {\n      this.removeHighlight(this.selectedItemIndex);\n      this.selectedItemIndex++;\n      if (this.selectedItemIndex > this.filterResult.length - 1) {\n        this.selectedItemIndex = -1;\n      }\n    }\n    if (this.selectedItemIndex === -1) {\n      this.inputValue = this.originalSearch;\n    } else {\n      const value = this.filterResult[this.selectedItemIndex];\n\n      this.inputValue = value;\n\n      this.addHighlight();\n    }\n  }\n\n  private getListItemId(i: number) {\n    const id = this.getId();\n    return `${id}-list-item-${i}`;\n  }\n\n  private getId() {\n    return this.el.id != '' ? this.el.id : `admiralty-typeahead-${this.internalId}`;\n  }\n\n  render() {\n    const id = this.getId();\n    const inputId = `${id}-input`;\n    const hintId = `${id}-assistive-hint`;\n    const listId = `${id}-list`;\n\n    return (\n      <Host onFocusout={_ev => this.handleComponentFocusOut()}>\n        <div class=\"visually-hidden\">\n          <div class=\"results-status-a\" role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n            {!this.isSilenced && this.isAlternateStatusSection ? this.statusText : ''}\n          </div>\n          <div class=\"results-status-b\" role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n            {!this.isSilenced && !this.isAlternateStatusSection ? this.statusText : ''}\n          </div>\n        </div>\n        <admiralty-input\n          type=\"text\"\n          ref={el => (this.inputControl = el)}\n          id={inputId}\n          label={this.label}\n          hint={this.hint}\n          placeholder={this.placeholder}\n          class=\"filterTextInput\"\n          onKeyUp={ev => this.handleKeyPressed(ev)}\n          onKeyDown={ev => this.handleKeyDown(ev)}\n          onFocusin={_ev => this.handleFocusIn()}\n          onFocusout={_ev => this.handleFocusOut()}\n          aria-expanded={this.isFocused && this.filterResult.length > 0}\n        ></admiralty-input>\n\n        <span id={hintId} class=\"visually-hidden\">\n          When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.\n        </span>\n        {this.filterResult.length > 0 ? (\n          <div class=\"typeahead-list-container\" ref={el => (this.listContainer = el)}>\n            <ul class=\"typeahead-list\" id={listId} role=\"listbox\">\n              {this.filterResult.map((item, i) => (\n                <li\n                  id={this.getListItemId(i)}\n                  onMouseDown={_ev => this.handleItemSelected(item)}\n                  onMouseOver={_ev => this.handleItemHovered(i)}\n                  aria-selected={i === this.selectedItemIndex}\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  aria-posinset={i + 1}\n                  aria-setsize={this.filterResult.length}\n                >\n                  {item}\n                </li>\n              ))}\n            </ul>\n          </div>\n        ) : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n\nlet id = 0;\n"],"version":3}

package/dist/collection/components/type-ahead/type-ahead.css

@@ -1,106 +0,0 @@
-.visually-hidden:not(:focus):not(:active) {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip: rect(0 0 0 0) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  border: 0 !important;
-  white-space: nowrap !important;
-}
-
-/* Device Sizes - matching layout breakpoints */
-@media (max-width: 1023px) {
-  .desktop-only {
-    display: none;
-  }
-}
-
-@media (min-width: 1024px) {
-  .not-desktop {
-    display: none;
-  }
-}
-
-@media (min-width: 1024px) {
-  .tablet-only {
-    display: none;
-  }
-}
-@media (max-width: 479px) and (min-width: 0px) {
-  .tablet-only {
-    display: none;
-  }
-}
-
-@media (max-width: 479px) and (min-width: 0px) {
-  .tablet-or-desktop {
-    display: none;
-  }
-}
-
-@media (min-width: 1024px) {
-  .phone-or-tablet {
-    display: none;
-  }
-}
-
-@media (min-width: 1024px) {
-  .phone-only {
-    display: none;
-  }
-}
-@media (max-width: 1023px) and (min-width: 480px) {
-  .phone-only {
-    display: none;
-  }
-}
-
-* {
-  margin: 0px;
-  padding: 0px;
-}
-
-.text-input-wrap {
-  height: auto !important;
-}
-
-.filterTextInput {
-  width: 100%;
-}
-
-.typeahead-list-container {
-  position: relative;
-}
-.typeahead-list-container .typeahead-list {
-  position: absolute;
-  left: 0px;
-  top: -24px;
-  background-color: var(--admiralty-background-colour);
-  width: 100%;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border: 2px solid var(--admiralty-text-colour);
-  border-top: none;
-  box-sizing: border-box;
-  max-height: 180px;
-  overflow-y: auto;
-  z-index: 1;
-  list-style: none;
-}
-.typeahead-list-container .typeahead-list li {
-  cursor: pointer;
-  transform: unset !important;
-  padding: 6px;
-  min-height: 24px;
-  margin: 0;
-}
-.typeahead-list-container .typeahead-list li:before {
-  content: none;
-}
-.typeahead-list-container .typeahead-list li.highlighted {
-  background-color: var(--admiralty-colour-primary);
-  color: var(--admiralty-colour-primary-contrast);
-}