sveltekit-ui 1.1.17 → 1.1.18

package/dist/Components/LocationInput/index.svelte

@@ -0,0 +1,197 @@
+<script>
+  import Popover from "../Popover/index.svelte"
+  import Button from "../Button/index.svelte"
+  import TextInput from "../TextInput/index.svelte"
+  import Checkbox from "../Checkbox/index.svelte"
+  import Dropdown from "../Dropdown/index.svelte"
+  import LoadingWheel from "../LoadingWheel/index.svelte"
+  import { slide } from "svelte/transition"
+  import { intersection_observer } from "../../actions/index.js"
+
+  let { manager } = $props()
+</script>
+
+{#snippet location_content()}
+  <div class="container" style="height: {manager?.height}; width: {manager?.width}; max-width: 100%;">
+    <div class="loading_container" style="height: {manager?.height}; width: {manager?.width}; max-width: 100%;">
+      <div style="display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center;">
+        <LoadingWheel size={8} />
+        <p>Loading Map</p>
+      </div>
+    </div>
+    <div use:intersection_observer onappeared={() => manager?.initialize_map()}></div>
+    {#key manager?.id}
+      <div id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+    {/key}
+    {#if manager?.is_show_search}
+      <div class="search_container">
+        <div class="text_input">
+          <div style="display: flex; flex-direction: column; flex: 1;">
+            <TextInput manager={manager?.search_text_input_manager} />
+          </div>
+          <Button manager={manager?.search_button_manager} />
+          {#if Array.isArray(manager?.suggestions_prepped) && manager?.suggestions_prepped.length > 0}
+            <Button manager={manager?.clear_suggestions_button_manager} />
+          {:else}
+            <div>
+              <Button manager={manager?.extra_popover_button_manager} />
+              <Popover manager={manager?.extra_popover_manager}>
+                {#snippet content()}
+                  <div style="display: flex; flex-direction: column; gap: .5rem;">
+                    <Checkbox manager={manager?.is_dark_mode_checkbox_manager} />
+                    <Checkbox manager={manager?.search_filter_within_map_boundries_checkbox_manager} />
+                    <Dropdown manager={manager?.search_filter_include_poi_categories_dropdown_manager} />
+                    <Dropdown manager={manager?.search_filter_exclude_poi_categories_dropdown_manager} />
+                    <Dropdown manager={manager?.search_filter_limit_to_countries_dropdown_manager} />
+                    <Dropdown manager={manager?.search_filter_result_type_dropdown_manager} />
+                    <Dropdown manager={manager?.search_filter_include_address_categories_dropdown_manager} />
+                    <Dropdown manager={manager?.search_filter_exclude_address_categories_dropdown_manager} />
+                  </div>
+                {/snippet}
+              </Popover>
+            </div>
+          {/if}
+        </div>
+        {#if Array.isArray(manager?.suggestions_prepped) && manager?.suggestions_prepped.length > 0}
+          <div class="results_container" transition:slide>
+            {#each manager?.suggestions_prepped as suggestion_prepped}
+              <div class="search_item_container">
+                <div class="search_item">
+                  <h3>{suggestion_prepped?.displayLines?.[0]}</h3>
+                  {#if suggestion_prepped?.displayLines?.[1]}
+                    <p>{suggestion_prepped?.displayLines?.[1]}</p>
+                  {/if}
+                  <!-- {#if Array.isArray(suggestion_prepped?.poi_category) && suggestion_prepped.poi_category.length > 0}
+                      <div style="display: flex; flex-wrap: wrap; gap: .5rem;">
+                        {#each suggestion_prepped.poi_category as category}
+                          <div class="tag">{category}</div>
+                        {/each}
+                      </div>
+                    {/if} -->
+                </div>
+                <Button manager={suggestion_prepped?.choose_selection_button_manager} />
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+{#if manager?.is_popover}
+  {#if manager?.is_popover_button}
+    {#if manager?.label || manager?.error_message}
+      <div>
+        {#if manager?.label}
+          <p class="label">{manager?.label}:</p>
+        {/if}
+        {#if manager?.error_message}
+          <p class="error_text">{manager?.error_message}</p>
+        {/if}
+      </div>
+    {/if}
+    <Button manager={manager?.popover_button_manager} />
+  {/if}
+  <Popover manager={manager?.popover_manager}>
+    {#snippet content()}
+      {@render location_content()}
+    {/snippet}
+    {#snippet footer()}
+      <Button manager={manager?.finish_button_manager} />
+    {/snippet}
+  </Popover>
+{:else}
+  {@render location_content()}
+{/if}
+
+<style>
+  @-webkit-keyframes scale-and-fadein {
+    0% {
+      -webkit-transform: scale(0.2);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: scale(1);
+      opacity: 1;
+    }
+  }
+  @keyframes scale-and-fadein {
+    0% {
+      transform: scale(0.2);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  .container {
+    display: grid;
+    grid-template-areas: "stack";
+    animation: scale-and-fadein 0.3s;
+  }
+  .map {
+    grid-area: stack;
+    border-radius: 1rem;
+    overflow: hidden;
+  }
+  .loading_container {
+    grid-area: stack;
+    place-content: center;
+    background-color: var(--shadow2-t);
+    border-radius: 1rem;
+  }
+  .search_container {
+    grid-area: stack;
+    margin: 1rem;
+    padding: 1rem;
+    z-index: 1;
+    border-radius: 2rem;
+    background-color: oklch(var(--l24-t) var(--c2) var(--h10) / var(--o22));
+    /* width: calc(100% - 2rem); */
+    max-width: 40rem;
+    height: min-content;
+  }
+  .results_container {
+    max-height: 32rem;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-top: 0.5rem;
+  }
+  .search_item_container {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 0.5rem;
+    justify-content: space-between;
+  }
+  .search_item_container:not(:first-child) {
+    border-top: 1px solid var(--shadow4-t);
+    padding-top: 0.5rem;
+  }
+  .search_item h3 {
+    font-size: 1.8rem;
+    line-height: 2.4rem;
+  }
+  .search_item p {
+    font-size: 1.4rem;
+    margin-bottom: 0.5rem;
+  }
+  .text_input {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    gap: 1rem;
+  }
+  /* .tag {
+    font-size: 1.2rem;
+    background-color: var(--shadow2-t);
+    border: 1px solid var(--shadow4-t);
+    border-radius: 0.5rem;
+    padding: 0 0.5rem;
+  } */
+</style>