@maptiler/geocoding-control 0.0.88 → 0.0.89

package/ClearIcon.svelte

@@ -1,6 +1,6 @@
-<svg viewBox="0 0 18 18" width="16" height="16">
+<svg viewBox="0 0 14 14" width="13" height="13">
   <path
-    d="M3.8 2.5c-.6 0-1.3.7-1.3 1.3 0 .3.2.7.5.8L7.2 9 3 13.2c-.3.3-.5.7-.5 1 0 .6.7 1.3 1.3 1.3.3 0 .7-.2 1-.5L9 10.8l4.2 4.2c.2.3.7.3 1 .3.6 0 1.3-.7 1.3-1.3 0-.3-.2-.7-.3-1l-4.4-4L15 4.6c.3-.2.5-.5.5-.8 0-.7-.7-1.3-1.3-1.3-.3 0-.7.2-1 .3L9 7.1 4.8 2.8c-.3-.1-.7-.3-1-.3z"
+    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>
 

package/FailIcon.svelte

@@ -0,0 +1,12 @@
+<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>
+
+<style>
+  svg {
+    display: block;
+    fill: #e15042;
+  }
+</style>

package/FailIcon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FailIconProps */
+/** @typedef {typeof __propDef.events}  FailIconEvents */
+/** @typedef {typeof __propDef.slots}  FailIconSlots */
+export default class FailIcon extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FailIconProps = typeof __propDef.props;
+export type FailIconEvents = typeof __propDef.events;
+export type FailIconSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/FeatureItem.svelte

@@ -0,0 +1,95 @@
+<script>export let feature;
+export let selected = false;
+export let showPlaceType = false;
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<li tabindex="0" data-selected={selected} class:selected on:mouseenter on:focus>
+  <!-- <MarkerIcon displayIn="list" /> -->
+  <span class="texts">
+    <span>
+      <span class="primary">
+        {feature.place_name.replace(/,.*/, "")}
+      </span>
+
+      <span class="secondary">
+        {feature.place_name.replace(/[^,]*,?\s*/, "")}
+      </span>
+    </span>
+
+    {#if showPlaceType}
+      <span class="line2">
+        {feature.properties?.place_type_name?.[0] ?? feature.place_type[0]}
+      </span>
+    {/if}
+  </span>
+</li>
+
+<style>li {
+  text-align: left;
+  cursor: default;
+  display: grid;
+  grid-template-columns: 1fr;
+  color: var(--color-text);
+  padding: 8px 0px;
+  font-size: 14px;
+  line-height: 18px;
+}
+li:first-child {
+  padding-top: 10px;
+}
+li:last-child {
+  padding-bottom: 10px;
+}
+li.selected {
+  background-color: #f3f6ff;
+}
+li.selected .texts > * {
+  animation: backAndForth 5s linear infinite;
+}
+li.selected .primary {
+  color: #2b8bfb;
+}
+
+.texts {
+  padding: 0 17px;
+}
+.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: translateX(0);
+  }
+  10% {
+    transform: translateX(0);
+  }
+  45% {
+    transform: translateX(calc(-100% + 236px));
+  }
+  55% {
+    transform: translateX(calc(-100% + 236px));
+  }
+  90% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}</style>

