@maptiler/geocoding-control/dist/index.js

The Javascript & TypeScript Map Control component for MapTiler Geocoding service. Easy to be integrated into any JavaScript mapping application.

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 Me } from "lit/directives/repeat.js";
import "@turf/clone";
import { styleMap as Ee } from "lit/directives/style-map.js";
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 Q = class extends F {
  render() {
    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"
        />
      </svg>
    `;
  }
};
Q.styles = L`
    svg {
      display: block;
      fill: var(--color-icon-button);
    }
  `;
Q = We([
  O("maptiler-geocode-clear-icon")
], 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 H = class extends F {
  render() {
    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"
        />
      </svg>
    `;
  }
};
H.styles = L`
    svg {
      display: block;
      fill: #e15042;
    }
  `;
H = Ae([
  O("maptiler-geocode-fail-icon")
], 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 J = class extends F {
  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>
    `;
  }
};
J.styles = L`
    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);
      }
    }
  `;
J = Ve([
  O("maptiler-geocode-loading-icon")
], 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 X = class extends F {
  render() {
    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"
        />
      </svg>
    `;
  }
};
X.styles = L`
    svg {
      display: block;
      fill: var(--color-icon-button);
    }
  `;
X = ze([
  O("maptiler-geocode-reverse-geocoding-icon")
], 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 Y = class extends F {
  render() {
    return D`
      <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>
    `;
  }
};
Y.styles = L`
    circle {
      stroke-width: 1.875;
      fill: none;
    }

    path {
      stroke-width: 1.875;
      stroke-linecap: round;
    }

    svg {
      display: block;
      stroke: var(--color-icon-button);
    }
  `;
Y = Ne([
  O("maptiler-geocode-search-icon")
], 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 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 (U && n.cachedLocationExpiry && U.time + n.cachedLocationExpiry > Date.now()) {
          if (U.coords)
            return U.coords;
        } else {
          let s;
          try {
            return s = await new Promise((p, l) => {
              i.signal.addEventListener("abort", () => {
                l(Error("aborted"));
              }), navigator.geolocation.getCurrentPosition(
                ($) => {
                  p([$.coords.longitude, $.coords.latitude].map((x) => x.toFixed(6)).join(","));
                },
                ($) => {
                  l($);
                },
                n
              );
            }), s;
          } catch {
          } finally {
            n.cachedLocationExpiry && (U = {
              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 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, ge = (e) => {
  throw TypeError(e);
}, _ = (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;
}, 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, A) && (this.index = u(this, d, A).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"))}
      >
        ${I && this.spriteIcon ? f`
              <div
                class="sprite-icon"
                style=${Ee({
      width: `${this.spriteIcon.width / T}px`,
      height: `${this.spriteIcon.height / T}px`,
      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=${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, 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, M) ? f` <span class="secondary"> ${u(this, d, g)} </span> ` : Z}
          </span>

          <span class="line2"> ${u(this, d, M) ? this.feature?.text : this.feature?.place_name.replace(/[^,]*,?s*/, "")} </span>
        </span>
      </li>
    `;
  }
};
d = /* @__PURE__ */ new WeakSet();
A = function() {
  return this.feature?.properties?.categories;
};
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];
};
ye = function() {
  we ??= fetch(`${this.iconsBaseUrl}sprite${be}.json`).then((e) => e.json()).then((e) => {
    I = e;
  }).catch(() => {
    I = null;
  });
};
ve = function() {
  this.imageUrl && this.missingIconsCache.add(this.imageUrl), C(this, d, re).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);
  }));
};
ee = function() {
  do {
    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`
    ${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);
_([
  v()
], w.prototype, "category", 2);
_([
  v()
], w.prototype, "imageUrl", 2);
_([
  v()
], w.prototype, "spriteIcon", 2);
_([
  v()
], w.prototype, "index", 2);
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}";
var et = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, $e = (e) => {
  throw TypeError(e);
}, a = (e, t, i, n) => {
  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;
}, 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), 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() {
    te(this, R, !0);
  }
  /**
   * Set the options of this instance.
   *
   * @param options options to set
   */
  setOptions(e) {
    const t = { ...e };
    for (const i of Object.keys(t))
      it.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, r, ce).call(this, e, { external: !0 }), c(this, r, 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, r, he).call(this, e, { external: !0 });
  }
  /**
   * Clear search result list.
   */
  clearList() {
    c(this, r, k).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) {
    te(this, G, e);
  }
  /** @internal */
  handleMapClick(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)) && 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", "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, 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, 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 !== "" })}">
            ${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>
                `}
          </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>
              ` : Z}

          <!-- <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.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>

                    <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 })}"
                    @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`
                        <maptiler-geocoder-feature-item
                          .feature=${e}
                          .showPlaceType=${this.showPlaceType ?? "if-needed"}
                          itemStyle=${this.selectedItemIndex === t ? "selected" : this.picked?.id === e.id ? "picked" : "default"}
                          @pointerenter=${() => {
        c(this, r, Fe).call(this, t);
      }}
                          @select=${() => {
        c(this, r, Le).call(this, e);
      }}
                          .missingIconsCache=${b(this, ie)}
                          .iconsBaseUrl=${this.iconsBaseUrl ?? "https://cdn.maptiler.com/maptiler-geocoding-control/v3.0.0/icons/"}
                        />
                      `
    )}
                  </ul>
                `}
      </form>
    `;
  }
};
R = /* @__PURE__ */ new WeakMap();
E = /* @__PURE__ */ new WeakMap();
ie = /* @__PURE__ */ new WeakMap();
G = /* @__PURE__ */ new WeakMap();
r = /* @__PURE__ */ new WeakSet();
V = function() {
  return this.listFeatures?.[this.selectedItemIndex];
};
_e = function() {
  return this.abortController !== void 0;
};
ae = function() {
  return this.searchValue.length < (this.minLength ?? 2);
};
y = function(e, ...[t]) {
  b(this, R) && this.dispatchEvent(
    new CustomEvent(e, {
      bubbles: !0,
      composed: !0,
      detail: t
    })
  );
};
le = function(e, { external: t = !1 } = {}) {
  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: t }).then(() => {
    this.picked = void 0;
  }).catch((i) => this.error = i);
};
z = function(e) {
  try {
    return Be(e, 6);
  } catch {
    return !1;
  }
};
ne = function() {
  setTimeout(() => {
    this.input.focus(), this.focused = !0, this.input.select();
  });
};
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;
    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);
};
k = function() {
  this.listFeatures !== void 0 && (this.listFeatures = void 0, c(this, r, y).call(this, "featuresclear"));
};
he = function(e, { external: t = !1 } = {}) {
  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, void 0, { external: t });
};
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, 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 : 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)], 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 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 = W;
    let P;
    if (Pe)
      P = { type: "FeatureCollection", features: [] };
    else {
      const m = await fetch(W, {
        signal: s.signal,
        ...this.fetchParameters
      });
      if (!m.ok)
        throw new Error(await m.text());
      P = await m.json();
    }
    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 */
      id: `reverse_${l.decimalLongitude}_${l.decimalLatitude}`,
      place_name: `${l.decimalLatitude}, ${l.decimalLongitude}`,
      text: l.toCoordinateFormat("DMS"),
      /* eslint-enable @typescript-eslint/restrict-template-expressions */
      place_type: ["reverse"],
      place_type_name: ["reverse"],
      center: [l.decimalLongitude, l.decimalLatitude],
      bbox: [l.decimalLongitude, l.decimalLatitude, l.decimalLongitude, l.decimalLatitude],
      geometry: {
        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 !== 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;
    throw p;
  } finally {
    s === this.abortController && (this.abortController = void 0);
  }
};
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);
};
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));
};
Ie = function(e) {
  c(this, r, ce).call(this, e.target.value);
};
Le = function(e) {
  (!this.picked || this.picked.id !== e.id) && (this.picked = e, this.searchValue = e.place_name);
};
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() {
  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`
    ${fe(Ye)}
  `;
a([
  h({ attribute: !1 })
], o.prototype, "adjustUrl", 2);
a([
  h({ type: String })
], o.prototype, "apiKey", 2);
a([
  h({ type: String })
], o.prototype, "apiUrl", 2);
a([
  h({ type: Array })
], o.prototype, "bbox", 2);
a([
  h({ type: String })
], o.prototype, "clearButtonTitle", 2);
a([
  h({ type: Boolean })
], o.prototype, "clearListOnPick", 2);
a([
  h({ type: Boolean })
], o.prototype, "clearOnBlur", 2);
a([
  h({ type: Boolean })
], o.prototype, "collapsed", 2);
a([
  h({ attribute: !1 })
], o.prototype, "country", 2);
a([
  h({ type: Number })
], o.prototype, "debounceSearch", 2);
a([
  h({ type: String })
], o.prototype, "enableReverse", 2);
a([
  h({ type: String })
], o.prototype, "errorMessage", 2);
a([
  h({ type: Boolean })
], o.prototype, "excludeTypes", 2);
a([
  h({ type: Boolean })
], o.prototype, "exhaustiveReverseGeocoding", 2);
a([
  h({ type: Boolean })
], o.prototype, "fetchFullGeometryOnPick", 2);
a([
  h({ type: Object })
], o.prototype, "fetchParameters", 2);
a([
  h({ attribute: !1 })
], o.prototype, "filter", 2);
a([
  h({ type: Object })
], o.prototype, "fuzzyMatch", 2);
a([
  h({ type: String })
], o.prototype, "iconsBaseUrl", 2);
a([
  h({ type: Boolean })
], o.prototype, "keepListOpen", 2);
a([
  h({ attribute: !1 })
], o.prototype, "language", 2);
a([
  h({ type: Number })
], o.prototype, "limit", 2);
a([
  h({ type: Number })
], o.prototype, "minLength", 2);
a([
  h({ type: String })
], o.prototype, "noResultsMessage", 2);
a([
  h({ type: Boolean })
], o.prototype, "openListOnTop", 2);
a([
  h({ type: String })
], o.prototype, "placeholder", 2);
a([
  h({ type: Array })
], o.prototype, "proximity", 2);
a([
  h({ type: Boolean })
], o.prototype, "reverseActive", 2);
a([
  h({ type: String })
], o.prototype, "reverseButtonTitle", 2);
a([
  h({ type: Object })
], o.prototype, "reverseGeocodingExcludeTypes", 2);
a([
  h({ type: Number })
], o.prototype, "reverseGeocodingLimit", 2);
a([
  h({ type: Array })
], o.prototype, "reverseGeocodingTypes", 2);
a([
  h({ type: Object })
], o.prototype, "selectFirst", 2);
a([
  h({ type: String })
], o.prototype, "showPlaceType", 2);
a([
  h({ type: Object })
], o.prototype, "showResultsWhileTyping", 2);
a([
  h({ type: Array })
], o.prototype, "types", 2);
a([
  h({ type: String })
], o.prototype, "worldview", 2);
a([
  Ue("input")
], o.prototype, "input", 2);
a([
  v()
], o.prototype, "searchValue", 2);
a([
  v()
], o.prototype, "listFeatures", 2);
a([
  v()
], o.prototype, "selectedItemIndex", 2);
a([
  v()
], o.prototype, "picked", 2);
a([
  v()
], o.prototype, "cachedFeatures", 2);
a([
  v()
], o.prototype, "lastSearchUrl", 2);
a([
  v()
], o.prototype, "error", 2);
a([
  v()
], o.prototype, "abortController", 2);
a([
  v()
], o.prototype, "focused", 2);
a([
  v()
], o.prototype, "isFeatureListVisible", 2);
a([
  v()
], o.prototype, "isFeatureListInteractedWith", 2);
o = a([
  O("maptiler-geocoder")
], o);
const it = [
  "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",
  "worldview"
];
export {
  Q as MaptilerGeocodeClearIconElement,
  H as MaptilerGeocodeFailIconElement,
  J as MaptilerGeocodeLoadingIconElement,
  X as MaptilerGeocodeReverseGeocodingIconElement,
  Y as MaptilerGeocodeSearchIconElement,
  o as MaptilerGeocoderElement
};
//# sourceMappingURL=index.js.map