@maptiler/geocoding-control 0.0.84 → 0.0.85

package/GeocodingControl.svelte

@@ -389,14 +389,13 @@ function unwrapBbox(bbox0) {
       aria-label={placeholder}
     />
 
-    <div class="clear-button-container">
+    <div class="clear-button-container" class:displayable={searchValue !== ""}>
       <button
         type="button"
         on:click={() => {
           searchValue = "";
           input.focus();
         }}
-        class:displayable={searchValue !== ""}
         title={clearButtonTitle}
       >
         <ClearIcon />
@@ -464,229 +463,214 @@ function unwrapBbox(bbox0) {
   {/if}
 </form>
 
-<style>
-  form,
-  form *,
-  form *:after,
-  form *:before {
-    box-sizing: border-box;
-  }
-
-  form {
-    font-family: "Open Sans", "Ubuntu", "Helvetica Neue", Arial, Helvetica,
-      sans-serif;
-    position: relative;
-    background-color: #fff;
-    width: 100%;
-    z-index: 10;
-    border-radius: 4px;
-    transition: max-width 0.25s;
-    box-shadow: 0px 5px 10px rgba(51, 51, 89, 0.15);
-    --color-text: #444952;
-    --color-icon-button: #444952;
-  }
-
-  form.can-collapse {
-    max-width: 35px;
-  }
-
-  form,
-  form:focus-within,
-  form:hover {
-    max-width: 240px;
-  }
-
-  input {
-    font: inherit;
-    font-size: 14px;
-    width: 100%;
-    border: 0;
-    background-color: transparent;
-    margin: 0;
-    height: 36px;
-    color: #444952;
-    white-space: nowrap;
-    overflow: hidden;
-    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);
-    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%;
-  }
-
-  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;
-  }
+<style>form {
+  font-family: "Open Sans", "Ubuntu", "Helvetica Neue", Arial, Helvetica, sans-serif;
+  position: relative;
+  background-color: #fff;
+  z-index: 10;
+  border-radius: 4px;
+  transition: max-width 0.25s;
+  /* box-shadow: 0px 5px 10px rgba(51, 51, 89, 0.15); */
+  --color-text: #444952;
+  --color-icon-button: #444952;
+}
+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;
+}
+form, form:focus-within, form:hover {
+  width: 240px;
+  max-width: 240px;
+}
 
-  .texts {
-    padding: 0 17px;
-  }
+input {
+  font: inherit;
+  font-size: 14px;
+  width: 100%;
+  border: 0;
+  background-color: transparent;
+  margin: 0;
+  color: #444952;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 0;
+}
+input:focus {
+  color: #444952;
+  outline: 0;
+  outline: none;
+  box-shadow: none;
+}
 
-  .texts > * {
-    white-space: nowrap;
-    display: block;
-    min-width: fit-content;
-  }
+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);
+  font-size: 14px;
+  box-shadow: 0px 2px 8px rgba(51, 51, 89, 0.15);
+  line-height: 16px;
+  overflow: hidden;
+}
 
-  li.selected .texts > * {
-    animation: backAndForth 5s linear infinite;
-  }
+:global(.maplibregl-ctrl-bottom-left) ul,
+:global(.maplibregl-ctrl-bottom-right) ul {
+  top: auto;
+  bottom: 100%;
+}
 
-  .primary {
-    font-weight: 600;
-  }
+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;
+}
 
-  li.selected .primary {
-    color: #2b8bfb;
-  }
+.texts {
+  padding: 0 17px;
+}
+.texts > * {
+  white-space: nowrap;
+  display: block;
+  min-width: fit-content;
+}
 
-  .secondary {
-    color: #aeb6c7;
-    padding-left: 4px;
-  }
+.primary {
+  font-weight: 600;
+}
 
-  .line2 {
-    color: #aeb6c7;
-  }
+.secondary {
+  color: #aeb6c7;
+  padding-left: 4px;
+}
 
-  li.selected {
-    background-color: #f3f6ff;
-  }
+.line2 {
+  color: #aeb6c7;
+}
 
-  button:hover {
-    background-color: transparent;
-  }
+button {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+  width: auto;
+}
+button:hover {
+  background-color: transparent;
+}
 
-  button:hover :global(svg),
-  button.active :global(svg) {
-    fill: #6b7c92;
-  }
+button:hover :global(svg),
+button.active :global(svg) {
+  fill: #3588d4;
+}
 
-  button {
-    padding: 0;
-    margin: 0;
-    border: 0;
-    background-color: transparent;
-  }
+.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;
+}
 
