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

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

@@ -1,200 +0,0 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-60c25452.js';
-import { K as Keys } from './Keys-acfce4b9.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) {
-        registerInstance(this, hostRef);
-        this.selectionChanged = createEvent(this, "selectionChanged", 7);
-        this.valueChanged = 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();
-            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.UP_ARROW || event.key === Keys.DOWN_ARROW) {
-            this.navigateSuggestions(event.key);
-            this.updateScroll();
-        }
-        else if (event.key !== Keys.ENTER) {
-            this.textChanged(this.inputValue);
-            this.selectCurrentItem();
-        }
-    }
-    handleKeyDown(event) {
-        event.stopImmediatePropagation();
-        if (event.key === Keys.TAB || event.key === 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.UP_ARROW) {
-            this.removeHighlight(this.selectedItemIndex);
-            this.selectedItemIndex--;
-            if (this.selectedItemIndex === -2) {
-                this.selectedItemIndex = this.filterResult.length - 1;
-            }
-        }
-        if (key === 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 (h(Host, { key: 'a31dfc130539fc7998a1a858780180c3f58a3dca', onFocusout: _ev => this.handleComponentFocusOut() }, h("div", { key: '2b1d16a096aedc73730e3456a786c79bbb649087', class: "visually-hidden" }, h("div", { key: '7a4ffe9d200afbb32759292ad537af595b46d377', class: "results-status-a", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !this.isSilenced && this.isAlternateStatusSection ? this.statusText : ''), h("div", { key: '246dd3d76841a08ec9304156956279b1319ae956', class: "results-status-b", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !this.isSilenced && !this.isAlternateStatusSection ? this.statusText : '')), 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 }), 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 ? (h("div", { class: "typeahead-list-container", ref: el => (this.listContainer = el) }, h("ul", { class: "typeahead-list", id: listId, role: "listbox" }, this.filterResult.map((item, i) => (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, h("slot", { key: '52fb739eff8fe71caa9e39ae6add139cbb4db1a7' })));
-    }
-    get el() { return getElement(this); }
-};
-let id = 0;
-TypeAheadComponent.style = AdmiraltyTypeAheadStyle0;
-
-export { TypeAheadComponent as admiralty_type_ahead };
-
-//# sourceMappingURL=admiralty-type-ahead.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"admiralty-type-ahead.entry.js","mappings":"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","names":[],"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/types/components/type-ahead/type-ahead.d.ts

@@ -1,72 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class TypeAheadComponent {
-    private internalId;
-    el: HTMLElement;
-    listContainer: HTMLDivElement;
-    inputControl: HTMLAdmiraltyInputElement;
-    filterResult: string[];
-    filterList: Array<string>;
-    selectedItemIndex: number;
-    isFocused: boolean;
-    isSilenced: boolean;
-    isAlternateStatusSection: boolean;
-    statusText: string;
-    private mutation;
-    private originalSearch;
-    private hasBeenFocusedAtLeastOnce;
-    private get inputValue();
-    private set inputValue(value);
-    /**
-     * The value of the textinput
-     */
-    value: string;
-    /**
-     * The text content of the label for the input box
-     */
-    label: string;
-    /**
-     * The hint which will be used under the label to describe the input.
-     */
-    hint: string;
-    /**
-     * The placeholder text for the input field
-     */
-    placeholder: string;
-    /**
-     * Optional property to show results when input box is initally focused
-     */
-    resultsOnInitFocus: boolean;
-    /**
-     * Optional function that will be executed when the user selects an item from the typeahead
-     */
-    selectionChanged: EventEmitter<string>;
-    /**
-     * Event that is fired whenever the value of the typeahead changes
-     * e.g. selection from the dropdown or manually typed entry
-     */
-    valueChanged: EventEmitter<string>;
-    componentDidLoad(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    populateFilterList(): void;
-    handleFocusIn(): void;
-    handleFocusOut(): void;
-    private textChanged;
-    handleKeyPressed(event: KeyboardEvent): void;
-    handleKeyDown(event: KeyboardEvent): void;
-    handleItemSelected(value: string): void;
-    private performFilter;
-    private addHighlight;
-    private removeHighlight;
-    private selectCurrentItem;
-    handleItemHovered(index: number): void;
-    handleComponentFocusOut(): void;
-    /**
-     * Check if the selected option is in view, and scroll if not
-     */
-    private updateScroll;
-    private navigateSuggestions;
-    private getListItemId;
-    private getId;
-    render(): any;
-}

package/dist/types/components/type-ahead-item/type-ahead-item.d.ts

@@ -1,4 +0,0 @@
-export declare class AdmiraltyTypeAheadItem {
-    value: string;
-    render(): any;
-}