@maptiler/geocoding-control 2.1.6 → 3.0.0-rc.1

package/dist/index.js

@@ -0,0 +1,856 @@
+import { css as I, LitElement as L, svg as q, html as f, unsafeCSS as fe, nothing as Q } from "lit";
+import { customElement as F, property as h, state as b, query as Ue } from "lit/decorators.js";
+import { convert as Me } from "geo-coordinates-parser";
+import { classMap as j } from "lit/directives/class-map.js";
+import { repeat as Pe } from "lit/directives/repeat.js";
+import "@turf/clone";
+import { styleMap as Be } from "lit/directives/style-map.js";
+var Ee = Object.getOwnPropertyDescriptor, Ge = (e, t, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? Ee(t, i) : t, r = e.length - 1, p; r >= 0; r--)
+    (p = e[r]) && (s = p(s) || s);
+  return s;
+};
+let H = class extends L {
+  render() {
+    return q`
+      <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"
+        />
+      </svg>
+    `;
+  }
+};
+H.styles = I`
+    svg {
+      display: block;
+      fill: var(--color-icon-button);
+    }
+  `;
+H = Ge([
+  F("maptiler-geocode-clear-icon")
+], H);
+var De = Object.getOwnPropertyDescriptor, je = (e, t, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? De(t, i) : t, r = e.length - 1, p; r >= 0; r--)
+    (p = e[r]) && (s = p(s) || s);
+  return s;
+};
+let J = class extends L {
+  render() {
+    return q`
+      <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"
+        />
+      </svg>
+    `;
+  }
+};
+J.styles = I`
+    svg {
+      display: block;
+      fill: #e15042;
+    }
+  `;
+J = je([
+  F("maptiler-geocode-fail-icon")
+], J);
+var Ae = Object.getOwnPropertyDescriptor, Re = (e, t, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? Ae(t, i) : t, r = e.length - 1, p; r >= 0; r--)
+    (p = e[r]) && (s = p(s) || s);
+  return s;
+};
+let X = class extends L {
+  render() {
+    return f`
+      <div>
+        <svg viewBox="0 0 18 18" width="24" height="24" class="loading-icon">
+          <path fill="#333" d="M4.4 4.4l.8.8c2.1-2.1 5.5-2.1 7.6 0l.8-.8c-2.5-2.5-6.7-2.5-9.2 0z" />
+          <path opacity=".1" d="M12.8 12.9c-2.1 2.1-5.5 2.1-7.6 0-2.1-2.1-2.1-5.5 0-7.7l-.8-.8c-2.5 2.5-2.5 6.7 0 9.2s6.6 2.5 9.2 0 2.5-6.6 0-9.2l-.8.8c2.2 2.1 2.2 5.6 0 7.7z" />
+        </svg>
+      </div>
+    `;
+  }
+};
+X.styles = I`
+    div {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+
+      display: flex;
+      align-items: center;
+    }
+
+    .loading-icon {
+      animation: rotate 0.8s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
+    }
+
+    @keyframes rotate {
+      from {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+      }
+      to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+      }
+    }
+  `;
+X = Re([
+  F("maptiler-geocode-loading-icon")
+], X);
+var We = Object.getOwnPropertyDescriptor, Ve = (e, t, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? We(t, i) : t, r = e.length - 1, p; r >= 0; r--)
+    (p = e[r]) && (s = p(s) || s);
+  return s;
+};
+let Y = class extends L {
+  render() {
+    return q`
+      <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"
+        />
+      </svg>
+    `;
+  }
+};
+Y.styles = I`
+    svg {
+      display: block;
+      fill: var(--color-icon-button);
+    }
+  `;
+Y = Ve([
+  F("maptiler-geocode-reverse-geocoding-icon")
+], Y);
+var ze = Object.getOwnPropertyDescriptor, qe = (e, t, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? ze(t, i) : t, r = e.length - 1, p; r >= 0; r--)
+    (p = e[r]) && (s = p(s) || s);
+  return s;
+};
+let ee = class extends L {
+  render() {
+    return q`
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="13"
+        height="13"
+        viewBox="0 0 13 13"
+      >
+        <circle cx="4.789" cy="4.787" r="3.85" />
+        <path d="M12.063 12.063 7.635 7.635" />
+      </svg>
+    `;
+  }
+};
+ee.styles = I`
+    circle {
+      stroke-width: 1.875;
+      fill: none;
+    }
+
+    path {
+      stroke-width: 1.875;
+      stroke-linecap: round;
+    }
+
+    svg {
+      display: block;
+      stroke: var(--color-icon-button);
+    }
+  `;
+ee = qe([
+  F("maptiler-geocode-search-icon")
+], ee);
+function Ne(e, t, i) {
+  const n = t[1], s = t[0], r = n - s;
+  return e === n && i ? e : ((e - s) % r + r) % r + s;
+}
+let P;
+async function Ke(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;
+        } else {
+          let s;
+          try {
+            return s = await new Promise((r, p) => {
+              i.signal.addEventListener("abort", () => {
+                p(Error("aborted"));
+              }), navigator.geolocation.getCurrentPosition(
+                (m) => {
+                  r([m.coords.longitude, m.coords.latitude].map((U) => U.toFixed(6)).join(","));
+                },
+                (m) => {
+                  p(m);
+                },
+                n
+              );
+            }), s;
+          } catch {
+          } finally {
+            n.cachedLocationExpiry && (P = {
+              time: Date.now(),
+              coords: s
+            });
+          }
+          if (i.signal.aborted)
+            return;
+        }
+      if (n.type === "server-geolocation")
+        return "ip";
+      if (e && n.type === "map-center")
+        return e[1].toFixed(6) + "," + e[2].toFixed(6);
+    }
+}
+const Ze = ".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 Qe = Object.defineProperty, He = Object.getOwnPropertyDescriptor, ge = (e) => {
+  throw TypeError(e);
+}, _ = (e, t, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? He(t, i) : t, r = e.length - 1, p; r >= 0; r--)
+    (p = e[r]) && (s = (n ? p(t, i, s) : p(s)) || s);
+  return n && s && Qe(t, i, s), s;
+}, 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)), Je = (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, W, B, g, ye, ve, re, te;
+const xe = typeof devicePixelRatio > "u" || devicePixelRatio > 1.25, be = xe ? "@2x" : "", S = xe ? 2 : 1;
+let k, we, w = class extends L {
+  constructor() {
+    super(...arguments), Je(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, C(this, d, re).call(this));
+  }
+  render() {
+    return f`
+      <li
+        tabindex="-1"
+        role="option"
+        aria-selected=${this.itemStyle === "selected"}
+        aria-checked=${this.itemStyle === "picked"}
+        class=${this.itemStyle}
+        @click=${() => this.dispatchEvent(new CustomEvent("select"))}
+      >
+        ${k && this.spriteIcon ? f`
+              <div
+                class="sprite-icon"
+                style=${Be({
+      width: `${this.spriteIcon.width / S}px`,
+      height: `${this.spriteIcon.height / S}px`,
+      backgroundImage: `url(${this.iconsBaseUrl}sprite${be}.png)`,
+      backgroundPosition: `-${this.spriteIcon.x / S}px -${this.spriteIcon.y / S}px`,
+      backgroundSize: `${k.width / S}px ${k.height / S}px`
+    })}
+                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, 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)} /> `}
+
+        <span class="texts">
+          <span>
+            <span class="primary"> ${u(this, d, B) ? 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> ` : Q}
+          </span>
+
+          <span class="line2"> ${u(this, d, B) ? this.feature?.text : this.feature?.place_name.replace(/[^,]*,?s*/, "")} </span>
+        </span>
+      </li>
+    `;
+  }
+};
+d = /* @__PURE__ */ new WeakSet();
+W = function() {
+  return this.feature?.properties?.categories;
+};
+B = 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];
+};
+ye = function() {
+  we ??= fetch(`${this.iconsBaseUrl}sprite${be}.json`).then((e) => e.json()).then((e) => {
+    k = e;
+  }).catch(() => {
+    k = null;
+  });
+};
+ve = function() {
+  this.imageUrl && this.missingIconsCache.add(this.imageUrl), C(this, d, re).call(this);
+};
+re = function() {
+  k !== void 0 ? C(this, d, te).call(this) : (C(this, d, ye).call(this), we?.then(() => {
+    C(this, d, te).call(this);
+  }));
+};
+te = function() {
+  do {
+    if (this.index--, this.category = u(this, d, W)?.[this.index], this.spriteIcon = this.category ? k?.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 = I`
+    ${fe(Ze)}
+  `;
+_([
+  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()
+], w.prototype, "category", 2);
+_([
+  b()
+], w.prototype, "imageUrl", 2);
+_([
+  b()
+], w.prototype, "spriteIcon", 2);
+_([
+  b()
+], w.prototype, "index", 2);
+w = _([
+  F("maptiler-geocoder-feature-item")
+], w);
+const Xe = "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}";
+var Ye = Object.defineProperty, et = Object.getOwnPropertyDescriptor, _e = (e) => {
+  throw TypeError(e);
+}, l = (e, t, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? et(t, i) : t, r = e.length - 1, p; r >= 0; r--)
+    (p = e[r]) && (s = (n ? p(t, i, s) : p(s)) || s);
+  return n && s && Ye(t, i, s), s;
+}, oe = (e, t, i) => t.has(e) || _e("Cannot " + i), x = (e, t, i) => (oe(e, t, "read from private field"), i ? i.call(e) : t.get(e)), T = (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) => (oe(e, t, "write to private field"), t.set(e, i), i), c = (e, t, i) => (oe(e, t, "access private method"), i), V, R, E, ie, G, o, z, $e, ke, ae, v, le, N, ne, ce, $, he, K, Ie, se, Le, Fe, Oe, Se, Te;
+let a = class extends L {
+  constructor() {
+    super(...arguments), T(this, o), 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, T(this, V, !1), T(this, R, !1), T(this, E), T(this, ie, /* @__PURE__ */ new Set()), T(this, G);
+  }
+  firstUpdated() {
+    A(this, V, !0);
+  }
+  /**
+   * Set the options of this instance.
+   *
+   * @param options options to set
+   */
+  setOptions(e) {
+    const t = { ...e };
+    for (const i of Object.keys(t))
+      tt.includes(i) || delete t[i];
+    Object.assign(this, t);
+  }
+  /**
+   * Set the content of search input box.
+   *
+   * @param value text to set
+   */
+  setQuery(e) {
+    c(this, o, ce).call(this, e), c(this, o, ne).call(this);
+  }
+  /**
+   * Set the content of search input box and immediately submit it.
+   *
+   * @param value text to set and submit
+   */
+  submitQuery(e) {
+    c(this, o, he).call(this, e);
+  }
+  /**
+   * Clear search result list.
+   */
+  clearList() {
+    c(this, o, $).call(this), this.picked = void 0, this.selectedItemIndex = -1;
+  }
+  /**
+   * Focus the search input box.
+   *
+   * @param options [FocusOptions](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  focus(e) {
+    this.input.focus(e);
+  }
+  /**
+   * Blur the search input box.
+   */
+  blur() {
+    this.input.blur();
+  }
+  addEventListener(e, t, i) {
+    super.addEventListener(e, t, i);
+  }
+  removeEventListener(e, t, i) {
+    super.removeEventListener(e, t, i);
+  }
+  /** @internal */
+  handleMapChange(e) {
+    A(this, G, e);
+  }
+  /** @internal */
+  handleMapClick(e) {
+    this.reverseActive && c(this, o, Ie).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, o, $).call(this), this.selectedItemIndex = -1), ["searchValue", "minLength"].some((t) => e.has(t)) && x(this, o, ae) && (c(this, o, $).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, o, v).call(this, "select", { feature: x(this, o, z) }), ["picked"].some((t) => e.has(t)) && this.picked && (this.fetchFullGeometryOnPick && !this.picked.address && this.picked.geometry.type === "Point" && this.picked.place_type[0] !== "reverse" ? c(this, o, K).call(this, this.picked.id, { byId: !0 }) : Promise.resolve()).then(
+      () => {
+        c(this, o, v).call(this, "pick", { feature: this.picked });
+      },
+      (t) => {
+        t && typeof t == "object" && "name" in t && t.name === "AbortError" || (this.error = t, c(this, o, v).call(this, "pick", { feature: this.picked }));
+      }
+    ), ["listFeatures", "focusedDelayed"].some((t) => e.has(t)) && (x(this, o, $e) ? (c(this, o, v).call(this, "featuresshow"), A(this, R, !0)) : x(this, R) && c(this, o, v).call(this, "featureshide")), ["reverseActive"].some((t) => e.has(t)) && c(this, o, v).call(this, "reversetoggle", { reverse: this.reverseActive });
+  }
+  render() {
+    return f`
+      <form @submit=${c(this, o, le)} class=${j({ "can-collapse": this.collapsed && this.searchValue === "" })}>
+        <div class="input-group">
+          <button
+            class="search-button"
+            type="button"
+            @click=${() => {
+      this.input.focus();
+    }}
+          >
+            <maptiler-geocode-search-icon></maptiler-geocode-search-icon>
+          </button>
+
+          <input
+            .value=${this.searchValue}
+            @focus=${() => this.focused = !0}
+            @blur=${() => this.focused = !1}
+            @click=${() => this.focused = !0}
+            @keydown=${c(this, o, se)}
+            @input=${c(this, o, Le)}
+            @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, o, ke) ? f`<maptiler-geocode-loading-icon></maptiler-geocode-loading-icon>` : f`
+                  <button type="button" @click=${c(this, o, Te)} title=${this.clearButtonTitle ?? "clear"}>
+                    <maptiler-geocode-clear-icon></maptiler-geocode-clear-icon>
+                  </button>
+                `}
+          </div>
+
+          ${this.enableReverse === "button" ? f`
+                <button
+                  type="button"
+                  class=${j({ active: this.reverseActive })}
+                  title=${this.reverseButtonTitle ?? "toggle reverse geocoding"}
+                  @click=${() => this.reverseActive = !this.reverseActive}
+                >
+                  <maptiler-geocode-reverse-geocoding-icon></maptiler-geocode-reverse-geocoding-icon>
+                </button>
+              ` : Q}
+
+          <!-- <slot /> -->
+        </div>
+
+        ${this.error ? f`
+              <div class="error">
+                <maptiler-geocode-fail-icon></maptiler-geocode-fail-icon>
+
+                <div>${this.errorMessage ?? "Something went wrong…"}</div>
+
+                <button @click=${() => this.error = void 0}>
+                  <maptiler-geocode-clear-icon></maptiler-geocode-clear-icon>
+                </button>
+              </div>
+            ` : !this.focusedDelayed && !this.keepListOpen || this.listFeatures === void 0 ? Q : this.listFeatures.length === 0 ? f`
+                  <div class="no-results">
+                    <maptiler-geocode-fail-icon></maptiler-geocode-fail-icon>
+
+                    <div>
+                      ${this.noResultsMessage ?? "Oops! Looks like you're trying to predict something that's not quite right. We can't seem to find what you're looking for. Maybe try double-checking your spelling or try a different search term. Keep on typing - we'll do our best to get you where you need to go!"}
+                    </div>
+                  </div>
+                ` : f`
+                  <ul class="options ${j({ "open-on-top": this.openListOnTop })}" @mouseleave=${c(this, o, Se)} @keydown=${c(this, o, se)} role="listbox">
+                    ${Pe(
+      this.listFeatures,
+      (e) => e.id + (e.address ? "," + e.address : ""),
+      (e, t) => f`
+                        <maptiler-geocoder-feature-item
+                          .feature=${e}
+                          .showPlaceType=${this.showPlaceType ?? "if-needed"}
+                          itemStyle=${this.selectedItemIndex === t ? "selected" : this.picked?.id === e.id ? "picked" : "default"}
+                          @mouseenter=${() => {
+        c(this, o, Oe).call(this, t);
+      }}
+                          @select=${() => {
+        c(this, o, Fe).call(this, e);
+      }}
+                          .missingIconsCache=${x(this, ie)}
+                          .iconsBaseUrl=${this.iconsBaseUrl ?? "https://cdn.maptiler.com/maptiler-geocoding-control/v3.0.0-rc.1/icons/"}
+                        >
+                          ${e.place_name}
+                        </maptiler-geocoder-feature-item>
+                      `
+    )}
+                  </ul>
+                `}
+      </form>
+    `;
+  }
+};
+V = /* @__PURE__ */ new WeakMap();
+R = /* @__PURE__ */ new WeakMap();
+E = /* @__PURE__ */ new WeakMap();
+ie = /* @__PURE__ */ new WeakMap();
+G = /* @__PURE__ */ new WeakMap();
+o = /* @__PURE__ */ new WeakSet();
+z = function() {
+  return this.listFeatures?.[this.selectedItemIndex];
+};
+$e = function() {
+  return !!this.listFeatures?.length && (this.focusedDelayed || this.keepListOpen);
+};
+ke = function() {
+  return this.abortController !== void 0;
+};
+ae = function() {
+  return this.searchValue.length < (this.minLength ?? 2);
+};
+v = function(e, ...[t]) {
+  x(this, V) && this.dispatchEvent(
+    new CustomEvent(e, {
+      bubbles: !0,
+      composed: !0,
+      detail: t
+    })
+  );
+};
+le = 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, o, K).call(this, this.searchValue, { exact: !0 }).then(() => {
+    this.picked = void 0;
+  }).catch((t) => this.error = t);
+};
+N = function(e) {
+  try {
+    return Me(e, 6);
+  } catch {
+    return !1;
+  }
+};
+ne = function() {
+  setTimeout(() => {
+    this.input.focus(), this.focused = !0, this.input.select();
+  });
+};
+ce = function(e) {
+  if (this.searchValue = e, c(this, o, v).call(this, "querychange", { query: this.searchValue, reverseCoords: c(this, o, N).call(this, e) }), this.error = void 0, this.picked = void 0, this.showResultsWhileTyping !== !1) {
+    if (clearTimeout(x(this, E)), x(this, o, ae))
+      return;
+    const t = this.searchValue;
+    A(this, E, window.setTimeout(() => {
+      c(this, o, K).call(this, t).catch((i) => this.error = i);
+    }, this.debounceSearch ?? 200));
+  } else
+    c(this, o, $).call(this);
+};
+$ = function() {
+  this.listFeatures !== void 0 && (this.listFeatures = void 0, c(this, o, v).call(this, "featuresclear"));
+};
+he = function(e) {
+  this.searchValue = e, c(this, o, v).call(this, "querychange", { query: this.searchValue, reverseCoords: c(this, o, N).call(this, e) }), this.selectedItemIndex = -1, c(this, o, le).call(this);
+};
+K = async function(e, { byId: t = !1, exact: i = !1 } = {}) {
+  this.error = void 0, this.abortController?.abort();
+  const n = new AbortController();
+  this.abortController = n;
+  try {
+    const s = this.apiUrl ?? "https://api.maptiler.com/geocoding", r = c(this, o, N).call(this, e), p = new URL(s + "/" + encodeURIComponent(r ? `${r.decimalLongitude},${r.decimalLatitude}` : e) + ".json"), m = p.searchParams;
+    this.language !== void 0 && m.set("language", Array.isArray(this.language) ? this.language.join(",") : this.language ?? "");
+    const [U] = x(this, G) ?? [void 0];
+    let O = (!r || this.reverseGeocodingTypes === void 0 ? this.types : this.reverseGeocodingTypes)?.map(
+      (y) => typeof y == "string" ? y : U === void 0 || (y[0] ?? 0) <= U && U < (y[1] ?? 1 / 0) ? y[2] : void 0
+    ).filter((y) => y !== void 0);
+    O && (O = [...new Set(O)], m.set("types", O.join(",")));
+    const pe = !r || this.reverseGeocodingExcludeTypes === void 0 ? this.excludeTypes : this.reverseGeocodingExcludeTypes;
+    if (pe && m.set("excludeTypes", String(pe)), this.bbox && m.set("bbox", this.bbox.map((y) => y.toFixed(6)).join(",")), this.country && m.set("country", Array.isArray(this.country) ? this.country.join(",") : this.country), !t && !r) {
+      const y = this.proximity ?? [{ type: "server-geolocation" }], ue = await Ke(x(this, G), y, n);
+      ue && m.set("proximity", ue), (i || this.showResultsWhileTyping === !1) && m.set("autocomplete", "false"), m.set("fuzzyMatch", String(this.fuzzyMatch !== !1));
+    }
+    const de = this.limit ?? 5, Z = this.reverseGeocodingLimit ?? de;
+    Z > 1 && O?.length !== 1 && console.warn("[MapTilerGeocodingControl] Warning: For reverse geocoding when limit > 1 then types must contain single value."), r ? (Z === 1 || this.exhaustiveReverseGeocoding || O?.length === 1) && m.set("limit", String(Z)) : m.set("limit", String(de)), this.apiKey && m.set("key", this.apiKey), this.adjustUrl?.(p);
+    const Ce = p.searchParams.get("types") === "" && p.searchParams.get("excludeTypes") !== "true", D = p.toString();
+    if (D === this.lastSearchUrl) {
+      t ? (this.clearListOnPick && c(this, o, $).call(this), this.picked = this.cachedFeatures[0]) : (this.listFeatures = this.cachedFeatures, c(this, o, v).call(this, "featureslisted", { features: this.listFeatures }), this.listFeatures[this.selectedItemIndex]?.id !== x(this, o, z)?.id && (this.selectedItemIndex = -1));
+      return;
+    }
+    c(this, o, v).call(this, "request", { urlObj: p }), this.lastSearchUrl = D;
+    let M;
+    if (Ce)
+      M = { type: "FeatureCollection", features: [] };
+    else {
+      const y = await fetch(D, {
+        signal: n.signal,
+        ...this.fetchParameters
+      });
+      if (!y.ok)
+        throw new Error(await y.text());
+      M = await y.json();
+    }
+    c(this, o, v).call(this, "response", { url: D, featureCollection: M }), t ? (this.clearListOnPick && c(this, o, $).call(this), this.picked = M.features[0], this.cachedFeatures = [this.picked]) : (this.listFeatures = M.features.filter(this.filter ?? (() => !0)), r && this.listFeatures.unshift({
+      type: "Feature",
+      properties: {},
+      /* eslint-disable @typescript-eslint/restrict-template-expressions */
+      id: `reverse_${r.decimalLongitude}_${r.decimalLatitude}`,
+      text: `${r.decimalLatitude}, ${r.decimalLongitude}`,
+      place_name: r.toCoordinateFormat("DMS"),
+      /* eslint-enable @typescript-eslint/restrict-template-expressions */
+      place_type: ["reverse"],
+      place_type_name: ["reverse"],
+      center: [r.decimalLongitude, r.decimalLatitude],
+      bbox: [r.decimalLongitude, r.decimalLatitude, r.decimalLongitude, r.decimalLatitude],
+      geometry: {
+        type: "Point",
+        coordinates: [r.decimalLongitude, r.decimalLatitude]
+      }
+    }), c(this, o, v).call(this, "featureslisted", { features: this.listFeatures }), this.cachedFeatures = this.listFeatures, this.listFeatures[this.selectedItemIndex]?.id !== x(this, o, z)?.id && (this.selectedItemIndex = -1), r && this.input.focus());
+  } catch (s) {
+    if (s && typeof s == "object" && "name" in s && s.name === "AbortError")
+      return;
+    throw s;
+  } finally {
+    n === this.abortController && (this.abortController = void 0);
+  }
+};
+Ie = function(e) {
+  this.reverseActive = this.enableReverse === "always", c(this, o, $).call(this), this.picked = void 0, c(this, o, he).call(this, `${e[1].toFixed(6)}, ${Ne(e[0], [-180, 180], !0).toFixed(6)}`), c(this, o, ne).call(this);
+};
+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));
+};
+Le = function(e) {
+  c(this, o, ce).call(this, e.target.value);
+};
+Fe = function(e) {
+  (!this.picked || this.picked.id !== e.id) && (this.picked = e, this.searchValue = e.place_name);
+};
+Oe = function(e) {
+  this.selectedItemIndex = e;
+};
+Se = function() {
+  (!this.selectFirst || this.picked) && (this.selectedItemIndex = -1);
+};
+Te = function() {
+  this.searchValue = "", c(this, o, v).call(this, "queryclear"), this.picked = void 0, this.input.focus();
+};
+a.styles = I`
+    ${fe(Xe)}
+  `;
+l([
+  h({ attribute: !1 })
+], a.prototype, "adjustUrl", 2);
+l([
+  h({ type: String })
+], a.prototype, "apiKey", 2);
+l([
+  h({ type: String })
+], a.prototype, "apiUrl", 2);
+l([
+  h({ type: Array })
+], a.prototype, "bbox", 2);
+l([
+  h({ type: String })
+], a.prototype, "clearButtonTitle", 2);
+l([
+  h({ type: Boolean })
+], a.prototype, "clearListOnPick", 2);
+l([
+  h({ type: Boolean })
+], a.prototype, "clearOnBlur", 2);
+l([
+  h({ type: Boolean })
+], a.prototype, "collapsed", 2);
+l([
+  h({ attribute: !1 })
+], a.prototype, "country", 2);
+l([
+  h({ type: Number })
+], a.prototype, "debounceSearch", 2);
+l([
+  h({ type: String })
+], a.prototype, "enableReverse", 2);
+l([
+  h({ type: String })
+], a.prototype, "errorMessage", 2);
+l([
+  h({ type: Boolean })
+], a.prototype, "excludeTypes", 2);
+l([
+  h({ type: Boolean })
+], a.prototype, "exhaustiveReverseGeocoding", 2);
+l([
+  h({ type: Boolean })
+], a.prototype, "fetchFullGeometryOnPick", 2);
+l([
+  h({ type: Object })
+], a.prototype, "fetchParameters", 2);
+l([
+  h({ attribute: !1 })
+], a.prototype, "filter", 2);
+l([
+  h({ type: Object })
+], a.prototype, "fuzzyMatch", 2);
+l([
+  h({ type: String })
+], a.prototype, "iconsBaseUrl", 2);
+l([
+  h({ type: Boolean })
+], a.prototype, "keepListOpen", 2);
+l([
+  h({ attribute: !1 })
+], a.prototype, "language", 2);
+l([
+  h({ type: Number })
+], a.prototype, "limit", 2);
+l([
+  h({ type: Number })
+], a.prototype, "minLength", 2);
+l([
+  h({ type: String })
+], a.prototype, "noResultsMessage", 2);
+l([
+  h({ type: Boolean })
+], a.prototype, "openListOnTop", 2);
+l([
+  h({ type: String })
+], a.prototype, "placeholder", 2);
+l([
+  h({ type: Array })
+], a.prototype, "proximity", 2);
+l([
+  h({ type: Boolean })
+], a.prototype, "reverseActive", 2);
+l([
+  h({ type: String })
+], a.prototype, "reverseButtonTitle", 2);
+l([
+  h({ type: Object })
+], a.prototype, "reverseGeocodingExcludeTypes", 2);
+l([
+  h({ type: Number })
+], a.prototype, "reverseGeocodingLimit", 2);
+l([
+  h({ type: Array })
+], a.prototype, "reverseGeocodingTypes", 2);
+l([
+  h({ type: Object })
+], a.prototype, "selectFirst", 2);
+l([
+  h({ type: String })
+], a.prototype, "showPlaceType", 2);
+l([
+  h({ type: Object })
+], a.prototype, "showResultsWhileTyping", 2);
+l([
+  h({ type: Array })
+], a.prototype, "types", 2);
+l([
+  Ue("input")
+], a.prototype, "input", 2);
+l([
+  b()
+], a.prototype, "searchValue", 2);
+l([
+  b()
+], a.prototype, "listFeatures", 2);
+l([
+  b()
+], a.prototype, "selectedItemIndex", 2);
+l([
+  b()
+], a.prototype, "picked", 2);
+l([
+  b()
+], a.prototype, "cachedFeatures", 2);
+l([
+  b()
+], a.prototype, "lastSearchUrl", 2);
+l([
+  b()
+], a.prototype, "error", 2);
+l([
+  b()
+], a.prototype, "abortController", 2);
+l([
+  b()
+], a.prototype, "focused", 2);
+l([
+  b()
+], a.prototype, "focusedDelayed", 2);
+a = l([
+  F("maptiler-geocoder")
+], a);
+const tt = [
+  "adjustUrl",
+  "apiKey",
+  "apiUrl",
+  "bbox",
+  "clearButtonTitle",
+  "clearListOnPick",
+  "clearOnBlur",
+  "collapsed",
+  "country",
+  "debounceSearch",
+  "enableReverse",
+  "errorMessage",
+  "excludeTypes",
+  "reverseGeocodingExcludeTypes",
+  "exhaustiveReverseGeocoding",
+  "fetchParameters",
+  "fetchFullGeometryOnPick",
+  "filter",
+  "fuzzyMatch",
+  "iconsBaseUrl",
+  "keepListOpen",
+  "language",
+  "limit",
+  "reverseGeocodingLimit",
+  "minLength",
+  "noResultsMessage",
+  "openListOnTop",
+  "placeholder",
+  "proximity",
+  "reverseActive",
+  "reverseButtonTitle",
+  "selectFirst",
+  "showPlaceType",
+  "showResultsWhileTyping",
+  "types",
+  "reverseGeocodingTypes"
+];
+export {
+  H as MaptilerGeocodeClearIconElement,
+  J as MaptilerGeocodeFailIconElement,
+  X as MaptilerGeocodeLoadingIconElement,
+  Y as MaptilerGeocodeReverseGeocodingIconElement,
+  ee as MaptilerGeocodeSearchIconElement,
+  a as MaptilerGeocoderElement
+};
+//# sourceMappingURL=index.js.map