sveltekit-ui 1.1.74 → 1.1.76

package/dist/Components/LocationInput/index.svelte

@@ -6,25 +6,35 @@
   import Dropdown from "../Dropdown/index.svelte"
   import LoadingWheel from "../LoadingWheel/index.svelte"
   import { slide } from "svelte/transition"
+  import { onDestroy } from "svelte"
   import { intersection_observer } from "../../actions/index.js"
 
   let { manager } = $props()
+
+  onDestroy(() => manager?.destroy?.())
 </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>
+    {#if manager?.error_message}
+      <div class="map_status error_text" role="alert">{manager.error_message}</div>
+    {:else if manager?.is_loading_map}
+      <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>
+    {/if}
     <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">
+        {#if manager?.search_error_message}
+          <p class="error_text" role="alert">{manager.search_error_message}</p>
+        {/if}
         <div class="text_input">
           <div style="display: flex; flex-direction: column; flex: 1;">
             <TextInput manager={manager?.search_text_input_manager} />
@@ -142,6 +152,14 @@
     background-color: var(--shadow2-t);
     border-radius: 1rem;
   }
+  .map_status {
+    grid-area: stack;
+    z-index: 2;
+    place-self: center;
+    padding: 1rem;
+    border-radius: 1rem;
+    background: var(--bg);
+  }
   .search_container {
     grid-area: stack;
     margin: 1rem;

package/dist/Components/LocationInput/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/LocationInput/manager.svelte.d.ts

@@ -0,0 +1,36 @@
+export function create_location_input_manager(config: any): {
+    id: string;
+    readonly val: null;
+    readonly map: null;
+    readonly is_loading_map: boolean;
+    readonly search_error_message: null;
+    readonly is_popover: any;
+    readonly is_popover_button: any;
+    readonly popover_button_manager: null;
+    readonly label: any;
+    readonly error_message: any;
+    readonly height: string;
+    readonly width: string;
+    readonly is_show_search: any;
+    readonly popover_manager: null;
+    readonly extra_popover_manager: null;
+    readonly extra_popover_button_manager: null;
+    readonly finish_button_manager: null;
+    readonly suggestions_prepped: null;
+    readonly is_dark_mode_checkbox_manager: null;
+    readonly clear_suggestions_button_manager: null;
+    readonly search_text_input_manager: null;
+    readonly search_button_manager: null;
+    readonly search_filter_within_map_boundries_checkbox_manager: null;
+    readonly search_filter_include_poi_categories_dropdown_manager: null;
+    readonly search_filter_exclude_poi_categories_dropdown_manager: null;
+    readonly search_filter_limit_to_countries_dropdown_manager: null;
+    readonly search_filter_result_type_dropdown_manager: null;
+    readonly search_filter_include_address_categories_dropdown_manager: null;
+    readonly search_filter_exclude_address_categories_dropdown_manager: null;
+    readonly mapkit_js_token: any;
+    initialize_map: () => Promise<void>;
+    set_val: (input: any) => void;
+    reset_map: () => void;
+    destroy: () => void;
+};

package/dist/Components/LocationInput/{index.svelte.js → manager.svelte.js}

@@ -1,10 +1,11 @@
 import { create_unique_id, set_closurable } from "../../client/index.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_text_input_manager } from "../TextInput/index.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
-import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_popover_manager } from "../Popover/manager.svelte.js"
+import { create_text_input_manager } from "../TextInput/manager.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
+import { create_checkbox_manager } from "../Checkbox/manager.svelte.js"
 import { browser } from "$app/environment"
+import { get_mapkit_api, load_mapkit_script } from "../../client/mapkit.js"
 
 export function create_location_input_manager(config) {
   const id = create_unique_id(null, 20)
@@ -447,6 +448,7 @@ export function create_location_input_manager(config) {
     set_closurable(config?.width, null) ? `${set_closurable(config?.width, null)}rem` : "clamp(60rem, 80vw, 100%)"
   )
   let label = $derived(set_closurable(config?.label, null))
+  let error_message = $state(set_closurable(config?.error_message, null))
   let is_popover = $derived(set_closurable(config?.is_popover, true))
   let is_popover_button = $derived(set_closurable(config?.is_popover_button, false))
   let is_show_search = $derived(set_closurable(config?.is_show_search, true))
@@ -454,60 +456,33 @@ export function create_location_input_manager(config) {
 
   let val = $state(null)
   let map = $state(null)
-
-  let mapkit_load_promise = $state(null)
-  async function load_mapkit_script() {
-    if (!mapkit_load_promise) {
-      mapkit_load_promise = new Promise(async (resolve, reject) => {
-        if (browser && !document?.querySelector('script[src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js"]')) {
-          window.init_map_kit = () => {
-            delete window.init_map_kit
-            window.init_map_kit_loaded = true
-            resolve()
-          }
-          const script = document.createElement("script")
-          script.src = "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js"
-          script.crossOrigin = "anonymous"
-          script.async = true
-          script.setAttribute("data-callback", "init_map_kit")
-          script.setAttribute("data-libraries", "full-map,services")
-          script.setAttribute("data-token", mapkit_js_token)
-          document.head.appendChild(script)
-        } else {
-          let attempt_count = 0
-          const max_attempts = 50
-          const check_init_mapkit = setInterval(() => {
-            attempt_count++
-            if (window.init_map_kit_loaded) {
-              clearInterval(check_init_mapkit)
-              resolve()
-            } else if (attempt_count > max_attempts) {
-              clearInterval(check_init_mapkit)
-              reject(new Error("MapKit initialization timeout"))
-            }
-          }, 100)
-        }
-      })
-    }
-    return mapkit_load_promise
-  }
+  let is_loading_map = $state(true)
+  let search_error_message = $state(null)
+  let autocomplete_request_id = 0
 
   async function initialize_map() {
-    console.log("initialize_map")
-    if (!browser) {
-      console.log("document is not defined")
+    if (!browser) return
+    is_loading_map = true
+    try {
+      await load_mapkit_script(mapkit_js_token)
+    } catch (error) {
+      error_message = error instanceof Error ? error.message : "MapKit failed to load"
+      is_loading_map = false
       return
     }
-    await load_mapkit_script()
-    if (!window.mapkit) {
-      console.log("MapKit is not defined")
+    const mapkit = get_mapkit_api()
+    if (!mapkit) {
+      error_message = "MapKit is unavailable"
+      is_loading_map = false
       return
     }
     const is_map_div_found = document?.querySelector(`#map_${id}`)
     if (!is_map_div_found) {
-      console.log("Map div not found")
+      error_message = "Map container was not found"
+      is_loading_map = false
       return
     }
+    error_message = null
     const initial_region = new mapkit.CoordinateRegion(
       new mapkit.Coordinate(val?.latitude ?? 37.3316850890998, val?.longitude ?? -122.030067374026),
       new mapkit.CoordinateSpan(0.1, 0.1)
@@ -534,9 +509,12 @@ export function create_location_input_manager(config) {
     } else if (val?.name) {
       // make annotation with name maybe? or use muid
     }
+    is_loading_map = false
   }
 
   function suggestion_clicked(input) {
+    const mapkit = get_mapkit_api()
+    if (!mapkit || !map) return
     if (input?.id) {
       const lookup = new mapkit.PlaceLookup()
       lookup.getPlace(input?.id, (error, place) => {
@@ -586,6 +564,7 @@ export function create_location_input_manager(config) {
   }
 
   function prepare_search_options(is_autocomplete = false) {
+    const mapkit = get_mapkit_api()
     const result_type = Array.isArray(search_filter_result_type_dropdown_manager?.val)
       ? search_filter_result_type_dropdown_manager?.val
       : []
@@ -610,6 +589,7 @@ export function create_location_input_manager(config) {
       options.limitToCountries = search_filter_limit_to_countries_dropdown_manager?.val.join(",")
     }
     if (
+      mapkit &&
       Array.isArray(search_filter_include_poi_categories_dropdown_manager?.val) &&
       search_filter_include_poi_categories_dropdown_manager?.val.length > 0
     ) {
@@ -618,6 +598,7 @@ export function create_location_input_manager(config) {
       )
     }
     if (
+      mapkit &&
       Array.isArray(search_filter_include_address_categories_dropdown_manager?.val) &&
       search_filter_include_address_categories_dropdown_manager?.val.length > 0
     ) {
@@ -628,6 +609,7 @@ export function create_location_input_manager(config) {
       )
     }
     if (
+      mapkit &&
       Array.isArray(search_filter_exclude_address_categories_dropdown_manager?.val) &&
       search_filter_exclude_address_categories_dropdown_manager?.val.length > 0
     ) {
@@ -641,24 +623,30 @@ export function create_location_input_manager(config) {
   }
 
   function search_for_autocomplete(input) {
+    const request_id = ++autocomplete_request_id
     if (!input) {
       suggestions_prepped = []
       return
     }
+    const mapkit = get_mapkit_api()
+    if (!mapkit) return
     const autocomplete_search_options = prepare_search_options(true)
     const place_search = new mapkit.Search()
     place_search.autocomplete(
       input,
       (error, result) => {
+        if (request_id !== autocomplete_request_id) return
         if (error) {
           console.error("Autocomplete error:", error)
+          search_error_message = "Location suggestions failed to load"
           return
         }
+        search_error_message = null
         if (result.results.length > 0) {
           let suggestions_prepped_loc = []
           if (Array.isArray(result.results)) {
             for (let suggestion of result.results) {
-              let choose_selection_button_manager = $state(null)
+              let choose_selection_button_manager = null
               if (suggestion?.id) {
                 choose_selection_button_manager = create_button_manager({
                   support_icon: "arrow_tailed",
@@ -686,11 +674,9 @@ export function create_location_input_manager(config) {
   }
 
   function search_for(input) {
+    const mapkit = get_mapkit_api()
     const search_options = prepare_search_options()
-    if (!map) {
-      console.log("map not found")
-      return
-    }
+    if (!mapkit || !map || !input) return
     map.removeAnnotations(map.annotations)
     const place_search = new mapkit.Search()
     place_search.search(
@@ -698,8 +684,10 @@ export function create_location_input_manager(config) {
       (error, result) => {
         if (error) {
           console.error("Search error:", error)
+          search_error_message = "Location search failed"
           return
         }
+        search_error_message = null
         if (result.places.length > 0) {
           if (!search_filter_within_map_boundries_checkbox_manager?.val) {
             const center = result.places[0].coordinate
@@ -761,6 +749,13 @@ export function create_location_input_manager(config) {
     initialize_map()
   }
 
+  function destroy() {
+    autocomplete_request_id++
+    suggestions_prepped = []
+    map?.destroy?.()
+    map = null
+  }
+
   function finish() {
     popover_manager.close()
     if (typeof config?.on_finish == "function") {
@@ -886,6 +881,12 @@ export function create_location_input_manager(config) {
     get map() {
       return map
     },
+    get is_loading_map() {
+      return is_loading_map
+    },
+    get search_error_message() {
+      return search_error_message
+    },
     get is_popover() {
       return is_popover
     },
@@ -898,6 +899,9 @@ export function create_location_input_manager(config) {
     get label() {
       return label
     },
+    get error_message() {
+      return error_message
+    },
     get height() {
       return height
     },
@@ -961,5 +965,6 @@ export function create_location_input_manager(config) {
     initialize_map,
     set_val,
     reset_map,
+    destroy,
   }
 }

package/dist/Components/Number/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/Number/manager.svelte.d.ts

@@ -0,0 +1,4 @@
+export function create_number_manager(config?: {}): {
+    readonly val: null;
+    set_val: (input: any) => void;
+};

package/dist/Components/Number/manager.svelte.js

@@ -0,0 +1,132 @@
+import { set_closurable } from "../../client/index.js"
+
+export function create_number_manager(config = {}) {
+  let val = $state(null)
+
+  function round_value(value, options) {
+    const round_by = Number(options?.round_by)
+    if (!Number.isFinite(value)) return value
+    switch (options?.round) {
+      case "nearest":
+        return round_by > 0 ? Math.round(value / round_by) * round_by : value
+      case "floor":
+        return round_by > 0 ? Math.floor(value / round_by) * round_by : value
+      case "ceil":
+        return round_by > 0 ? Math.ceil(value / round_by) * round_by : value
+      case "precision":
+        return Number(value).toPrecision(Math.min(Math.max(Math.trunc(round_by) || 1, 1), 100))
+      default:
+        return value
+    }
+  }
+
+  function apply_shorthand(value, shorthand) {
+    const shorthand_options = {
+      thousands: { divider: 1e3, suffix: "K" },
+      millions: { divider: 1e6, suffix: "M" },
+      billions: { divider: 1e9, suffix: "B" },
+      trillions: { divider: 1e12, suffix: "T" },
+      quadrillions: { divider: 1e15, suffix: "Qd" },
+    }
+    const option = shorthand_options[shorthand]
+    if (!option || !Number.isFinite(Number(value))) return { value, suffix: "" }
+    return { value: (Number(value) / option.divider).toFixed(), suffix: option.suffix }
+  }
+
+  function format_separators(value, separators) {
+    const number = Number(value)
+    if (!Number.isFinite(number)) return value
+    if (separators === "thousands_commas_period") return number.toLocaleString("en-US")
+    if (separators === "thousands_periods_comma") return number.toLocaleString("de-DE")
+    return value
+  }
+
+  function interpolate_hue(start, end, progress) {
+    let delta = end - start
+    if (Math.abs(delta) > 12) delta += delta > 0 ? -24 : 24
+    return ((Math.round(start + delta * progress) % 24) + 24) % 24
+  }
+
+  function prepare(raw_value) {
+    const options = {
+      ...config,
+      val: raw_value,
+      round: set_closurable(config?.round, null),
+      round_by: set_closurable(config?.round_by, 1),
+      shorthand: set_closurable(config?.shorthand, null),
+      separators: set_closurable(config?.separators, null),
+    }
+    let value = set_closurable(raw_value, null)
+    const numeric_value = Number(value)
+    const has_numeric_value = value !== null && value !== "" && Number.isFinite(numeric_value)
+    if (options.round && has_numeric_value) {
+      value = round_value(numeric_value, options)
+    }
+
+    const shorthand = options.shorthand ? apply_shorthand(value, options.shorthand) : { value, suffix: "" }
+    let val_text = shorthand.value == null ? "" : String(shorthand.value)
+    if (options.separators) val_text = String(format_separators(val_text, options.separators))
+    const suffix = `${shorthand.suffix}${set_closurable(config?.is_percentage, false) ? "%" : ""}`
+
+    const base_color = set_closurable(config?.base_color, null)
+    let hue = Number.isFinite(Number(base_color?.h)) ? Number(base_color.h) : 10
+    let chroma = Number.isFinite(Number(base_color?.c)) ? Number(base_color.c) : 4
+    let percentage_fill = 0
+    const start_value = Number(set_closurable(config?.start_value, NaN))
+    const end_value = Number(set_closurable(config?.end_value, NaN))
+    const rendered_number = Number(value)
+    const has_range =
+      has_numeric_value &&
+      Number.isFinite(rendered_number) &&
+      Number.isFinite(start_value) &&
+      Number.isFinite(end_value) &&
+      end_value !== start_value
+
+    if (has_range) {
+      percentage_fill = Math.max(0, Math.min(((rendered_number - start_value) / (end_value - start_value)) * 100, 100))
+    }
+
+    if (set_closurable(config?.is_dynamic_color, false) && has_range) {
+      const start_color = set_closurable(config?.start_color, null)
+      const end_color = set_closurable(config?.end_color, null)
+      const start_h = Number(start_color?.h)
+      const end_h = Number(end_color?.h)
+      const start_c = Number(start_color?.c)
+      const end_c = Number(end_color?.c)
+      const progress = percentage_fill / 100
+      if ([start_h, end_h].every(Number.isFinite)) hue = interpolate_hue(start_h, end_h, progress)
+      if ([start_c, end_c].every(Number.isFinite)) {
+        chroma = Math.min(Math.max(Math.round(start_c + (end_c - start_c) * progress), 0), 24)
+      }
+    }
+
+    val = {
+      val: value,
+      val_text,
+      suffix,
+      font_weight: set_closurable(config?.font_weight, "400"),
+      font_color: `oklch(var(--l9-t) var(--c${chroma}) var(--h${hue}))`,
+      hue,
+      chroma,
+      percentage_fill,
+      start_value: Number.isFinite(start_value) ? start_value : null,
+      end_value: Number.isFinite(end_value) ? end_value : null,
+      is_progress_bar: set_closurable(config?.is_progress_bar, false),
+      is_hide_number: set_closurable(config?.is_hide_number, false),
+      is_tooltip: set_closurable(config?.is_tooltip, false),
+    }
+  }
+
+  function set_val(input) {
+    prepare(input)
+  }
+
+  prepare(config?.val)
+
+  return {
+    get val() {
+      return val
+    },
+    set_val,
+  }
+}

package/dist/Components/PhoneCountryCode/index.svelte

@@ -1,5 +1,7 @@
 <script>
-  import Dropdown from "../Dropdown/index.svelte.js"
+  import Dropdown from "../Dropdown/index.svelte"
+
+  let { manager } = $props()
 </script>
 
 <div style="min-width: 8rem;">

package/dist/Components/PhoneCountryCode/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/PhoneCountryCode/manager.svelte.d.ts

@@ -0,0 +1,5 @@
+export function create_country_code_manager(config: any): {
+    readonly val: any;
+    readonly dropdown_manager: null;
+    set_val: (input: any) => any;
+};

package/{src/lib/Components/PhoneCountryCode/index.svelte.js → dist/Components/PhoneCountryCode/manager.svelte.js}

@@ -1,4 +1,4 @@
-import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
 
 export function create_country_code_manager(config) {
   let dropdown_manager = $state(null)
@@ -232,7 +232,7 @@ export function create_country_code_manager(config) {
     dropdown_manager = create_dropdown_manager({
       button_type: "outlined",
       selected_font_size: 1.2,
-      val: 1,
+      val: config?.val ?? 1,
       options: countries,
       val_key: "phone_code",
       button_display_keys: ["emoji", "name", "phone_code"],
@@ -241,7 +241,7 @@ export function create_country_code_manager(config) {
       is_collapsed: true,
       on_item_click: (input) => {
         if (typeof config?.on_change == "function") {
-          config?.on_change(input?.key)
+          config.on_change(input?.phone_code ?? input?.key)
         }
       },
     })
@@ -256,5 +256,6 @@ export function create_country_code_manager(config) {
     get dropdown_manager() {
       return dropdown_manager
     },
+    set_val: (input) => dropdown_manager?.set_val(input),
   }
 }

package/dist/Components/PhoneNumber/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/PhoneNumber/manager.svelte.d.ts

@@ -0,0 +1,84 @@
+export function create_phone_number_manager(config: any): {
+    readonly phone_number_to_use: string | null;
+    readonly phone_href: string | null;
+    button_manager: {
+        id: string;
+        readonly type: any;
+        readonly ml: any;
+        readonly mr: any;
+        readonly mt: any;
+        readonly mb: any;
+        readonly pl: any;
+        readonly pr: any;
+        readonly pt: any;
+        readonly pb: any;
+        readonly border_radius: any;
+        readonly is_loading: any;
+        readonly is_pointer_down: boolean;
+        readonly is_prevent_default: any;
+        readonly is_stop_propagation: any;
+        readonly tabindex: any;
+        readonly is_disabled: any;
+        readonly is_action_disabled: any;
+        readonly is_native_disabled: any;
+        readonly selected_type: any;
+        readonly is_hovered: boolean;
+        readonly min_height: any;
+        readonly fixed_width: any;
+        readonly min_width: any;
+        readonly is_compressed: any;
+        readonly is_pill: any;
+        readonly is_uniform: any;
+        readonly cursor: any;
+        readonly text_align: any;
+        readonly text: any;
+        readonly is_success_animation: any;
+        readonly font_size: any;
+        readonly line_height: any;
+        readonly font_weight: any;
+        readonly color: any;
+        readonly gradient_to_color: any;
+        readonly gradient_turn: any;
+        readonly contrast_color: any;
+        readonly border_color: any;
+        readonly hover_shadow_color: any;
+        readonly hover_shadow_size: any;
+        readonly support_icon: any;
+        readonly is_icon_bg_tint: any;
+        readonly icon_deg: any;
+        readonly icon_sw: any;
+        readonly icon_size: any;
+        readonly icon_ml: any;
+        readonly icon_mr: any;
+        readonly icon_pos: any;
+        readonly is_icon_shimmyable: any;
+        readonly icon_movement_stiffness: any;
+        readonly icon_movement_damping: any;
+        readonly aria_label: any;
+        readonly popover_target: any;
+        readonly href: string | null;
+        readonly target: any;
+        readonly rel: any;
+        readonly download: any;
+        readonly html_type: any;
+        readonly is_link: boolean;
+        readonly element_tag: string;
+        readonly is_no_wrap: any;
+        readonly is_word_break_all: any;
+        readonly is_simulated_active: any;
+        readonly is_success: boolean;
+        readonly is_error: boolean;
+        readonly icon_manager: null;
+        success_trigger: () => void;
+        error_trigger: () => void;
+        icon_shimmy_trigger: () => void;
+        handle_click: (e: any) => Promise<any>;
+        pointer_down: () => void;
+        pointer_up: () => void;
+        pointer_enter: () => void;
+        pointer_leave: () => void;
+        simulate_click: () => void;
+        focus: () => void;
+    };
+    call_number: () => void;
+};