@radarlabs/plugin-autocomplete 5.0.0-beta.5

package/cdn/radar-autocomplete.min.js

@@ -0,0 +1 @@
+!function(t){"use strict";class e extends t.RadarError{constructor(t){super(t),this.name="RadarAutocompleteContainerNotFound",this.status="CONTAINER_NOT_FOUND"}}const s="radar-autocomplete-wrapper",i="radar-autocomplete-input",r="radar-autocomplete-search-icon",n="radar-autocomplete-results-list",a="radar-autocomplete-results-item",l="radar-autocomplete-results-marker",o="radar-autocomplete-results-item-selected",h="radar-powered",d="radar-no-results",c={container:"autocomplete",debounceMS:200,minCharacters:3,limit:8,placeholder:"Search address",responsive:!0,disabled:!1,showMarkers:!0,hideResultsOnBlur:!0},u=t=>"number"==typeof t?`${t}px`:t,p=(t,e)=>{if(e.responsive)return t.style.width="100%",void(e.width&&(t.style.maxWidth=u(e.width)));t.style.width=u(e.width||400),t.style.removeProperty("max-width")},g=(t,e)=>{e.maxHeight&&(t.style.maxHeight=u(e.maxHeight),t.style.overflowY="auto")},m=(t="#ACBDC8")=>`data:image/svg+xml;charset=utf-8,${`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n    <path d="M12.5704 6.57036C12.5704 4.11632 10.6342 2.11257 8.21016 2C8.14262 2 8.06757 2 8.00003 2C7.93249 2 7.85744 2 7.7899 2C5.35838 2.11257 3.42967 4.11632 3.42967 6.57036C3.42967 6.60037 3.42967 6.6379 3.42967 6.66792C3.42967 6.69794 3.42967 6.73546 3.42967 6.76548C3.42967 9.46717 7.09196 13.3621 7.4672 13.7598C7.61729 13.9174 7.84994 14 8.00003 14C8.15012 14 8.38277 13.9174 8.53286 13.7598C8.9156 13.3621 12.5704 9.46717 12.5704 6.76548C12.5704 6.72795 12.5704 6.69794 12.5704 6.66792C12.5704 6.6379 12.5704 6.60037 12.5704 6.57036ZM7.99252 8.28893C7.04693 8.28893 6.27395 7.52345 6.27395 6.57036C6.27395 5.61726 7.03943 4.85178 7.99252 4.85178C8.94562 4.85178 9.7111 5.61726 9.7111 6.57036C9.7111 7.52345 8.94562 8.28893 7.99252 8.28893Z" fill="${t.replace("#","%23")}"/>\n  </svg>`.trim()}`;class f{constructor(t,a){this.ctx=a;const{Logger:l}=this.ctx;let o;if(this.config=Object.assign({},c,t),this.isOpen=!1,this.debouncedFetchResults=this.debounce(this.fetchResults,this.config.debounceMS),this.results=[],this.highlightedIndex=-1,void 0!==this.config.threshold&&(this.config.minCharacters=this.config.threshold,l.warn('AutocompleteUI option "threshold" is deprecated, use "minCharacters" instead.')),t.near&&("string"==typeof t.near?this.near=t.near:this.near=`${t.near.latitude},${t.near.longitude}`),o="string"==typeof this.config.container?document.getElementById(this.config.container):this.config.container,!o)throw new e(`Could not find container element: ${this.config.container}`);if(this.container=o,this.wrapper=document.createElement("div"),this.wrapper.classList.add(s),this.wrapper.style.display=this.config.responsive?"block":"inline-block",p(this.wrapper,this.config),this.resultsList=document.createElement("ul"),this.resultsList.classList.add(n),this.resultsList.setAttribute("id",n),this.resultsList.setAttribute("role","listbox"),this.resultsList.setAttribute("aria-live","polite"),this.resultsList.setAttribute("aria-label","Search results"),g(this.resultsList,this.config),"INPUT"===o.nodeName)this.inputField=o,this.wrapper.appendChild(this.resultsList),o.parentNode.appendChild(this.wrapper);else{this.inputField=document.createElement("input"),this.inputField.classList.add(i),this.inputField.placeholder=this.config.placeholder,this.inputField.type="text",this.inputField.disabled=this.config.disabled;const t=document.createElement("div");t.classList.add(r),this.wrapper.appendChild(this.inputField),this.wrapper.appendChild(this.resultsList),this.wrapper.appendChild(t),this.container.appendChild(this.wrapper)}this.inputField.setAttribute("autocomplete","off"),this.inputField.setAttribute("role","combobox"),this.inputField.setAttribute("aria-controls",n),this.inputField.setAttribute("aria-expanded","false"),this.inputField.setAttribute("aria-haspopup","listbox"),this.inputField.setAttribute("aria-autocomplete","list"),this.inputField.setAttribute("aria-activedescendant",""),this.inputField.addEventListener("input",this.handleInput.bind(this)),this.inputField.addEventListener("keydown",this.handleKeyboardNavigation.bind(this)),this.config.hideResultsOnBlur&&this.inputField.addEventListener("blur",this.close.bind(this),!0),l.debug("AutocompleteUI initialized with options",this.config)}handleInput(){const{Logger:t}=this.ctx,e=this.inputField.value;e.length<this.config.minCharacters||this.debouncedFetchResults(e).then((t=>{const e=this.config.onResults;e&&e(t),this.displayResults(t)})).catch((e=>{t.warn(`Autocomplete ui error: ${e.message}`);const s=this.config.onError;s&&s(e)}))}debounce(t,e){let s,i,r;return(...n)=>(clearTimeout(s),s=setTimeout((()=>{const e=t.apply(this,n);e instanceof Promise&&e.then((t=>{i&&i(t)})).catch((t=>{r&&r(t)}))}),e),new Promise(((t,e)=>{i=t,r=e})))}async fetchResults(t){const{apis:e}=this.ctx,{limit:s,layers:i,countryCode:r,expandUnits:n,mailable:a,lang:l,postalCode:o,onRequest:h}=this.config,d={query:t,limit:s,layers:i,countryCode:r,expandUnits:n,mailable:a,lang:l,postalCode:o};this.near&&(d.near=this.near),h&&h(d);const{addresses:c}=await e.Search.autocomplete(d,"autocomplete-ui");return c}displayResults(t){let e;if(this.clearResultsList(),this.results=t,this.config.showMarkers&&(e=document.createElement("img"),e.classList.add(l),e.setAttribute("src",m(this.config.markerColor))),t.forEach(((t,s)=>{const i=document.createElement("li");let r;if(i.classList.add(a),i.setAttribute("role","option"),i.setAttribute("id",`${a}}-${s}`),t.formattedAddress.includes(t.addressLabel)&&"postalCode"!==t.layer){const e=new RegExp(`(${t.addressLabel}),?`);r=t.formattedAddress.replace(e,"<b>$1</b>")}else{r=`<b>${t.placeLabel||t.addressLabel}</b> ${t.formattedAddress}`}i.innerHTML=r,e&&i.prepend(e.cloneNode()),i.addEventListener("mousedown",(()=>{this.select(s)})),this.resultsList.appendChild(i)})),this.open(),t.length>0){const t=document.createElement("a");t.href="https://radar.com?ref=powered_by_radar",t.target="_blank",this.poweredByLink=t;const e=document.createElement("span");e.textContent="Powered by",t.appendChild(e);const s=document.createElement("span");s.id="radar-powered-logo",s.textContent="Radar",t.appendChild(s);const i=document.createElement("div");i.classList.add(h),i.appendChild(t),this.resultsList.appendChild(i)}else{const t=document.createElement("div");t.classList.add(d),t.textContent="No results",this.resultsList.appendChild(t)}}open(){this.isOpen||(this.inputField.setAttribute("aria-expanded","true"),this.resultsList.removeAttribute("hidden"),this.isOpen=!0)}close(t){if(!this.isOpen)return;const e=t&&t.relatedTarget===this.poweredByLink;setTimeout((()=>{this.inputField.setAttribute("aria-expanded","false"),this.inputField.setAttribute("aria-activedescendant",""),this.resultsList.setAttribute("hidden",""),this.highlightedIndex=-1,this.isOpen=!1,this.clearResultsList()}),e?100:0)}goTo(t){if(!this.isOpen||!this.results.length)return;t<0?t=this.results.length-1:t>=this.results.length&&(t=0);const e=this.resultsList.getElementsByTagName("li");this.highlightedIndex>-1&&e[this.highlightedIndex].classList.remove(o),e[t].classList.add(o),this.inputField.setAttribute("aria-activedescendant",`${a}-${t}`),this.highlightedIndex=t}handleKeyboardNavigation(t){let e=t.key;if(this.isOpen)switch("Tab"===e&&t.shiftKey&&(e="ArrowUp"),e){case"Tab":case"ArrowDown":t.preventDefault(),this.goTo(this.highlightedIndex+1);break;case"ArrowUp":t.preventDefault(),this.goTo(this.highlightedIndex-1);break;case"Enter":this.select(this.highlightedIndex);break;case"Esc":this.close()}}select(t){const{Logger:e}=this.ctx,s=this.results[t];if(!s)return void e.warn(`No autocomplete result found at index: ${t}`);let i;if(s.formattedAddress.includes(s.addressLabel))i=s.formattedAddress;else{i=`${s.placeLabel||s.addressLabel}, ${s.formattedAddress}`}this.inputField.value=i;const r=this.config.onSelection;r&&r(s),this.close()}clearResultsList(){this.resultsList.innerHTML="",this.results=[]}remove(){const{Logger:t}=this.ctx;t.debug("AutocompleteUI removed."),this.inputField.remove(),this.resultsList.remove(),this.wrapper.remove()}setNear(t){return this.near=null==t?void 0:"string"==typeof t?t:`${t.latitude},${t.longitude}`,this}setPlaceholder(t){return this.config.placeholder=t,this.inputField.placeholder=t,this}setDisabled(t){return this.config.disabled=t,this.inputField.disabled=t,this}setResponsive(t){return this.config.responsive=t,p(this.wrapper,this.config),this}setWidth(t){return null===t?this.config.width=void 0:"string"!=typeof t&&"number"!=typeof t||(this.config.width=t),p(this.wrapper,this.config),this}setMaxHeight(t){return null===t?this.config.maxHeight=void 0:"string"!=typeof t&&"number"!=typeof t||(this.config.maxHeight=t),g(this.resultsList,this.config),this}setMinCharacters(t){return this.config.minCharacters=t,this.config.threshold=t,this}setLimit(t){return this.config.limit=t,this}setLang(t){return null===t?this.config.lang=void 0:"string"==typeof t&&(this.config.lang=t),this}setPostalCode(t){return null===t?this.config.postalCode=void 0:"string"==typeof t&&(this.config.postalCode=t),this}setShowMarkers(t){if(this.config.showMarkers=t,t){const t=document.createElement("img");t.classList.add(l),t.setAttribute("src",m(this.config.markerColor));const e=this.resultsList.getElementsByTagName("li");for(let s=0;s<e.length;s++){e[s].getElementsByClassName(l)[0]||e[s].prepend(t.cloneNode())}}else{const t=this.resultsList.getElementsByTagName("li");for(let e=0;e<t.length;e++){const s=t[e].getElementsByClassName(l)[0];s&&s.remove()}}return this}setMarkerColor(t){this.config.markerColor=t;const e=this.resultsList.getElementsByClassName(l);for(let s=0;s<e.length;s++)e[s].setAttribute("src",m(t));return this}setHideResultsOnBlur(t){return this.config.hideResultsOnBlur=t,t?this.inputField.addEventListener("blur",this.close.bind(this),!0):this.inputField.removeEventListener("blur",this.close.bind(this),!0),this}}t.registerPlugin({name:"autocomplete",version:"5.0.0-beta.5",install(t){const e=t.Radar.ui||{};t.Radar.ui={...e,autocomplete:e=>new f(e,t)}}})}(Radar);

package/dist/autocomplete.d.ts

@@ -0,0 +1,42 @@
+import type { RadarAutocompleteUIOptions, RadarAutocompleteConfig } from './types';
+import type { Location, RadarPluginContext } from 'radar-sdk-js';
+declare class AutocompleteUI {
+    private ctx;
+    config: RadarAutocompleteConfig;
+    isOpen: boolean;
+    results: any[];
+    highlightedIndex: number;
+    debouncedFetchResults: (...args: any[]) => Promise<any>;
+    near?: string;
+    container: HTMLElement;
+    inputField: HTMLInputElement;
+    resultsList: HTMLElement;
+    wrapper: HTMLElement;
+    poweredByLink?: HTMLElement;
+    constructor(options: Partial<RadarAutocompleteUIOptions>, ctx: RadarPluginContext);
+    handleInput(): void;
+    debounce(fn: Function, delay: number): (...args: any[]) => Promise<unknown>;
+    fetchResults(query: string): Promise<import("radar-sdk-js").RadarAutocompleteAddress[]>;
+    displayResults(results: any[]): void;
+    open(): void;
+    close(e?: FocusEvent): void;
+    goTo(index: number): void;
+    handleKeyboardNavigation(event: KeyboardEvent): void;
+    select(index: number): void;
+    clearResultsList(): void;
+    remove(): void;
+    setNear(near: string | Location | undefined | null): this;
+    setPlaceholder(placeholder: string): this;
+    setDisabled(disabled: boolean): this;
+    setResponsive(responsive: boolean): this;
+    setWidth(width: number | string | null): this;
+    setMaxHeight(height: number | string | null): this;
+    setMinCharacters(minCharacters: number): this;
+    setLimit(limit: number): this;
+    setLang(lang: string | null): this;
+    setPostalCode(postalCode: string | null): this;
+    setShowMarkers(showMarkers: boolean): this;
+    setMarkerColor(color: string): this;
+    setHideResultsOnBlur(hideResultsOnBlur: boolean): this;
+}
+export default AutocompleteUI;

package/dist/cdn-entry.d.ts

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

package/dist/errors.d.ts

@@ -0,0 +1,4 @@
+import { RadarError } from 'radar-sdk-js';
+export declare class RadarAutocompleteContainerNotFound extends RadarError {
+    constructor(message: string);
+}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import type { RadarPlugin } from 'radar-sdk-js';
+import AutocompleteUI from './autocomplete';
+import type { RadarAutocompleteUIOptions } from './types';
+import '../styles/radar-autocomplete.css';
+export type { RadarAutocompleteUIOptions, RadarAutocompleteConfig } from './types';
+declare module 'radar-sdk-js' {
+    interface RadarUI {
+        autocomplete(options: Partial<RadarAutocompleteUIOptions>): AutocompleteUI;
+    }
+    namespace Radar {
+        let ui: RadarUI;
+    }
+}
+export declare function createAutocompletePlugin(): RadarPlugin;

package/dist/index.js

@@ -0,0 +1,544 @@
+import { RadarError } from 'radar-sdk-js';
+
+class RadarAutocompleteContainerNotFound extends RadarError {
+    constructor(message) {
+        super(message);
+        this.name = 'RadarAutocompleteContainerNotFound';
+        this.status = 'CONTAINER_NOT_FOUND';
+    }
+}
+
+const CLASSNAMES = {
+    WRAPPER: 'radar-autocomplete-wrapper',
+    INPUT: 'radar-autocomplete-input',
+    SEARCH_ICON: 'radar-autocomplete-search-icon',
+    RESULTS_LIST: 'radar-autocomplete-results-list',
+    RESULTS_ITEM: 'radar-autocomplete-results-item',
+    RESULTS_MARKER: 'radar-autocomplete-results-marker',
+    SELECTED_ITEM: 'radar-autocomplete-results-item-selected',
+    POWERED_BY_RADAR: 'radar-powered',
+    NO_RESULTS: 'radar-no-results',
+};
+const defaultAutocompleteOptions = {
+    container: 'autocomplete',
+    debounceMS: 200, // Debounce time in milliseconds
+    minCharacters: 3, // Minimum number of characters to trigger autocomplete
+    limit: 8, // Maximum number of autocomplete results
+    placeholder: 'Search address', // Placeholder text for the input field
+    responsive: true,
+    disabled: false,
+    showMarkers: true,
+    hideResultsOnBlur: true,
+};
+// determine whether to use px or CSS string
+const formatCSSValue = (value) => {
+    if (typeof value === 'number') {
+        return `${value}px`;
+    }
+    return value;
+};
+const DEFAULT_WIDTH = 400;
+const setWidth = (input, options) => {
+    // if responsive and width is provided, treat it as maxWidth
+    if (options.responsive) {
+        input.style.width = '100%';
+        if (options.width) {
+            input.style.maxWidth = formatCSSValue(options.width);
+        }
+        return;
+    }
+    // if not responsive, set fixed width and unset maxWidth
+    input.style.width = formatCSSValue(options.width || DEFAULT_WIDTH);
+    input.style.removeProperty('max-width');
+};
+const setHeight = (resultsList, options) => {
+    if (options.maxHeight) {
+        resultsList.style.maxHeight = formatCSSValue(options.maxHeight);
+        resultsList.style.overflowY = 'auto'; /* allow overflow when maxHeight is applied */
+    }
+};
+const getMarkerIcon = (color = "#ACBDC8") => {
+    const fill = color.replace('#', '%23');
+    const svg = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.5704 6.57036C12.5704 4.11632 10.6342 2.11257 8.21016 2C8.14262 2 8.06757 2 8.00003 2C7.93249 2 7.85744 2 7.7899 2C5.35838 2.11257 3.42967 4.11632 3.42967 6.57036C3.42967 6.60037 3.42967 6.6379 3.42967 6.66792C3.42967 6.69794 3.42967 6.73546 3.42967 6.76548C3.42967 9.46717 7.09196 13.3621 7.4672 13.7598C7.61729 13.9174 7.84994 14 8.00003 14C8.15012 14 8.38277 13.9174 8.53286 13.7598C8.9156 13.3621 12.5704 9.46717 12.5704 6.76548C12.5704 6.72795 12.5704 6.69794 12.5704 6.66792C12.5704 6.6379 12.5704 6.60037 12.5704 6.57036ZM7.99252 8.28893C7.04693 8.28893 6.27395 7.52345 6.27395 6.57036C6.27395 5.61726 7.03943 4.85178 7.99252 4.85178C8.94562 4.85178 9.7111 5.61726 9.7111 6.57036C9.7111 7.52345 8.94562 8.28893 7.99252 8.28893Z" fill="${fill}"/>
+  </svg>`.trim();
+    return `data:image/svg+xml;charset=utf-8,${svg}`;
+};
+class AutocompleteUI {
+    constructor(options, ctx) {
+        this.ctx = ctx;
+        const { Logger } = this.ctx;
+        this.config = Object.assign({}, defaultAutocompleteOptions, options);
+        // setup state
+        this.isOpen = false;
+        this.debouncedFetchResults = this.debounce(this.fetchResults, this.config.debounceMS);
+        this.results = [];
+        this.highlightedIndex = -1;
+        // set threshold alias
+        if (this.config.threshold !== undefined) {
+            this.config.minCharacters = this.config.threshold;
+            Logger.warn('AutocompleteUI option "threshold" is deprecated, use "minCharacters" instead.');
+        }
+        if (options.near) {
+            if (typeof options.near === 'string') {
+                this.near = options.near;
+            }
+            else {
+                this.near = `${options.near.latitude},${options.near.longitude}`;
+            }
+        }
+        // get container element
+        let containerEL;
+        if (typeof this.config.container === 'string') { // lookup container element by ID
+            containerEL = document.getElementById(this.config.container);
+        }
+        else { // use provided element
+            containerEL = this.config.container; // HTMLElement
+        }
+        if (!containerEL) {
+            throw new RadarAutocompleteContainerNotFound(`Could not find container element: ${this.config.container}`);
+        }
+        this.container = containerEL;
+        // create wrapper for input and result list
+        this.wrapper = document.createElement('div');
+        this.wrapper.classList.add(CLASSNAMES.WRAPPER);
+        this.wrapper.style.display = this.config.responsive ? 'block' : 'inline-block';
+        setWidth(this.wrapper, this.config);
+        // result list element
+        this.resultsList = document.createElement('ul');
+        this.resultsList.classList.add(CLASSNAMES.RESULTS_LIST);
+        this.resultsList.setAttribute('id', CLASSNAMES.RESULTS_LIST);
+        this.resultsList.setAttribute('role', 'listbox');
+        this.resultsList.setAttribute('aria-live', 'polite');
+        this.resultsList.setAttribute('aria-label', 'Search results');
+        setHeight(this.resultsList, this.config);
+        if (containerEL.nodeName === 'INPUT') {
+            // if an <input> element is provided, use that as the inputField,
+            // and append the resultList to it's parent container
+            this.inputField = containerEL;
+            // append to dom
+            this.wrapper.appendChild(this.resultsList);
+            containerEL.parentNode.appendChild(this.wrapper);
+        }
+        else {
+            // if container is not an input, create new input and append to container
+            // create new input
+            this.inputField = document.createElement('input');
+            this.inputField.classList.add(CLASSNAMES.INPUT);
+            this.inputField.placeholder = this.config.placeholder;
+            this.inputField.type = 'text';
+            this.inputField.disabled = this.config.disabled;
+            // search icon
+            const searchIcon = document.createElement('div');
+            searchIcon.classList.add(CLASSNAMES.SEARCH_ICON);
+            // append to DOM
+            this.wrapper.appendChild(this.inputField);
+            this.wrapper.appendChild(this.resultsList);
+            this.wrapper.appendChild(searchIcon);
+            this.container.appendChild(this.wrapper);
+        }
+        // disable browser autofill
+        this.inputField.setAttribute('autocomplete', 'off');
+        // set aria roles
+        this.inputField.setAttribute('role', 'combobox');
+        this.inputField.setAttribute('aria-controls', CLASSNAMES.RESULTS_LIST);
+        this.inputField.setAttribute('aria-expanded', 'false');
+        this.inputField.setAttribute('aria-haspopup', 'listbox');
+        this.inputField.setAttribute('aria-autocomplete', 'list');
+        this.inputField.setAttribute('aria-activedescendant', '');
+        // setup event listeners
+        this.inputField.addEventListener('input', this.handleInput.bind(this));
+        this.inputField.addEventListener('keydown', this.handleKeyboardNavigation.bind(this));
+        if (this.config.hideResultsOnBlur) {
+            this.inputField.addEventListener('blur', this.close.bind(this), true);
+        }
+        Logger.debug('AutocompleteUI initialized with options', this.config);
+    }
+    handleInput() {
+        const { Logger } = this.ctx;
+        // Fetch autocomplete results and display them
+        const query = this.inputField.value;
+        if (query.length < this.config.minCharacters) {
+            return;
+        }
+        this.debouncedFetchResults(query)
+            .then((results) => {
+            const onResults = this.config.onResults;
+            if (onResults) {
+                onResults(results);
+            }
+            this.displayResults(results);
+        })
+            .catch((error) => {
+            Logger.warn(`Autocomplete ui error: ${error.message}`);
+            const onError = this.config.onError;
+            if (onError) {
+                onError(error);
+            }
+        });
+    }
+    debounce(fn, delay) {
+        let timeoutId;
+        let resolveFn;
+        let rejectFn;
+        return (...args) => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                const result = fn.apply(this, args);
+                if (result instanceof Promise) {
+                    result
+                        .then((value) => {
+                        if (resolveFn) {
+                            resolveFn(value);
+                        }
+                    })
+                        .catch((error) => {
+                        if (rejectFn) {
+                            rejectFn(error);
+                        }
+                    });
+                }
+            }, delay);
+            return new Promise((resolve, reject) => {
+                resolveFn = resolve;
+                rejectFn = reject;
+            });
+        };
+    }
+    async fetchResults(query) {
+        const { apis } = this.ctx;
+        const { limit, layers, countryCode, expandUnits, mailable, lang, postalCode, onRequest } = this.config;
+        const params = {
+            query,
+            limit,
+            layers,
+            countryCode,
+            expandUnits,
+            mailable,
+            lang,
+            postalCode,
+        };
+        if (this.near) {
+            params.near = this.near;
+        }
+        if (onRequest) {
+            onRequest(params);
+        }
+        const { addresses } = await apis.Search.autocomplete(params, 'autocomplete-ui');
+        return addresses;
+    }
+    displayResults(results) {
+        // Clear the previous results
+        this.clearResultsList();
+        this.results = results;
+        let marker;
+        if (this.config.showMarkers) {
+            marker = document.createElement('img');
+            marker.classList.add(CLASSNAMES.RESULTS_MARKER);
+            marker.setAttribute('src', getMarkerIcon(this.config.markerColor));
+        }
+        // Create and append list items for each result
+        results.forEach((result, index) => {
+            const li = document.createElement('li');
+            li.classList.add(CLASSNAMES.RESULTS_ITEM);
+            li.setAttribute('role', 'option');
+            li.setAttribute('id', `${CLASSNAMES.RESULTS_ITEM}}-${index}`);
+            // construct result with bolded label
+            let listContent;
+            if (result.formattedAddress.includes(result.addressLabel) && result.layer !== 'postalCode') {
+                // if addressLabel is contained in the formatted address, bold the address label
+                const regex = new RegExp(`(${result.addressLabel}),?`);
+                listContent = result.formattedAddress.replace(regex, '<b>$1</b>');
+            }
+            else {
+                // otherwise append the address or place label to formatted address
+                const label = result.placeLabel || result.addressLabel;
+                listContent = `<b>${label}</b> ${result.formattedAddress}`;
+            }
+            li.innerHTML = listContent;
+            // prepend marker if enabled
+            if (marker) {
+                li.prepend(marker.cloneNode());
+            }
+            // add click handler to each result, use mousedown to fire before blur event
+            li.addEventListener('mousedown', () => {
+                this.select(index);
+            });
+            this.resultsList.appendChild(li);
+        });
+        this.open();
+        if (results.length > 0) {
+            const link = document.createElement('a');
+            link.href = 'https://radar.com?ref=powered_by_radar';
+            link.target = '_blank';
+            this.poweredByLink = link;
+            const poweredByText = document.createElement('span');
+            poweredByText.textContent = 'Powered by';
+            link.appendChild(poweredByText);
+            const radarLogo = document.createElement('span');
+            radarLogo.id = 'radar-powered-logo';
+            radarLogo.textContent = 'Radar';
+            link.appendChild(radarLogo);
+            const poweredByContainer = document.createElement('div');
+            poweredByContainer.classList.add(CLASSNAMES.POWERED_BY_RADAR);
+            poweredByContainer.appendChild(link);
+            this.resultsList.appendChild(poweredByContainer);
+        }
+        else {
+            const noResultsText = document.createElement('div');
+            noResultsText.classList.add(CLASSNAMES.NO_RESULTS);
+            noResultsText.textContent = 'No results';
+            this.resultsList.appendChild(noResultsText);
+        }
+    }
+    open() {
+        if (this.isOpen) {
+            return;
+        }
+        this.inputField.setAttribute('aria-expanded', 'true');
+        this.resultsList.removeAttribute('hidden');
+        this.isOpen = true;
+    }
+    close(e) {
+        if (!this.isOpen) {
+            return;
+        }
+        // run this code async to allow link click to propagate before blur
+        // (add 100ms delay if closed from link click)
+        const linkClick = e && (e.relatedTarget === this.poweredByLink);
+        setTimeout(() => {
+            this.inputField.setAttribute('aria-expanded', 'false');
+            this.inputField.setAttribute('aria-activedescendant', '');
+            this.resultsList.setAttribute('hidden', '');
+            this.highlightedIndex = -1;
+            this.isOpen = false;
+            this.clearResultsList();
+        }, linkClick ? 100 : 0);
+    }
+    goTo(index) {
+        if (!this.isOpen || !this.results.length) {
+            return;
+        }
+        // wrap around
+        if (index < 0) {
+            index = this.results.length - 1;
+        }
+        else if (index >= this.results.length) {
+            index = 0;
+        }
+        const resultItems = this.resultsList.getElementsByTagName('li');
+        if (this.highlightedIndex > -1) {
+            // clear class names on previously highlighted item
+            resultItems[this.highlightedIndex].classList.remove(CLASSNAMES.SELECTED_ITEM);
+        }
+        // add class name to newly highlighted item
+        resultItems[index].classList.add(CLASSNAMES.SELECTED_ITEM);
+        // set aria active descendant
+        this.inputField.setAttribute('aria-activedescendant', `${CLASSNAMES.RESULTS_ITEM}-${index}`);
+        this.highlightedIndex = index;
+    }
+    handleKeyboardNavigation(event) {
+        let key = event.key;
+        // allow event to propagate if result list is not open
+        if (!this.isOpen) {
+            return;
+        }
+        // treat shift+tab as up key
+        if (key === 'Tab' && event.shiftKey) {
+            key = 'ArrowUp';
+        }
+        switch (key) {
+            // Next item
+            case 'Tab':
+            case 'ArrowDown':
+                event.preventDefault();
+                this.goTo(this.highlightedIndex + 1);
+                break;
+            // Prev item
+            case 'ArrowUp':
+                event.preventDefault();
+                this.goTo(this.highlightedIndex - 1);
+                break;
+            // Select
+            case 'Enter':
+                this.select(this.highlightedIndex);
+                break;
+            // Close
+            case 'Esc':
+                this.close();
+                break;
+        }
+    }
+    select(index) {
+        const { Logger } = this.ctx;
+        const result = this.results[index];
+        if (!result) {
+            Logger.warn(`No autocomplete result found at index: ${index}`);
+            return;
+        }
+        let inputValue;
+        if (result.formattedAddress.includes(result.addressLabel)) {
+            inputValue = result.formattedAddress;
+        }
+        else {
+            const label = result.placeLabel || result.addressLabel;
+            inputValue = `${label}, ${result.formattedAddress}`;
+        }
+        this.inputField.value = inputValue;
+        const onSelection = this.config.onSelection;
+        if (onSelection) {
+            onSelection(result);
+        }
+        // clear results list
+        this.close();
+    }
+    clearResultsList() {
+        this.resultsList.innerHTML = '';
+        this.results = [];
+    }
+    // remove elements from DOM
+    remove() {
+        const { Logger } = this.ctx;
+        Logger.debug('AutocompleteUI removed.');
+        this.inputField.remove();
+        this.resultsList.remove();
+        this.wrapper.remove();
+    }
+    setNear(near) {
+        if (near === undefined || near === null) {
+            this.near = undefined;
+        }
+        else if (typeof near === 'string') {
+            this.near = near;
+        }
+        else {
+            this.near = `${near.latitude},${near.longitude}`;
+        }
+        return this;
+    }
+    setPlaceholder(placeholder) {
+        this.config.placeholder = placeholder;
+        this.inputField.placeholder = placeholder;
+        return this;
+    }
+    setDisabled(disabled) {
+        this.config.disabled = disabled;
+        this.inputField.disabled = disabled;
+        return this;
+    }
+    setResponsive(responsive) {
+        this.config.responsive = responsive;
+        setWidth(this.wrapper, this.config);
+        return this;
+    }
+    setWidth(width) {
+        if (width === null) {
+            this.config.width = undefined;
+        }
+        else if (typeof width === 'string' || typeof width === 'number') {
+            this.config.width = width;
+        }
+        setWidth(this.wrapper, this.config);
+        return this;
+    }
+    setMaxHeight(height) {
+        if (height === null) {
+            this.config.maxHeight = undefined;
+        }
+        else if (typeof height === 'string' || typeof height === 'number') {
+            this.config.maxHeight = height;
+        }
+        setHeight(this.resultsList, this.config);
+        return this;
+    }
+    setMinCharacters(minCharacters) {
+        this.config.minCharacters = minCharacters;
+        this.config.threshold = minCharacters;
+        return this;
+    }
+    setLimit(limit) {
+        this.config.limit = limit;
+        return this;
+    }
+    setLang(lang) {
+        if (lang === null) {
+            this.config.lang = undefined;
+        }
+        else if (typeof lang === 'string') {
+            this.config.lang = lang;
+        }
+        return this;
+    }
+    setPostalCode(postalCode) {
+        if (postalCode === null) {
+            this.config.postalCode = undefined;
+        }
+        else if (typeof postalCode === 'string') {
+            this.config.postalCode = postalCode;
+        }
+        return this;
+    }
+    setShowMarkers(showMarkers) {
+        this.config.showMarkers = showMarkers;
+        if (showMarkers) {
+            const marker = document.createElement('img');
+            marker.classList.add(CLASSNAMES.RESULTS_MARKER);
+            marker.setAttribute('src', getMarkerIcon(this.config.markerColor));
+            const resultItems = this.resultsList.getElementsByTagName('li');
+            for (let i = 0; i < resultItems.length; i++) {
+                const currentMarker = resultItems[i].getElementsByClassName(CLASSNAMES.RESULTS_MARKER)[0];
+                if (!currentMarker) {
+                    resultItems[i].prepend(marker.cloneNode());
+                }
+            }
+        }
+        else {
+            const resultItems = this.resultsList.getElementsByTagName('li');
+            for (let i = 0; i < resultItems.length; i++) {
+                const marker = resultItems[i].getElementsByClassName(CLASSNAMES.RESULTS_MARKER)[0];
+                if (marker) {
+                    marker.remove();
+                }
+            }
+        }
+        return this;
+    }
+    setMarkerColor(color) {
+        this.config.markerColor = color;
+        const marker = this.resultsList.getElementsByClassName(CLASSNAMES.RESULTS_MARKER);
+        for (let i = 0; i < marker.length; i++) {
+            marker[i].setAttribute('src', getMarkerIcon(color));
+        }
+        return this;
+    }
+    setHideResultsOnBlur(hideResultsOnBlur) {
+        this.config.hideResultsOnBlur = hideResultsOnBlur;
+        if (hideResultsOnBlur) {
+            this.inputField.addEventListener('blur', this.close.bind(this), true);
+        }
+        else {
+            this.inputField.removeEventListener('blur', this.close.bind(this), true);
+        }
+        return this;
+    }
+}
+
+var version = '5.0.0-beta.5';
+
+function createAutocompletePlugin() {
+    return {
+        name: 'autocomplete',
+        version,
+        install(ctx) {
+            const existing = ctx.Radar.ui || {};
+            // NOTE(jasonl): we're merging with the existing ui namespace since other plugins also add to it like maps
+            ctx.Radar.ui = {
+                ...existing,
+                autocomplete: (options) => new AutocompleteUI(options, ctx),
+            };
+        },
+    };
+}
+
+export { createAutocompletePlugin };
+//# sourceMappingURL=index.js.map