@maptiler/geocoding-control 3.0.0-rc.6 → 3.0.0-rc.7

package/dist/index.js

@@ -1,18 +1,18 @@
-import { css as L, LitElement as F, svg as q, html as f, unsafeCSS as ge, nothing as H } from "lit";
-import { customElement as O, property as h, state as b, query as Me } from "lit/decorators.js";
-import { convert as Pe } from "geo-coordinates-parser";
+import { css as L, LitElement as F, svg as D, html as f, unsafeCSS as fe, nothing as Z } from "lit";
+import { customElement as O, property as h, state as v, query as Ue } from "lit/decorators.js";
+import { convert as Be } from "geo-coordinates-parser";
 import { classMap as j } from "lit/directives/class-map.js";
-import { repeat as Be } from "lit/directives/repeat.js";
+import { repeat as Me } from "lit/directives/repeat.js";
 import "@turf/clone";
 import { styleMap as Ee } from "lit/directives/style-map.js";
-var Ge = Object.getOwnPropertyDescriptor, De = (e, t, i, n) => {
+var Ge = Object.getOwnPropertyDescriptor, We = (e, t, i, n) => {
   for (var s = n > 1 ? void 0 : n ? Ge(t, i) : t, p = e.length - 1, l; p >= 0; p--)
     (l = e[p]) && (s = l(s) || s);
   return s;
 };
-let J = class extends F {
+let Q = class extends F {
   render() {
-    return q`
+    return D`
       <svg viewBox="0 0 14 14" width="13" height="13">
         <path
           d="M13.12.706a.982.982 0 0 0-1.391 0L6.907 5.517 2.087.696a.982.982 0 1 0-1.391 1.39l4.821 4.821L.696 11.73a.982.982 0 1 0 1.39 1.39l4.821-4.821 4.822 4.821a.982.982 0 1 0 1.39-1.39L8.298 6.908l4.821-4.822a.988.988 0 0 0 0-1.38Z"
@@ -21,23 +21,23 @@ let J = class extends F {
     `;
   }
 };
-J.styles = L`
+Q.styles = L`
     svg {
       display: block;
       fill: var(--color-icon-button);
     }
   `;
-J = De([
+Q = We([
   O("maptiler-geocode-clear-icon")
-], J);
+], Q);
 var je = Object.getOwnPropertyDescriptor, Ae = (e, t, i, n) => {
   for (var s = n > 1 ? void 0 : n ? je(t, i) : t, p = e.length - 1, l; p >= 0; p--)
     (l = e[p]) && (s = l(s) || s);
   return s;
 };
-let X = class extends F {
+let H = class extends F {
   render() {
-    return q`
+    return D`
       <svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M15 0C6.705 0 0 6.705 0 15C0 23.295 6.705 30 15 30C23.295 30 30 23.295 30 15C30 6.705 23.295 0 15 0ZM22.5 20.385L20.385 22.5L15 17.115L9.615 22.5L7.5 20.385L12.885 15L7.5 9.615L9.615 7.5L15 12.885L20.385 7.5L22.5 9.615L17.115 15L22.5 20.385Z"
@@ -46,21 +46,21 @@ let X = class extends F {
     `;
   }
 };
-X.styles = L`
+H.styles = L`
     svg {
       display: block;
       fill: #e15042;
     }
   `;
-X = Ae([
+H = Ae([
   O("maptiler-geocode-fail-icon")
-], X);
-var Re = Object.getOwnPropertyDescriptor, We = (e, t, i, n) => {
+], H);
+var Re = Object.getOwnPropertyDescriptor, Ve = (e, t, i, n) => {
   for (var s = n > 1 ? void 0 : n ? Re(t, i) : t, p = e.length - 1, l; p >= 0; p--)
     (l = e[p]) && (s = l(s) || s);
   return s;
 };
-let Y = class extends F {
+let J = class extends F {
   render() {
     return f`
       <div>
@@ -72,7 +72,7 @@ let Y = class extends F {
     `;
   }
 };
-Y.styles = L`
+J.styles = L`
     div {
       position: absolute;
       left: 50%;
@@ -99,17 +99,17 @@ Y.styles = L`
       }
     }
   `;
-Y = We([
+J = Ve([
   O("maptiler-geocode-loading-icon")
-], Y);
-var Ve = Object.getOwnPropertyDescriptor, ze = (e, t, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? Ve(t, i) : t, p = e.length - 1, l; p >= 0; p--)
+], J);
+var De = Object.getOwnPropertyDescriptor, ze = (e, t, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? De(t, i) : t, p = e.length - 1, l; p >= 0; p--)
     (l = e[p]) && (s = l(s) || s);
   return s;
 };
-let ee = class extends F {
+let X = class extends F {
   render() {
-    return q`
+    return D`
       <svg viewBox="0 0 60.006 21.412" width="14" height="20">
         <path
           d="M30.003-26.765C13.46-26.765 0-14.158 0 1.337c0 23.286 24.535 42.952 28.39 46.04.24.192.402.316.471.376.323.282.732.424 1.142.424.41 0 .82-.142 1.142-.424.068-.06.231-.183.471-.376 3.856-3.09 28.39-22.754 28.39-46.04 0-15.495-13.46-28.102-30.003-28.102Zm1.757 12.469c4.38 0 7.858 1.052 10.431 3.158 2.595 2.105 3.89 4.913 3.89 8.422 0 2.34-.53 4.362-1.593 6.063-1.063 1.702-3.086 3.616-6.063 5.742-2.042 1.51-3.337 2.659-3.89 3.446-.532.787-.8 1.82-.8 3.096v1.914h-8.449V15.18c0-2.041.434-3.815 1.306-5.325.872-1.51 2.467-3.118 4.785-4.82 2.233-1.594 3.7-2.89 4.402-3.889a5.582 5.582 0 0 0 1.087-3.35c0-1.382-.51-2.435-1.531-3.158-1.02-.723-2.45-1.087-4.28-1.087-3.19 0-6.826 1.047-10.91 3.131l-3.472-6.986c4.742-2.659 9.77-3.992 15.087-3.992Zm-1.88 37.324c1.765 0 3.124.472 4.08 1.408.98.936 1.47 2.276 1.47 4.02 0 1.68-.49 3.007-1.47 3.985-.977.957-2.336 1.435-4.08 1.435-1.787 0-3.171-.465-4.15-1.4-.978-.958-1.47-2.298-1.47-4.02 0-1.787.48-3.14 1.436-4.054.957-.915 2.355-1.374 4.184-1.374Z"
@@ -118,23 +118,23 @@ let ee = class extends F {
     `;
   }
 };
-ee.styles = L`
+X.styles = L`
     svg {
       display: block;
       fill: var(--color-icon-button);
     }
   `;
-ee = ze([
+X = ze([
   O("maptiler-geocode-reverse-geocoding-icon")
-], ee);
+], X);
 var qe = Object.getOwnPropertyDescriptor, Ne = (e, t, i, n) => {
   for (var s = n > 1 ? void 0 : n ? qe(t, i) : t, p = e.length - 1, l; p >= 0; p--)
     (l = e[p]) && (s = l(s) || s);
   return s;
 };
-let te = class extends F {
+let Y = class extends F {
   render() {
-    return q`
+    return D`
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="13"
@@ -147,7 +147,7 @@ let te = class extends F {
     `;
   }
 };
-te.styles = L`
+Y.styles = L`
     circle {
       stroke-width: 1.875;
       fill: none;
@@ -163,23 +163,23 @@ te.styles = L`
       stroke: var(--color-icon-button);
     }
   `;
-te = Ne([
+Y = Ne([
   O("maptiler-geocode-search-icon")
-], te);
+], Y);
 function Ke(e, t, i) {
   const n = t[1], s = t[0], p = n - s;
   return e === n && i ? e : ((e - s) % p + p) % p + s;
 }
-let P;
+let U;
 async function Ze(e, t, i) {
   for (const n of t ?? [])
     if (!(e && (n.minZoom != null && n.minZoom > e[0] || n.maxZoom != null && n.maxZoom < e[0]))) {
       if (n.type === "fixed")
         return n.coordinates.join(",");
       if (n.type === "client-geolocation")
-        if (P && n.cachedLocationExpiry && P.time + n.cachedLocationExpiry > Date.now()) {
-          if (P.coords)
-            return P.coords;
+        if (U && n.cachedLocationExpiry && U.time + n.cachedLocationExpiry > Date.now()) {
+          if (U.coords)
+            return U.coords;
         } else {
           let s;
           try {
@@ -187,18 +187,18 @@ async function Ze(e, t, i) {
               i.signal.addEventListener("abort", () => {
                 l(Error("aborted"));
               }), navigator.geolocation.getCurrentPosition(
-                (_) => {
-                  p([_.coords.longitude, _.coords.latitude].map((v) => v.toFixed(6)).join(","));
+                ($) => {
+                  p([$.coords.longitude, $.coords.latitude].map((x) => x.toFixed(6)).join(","));
                 },
-                (_) => {
-                  l(_);
+                ($) => {
+                  l($);
                 },
                 n
               );
             }), s;
           } catch {
           } finally {
-            n.cachedLocationExpiry && (P = {
+            n.cachedLocationExpiry && (U = {
               time: Date.now(),
               coords: s
             });
@@ -213,20 +213,20 @@ async function Ze(e, t, i) {
     }
 }
 const Qe = ".sprite-icon{align-self:center;justify-self:center;opacity:.75;background-repeat:no-repeat}li{text-align:left;cursor:default;display:grid;grid-template-columns:40px 1fr;color:var(--color-text);padding:8px 0;font-size:14px;line-height:18px;min-width:fit-content;outline:0}li:first-child{padding-top:10px}li:last-child{padding-bottom:10px}li.picked{background-color:#e7edff}li.picked .secondary{color:#96a4c7;padding-left:4px}li.picked .line2{color:#96a4c7}li.selected{background-color:#f3f6ff;animation:backAndForth 5s linear infinite}li.selected .primary{color:#2b8bfb}li.selected .secondary{color:#a2adc7;padding-left:4px}li.selected .line2{color:#a2adc7}li>img{align-self:center;justify-self:center;opacity:.75}.texts{padding:0 17px 0 0}.texts>*{white-space:nowrap;display:block;min-width:fit-content}.primary{font-weight:600}.secondary{color:#aeb6c7;padding-left:4px}.line2{color:#aeb6c7}@keyframes backAndForth{0%{transform:translate(0)}10%{transform:translate(0)}45%{transform:translate(calc(-100% + 270px))}55%{transform:translate(calc(-100% + 270px))}90%{transform:translate(0)}to{transform:translate(0)}}";
-var He = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, me = (e) => {
+var He = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, ge = (e) => {
   throw TypeError(e);
-}, $ = (e, t, i, n) => {
+}, _ = (e, t, i, n) => {
   for (var s = n > 1 ? void 0 : n ? Je(t, i) : t, p = e.length - 1, l; p >= 0; p--)
     (l = e[p]) && (s = (n ? l(t, i, s) : l(s)) || s);
   return n && s && He(t, i, s), s;
-}, ye = (e, t, i) => t.has(e) || me("Cannot " + i), u = (e, t, i) => (ye(e, t, "read from private field"), i ? i.call(e) : t.get(e)), Xe = (e, t, i) => t.has(e) ? me("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), U = (e, t, i) => (ye(e, t, "access private method"), i), d, W, B, g, ve, xe, oe, ie;
-const be = typeof devicePixelRatio > "u" || devicePixelRatio > 1.25, we = be ? "@2x" : "", T = be ? 2 : 1;
-let I, _e, w = class extends F {
+}, me = (e, t, i) => t.has(e) || ge("Cannot " + i), u = (e, t, i) => (me(e, t, "read from private field"), i ? i.call(e) : t.get(e)), Xe = (e, t, i) => t.has(e) ? ge("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), C = (e, t, i) => (me(e, t, "access private method"), i), d, A, M, g, ye, ve, re, ee;
+const xe = typeof devicePixelRatio > "u" || devicePixelRatio > 1.25, be = xe ? "@2x" : "", T = xe ? 2 : 1;
+let I, we, w = class extends F {
   constructor() {
     super(...arguments), Xe(this, d), this.itemStyle = "default", this.showPlaceType = "if-needed", this.missingIconsCache = /* @__PURE__ */ new Set(), this.iconsBaseUrl = "", this.index = 0;
   }
   willUpdate(e) {
-    e.has("feature") && u(this, d, W) && (this.index = u(this, d, W).length, U(this, d, oe).call(this));
+    e.has("feature") && u(this, d, A) && (this.index = u(this, d, A).length, C(this, d, re).call(this));
   }
   render() {
     return f`
@@ -244,90 +244,90 @@ let I, _e, w = class extends F {
                 style=${Ee({
       width: `${this.spriteIcon.width / T}px`,
       height: `${this.spriteIcon.height / T}px`,
-      backgroundImage: `url(${this.iconsBaseUrl}sprite${we}.png)`,
+      backgroundImage: `url(${this.iconsBaseUrl}sprite${be}.png)`,
       backgroundPosition: `-${this.spriteIcon.x / T}px -${this.spriteIcon.y / T}px`,
       backgroundSize: `${I.width / T}px ${I.height / T}px`
     })}
                 title=${u(this, d, g)}
               />
-            ` : this.imageUrl ? f` <img src=${this.imageUrl} alt=${this.category} title=${u(this, d, g)} @error=${U(this, d, xe)} />` : this.feature?.address ? f` <img src=${this.iconsBaseUrl + "housenumber.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : this.feature?.id.startsWith("road.") ? f` <img src=${this.iconsBaseUrl + "road.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : this.feature?.id.startsWith("address.") ? f` <img src=${this.iconsBaseUrl + "street.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : this.feature?.id.startsWith("postal_code.") ? f` <img src=${this.iconsBaseUrl + "postal_code.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : this.feature?.id.startsWith("poi.") ? f` <img src=${this.iconsBaseUrl + "poi.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : u(this, d, B) ? f` <img src=${this.iconsBaseUrl + "reverse.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : f` <img src=${this.iconsBaseUrl + "area.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> `}
+            ` : this.imageUrl ? f` <img src=${this.imageUrl} alt=${this.category} title=${u(this, d, g)} @error=${C(this, d, ve)} />` : this.feature?.address ? f` <img src=${this.iconsBaseUrl + "housenumber.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : this.feature?.id.startsWith("road.") ? f` <img src=${this.iconsBaseUrl + "road.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : this.feature?.id.startsWith("address.") ? f` <img src=${this.iconsBaseUrl + "street.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : this.feature?.id.startsWith("postal_code.") ? f` <img src=${this.iconsBaseUrl + "postal_code.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : this.feature?.id.startsWith("poi.") ? f` <img src=${this.iconsBaseUrl + "poi.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : u(this, d, M) ? f` <img src=${this.iconsBaseUrl + "reverse.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> ` : f` <img src=${this.iconsBaseUrl + "area.svg"} alt=${u(this, d, g)} title=${u(this, d, g)} /> `}
 
         <span class="texts">
           <span>
-            <span class="primary"> ${u(this, d, B) ? this.feature?.place_name : this.feature?.place_name.replace(/,.*/, "")} </span>
+            <span class="primary"> ${u(this, d, M) ? this.feature?.place_name : this.feature?.place_name.replace(/,.*/, "")} </span>
 
-            ${this.showPlaceType === "always" || this.showPlaceType !== "never" && !this.feature?.address && !this.feature?.id.startsWith("road.") && !this.feature?.id.startsWith("address.") && !this.feature?.id.startsWith("postal_code.") && (!this.feature?.id.startsWith("poi.") || !this.imageUrl) && !u(this, d, B) ? f` <span class="secondary"> ${u(this, d, g)} </span> ` : H}
+            ${this.showPlaceType === "always" || this.showPlaceType !== "never" && !this.feature?.address && !this.feature?.id.startsWith("road.") && !this.feature?.id.startsWith("address.") && !this.feature?.id.startsWith("postal_code.") && (!this.feature?.id.startsWith("poi.") || !this.imageUrl) && !u(this, d, M) ? f` <span class="secondary"> ${u(this, d, g)} </span> ` : Z}
           </span>
 
-          <span class="line2"> ${u(this, d, B) ? this.feature?.text : this.feature?.place_name.replace(/[^,]*,?s*/, "")} </span>
+          <span class="line2"> ${u(this, d, M) ? this.feature?.text : this.feature?.place_name.replace(/[^,]*,?s*/, "")} </span>
         </span>
       </li>
     `;
   }
 };
 d = /* @__PURE__ */ new WeakSet();
-W = function() {
+A = function() {
   return this.feature?.properties?.categories;
 };
-B = function() {
+M = function() {
   return this.feature?.place_type[0] === "reverse";
 };
 g = function() {
   return this.feature?.properties?.categories?.join(", ") ?? this.feature?.place_type_name?.[0] ?? this.feature?.place_type[0];
 };
-ve = function() {
-  _e ??= fetch(`${this.iconsBaseUrl}sprite${we}.json`).then((e) => e.json()).then((e) => {
+ye = function() {
+  we ??= fetch(`${this.iconsBaseUrl}sprite${be}.json`).then((e) => e.json()).then((e) => {
     I = e;
   }).catch(() => {
     I = null;
   });
 };
-xe = function() {
-  this.imageUrl && this.missingIconsCache.add(this.imageUrl), U(this, d, oe).call(this);
+ve = function() {
+  this.imageUrl && this.missingIconsCache.add(this.imageUrl), C(this, d, re).call(this);
 };
-oe = function() {
-  I !== void 0 ? U(this, d, ie).call(this) : (U(this, d, ve).call(this), _e?.then(() => {
-    U(this, d, ie).call(this);
+re = function() {
+  I !== void 0 ? C(this, d, ee).call(this) : (C(this, d, ye).call(this), we?.then(() => {
+    C(this, d, ee).call(this);
   }));
 };
-ie = function() {
+ee = function() {
   do {
-    if (this.index--, this.category = u(this, d, W)?.[this.index], this.spriteIcon = this.category ? I?.icons[this.category] : void 0, this.spriteIcon)
+    if (this.index--, this.category = u(this, d, A)?.[this.index], this.spriteIcon = this.category ? I?.icons[this.category] : void 0, this.spriteIcon)
       break;
     this.imageUrl = this.category ? this.iconsBaseUrl + this.category.replace(/ /g, "_") + ".svg" : void 0;
   } while (this.index > -1 && (!this.imageUrl || this.missingIconsCache.has(this.imageUrl)));
 };
 w.styles = L`
-    ${ge(Qe)}
+    ${fe(Qe)}
   `;
-$([
+_([
   h({ type: Object })
 ], w.prototype, "feature", 2);
-$([
+_([
   h({ type: String })
 ], w.prototype, "itemStyle", 2);
-$([
+_([
   h({ type: String })
 ], w.prototype, "showPlaceType", 2);
-$([
+_([
   h({ attribute: !1 })
 ], w.prototype, "missingIconsCache", 2);
-$([
+_([
   h({ type: String })
 ], w.prototype, "iconsBaseUrl", 2);
-$([
-  b()
+_([
+  v()
 ], w.prototype, "category", 2);
-$([
-  b()
+_([
+  v()
 ], w.prototype, "imageUrl", 2);
-$([
-  b()
+_([
+  v()
 ], w.prototype, "spriteIcon", 2);
-$([
-  b()
+_([
+  v()
 ], w.prototype, "index", 2);
-w = $([
+w = _([
   O("maptiler-geocoder-feature-item")
 ], w);
 const Ye = "form{font-family:Open Sans,Ubuntu,Helvetica Neue,Arial,Helvetica,sans-serif;position:relative;background-color:#fff;z-index:10;border-radius:4px;margin:0;transition:max-width .25s;box-shadow:0 2px 5px #33335926;--color-text: #444952;--color-icon-button: #444952;pointer-events:all}form,form *,form *:after,form *:before{box-sizing:border-box}form.can-collapse{max-width:29px}form.can-collapse input::placeholder{transition:opacity .25s;opacity:0}form{width:270px;max-width:270px}form:focus-within,form:hover{width:270px;max-width:270px}form input::placeholder,form:focus-within input::placeholder,form:hover input::placeholder{opacity:1}input{font:inherit;font-size:14px;flex-grow:1;min-height:29px;background-color:transparent;color:#444952;white-space:nowrap;overflow:hidden;border:0;margin:0;padding:0}input:focus{color:#444952;outline:0;outline:none;box-shadow:none}ul,div.error,div.no-results{background-color:#fff;border-radius:4px;left:0;list-style:none;margin:0;padding:0;position:absolute;width:100%;top:calc(100% + 6px);overflow:hidden}ul{font-size:14px;line-height:16px;box-shadow:0 5px 10px #33335926}div.error,div.no-results{font:inherit;line-height:18px;font-size:12px;display:flex;gap:16px}div.error{padding:16px;font-weight:600;color:#e25041;background-color:#fbeae8}div.error div{flex-grow:1}div.error maptiler-geocode-fail-icon{flex-shrink:0;width:20px;height:20px}div.error button{flex-shrink:0}div.error button maptiler-geocode-clear-icon{--color-icon-button: #e25041}div.error button:hover maptiler-geocode-clear-icon,div.error button:active maptiler-geocode-clear-icon{--color-icon-button: inherit}div.no-results{padding:14px 24px 14px 16px;font-weight:400;color:#6b7c93;box-shadow:0 5px 10px #33335926}div.no-results maptiler-geocode-fail-icon{margin-top:4px;flex-shrink:0;width:20px;height:20px}ul.options.open-on-top{top:auto;bottom:calc(100% + 6px)}button{padding:0;margin:0;border:0;background-color:transparent;height:auto;width:auto}button:hover{background-color:transparent}button:hover,button:active{--color-icon-button: #2b8bfb}.input-group{display:flex;align-items:stretch;gap:7px;padding-inline:8px;border-radius:4px;overflow:hidden}.input-group:focus-within{outline:#2b8bfb solid 2px}.search-button{flex-shrink:0}.clear-button-container{display:flex;display:none;position:relative;align-items:stretch}.clear-button-container.displayable{display:flex;flex-shrink:0}:host(.maptiler-geocoder):not(:empty){box-shadow:none}:host(.maptiler-geocoder) .input-group{border:white solid 2px}:host(.maptiler-geocoder) .input-group:focus-within{border:#2b8bfb solid 2px;outline:0;outline:none}:host(.maptiler-geocoder) form.can-collapse{max-width:33px}:host(.maptiler-geocoder) form,:host(.maptiler-geocoder) form:focus-within,:host(.maptiler-geocoder) form:hover{width:270px;max-width:270px}:host(.leaflet-geocoder) .input-group{border:white solid 1px}:host(.leaflet-geocoder) form.can-collapse{max-width:30px}";
@@ -337,13 +337,13 @@ var et = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, $e = (e) =
   for (var s = n > 1 ? void 0 : n ? tt(t, i) : t, p = e.length - 1, l; p >= 0; p--)
     (l = e[p]) && (s = (n ? l(t, i, s) : l(s)) || s);
   return n && s && et(t, i, s), s;
-}, ae = (e, t, i) => t.has(e) || $e("Cannot " + i), x = (e, t, i) => (ae(e, t, "read from private field"), i ? i.call(e) : t.get(e)), C = (e, t, i) => t.has(e) ? $e("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), A = (e, t, i, n) => (ae(e, t, "write to private field"), t.set(e, i), i), c = (e, t, i) => (ae(e, t, "access private method"), i), V, R, E, se, G, r, z, ke, Ie, le, y, ne, N, ce, he, k, pe, K, Le, re, Fe, Oe, Se, Te, Ce;
+}, oe = (e, t, i) => t.has(e) || $e("Cannot " + i), b = (e, t, i) => (oe(e, t, "read from private field"), i ? i.call(e) : t.get(e)), B = (e, t, i) => t.has(e) ? $e("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), te = (e, t, i, n) => (oe(e, t, "write to private field"), t.set(e, i), i), c = (e, t, i) => (oe(e, t, "access private method"), i), R, E, ie, G, r, V, _e, ae, y, le, z, ne, ce, k, he, q, ke, se, Ie, Le, Fe, Oe, Se, Te, Ce;
 let o = class extends F {
   constructor() {
-    super(...arguments), C(this, r), this.clearListOnPick = !1, this.clearOnBlur = !1, this.collapsed = !1, this.excludeTypes = !1, this.exhaustiveReverseGeocoding = !1, this.fetchFullGeometryOnPick = !1, this.keepListOpen = !1, this.openListOnTop = !1, this.reverseActive = !1, this.searchValue = "", this.selectedItemIndex = -1, this.cachedFeatures = [], this.lastSearchUrl = "", this.focused = !1, this.focusedDelayed = !1, C(this, V, !1), C(this, R, !1), C(this, E), C(this, se, /* @__PURE__ */ new Set()), C(this, G);
+    super(...arguments), B(this, r), this.clearListOnPick = !1, this.clearOnBlur = !1, this.collapsed = !1, this.excludeTypes = !1, this.exhaustiveReverseGeocoding = !1, this.fetchFullGeometryOnPick = !1, this.keepListOpen = !1, this.openListOnTop = !1, this.reverseActive = !1, this.searchValue = "", this.selectedItemIndex = -1, this.cachedFeatures = [], this.lastSearchUrl = "", this.focused = !1, this.isFeatureListVisible = !1, this.isFeatureListInteractedWith = !1, B(this, R, !1), B(this, E), B(this, ie, /* @__PURE__ */ new Set()), B(this, G);
   }
   firstUpdated() {
-    A(this, V, !0);
+    te(this, R, !0);
   }
   /**
    * Set the options of this instance.
@@ -362,7 +362,7 @@ let o = class extends F {
    * @param value text to set
    */
   setQuery(e) {
-    c(this, r, he).call(this, e, { external: !0 }), c(this, r, ce).call(this);
+    c(this, r, ce).call(this, e, { external: !0 }), c(this, r, ne).call(this);
   }
   /**
    * Set the content of search input box and immediately submit it.
@@ -370,7 +370,7 @@ let o = class extends F {
    * @param value text to set and submit
    */
   submitQuery(e) {
-    c(this, r, pe).call(this, e);
+    c(this, r, he).call(this, e);
   }
   /**
    * Clear search result list.
@@ -400,27 +400,25 @@ let o = class extends F {
   }
   /** @internal */
   handleMapChange(e) {
-    A(this, G, e);
+    te(this, G, e);
   }
   /** @internal */
   handleMapClick(e) {
-    this.reverseActive && c(this, r, Le).call(this, e);
+    this.reverseActive && c(this, r, ke).call(this, e);
   }
   willUpdate(e) {
-    e.has("error") && this.error && console.error("[MapTilerGeocodingControl] Error:", this.error), e.has("enableReverse") && (this.reverseActive = this.enableReverse === "always"), ["picked"].some((t) => e.has(t)) && this.picked && (this.clearListOnPick && c(this, r, k).call(this), this.selectedItemIndex = -1), ["searchValue", "minLength"].some((t) => e.has(t)) && x(this, r, le) && (c(this, r, k).call(this), this.error = void 0), ["focused"].some((t) => e.has(t)) && setTimeout(() => {
-      this.focusedDelayed = this.focused, this.clearOnBlur && !this.focused && (this.searchValue = "");
-    }, 100), ["selectFirst", "listFeatures", "selectedItemIndex", "picked"].some((t) => e.has(t)) && this.selectFirst !== !1 && this.listFeatures?.length && this.selectedItemIndex == -1 && !this.picked && (this.selectedItemIndex = 0), ["listFeatures", "selectedItemIndex"].some((t) => e.has(t)) && c(this, r, y).call(this, "select", { feature: x(this, r, z) }), ["picked"].some((t) => e.has(t)) && this.picked && this.picked.id !== e.get("picked")?.id && (this.fetchFullGeometryOnPick && !this.picked.address && this.picked.geometry.type === "Point" && this.picked.place_type[0] !== "reverse" ? c(this, r, K).call(this, this.picked.id, { byId: !0 }) : Promise.resolve()).then(
+    e.has("error") && this.error && console.error("[MapTilerGeocodingControl] Error:", this.error), e.has("enableReverse") && (this.reverseActive = this.enableReverse === "always"), ["picked"].some((t) => e.has(t)) && this.picked && (this.clearListOnPick && c(this, r, k).call(this), this.selectedItemIndex = -1), ["searchValue", "minLength"].some((t) => e.has(t)) && b(this, r, ae) && (c(this, r, k).call(this), this.error = void 0), ["focused", "listIsInteractedWith"].some((t) => e.has(t)) && this.clearOnBlur && !this.focused && !this.isFeatureListInteractedWith && (this.searchValue = ""), ["selectFirst", "listFeatures", "selectedItemIndex", "picked"].some((t) => e.has(t)) && this.selectFirst !== !1 && this.listFeatures?.length && this.selectedItemIndex == -1 && !this.picked && (this.selectedItemIndex = 0), ["listFeatures", "selectedItemIndex"].some((t) => e.has(t)) && c(this, r, y).call(this, "select", { feature: b(this, r, V) }), ["picked"].some((t) => e.has(t)) && this.picked && this.picked.id !== e.get("picked")?.id && (this.fetchFullGeometryOnPick && !this.picked.address && this.picked.geometry.type === "Point" && this.picked.place_type[0] !== "reverse" ? c(this, r, q).call(this, this.picked.id, { byId: !0 }) : Promise.resolve()).then(
       () => {
         c(this, r, y).call(this, "pick", { feature: this.picked });
       },
       (t) => {
         t && typeof t == "object" && "name" in t && t.name === "AbortError" || (this.error = t, c(this, r, y).call(this, "pick", { feature: this.picked }));
       }
-    ), ["listFeatures", "focusedDelayed"].some((t) => e.has(t)) && (x(this, r, ke) ? (c(this, r, y).call(this, "featuresshow"), A(this, R, !0)) : x(this, R) && c(this, r, y).call(this, "featureshide")), ["reverseActive"].some((t) => e.has(t)) && c(this, r, y).call(this, "reversetoggle", { reverse: this.reverseActive });
+    ), ["listFeatures", "focused", "isFeatureListInteractedWith", "keepListOpen"].some((t) => e.has(t)) && (this.isFeatureListVisible = !!this.listFeatures?.length && (this.focused || this.isFeatureListInteractedWith || this.keepListOpen)), ["isFeatureListVisible"].some((t) => e.has(t)) && (this.isFeatureListVisible ? c(this, r, y).call(this, "featuresshow") : c(this, r, y).call(this, "featureshide")), ["reverseActive"].some((t) => e.has(t)) && c(this, r, y).call(this, "reversetoggle", { reverse: this.reverseActive });
   }
   render() {
     return f`
-      <form @submit=${c(this, r, ne)} class=${j({ "can-collapse": this.collapsed && this.searchValue === "" })}>
+      <form @submit=${c(this, r, le)} class=${j({ "can-collapse": this.collapsed && this.searchValue === "" })}>
         <div class="input-group">
           <button
             class="search-button"
@@ -437,15 +435,15 @@ let o = class extends F {
             @focus=${() => this.focused = !0}
             @blur=${() => this.focused = !1}
             @click=${() => this.focused = !0}
-            @keydown=${c(this, r, re)}
-            @input=${c(this, r, Fe)}
+            @keydown=${c(this, r, se)}
+            @input=${c(this, r, Ie)}
             @change=${() => this.picked = void 0}
             placeholder=${this.placeholder ?? "Search"}
             aria-label=${this.placeholder ?? "Search"}
           />
 
           <div class="clear-button-container ${j({ displayable: this.searchValue !== "" })}">
-            ${x(this, r, Ie) ? f`<maptiler-geocode-loading-icon></maptiler-geocode-loading-icon>` : f`
+            ${b(this, r, _e) ? f`<maptiler-geocode-loading-icon></maptiler-geocode-loading-icon>` : f`
                   <button type="button" @click=${c(this, r, Ce)} title=${this.clearButtonTitle ?? "clear"}>
                     <maptiler-geocode-clear-icon></maptiler-geocode-clear-icon>
                   </button>
@@ -461,7 +459,7 @@ let o = class extends F {
                 >
                   <maptiler-geocode-reverse-geocoding-icon></maptiler-geocode-reverse-geocoding-icon>
                 </button>
-              ` : H}
+              ` : Z}
 
           <!-- <slot /> -->
         </div>
@@ -476,7 +474,7 @@ let o = class extends F {
                   <maptiler-geocode-clear-icon></maptiler-geocode-clear-icon>
                 </button>
               </div>
-            ` : !this.focusedDelayed && !this.keepListOpen || this.listFeatures === void 0 ? H : this.listFeatures.length === 0 ? f`
+            ` : !this.focused && !this.isFeatureListInteractedWith && !this.keepListOpen || this.listFeatures === void 0 ? Z : this.listFeatures.length === 0 ? f`
                   <div class="no-results">
                     <maptiler-geocode-fail-icon></maptiler-geocode-fail-icon>
 
@@ -485,8 +483,15 @@ let o = class extends F {
                     </div>
                   </div>
                 ` : f`
-                  <ul class="options ${j({ "open-on-top": this.openListOnTop })}" @mouseleave=${c(this, r, Te)} @keydown=${c(this, r, re)} role="listbox">
-                    ${Be(
+                  <ul
+                    class="options ${j({ "open-on-top": this.openListOnTop })}"
+                    @pointerleave=${c(this, r, Oe)}
+                    @pointerdown=${c(this, r, Se)}
+                    @pointerup=${c(this, r, Te)}
+                    @keydown=${c(this, r, se)}
+                    role="listbox"
+                  >
+                    ${Me(
       this.listFeatures,
       (e) => e.id + (e.address ? "," + e.address : ""),
       (e, t) => f`
@@ -494,17 +499,15 @@ let o = class extends F {
                           .feature=${e}
                           .showPlaceType=${this.showPlaceType ?? "if-needed"}
                           itemStyle=${this.selectedItemIndex === t ? "selected" : this.picked?.id === e.id ? "picked" : "default"}
-                          @mouseenter=${() => {
-        c(this, r, Se).call(this, t);
+                          @pointerenter=${() => {
+        c(this, r, Fe).call(this, t);
       }}
                           @select=${() => {
-        c(this, r, Oe).call(this, e);
+        c(this, r, Le).call(this, e);
       }}
-                          .missingIconsCache=${x(this, se)}
-                          .iconsBaseUrl=${this.iconsBaseUrl ?? "https://cdn.maptiler.com/maptiler-geocoding-control/v3.0.0-rc.6/icons/"}
-                        >
-                          ${e.place_name}
-                        </maptiler-geocoder-feature-item>
+                          .missingIconsCache=${b(this, ie)}
+                          .iconsBaseUrl=${this.iconsBaseUrl ?? "https://cdn.maptiler.com/maptiler-geocoding-control/v3.0.0-rc.7/icons/"}
+                        />
                       `
     )}
                   </ul>
@@ -513,26 +516,22 @@ let o = class extends F {
     `;
   }
 };
-V = /* @__PURE__ */ new WeakMap();
 R = /* @__PURE__ */ new WeakMap();
 E = /* @__PURE__ */ new WeakMap();
-se = /* @__PURE__ */ new WeakMap();
+ie = /* @__PURE__ */ new WeakMap();
 G = /* @__PURE__ */ new WeakMap();
 r = /* @__PURE__ */ new WeakSet();
-z = function() {
+V = function() {
   return this.listFeatures?.[this.selectedItemIndex];
 };
-ke = function() {
-  return !!this.listFeatures?.length && (this.focusedDelayed || this.keepListOpen);
-};
-Ie = function() {
+_e = function() {
   return this.abortController !== void 0;
 };
-le = function() {
+ae = function() {
   return this.searchValue.length < (this.minLength ?? 2);
 };
 y = function(e, ...[t]) {
-  x(this, V) && this.dispatchEvent(
+  b(this, R) && this.dispatchEvent(
     new CustomEvent(e, {
       bubbles: !0,
       composed: !0,
@@ -540,30 +539,30 @@ y = function(e, ...[t]) {
     })
   );
 };
-ne = function(e) {
-  e?.preventDefault(), this.focused = !1, clearTimeout(x(this, E)), this.selectedItemIndex > -1 && this.listFeatures ? (this.picked = this.listFeatures[this.selectedItemIndex], this.searchValue = this.picked.place_type[0] === "reverse" ? this.picked.place_name : this.picked.place_name.replace(/,.*/, ""), this.error = void 0, this.selectedItemIndex = -1) : this.searchValue && c(this, r, K).call(this, this.searchValue, { exact: !0, external: e === void 0 }).then(() => {
+le = function(e) {
+  e?.preventDefault(), this.focused = !1, clearTimeout(b(this, E)), this.selectedItemIndex > -1 && this.listFeatures ? (this.picked = this.listFeatures[this.selectedItemIndex], this.searchValue = this.picked.place_type[0] === "reverse" ? this.picked.place_name : this.picked.place_name.replace(/,.*/, ""), this.error = void 0, this.selectedItemIndex = -1) : this.searchValue && c(this, r, q).call(this, this.searchValue, { exact: !0, external: e === void 0 }).then(() => {
     this.picked = void 0;
   }).catch((t) => this.error = t);
 };
-N = function(e) {
+z = function(e) {
   try {
-    return Pe(e, 6);
+    return Be(e, 6);
   } catch {
     return !1;
   }
 };
-ce = function() {
+ne = function() {
   setTimeout(() => {
     this.input.focus(), this.focused = !0, this.input.select();
   });
 };
-he = function(e, { external: t = !1 } = {}) {
-  if (this.searchValue = e, c(this, r, y).call(this, "querychange", { query: this.searchValue, reverseCoords: c(this, r, N).call(this, e) }), this.error = void 0, this.picked = void 0, this.showResultsWhileTyping !== !1) {
-    if (clearTimeout(x(this, E)), x(this, r, le))
+ce = function(e, { external: t = !1 } = {}) {
+  if (this.searchValue = e, c(this, r, y).call(this, "querychange", { query: this.searchValue, reverseCoords: c(this, r, z).call(this, e) }), this.error = void 0, this.picked = void 0, this.showResultsWhileTyping !== !1) {
+    if (clearTimeout(b(this, E)), b(this, r, ae))
       return;
     const i = this.searchValue;
-    A(this, E, window.setTimeout(() => {
-      c(this, r, K).call(this, i, { external: t }).catch((n) => this.error = n);
+    te(this, E, window.setTimeout(() => {
+      c(this, r, q).call(this, i, { external: t }).catch((n) => this.error = n);
     }, this.debounceSearch ?? 200));
   } else
     c(this, r, k).call(this);
@@ -571,47 +570,47 @@ he = function(e, { external: t = !1 } = {}) {
 k = function() {
   this.listFeatures !== void 0 && (this.listFeatures = void 0, c(this, r, y).call(this, "featuresclear"));
 };
-pe = function(e) {
-  this.searchValue = e, c(this, r, y).call(this, "querychange", { query: this.searchValue, reverseCoords: c(this, r, N).call(this, e) }), this.selectedItemIndex = -1, c(this, r, ne).call(this);
+he = function(e) {
+  this.searchValue = e, c(this, r, y).call(this, "querychange", { query: this.searchValue, reverseCoords: c(this, r, z).call(this, e) }), this.selectedItemIndex = -1, c(this, r, le).call(this);
 };
-K = async function(e, { byId: t = !1, exact: i = !1, external: n = !1 } = {}) {
+q = async function(e, { byId: t = !1, exact: i = !1, external: n = !1 } = {}) {
   this.error = void 0, this.abortController?.abort();
   const s = new AbortController();
   this.abortController = s;
   try {
-    const p = this.apiUrl ?? "https://api.maptiler.com/geocoding", l = c(this, r, N).call(this, e), _ = new URL(p + "/" + encodeURIComponent(l ? `${l.decimalLongitude},${l.decimalLatitude}` : e) + ".json"), v = _.searchParams;
-    this.language !== void 0 && v.set("language", Array.isArray(this.language) ? this.language.join(",") : this.language ?? "");
-    const [Z] = x(this, G) ?? [void 0];
+    const p = this.apiUrl ?? "https://api.maptiler.com/geocoding", l = c(this, r, z).call(this, e), $ = new URL(p + "/" + encodeURIComponent(l ? `${l.decimalLongitude},${l.decimalLatitude}` : e) + ".json"), x = $.searchParams;
+    this.language !== void 0 && x.set("language", Array.isArray(this.language) ? this.language.join(",") : this.language ?? "");
+    const [N] = b(this, G) ?? [void 0];
     let S = (!l || this.reverseGeocodingTypes === void 0 ? this.types : this.reverseGeocodingTypes)?.map(
-      (m) => typeof m == "string" ? m : Z === void 0 || (m[0] ?? 0) <= Z && Z < (m[1] ?? 1 / 0) ? m[2] : void 0
+      (m) => typeof m == "string" ? m : N === void 0 || (m[0] ?? 0) <= N && N < (m[1] ?? 1 / 0) ? m[2] : void 0
     ).filter((m) => m !== void 0);
-    S && (S = [...new Set(S)], v.set("types", S.join(",")));
-    const de = !l || this.reverseGeocodingExcludeTypes === void 0 ? this.excludeTypes : this.reverseGeocodingExcludeTypes;
-    if (de && v.set("excludeTypes", String(de)), this.bbox && v.set("bbox", this.bbox.map((m) => m.toFixed(6)).join(",")), this.country && v.set("country", Array.isArray(this.country) ? this.country.join(",") : this.country), this.worldview && v.set("worldview", this.worldview), !t && !l) {
-      const m = this.proximity ?? [{ type: "server-geolocation" }], fe = await Ze(x(this, G), m, s);
-      fe && v.set("proximity", fe), (i || this.showResultsWhileTyping === !1) && v.set("autocomplete", "false"), v.set("fuzzyMatch", String(this.fuzzyMatch !== !1));
+    S && (S = [...new Set(S)], x.set("types", S.join(",")));
+    const pe = !l || this.reverseGeocodingExcludeTypes === void 0 ? this.excludeTypes : this.reverseGeocodingExcludeTypes;
+    if (pe && x.set("excludeTypes", String(pe)), this.bbox && x.set("bbox", this.bbox.map((m) => m.toFixed(6)).join(",")), this.country && x.set("country", Array.isArray(this.country) ? this.country.join(",") : this.country), this.worldview && x.set("worldview", this.worldview), !t && !l) {
+      const m = this.proximity ?? [{ type: "server-geolocation" }], ue = await Ze(b(this, G), m, s);
+      ue && x.set("proximity", ue), (i || this.showResultsWhileTyping === !1) && x.set("autocomplete", "false"), x.set("fuzzyMatch", String(this.fuzzyMatch !== !1));
     }
-    const ue = this.limit ?? 5, Q = this.reverseGeocodingLimit ?? ue;
-    Q > 1 && S?.length !== 1 && console.warn("[MapTilerGeocodingControl] Warning: For reverse geocoding when limit > 1 then types must contain single value."), l ? (Q === 1 || this.exhaustiveReverseGeocoding || S?.length === 1) && v.set("limit", String(Q)) : v.set("limit", String(ue)), this.apiKey && v.set("key", this.apiKey), this.adjustUrl?.(_);
-    const Ue = _.searchParams.get("types") === "" && _.searchParams.get("excludeTypes") !== "true", D = _.toString();
-    if (D === this.lastSearchUrl) {
-      t ? (this.clearListOnPick && c(this, r, k).call(this), this.picked = this.cachedFeatures[0]) : (this.listFeatures = this.cachedFeatures, c(this, r, y).call(this, "featureslisted", { features: this.listFeatures, external: n }), this.listFeatures[this.selectedItemIndex]?.id !== x(this, r, z)?.id && (this.selectedItemIndex = -1));
+    const de = this.limit ?? 5, K = this.reverseGeocodingLimit ?? de;
+    K > 1 && S?.length !== 1 && console.warn("[MapTilerGeocodingControl] Warning: For reverse geocoding when limit > 1 then types must contain single value."), l ? (K === 1 || this.exhaustiveReverseGeocoding || S?.length === 1) && x.set("limit", String(K)) : x.set("limit", String(de)), this.apiKey && x.set("key", this.apiKey), this.adjustUrl?.($);
+    const Pe = $.searchParams.get("types") === "" && $.searchParams.get("excludeTypes") !== "true", W = $.toString();
+    if (W === this.lastSearchUrl) {
+      t ? (this.clearListOnPick && c(this, r, k).call(this), this.picked = this.cachedFeatures[0]) : (this.listFeatures = this.cachedFeatures, c(this, r, y).call(this, "featureslisted", { features: this.listFeatures, external: n }), this.listFeatures[this.selectedItemIndex]?.id !== b(this, r, V)?.id && (this.selectedItemIndex = -1));
       return;
     }
-    c(this, r, y).call(this, "request", { urlObj: _ }), this.lastSearchUrl = D;
-    let M;
-    if (Ue)
-      M = { type: "FeatureCollection", features: [] };
+    c(this, r, y).call(this, "request", { urlObj: $ }), this.lastSearchUrl = W;
+    let P;
+    if (Pe)
+      P = { type: "FeatureCollection", features: [] };
     else {
-      const m = await fetch(D, {
+      const m = await fetch(W, {
         signal: s.signal,
         ...this.fetchParameters
       });
       if (!m.ok)
         throw new Error(await m.text());
-      M = await m.json();
+      P = await m.json();
     }
-    c(this, r, y).call(this, "response", { url: D, featureCollection: M }), t ? (this.clearListOnPick && c(this, r, k).call(this), this.picked = M.features[0], this.cachedFeatures = [this.picked]) : (this.listFeatures = M.features.filter(this.filter ?? (() => !0)), l && this.listFeatures.unshift({
+    c(this, r, y).call(this, "response", { url: W, featureCollection: P }), t ? (this.clearListOnPick && c(this, r, k).call(this), this.picked = P.features[0], this.cachedFeatures = [this.picked]) : (this.listFeatures = P.features.filter(this.filter ?? (() => !0)), l && this.listFeatures.unshift({
       type: "Feature",
       properties: {},
       /* eslint-disable @typescript-eslint/restrict-template-expressions */
@@ -627,7 +626,7 @@ K = async function(e, { byId: t = !1, exact: i = !1, external: n = !1 } = {}) {
         type: "Point",
         coordinates: [l.decimalLongitude, l.decimalLatitude]
       }
-    }), c(this, r, y).call(this, "featureslisted", { features: this.listFeatures, external: n }), this.cachedFeatures = this.listFeatures, this.listFeatures[this.selectedItemIndex]?.id !== x(this, r, z)?.id && (this.selectedItemIndex = -1), l && this.input.focus());
+    }), c(this, r, y).call(this, "featureslisted", { features: this.listFeatures, external: n }), this.cachedFeatures = this.listFeatures, this.listFeatures[this.selectedItemIndex]?.id !== b(this, r, V)?.id && (this.selectedItemIndex = -1), l && this.input.focus());
   } catch (p) {
     if (p && typeof p == "object" && "name" in p && p.name === "AbortError")
       return;
@@ -636,32 +635,40 @@ K = async function(e, { byId: t = !1, exact: i = !1, external: n = !1 } = {}) {
     s === this.abortController && (this.abortController = void 0);
   }
 };
-Le = function(e) {
-  this.reverseActive = this.enableReverse === "always", c(this, r, k).call(this), this.picked = void 0, c(this, r, pe).call(this, `${e[1].toFixed(6)}, ${Ke(e[0], [-180, 180], !0).toFixed(6)}`), c(this, r, ce).call(this);
+ke = function(e) {
+  this.reverseActive = this.enableReverse === "always", c(this, r, k).call(this), this.picked = void 0, c(this, r, he).call(this, `${e[1].toFixed(6)}, ${Ke(e[0], [-180, 180], !0).toFixed(6)}`), c(this, r, ne).call(this);
 };
-re = function(e) {
+se = function(e) {
   if (!this.listFeatures)
     return;
   const t = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
   t && (this.input.focus(), this.focused = !0, e.preventDefault(), this.picked && this.selectedItemIndex === -1 && (this.selectedItemIndex = this.listFeatures.findIndex((i) => i.id === this.picked?.id)), this.selectedItemIndex === (this.picked || this.selectFirst !== !1 ? 0 : -1) && t === -1 && (this.selectedItemIndex = this.listFeatures.length), this.selectedItemIndex += t, this.selectedItemIndex >= this.listFeatures.length && (this.selectedItemIndex = -1), this.selectedItemIndex < 0 && (this.picked || this.selectFirst !== !1) && (this.selectedItemIndex = 0));
 };
-Fe = function(e) {
-  c(this, r, he).call(this, e.target.value);
+Ie = function(e) {
+  c(this, r, ce).call(this, e.target.value);
 };
-Oe = function(e) {
+Le = function(e) {
   (!this.picked || this.picked.id !== e.id) && (this.picked = e, this.searchValue = e.place_name);
 };
-Se = function(e) {
+Fe = function(e) {
   this.selectedItemIndex = e;
 };
+Oe = function() {
+  (!this.selectFirst || this.picked) && (this.selectedItemIndex = -1), this.isFeatureListInteractedWith && (this.isFeatureListInteractedWith = !1);
+};
+Se = function() {
+  this.isFeatureListInteractedWith = !0;
+};
 Te = function() {
-  (!this.selectFirst || this.picked) && (this.selectedItemIndex = -1);
+  setTimeout(() => {
+    this.isFeatureListInteractedWith = !1;
+  });
 };
 Ce = function() {
   this.searchValue = "", c(this, r, y).call(this, "queryclear"), this.picked = void 0, this.input.focus();
 };
 o.styles = L`
-    ${ge(Ye)}
+    ${fe(Ye)}
   `;
 a([
   h({ attribute: !1 })
@@ -775,38 +782,41 @@ a([
   h({ type: String })
 ], o.prototype, "worldview", 2);
 a([
-  Me("input")
+  Ue("input")
 ], o.prototype, "input", 2);
 a([
-  b()
+  v()
 ], o.prototype, "searchValue", 2);
 a([
-  b()
+  v()
 ], o.prototype, "listFeatures", 2);
 a([
-  b()
+  v()
 ], o.prototype, "selectedItemIndex", 2);
 a([
-  b()
+  v()
 ], o.prototype, "picked", 2);
 a([
-  b()
+  v()
 ], o.prototype, "cachedFeatures", 2);
 a([
-  b()
+  v()
 ], o.prototype, "lastSearchUrl", 2);
 a([
-  b()
+  v()
 ], o.prototype, "error", 2);
 a([
-  b()
+  v()
 ], o.prototype, "abortController", 2);
 a([
-  b()
+  v()
 ], o.prototype, "focused", 2);
 a([
-  b()
-], o.prototype, "focusedDelayed", 2);
+  v()
+], o.prototype, "isFeatureListVisible", 2);
+a([
+  v()
+], o.prototype, "isFeatureListInteractedWith", 2);
 o = a([
   O("maptiler-geocoder")
 ], o);
@@ -850,11 +860,11 @@ const it = [
   "worldview"
 ];
 export {
-  J as MaptilerGeocodeClearIconElement,
-  X as MaptilerGeocodeFailIconElement,
-  Y as MaptilerGeocodeLoadingIconElement,
-  ee as MaptilerGeocodeReverseGeocodingIconElement,
-  te as MaptilerGeocodeSearchIconElement,
+  Q as MaptilerGeocodeClearIconElement,
+  H as MaptilerGeocodeFailIconElement,
+  J as MaptilerGeocodeLoadingIconElement,
+  X as MaptilerGeocodeReverseGeocodingIconElement,
+  Y as MaptilerGeocodeSearchIconElement,
   o as MaptilerGeocoderElement
 };
 //# sourceMappingURL=index.js.map