package/FeatureItem.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Feature } from "./types";
+declare const __propDef: {
+    props: {
+        feature: Feature;
+        selected?: boolean | undefined;
+        showPlaceType?: boolean | undefined;
+    };
+    events: {
+        mouseenter: MouseEvent;
+        focus: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FeatureItemProps = typeof __propDef.props;
+export type FeatureItemEvents = typeof __propDef.events;
+export type FeatureItemSlots = typeof __propDef.slots;
+export default class FeatureItem extends SvelteComponentTyped<FeatureItemProps, FeatureItemEvents, FeatureItemSlots> {
+}
+export {};

package/GeocodingControl.svelte

@@ -1,6 +1,8 @@
 <script>import { createEventDispatcher } from "svelte";
 import { onDestroy } from "svelte/internal";
 import ClearIcon from "./ClearIcon.svelte";
+import FailIcon from "./FailIcon.svelte";
+import FeatureItem from "./FeatureItem.svelte";
 import LoadingIcon from "./LoadingIcon.svelte";
 import ReverseGeocodingIcon from "./ReverseGeocodingIcon.svelte";
 import SearchIcon from "./SearchIcon.svelte";
@@ -14,7 +16,7 @@ export let collapsed = false;
 export let country = undefined;
 export let debounceSearch = 200;
 export let enableReverse = false;
-export let errorMessage = "Searching failed";
+export let errorMessage = "Something went wrong…";
 export let filter = () => true;
 export let flyTo = true;
 export let fuzzyMatch = true;
@@ -22,7 +24,7 @@ export let language = undefined;
 export let limit = undefined;
 export let mapController = undefined;
 export let minLength = 2;
-export let noResultsMessage = "No results found";
+export let 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!";
 export let placeholder = "Search";
 export let proximity = undefined;
 export let reverseActive = enableReverse === "always";
@@ -338,10 +340,14 @@ function handleKeyDown(e) {
     }
 }
 function handleInput(debounce = true) {
-    if (showResultsWhileTyping && searchValue.length > minLength) {
+    error = undefined;
+    if (showResultsWhileTyping) {
         if (searchTimeoutRef) {
             clearTimeout(searchTimeoutRef);
         }
+        if (searchValue.length <= minLength) {
+            return;
+        }
         const sv = searchValue;
         searchTimeoutRef = window.setTimeout(() => {
             search(sv).catch((err) => (error = err));
@@ -374,7 +380,7 @@ function unwrapBbox(bbox0) {
   class={className}
 >
   <div class="input-group">
-    <button type="button" on:click={() => input.focus()}>
+    <button class="search-button" type="button" on:click={() => input.focus()}>
       <SearchIcon />
     </button>
 
@@ -421,43 +427,36 @@ function unwrapBbox(bbox0) {
   </div>
 
   {#if error}
-    <div class="error">{errorMessage}</div>
+    <div class="error">
+      <FailIcon />
+
+      <div>{errorMessage}</div>
+
+      <button on:click={() => (error = undefined)}>
+        <ClearIcon />
+      </button>
+    </div>
   {:else if !focusedDelayed}
     {""}
   {:else if listFeatures?.length === 0}
-    <div class="no-results">{noResultsMessage}</div>
+    <div class="no-results">
+      <FailIcon />
+
+      <div>{noResultsMessage}</div>
+    </div>
   {:else if focusedDelayed && listFeatures?.length}
     <ul
       on:mouseleave={() => (selectedItemIndex = -1)}
       on:blur={() => undefined}
     >
       {#each listFeatures as feature, i}
-        <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-        <li
-          tabindex="0"
-          data-selected={selectedItemIndex === i}
-          class:selected={selectedItemIndex === i}
+        <FeatureItem
+          {feature}
+          {showPlaceType}
+          selected={selectedItemIndex === i}
           on:mouseenter={() => (selectedItemIndex = i)}
           on:focus={() => pick(feature)}
-        >
-          <!-- <MarkerIcon displayIn="list" /> -->
-          <span class="texts">
-            <span class="line1">
-              <span class="primary">
-                {feature.place_name.replace(/,.*/, "")}
-              </span>
-              <span class="secondary">
-                {feature.place_name.replace(/[^,]*,?\s*/, "")}
-              </span>
-            </span>
-            {#if showPlaceType}
-              <span class="line2">
-                {feature.properties?.place_type_name?.[0] ??
-                  feature.place_type[0]}
-              </span>
-            {/if}
-          </span>
-        </li>
+        />
       {/each}
     </ul>
   {/if}
@@ -470,7 +469,7 @@ function unwrapBbox(bbox0) {
   z-index: 10;
   border-radius: 4px;
   transition: max-width 0.25s;
-  /* box-shadow: 0px 5px 10px rgba(51, 51, 89, 0.15); */
+  box-shadow: 0px 2px 5px rgba(51, 51, 89, 0.15);
   --color-text: #444952;
   --color-icon-button: #444952;
 }
@@ -478,31 +477,24 @@ form, form *, form *:after, form *:before {
   box-sizing: border-box;
 }
 form.can-collapse {
-  max-width: 30px;
-}
-form.can-collapse .input-group {
-  padding-inline: 5px;
-  transition: padding-inline 0.25s;
-}
-form.can-collapse:focus-within .input-group, form.can-collapse:hover .input-group {
-  padding-inline: 8px;
+  max-width: 29px;
 }
 form, form:focus-within, form:hover {
-  width: 240px;
-  max-width: 240px;
+  width: 270px;
+  max-width: 270px;
 }
 
 input {
   font: inherit;
   font-size: 14px;
-  width: 100%;
-  min-height: 28px;
-  border: 0;
+  flex-grow: 1;
+  min-height: 29px;
   background-color: transparent;
-  margin: 0;
   color: #444952;
   white-space: nowrap;
   overflow: hidden;
+  border: 0;
+  margin: 0;
   padding: 0;
 }
 input:focus {
@@ -524,64 +516,68 @@ div.no-results {
   position: absolute;
   width: 100%;
   top: calc(100% + 6px);
-  font-size: 14px;
-  box-shadow: 0px 2px 8px rgba(51, 51, 89, 0.15);
-  line-height: 16px;
   overflow: hidden;
 }
 
-:global(.maplibregl-ctrl-bottom-left) ul,
-:global(.maplibregl-ctrl-bottom-right) ul {
-  top: auto;
-  bottom: 100%;
+ul {
+  font-size: 14px;
+  line-height: 16px;
+  box-shadow: 0px 5px 10px rgba(51, 51, 89, 0.15);
 }
 
-li {
-  text-align: left;
-  cursor: default;
-  display: grid;
-  grid-template-columns: 1fr;
-  color: var(--color-text);
-  padding: 8px 0px;
-  font-size: 14px;
+div.error,
+div.no-results {
+  font: inherit;
   line-height: 18px;
+  font-size: 12px;
+  display: flex;
+  gap: 16px;
 }
-li:first-child {
-  padding-top: 10px;
+
+div.error {
+  padding: 16px;
+  font-weight: 600;
+  color: #e25041;
+  background-color: #fbeae8;
 }
-li:last-child {
-  padding-bottom: 10px;
+div.error div {
+  flex-grow: 1;
 }
-li.selected {
-  background-color: #f3f6ff;
+div.error :global(svg) {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
 }
-li.selected .texts > * {
-  animation: backAndForth 5s linear infinite;
+div.error button {
+  flex-shrink: 0;
 }
-li.selected .primary {
-  color: #2b8bfb;
+div.error button > :global(svg) {
+  width: 13px;
+  fill: #e25041;
 }
-
-.texts {
-  padding: 0 17px;
-}
-.texts > * {
-  white-space: nowrap;
-  display: block;
-  min-width: fit-content;
+div.error button:hover :global(svg), div.error button:active :global(svg) {
+  fill: #444952;
 }
 
-.primary {
-  font-weight: 600;
-}
-
-.secondary {
-  color: #aeb6c7;
-  padding-left: 4px;
+div.no-results {
+  padding: 14px 24px 14px 16px;
+  font-weight: 400;
+  color: #6b7c93;
+  box-shadow: 0px 5px 10px rgba(51, 51, 89, 0.15);
+}
+div.no-results :global(svg) {
+  margin-top: 4px;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  width: 30px;
+  height: 30px;
 }
 
-.line2 {
-  color: #aeb6c7;
+:global(.maplibregl-ctrl-bottom-left) ul,
+:global(.maplibregl-ctrl-bottom-right) ul {
+  top: auto;
+  bottom: 100%;
 }
 
 button {
@@ -589,6 +585,7 @@ button {
   margin: 0;
   border: 0;
   background-color: transparent;
+  height: auto;
   width: auto;
 }
 button:hover {
@@ -596,7 +593,7 @@ button:hover {
 }
 
 button:hover :global(svg),
-button.active :global(svg) {
+button:active :global(svg) {
   fill: #2b8bfb;
 }
 
@@ -612,66 +609,42 @@ button.active :global(svg) {
   outline: #2b8bfb solid 2px;
 }
 
-.clear-button-container.displayable {
-  display: flex;
-}
-
-div.error,
-div.no-results {
-  font: inherit;
-  font-size: 14px;
-  padding: 6px 10px;
-}
-
-div.error {
-  color: #e25041;
-}
-
-div.no-results {
-  color: var(--color-text);
+.search-button {
+  flex-shrink: 0;
 }
 
 .clear-button-container {
+  display: flex;
   display: none;
   position: relative;
   align-items: stretch;
 }
-
-@keyframes backAndForth {
-  0% {
-    transform: translateX(0);
-  }
-  10% {
-    transform: translateX(0);
-  }
-  45% {
-    transform: translateX(calc(-100% + 206px));
-  }
-  55% {
-    transform: translateX(calc(-100% + 206px));
-  }
-  90% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(0);
-  }
+.clear-button-container.displayable {
+  display: flex;
+  flex-shrink: 0;
 }
+
 :global(.maplibregl-ctrl-geocoder) {
   position: relative;
   z-index: 3;
 }
 
+:global(.maptiler-ctrl):not(:empty) {
+  box-shadow: none;
+}
+:global(.maptiler-ctrl) .input-group {
+  padding-inline: 8px;
+  border: white solid 2px;
+}
 :global(.maptiler-ctrl) .input-group:focus-within {
-  outline: #2b8bfb solid 1.5px;
+  border: #2b8bfb solid 2px;
+  outline: 0;
+  outline: none;
 }
 :global(.maptiler-ctrl) form.can-collapse {
   max-width: 34px;
 }
-:global(.maptiler-ctrl) form.can-collapse .input-group {
-  padding-inline: 7px;
-}
 :global(.maptiler-ctrl) form, :global(.maptiler-ctrl) form:focus-within, :global(.maptiler-ctrl) form:hover {
-  width: 240px;
-  max-width: 240px;
+  width: 270px;
+  max-width: 270px;
 }</style>

package/README.md

@@ -104,8 +104,8 @@ For examples without using bundler see `demo-maplibregl.html` or `demo-leaflet.h
 - `debounceSearch`: `number` - Sets the amount of time, in milliseconds, to wait before querying the server when a user types into the Geocoder input box. This parameter may be useful for reducing the total number of API calls made for a single query. Default `200`.
 - `proximity`: `[number, number]` - A proximity argument: this is a geographical point given as an object with latitude and longitude properties. Search results closer to this point will be given higher priority.
 - `placeholder`: `string` - Override the default placeholder attribute value. Default `"Search"`.
-- `errorMessage`: `string` - Override the default error message. Default `"Searching failed"`.
-- `noResultsMessage`: `string` - Override the default message if no results are found. Default `"No results found"`.
+- `errorMessage`: `string` - Override the default error message. Default `"Something went wrong…"`.
+- `noResultsMessage`: `string` - Override the default message if no results are found. Default `"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!"`.
 - `trackProximity`: `boolean` - If true, the geocoder proximity will automatically update based on the map view. Default `true`.
 - `minLength`: `number` - Minimum number of characters to enter before results are shown. Default `2`.
 - `bbox`: `[number, number, number, number]` - A bounding box argument: this is a bounding box given as an array in the format [minX, minY, maxX, maxY]. Search results will be limited to the bounding box.

package/SearchIcon.svelte

@@ -1,6 +1,6 @@
-<svg viewBox="0 0 18 18" xml:space="preserve" width="20">
+<svg width="14" height="14" viewBox="0 0 15 15">
   <path
-    d="M7.4 2.5c-2.7 0-4.9 2.2-4.9 4.9s2.2 4.9 4.9 4.9c1 0 1.8-.2 2.5-.8l3.7 3.7c.2.2.4.3.8.3.7 0 1.1-.4 1.1-1.1 0-.3-.1-.5-.3-.8L11.4 10c.4-.8.8-1.6.8-2.5.1-2.8-2.1-5-4.8-5zm0 1.6c1.8 0 3.2 1.4 3.2 3.2s-1.4 3.2-3.2 3.2-3.3-1.3-3.3-3.1 1.4-3.3 3.3-3.3z"
+    d="M13.101 14.261 8.74 9.899a4.797 4.797 0 0 1-1.425.748 5.165 5.165 0 0 1-1.603.248c-1.446 0-2.677-.5-3.693-1.503S.495 7.164.495 5.717c0-1.446.508-2.678 1.524-3.693C3.035 1.008 4.266.5 5.712.5c1.448 0 2.672.508 3.675 1.524 1.002 1.015 1.503 2.247 1.503 3.693 0 .558-.08 1.092-.239 1.603-.159.512-.411.98-.757 1.405l4.382 4.4a.74.74 0 0 1 .229.568.81.81 0 0 1-.249.568.787.787 0 0 1-.577.239.787.787 0 0 1-.578-.239ZM5.712 9.223c.97 0 1.796-.342 2.48-1.026a3.378 3.378 0 0 0 1.026-2.48c0-.982-.34-1.818-1.016-2.509-.677-.69-1.507-1.035-2.49-1.035a3.42 3.42 0 0 0-2.509 1.035 3.42 3.42 0 0 0-1.035 2.51c0 .982.345 1.812 1.035 2.488.691.678 1.527 1.017 2.51 1.017Z"
   />
 </svg>