-  .input-group {
-    display: flex;
-    align-items: stretch;
-    gap: 7px;
-    padding-inline: 8px;
-    outline: #c1cfe4 solid 1.5px;
-    border-radius: 4px;
-    overflow: hidden;
-  }
+.clear-button-container.displayable {
+  display: flex;
+}
 
-  .input-group:hover .displayable {
-    visibility: visible;
-  }
+div.error,
+div.no-results {
+  font: inherit;
+  font-size: 14px;
+  padding: 6px 10px;
+}
 
-  .input-group:focus-within {
-    outline: #2b8bfb solid 1.5px;
-  }
+div.error {
+  color: #e25041;
+}
 
-  div.error,
-  div.no-results {
-    font: inherit;
-    font-size: 14px;
-    padding: 6px 10px;
-  }
+div.no-results {
+  color: var(--color-text);
+}
 
-  div.error {
-    color: #e25041;
-  }
+.clear-button-container {
+  display: none;
+  position: relative;
+  align-items: stretch;
+}
 
-  div.no-results {
-    color: var(--color-text);
+@keyframes backAndForth {
+  0% {
+    transform: translateX(0);
   }
-
-  .clear-button-container {
-    position: relative;
-    display: flex;
-    align-items: stretch;
+  10% {
+    transform: translateX(0);
   }
-
-  .clear-button-container button {
-    visibility: hidden;
+  45% {
+    transform: translateX(calc(-100% + 206px));
   }
-
-  @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);
-    }
+  55% {
+    transform: translateX(calc(-100% + 206px));
   }
-
-  form.can-collapse button:not(:nth-of-type(1)) {
-    opacity: 0;
-    transition: opacity 0.25s;
+  90% {
+    transform: translateX(0);
   }
-
-  form.can-collapse:focus-within :not(:nth-of-type(1)),
-  form.can-collapse:hover :not(:nth-of-type(1)) {
-    opacity: 1;
+  100% {
+    transform: translateX(0);
   }
+}
+:global(.maplibregl-ctrl-geocoder) {
+  position: relative;
+  z-index: 3;
+}
 
-  :global(.maplibregl-ctrl-geocoder) {
-    position: relative;
-    z-index: 3;
-  }
-</style>
+:global(.maptiler-ctrl) .input-group:focus-within {
+  outline: #2b8bfb solid 1.5px;
+}
+: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;
+}</style>

package/leaflet.js

@@ -420,7 +420,7 @@ function ua(r) {
         "title",
         /*reverseButtonTitle*/
         r[9]
-      ), B(t, "class", "svelte-gpexd2"), en(
+      ), B(t, "class", "svelte-1qszo8o"), en(
         t,
         "active",
         /*reverseActive*/
@@ -473,7 +473,7 @@ function Rl(r) {
       t = oe("ul");
       for (let s = 0; s < o.length; s += 1)
         o[s].c();
-      B(t, "class", "svelte-gpexd2");
+      B(t, "class", "svelte-1qszo8o");
     },
     m(s, a) {
       We(s, t, a);
@@ -521,7 +521,7 @@ function Ol(r) {
       t = oe("div"), e = Ur(
         /*noResultsMessage*/
         r[7]
-      ), B(t, "class", "no-results svelte-gpexd2");
+      ), B(t, "class", "no-results svelte-1qszo8o");
     },
     m(n, i) {
       We(n, t, i), ct(t, e);
@@ -561,7 +561,7 @@ function Tl(r) {
       t = oe("div"), e = Ur(
         /*errorMessage*/
         r[6]
-      ), B(t, "class", "error svelte-gpexd2");
+      ), B(t, "class", "error svelte-1qszo8o");
     },
     m(n, i) {
       We(n, t, i), ct(t, e);
@@ -588,7 +588,7 @@ function la(r) {
   ), n;
   return {
     c() {
-      t = oe("span"), n = Ur(e), B(t, "class", "line2 svelte-gpexd2");
+      t = oe("span"), n = Ur(e), B(t, "class", "line2 svelte-1qszo8o");
     },
     m(s, a) {
       We(s, t, a), ct(t, n);
@@ -636,9 +636,9 @@ function ca(r) {
   }
   return {
     c() {
-      t = oe("li"), e = oe("span"), n = oe("span"), i = oe("span"), s = Ur(o), a = er(), u = oe("span"), c = Ur(l), f = er(), d && d.c(), h = er(), B(i, "class", "primary svelte-gpexd2"), B(u, "class", "secondary svelte-gpexd2"), B(n, "class", "line1 svelte-gpexd2"), B(e, "class", "texts svelte-gpexd2"), B(t, "tabindex", "0"), B(t, "data-selected", g = /*selectedItemIndex*/
+      t = oe("li"), e = oe("span"), n = oe("span"), i = oe("span"), s = Ur(o), a = er(), u = oe("span"), c = Ur(l), f = er(), d && d.c(), h = er(), B(i, "class", "primary svelte-1qszo8o"), B(u, "class", "secondary svelte-1qszo8o"), B(n, "class", "line1 svelte-1qszo8o"), B(e, "class", "texts svelte-1qszo8o"), B(t, "tabindex", "0"), B(t, "data-selected", g = /*selectedItemIndex*/
       r[13] === /*i*/
-      r[71]), B(t, "class", "svelte-gpexd2"), en(
+      r[71]), B(t, "class", "svelte-1qszo8o"), en(
         t,
         "selected",
         /*selectedItemIndex*/
@@ -720,7 +720,7 @@ function Ml(r) {
   let F = A(r), D = F && F(r);
   return {
     c() {
-      t = oe("form"), e = oe("div"), n = oe("button"), Do(i.$$.fragment), o = er(), s = oe("input"), a = er(), u = oe("div"), l = oe("button"), Do(c.$$.fragment), f = er(), E && E.c(), h = er(), N && N.c(), g = er(), b && b.c(), p = er(), D && D.c(), B(n, "type", "button"), B(n, "class", "svelte-gpexd2"), B(
+      t = oe("form"), e = oe("div"), n = oe("button"), Do(i.$$.fragment), o = er(), s = oe("input"), a = er(), u = oe("div"), l = oe("button"), Do(c.$$.fragment), f = er(), E && E.c(), h = er(), N && N.c(), g = er(), b && b.c(), p = er(), D && D.c(), B(n, "type", "button"), B(n, "class", "svelte-1qszo8o"), B(
         s,
         "placeholder",
         /*placeholder*/
@@ -730,20 +730,20 @@ function Ml(r) {
         "aria-label",
         /*placeholder*/
         r[8]
-      ), B(s, "class", "svelte-gpexd2"), B(l, "type", "button"), B(
+      ), B(s, "class", "svelte-1qszo8o"), B(l, "type", "button"), B(
         l,
         "title",
         /*clearButtonTitle*/
         r[3]
-      ), B(l, "class", "svelte-gpexd2"), en(
-        l,
+      ), B(l, "class", "svelte-1qszo8o"), B(u, "class", "clear-button-container svelte-1qszo8o"), en(
+        u,
         "displayable",
         /*searchValue*/
         r[1] !== ""
-      ), B(u, "class", "clear-button-container svelte-gpexd2"), B(e, "class", "input-group svelte-gpexd2"), B(t, "tabindex", "0"), B(t, "class", _ = ea(
+      ), B(e, "class", "input-group svelte-1qszo8o"), B(t, "tabindex", "0"), B(t, "class", _ = ea(
         /*className*/
         r[2]
-      ) + " svelte-gpexd2"), en(
+      ) + " svelte-1qszo8o"), en(
         t,
         "can-collapse",
         /*collapsed*/
@@ -830,17 +830,17 @@ function Ml(r) {
         "title",
         /*clearButtonTitle*/
         R[3]
-      ), (!d || z[0] & /*searchValue*/
-      2) && en(
-        l,
-        "displayable",
-        /*searchValue*/
-        R[1] !== ""
       ), /*abortController*/
       R[17] ? E ? z[0] & /*abortController*/
       131072 && Je(E, 1) : (E = aa(), E.c(), Je(E, 1), E.m(u, null)) : E && (ia(), $n(E, 1, 1, () => {
         E = null;
-      }), oa()), /*enableReverse*/
+      }), oa()), (!d || z[0] & /*searchValue*/
+      2) && en(
+        u,
+        "displayable",
+        /*searchValue*/
+        R[1] !== ""
+      ), /*enableReverse*/
       R[5] === !0 ? N ? (N.p(R, z), z[0] & /*enableReverse*/
       32 && Je(N, 1)) : (N = ua(R), N.c(), Je(N, 1), N.m(e, g)) : N && (ia(), $n(N, 1, 1, () => {
         N = null;
@@ -866,7 +866,7 @@ function Ml(r) {
       4 && _ !== (_ = ea(
         /*className*/
         R[2]
-      ) + " svelte-gpexd2")) && B(t, "class", _), (!d || z[0] & /*className, collapsed, searchValue*/
+      ) + " svelte-1qszo8o")) && B(t, "class", _), (!d || z[0] & /*className, collapsed, searchValue*/
       22) && en(
         t,
         "can-collapse",