sveltekit-ui 1.1.15 → 1.1.17

package/dist/Components/LocationInput/index.svelte

@@ -1,197 +0,0 @@
-<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>