LitElement web component for searching addresses and geolocation

I need a web component that does forward geocoding and geolocation. This is a usual widget you can come across in modern applications and should present itself as a text input field with an icon button on its right. When typing in the text input field, suggestions of existing addresses should appear in a list below the text input field. In order to make the list disappear, the user must choose one of the suggestions or simply clear the text input field. Upon clicking on one of the suggestions, the text presented in the suggestion is set to the text input field, the coordinates (longitude and latitude) of the address are set to hidden fields within the component and the suggestion list is closed. The icon button should offer direct geolocation through the Geolocation API of the browser. If the user clicks on the button and grants to the app the right to geolocate him, then the coordinates are obtained and through reverse geocoding, the associated address is determined. These data are set as values to the input fields of the component like previously. Tech stack: - LitElement: The web component must encompass the input fields and the icon button. Do not use the ShadowDOM i.e. the createRenderRoot method must return "this". Make use of annotations everywhere it is possible. - No styling required. As for the icon button, one can use a unicode character. - Geocoding: Use the MapBox Search API for both forward and reverse geocoding: [login to view URL] You can create your own free tier account for dev.