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

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

@@ -1,329 +0,0 @@
-import { Host, h, forceUpdate } from "@stencil/core";
-import { Keys } from "../Keys";
-export class TypeAheadComponent {
-    constructor() {
-        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' })));
-    }
-    static get is() { return "admiralty-type-ahead"; }
-    static get encapsulation() { return "scoped"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["type-ahead.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["type-ahead.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the textinput"
-                },
-                "attribute": "value",
-                "reflect": false
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The text content of the label for the input box"
-                },
-                "attribute": "label",
-                "reflect": false
-            },
-            "hint": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The hint which will be used under the label to describe the input."
-                },
-                "attribute": "hint",
-                "reflect": false
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The placeholder text for the input field"
-                },
-                "attribute": "placeholder",
-                "reflect": false
-            },
-            "resultsOnInitFocus": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional property to show results when input box is initally focused"
-                },
-                "attribute": "results-on-init-focus",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "filterResult": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "selectionChanged",
-                "name": "selectionChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional function that will be executed when the user selects an item from the typeahead"
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }, {
-                "method": "valueChanged",
-                "name": "valueChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event that is fired whenever the value of the typeahead changes\ne.g. selection from the dropdown or manually typed entry"
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-}
-let id = 0;
-//# sourceMappingURL=type-ahead.js.map

package/dist/collection/components/type-ahead/type-ahead.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"type-ahead.js","sourceRoot":"","sources":["../../../src/components/type-ahead/type-ahead.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -1,3 +0,0 @@
-:host {
-  display: block;
-}

package/dist/collection/components/type-ahead-item/type-ahead-item.js

@@ -1,43 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class AdmiraltyTypeAheadItem {
-    constructor() {
-        this.value = undefined;
-    }
-    render() {
-        return h(Host, { key: 'b6ccf51ad68ce75c2c5e9670d1d8bb407cdc2ca8', value: this.value });
-    }
-    static get is() { return "admiralty-type-ahead-item"; }
-    static get encapsulation() { return "scoped"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["type-ahead-item.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["type-ahead-item.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "value",
-                "reflect": false
-            }
-        };
-    }
-}
-//# sourceMappingURL=type-ahead-item.js.map

package/dist/collection/components/type-ahead-item/type-ahead-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"type-ahead-item.js","sourceRoot":"","sources":["../../../src/components/type-ahead-item/type-ahead-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,sBAAsB;;;;IAGjC,MAAM;QACJ,OAAO,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAS,CAAC;IAC1C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface AdmiraltyTypeAheadItem extends Components.AdmiraltyTypeAheadItem, HTMLElement {}
-export const AdmiraltyTypeAheadItem: {
-    prototype: AdmiraltyTypeAheadItem;
-    new (): AdmiraltyTypeAheadItem;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/admiralty-type-ahead-item.js

@@ -1,38 +0,0 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-7dd465c9.js';
-
-const typeAheadItemCss = ".sc-admiralty-type-ahead-item-h{display:block}";
-const AdmiraltyTypeAheadItemStyle0 = typeAheadItemCss;
-
-const AdmiraltyTypeAheadItem$1 = /*@__PURE__*/ proxyCustomElement(class AdmiraltyTypeAheadItem extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.value = undefined;
-    }
-    render() {
-        return h(Host, { key: 'b6ccf51ad68ce75c2c5e9670d1d8bb407cdc2ca8', value: this.value });
-    }
-    static get style() { return AdmiraltyTypeAheadItemStyle0; }
-}, [2, "admiralty-type-ahead-item", {
-        "value": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["admiralty-type-ahead-item"];
-    components.forEach(tagName => { switch (tagName) {
-        case "admiralty-type-ahead-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AdmiraltyTypeAheadItem$1);
-            }
-            break;
-    } });
-}
-
-const AdmiraltyTypeAheadItem = AdmiraltyTypeAheadItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { AdmiraltyTypeAheadItem, defineCustomElement };
-
-//# sourceMappingURL=admiralty-type-ahead-item.js.map

package/dist/components/admiralty-type-ahead-item.js.map

@@ -1 +0,0 @@
-{"file":"admiralty-type-ahead-item.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,gDAAgD,CAAC;AAC1E,qCAAe,gBAAgB;;MCMlBA,wBAAsB;;;;;;IAGjC,MAAM;QACJ,OAAO,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAS,CAAC;KACzC;;;;;;;;;;;;;;;;;;;;;;;;","names":["AdmiraltyTypeAheadItem"],"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/components/admiralty-type-ahead.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface AdmiraltyTypeAhead extends Components.AdmiraltyTypeAhead, HTMLElement {}
-export const AdmiraltyTypeAhead: {
-    prototype: AdmiraltyTypeAhead;
-    new (): AdmiraltyTypeAhead;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;