sveltekit-ui 1.1.14 → 1.1.16

package/dist/Components/Link/index.svelte.js

@@ -1,136 +0,0 @@
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_qr_manager } from "../Qr/index.svelte.js"
-import { copy_to_clipboard, create_unique_id, set_closurable, set_closurable_color } from "../../client/index.js"
-import { goto } from "$app/navigation"
-// import { page } from "$app/state"
-
-export function create_link_manager(config) {
-  const id = config?.id ?? create_unique_id(null, 20)
-  let popover_manager = $state(null)
-  let copy_link_button_manager = $state(null)
-  let goto_link_button_manager = $state(null)
-  let goto_link_same_tab_button_manager = $state(null)
-  let inline_goto_link_button_manager = $state(null)
-  let qr_manager = $state(null)
-
-  let href = $derived(set_closurable(config?.href, null))
-  let display_text = $derived(set_closurable(config?.display_text, null))
-  let text_color = $derived(set_closurable_color(config?.text_color, null))
-  let is_internal_link = $derived(href && href.startsWith("/"))
-  // let is_internal_link = $derived(new URL(href, page?.url?.origin)?.origin === page?.url?.origin)
-  let is_show_preview = $derived(set_closurable(config?.is_show_preview, !is_internal_link))
-
-  function handle_a_click(e) {
-    console.log("handle_a_click", e)
-    e.preventDefault()
-    if (is_internal_link) {
-      goto(href)
-    } else if (is_show_preview) {
-      popover_manager.open()
-    } else {
-      open_link()
-    }
-  }
-
-  function open_link(is_open_same_tab = false) {
-    if (is_internal_link) {
-      goto(href)
-    } else {
-      if (typeof config?.on_goto_external_link == "function") {
-        config?.on_goto_external_link(href)
-      }
-      if (is_open_same_tab) {
-        window.location.href = href
-      } else {
-        window.open(href, "_blank", "noopener,noreferrer")
-      }
-    }
-  }
-
-  function init(config) {
-    popover_manager = create_popover_manager({
-      type: "dropdown",
-      header: "Link Preview",
-      target_width: 400,
-      target_height: 460,
-      anchor_id: () => `link_${id}`,
-    })
-    copy_link_button_manager = create_button_manager({
-      type: "outlined",
-      text: "Copy Link",
-      is_success_animation: true,
-      support_icon: "clipboard",
-      text_align: "left",
-      on_click: () => copy_to_clipboard(href),
-    })
-    goto_link_button_manager = create_button_manager({
-      support_icon: "link",
-      text: "Open Link In New Tab",
-      text_align: "left",
-      on_click: () => open_link(),
-    })
-    goto_link_same_tab_button_manager = create_button_manager({
-      support_icon: "link_internal",
-      text: "Open Link In Same Tab",
-      text_align: "left",
-      on_click: () => open_link(true),
-    })
-    inline_goto_link_button_manager = create_button_manager({
-      type: "soft",
-      min_height: 2,
-      ml: 0.5,
-      border_radius: 0.5,
-      pt: 0,
-      is_uniform: true,
-      support_icon: () => (is_internal_link ? "link_internnal" : "link"),
-      on_click: () => open_link(),
-    })
-    qr_manager = create_qr_manager({
-      data: href,
-    })
-  }
-  init(config)
-
-  return {
-    id,
-    get popover_manager() {
-      return popover_manager
-    },
-    get is_internal_link() {
-      return is_internal_link
-    },
-    get is_show_preview() {
-      return is_show_preview
-    },
-    get href() {
-      return href
-    },
-    get copy_link_button_manager() {
-      return copy_link_button_manager
-    },
-    get goto_link_button_manager() {
-      return goto_link_button_manager
-    },
-    get goto_link_same_tab_button_manager() {
-      return goto_link_same_tab_button_manager
-    },
-    get inline_goto_link_button_manager() {
-      return inline_goto_link_button_manager
-    },
-    get href() {
-      return href
-    },
-    get display_text() {
-      return display_text
-    },
-    get text_color() {
-      return text_color
-    },
-    get qr_manager() {
-      return qr_manager
-    },
-    handle_a_click,
-    open_link,
-  }
-}

package/dist/Components/LoadingSuccessDiv/index.svelte

@@ -1,51 +0,0 @@
-<script>
-  import LoadingWheel from "../LoadingWheel/index.svelte"
-  import SuccessCheck from "../SuccessCheck/index.svelte"
-  import ErrorX from "../ErrorX/index.svelte"
-
-  let { message, show_screen = "loading", size = 8, ml = 1, mr = 1, mt = 1, mb = 1, flex = 1 } = $props()
-</script>
-
-<div
-  class="success_container"
-  style="margin-left: {ml}rem; margin-right: {mr}rem; margin-top: {mt}rem; margin-bottom: {mb}rem; 
-  flex: {flex};"
->
-  <div class="check_container">
-    <div class="icon_frame" style="--size: {size}rem;">
-      {#if show_screen === "loading"}
-        <LoadingWheel />
-      {:else if show_screen === "success"}
-        <SuccessCheck color="var(--success-t)" />
-      {:else if show_screen === "error"}
-        <ErrorX />
-      {/if}
-    </div>
-  </div>
-  {#if message}
-    <h3 class="message">{message}</h3>
-  {/if}
-</div>
-
-<style>
-  .success_container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    text-align: center;
-  }
-  .check_container {
-    display: flex;
-    justify-content: center;
-  }
-  .icon_frame {
-    width: var(--size);
-    height: var(--size);
-  }
-  .message {
-    color: var(--g4-t);
-    margin-top: 2rem;
-    font-weight: 500;
-    font-size: 2rem;
-  }
-</style>

package/dist/Components/Location/index.svelte

@@ -1,79 +0,0 @@
-<script>
-  import Popover from "../Popover/index.svelte"
-  import Button from "../Button/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}
-  </div>
-{/snippet}
-
-{#if manager?.is_popover}
-  {#if manager?.is_inline}
-    <div style="display: flex; gap: .5rem;">
-      <p>{manager?.val?.name}</p>
-      <Button manager={manager?.toggle_popover_manager} />
-    </div>
-  {/if}
-  <Popover manager={manager?.popover_manager}>
-    {#snippet content()}
-      {@render location_content()}
-    {/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;
-  }
-</style>

package/dist/Components/Location/index.svelte.js

@@ -1,288 +0,0 @@
-import { create_unique_id, set_closurable } from "../../client/index.js"
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { browser } from "$app/environment"
-
-export function create_location_manager(config) {
-  const id = create_unique_id(null, 20)
-
-  let popover_manager = $state(null)
-  let toggle_popover_manager = $state(null)
-
-  let height = $derived(
-    set_closurable(config?.height, null) ? `${set_closurable(config?.height, null)}rem` : "min(40rem, 50vh)"
-  )
-  let width = $derived(
-    set_closurable(config?.width, null) ? `${set_closurable(config?.width, null)}rem` : "clamp(60rem, 80vw, 100%)"
-  )
-  let is_popover = $derived(set_closurable(config?.is_popover, false))
-  let mapkit_js_token = $derived(set_closurable(config?.mapkit_js_token, null))
-  let is_dark_color_scheme = $derived(set_closurable(config?.is_dark_color_scheme, true))
-  let is_inline = $derived(set_closurable(config?.is_inline ?? config?.is_popover, true))
-
-  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
-  }
-
-  async function initialize_map() {
-    if (!browser) {
-      console.log("browser is not defined")
-      return
-    }
-    await load_mapkit_script()
-    if (!window.mapkit) {
-      console.log("mapkit is not defined")
-      return
-    }
-    const map_div = document?.querySelector(`#map_${id}`)
-    if (!map_div) {
-      console.log("map div not found")
-      return
-    }
-    const { center_lat, center_lng, lat_span, lng_span } = get_map_region(val)
-    const center = new mapkit.Coordinate(center_lat, center_lng)
-    const span = new mapkit.CoordinateSpan(lat_span, lng_span)
-    const initial_region = new mapkit.CoordinateRegion(center, span)
-    if (!map) {
-      map = new mapkit.Map(`map_${id}`)
-    }
-    map.annotations = []
-    map.region = initial_region
-    map.colorScheme = is_dark_color_scheme ? "dark" : "light"
-    add_map_vals(val)
-  }
-
-  function get_map_region(val) {
-    let center_lat, center_lng, lat_span, lng_span
-    if (Array.isArray(val) && val.length > 0) {
-      const lats = val.map((item) => item?.latitude).filter((latitude) => latitude != null)
-      const lngs = val.map((item) => item?.longitude).filter((longitude) => longitude != null)
-      if (lats.length && lngs.length) {
-        const min_lat = Math.min(...lats)
-        const max_lat = Math.max(...lats)
-        const min_lng = Math.min(...lngs)
-        const max_lng = Math.max(...lngs)
-        center_lat = (min_lat + max_lat) / 2
-        center_lng = (min_lng + max_lng) / 2
-        lat_span = (max_lat - min_lat) * 1.2 || 0.1
-        lng_span = (max_lng - min_lng) * 1.2 || 0.1
-      } else {
-        center_lat = 37.3316850890998
-        center_lng = -122.030067374026
-        lat_span = 0.1
-        lng_span = 0.1
-      }
-    } else {
-      center_lat = val?.latitude ?? 37.3316850890998
-      center_lng = val?.longitude ?? -122.030067374026
-      lat_span = 0.1
-      lng_span = 0.1
-    }
-    return { center_lat, center_lng, lat_span, lng_span }
-  }
-
-  function add_map_val(val_item, is_selected = false) {
-    if (val_item?.type === "route") {
-      if (val_item.from && val_item.to) {
-        if (val_item?.method == "path") {
-          add_custom_route(map, val_item)
-        } else {
-          add_detailed_route(map, {
-            from: new mapkit.Coordinate(val_item.from.latitude, val_item.from.longitude),
-            to: new mapkit.Coordinate(val_item.to.latitude, val_item.to.longitude),
-            stroke_color: val_item.stroke_color || "#000",
-            line_width: val_item.line_width || 3,
-          })
-        }
-      }
-    } else if (val_item?.place_id) {
-      const lookup = new mapkit.PlaceLookup()
-      lookup.getPlace(val_item.place_id, (error, place) => {
-        if (error) {
-          console.error("place lookup error:", error)
-          return
-        }
-        const options = { title: val_item.name || place.formattedAddress }
-        const marker = new mapkit.PlaceAnnotation(place, options)
-        map.addAnnotation(marker)
-        marker.selectionAccessory = new mapkit.PlaceSelectionAccessory()
-        if (is_selected) {
-          marker.selected = true
-        }
-      })
-    } else if (val_item?.name && val_item?.latitude && val_item?.longitude) {
-      const coord = new mapkit.Coordinate(val_item.latitude, val_item.longitude)
-      const marker = new mapkit.MarkerAnnotation(coord, { title: val_item.name })
-      map.addAnnotation(marker)
-    }
-  }
-
-  function add_map_vals(map_val) {
-    if (Array.isArray(map_val) && map_val.length > 0) {
-      map_val.forEach((item) => add_map_val(item, false))
-    } else if (map_val) {
-      add_map_val(map_val, true)
-    }
-  }
-
-  function add_detailed_route(map, leg) {
-    const directions = new mapkit.Directions()
-    const request = {
-      origin: leg.from,
-      destination: leg.to,
-      transportType: mapkit.Directions.Transport.Automobile,
-    }
-    directions.route(request, (error, response) => {
-      if (error) {
-        console.error("directions error for leg", leg, error)
-        return
-      }
-      const route = response.routes[0]
-      if (route.polyline) {
-        route.polyline.style = new mapkit.Style({
-          strokeColor: leg.stroke_color || "#0000ff",
-          lineWidth: leg.line_width || 3,
-        })
-        map.addOverlay(route.polyline)
-      } else {
-        console.warn("no polyline found for route", route)
-      }
-    })
-  }
-
-  function add_custom_route(map, leg) {
-    const coords = []
-    if (leg.from && typeof leg.from === "object" && leg.from.latitude != null && leg.from.longitude != null) {
-      coords.push(new mapkit.Coordinate(leg.from.latitude, leg.from.longitude))
-    } else {
-      console.warn("invalid 'from' coordinate", leg.from)
-    }
-    if (Array.isArray(leg.way_points)) {
-      leg.way_points.forEach((wp) => {
-        if (wp && typeof wp === "object" && wp.latitude != null && wp.longitude != null) {
-          coords.push(new mapkit.Coordinate(wp.latitude, wp.longitude))
-        } else {
-          console.warn("invalid waypoint object: missing coordinates", wp)
-        }
-      })
-    }
-    if (leg.to && typeof leg.to === "object" && leg.to.latitude != null && leg.to.longitude != null) {
-      coords.push(new mapkit.Coordinate(leg.to.latitude, leg.to.longitude))
-    } else {
-      console.warn("invalid 'to' coordinate", leg.to)
-    }
-    const overlay_style = new mapkit.Style({
-      strokeColor: leg.stroke_color || "oklch(70% 0.3 210)",
-      lineWidth: leg.line_width || 3,
-    })
-    const polyline = new mapkit.PolylineOverlay(coords, { style: overlay_style })
-    map.addOverlay(polyline)
-  }
-
-  function set_val(input) {
-    val = input
-    if (map) {
-      initialize_map()
-    }
-  }
-
-  function init(config) {
-    val = config?.val
-    popover_manager = create_popover_manager({
-      type: "center",
-      target_height: config?.height ?? 440,
-      target_width: config?.width ?? 600,
-      on_open: () => {
-        if (!map) {
-          setTimeout(() => {
-            initialize_map()
-          }, 20)
-        }
-      },
-    })
-    toggle_popover_manager = create_button_manager({
-      type: "soft",
-      support_icon: "pinpoint",
-      is_uniform: true,
-      min_height: 2.2,
-      icon_size: 1.4,
-      icon_sw: 40,
-      border_radius: 0.5,
-      popover_target: () => `popover_${popover_manager?.id}`,
-    })
-    if (!is_popover) {
-      initialize_map()
-    }
-  }
-
-  init(config)
-
-  return {
-    id,
-    get val() {
-      return val
-    },
-    get map() {
-      return map
-    },
-    get is_popover() {
-      return is_popover
-    },
-    get is_inline() {
-      return is_inline
-    },
-    get popover_manager() {
-      return popover_manager
-    },
-    get toggle_popover_manager() {
-      return toggle_popover_manager
-    },
-    get height() {
-      return height
-    },
-    get width() {
-      return width
-    },
-    get mapkit_js_token() {
-      return mapkit_js_token
-    },
-    initialize_map,
-    set_val,
-  }
-}

package/dist/Components/PhoneNumber/index.svelte

@@ -1,22 +0,0 @@
-<script>
-  import Button from "../Button/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<div class="container">
-  {#if manager?.phone_number_to_use}
-    <p>{manager?.phone_number_to_use}</p>
-    <Button manager={manager?.button_manager} />
-  {:else}
-    <p>-</p>
-  {/if}
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex: 0;
-    gap: 0.5rem;
-  }
-</style>

package/dist/Components/PhoneNumber/index.svelte.js

@@ -1,41 +0,0 @@
-import { create_button_manager } from "../Button/index.svelte.js"
-import { set_closurable } from "../../client/index.js"
-
-export function create_phone_number_manager(config) {
-  let val = $derived(set_closurable(config?.val, null))
-  let main_number = $derived(set_closurable(config?.main_number, null))
-  let country_code = $derived(set_closurable(config?.country_code, null))
-
-  let phone_number_to_use = $derived(
-    val
-      ? typeof val == "object"
-        ? `${val?.country_code}${val?.main_number}`
-        : val
-      : country_code || main_number
-      ? `${country_code}${main_number}`
-      : null
-  )
-
-  let button_manager = $state(
-    create_button_manager({
-      type: "soft",
-      pl: 0.2,
-      pr: 0.2,
-      support_icon: "link",
-      icon_size: 1.5,
-      on_click: () => call_number(),
-    })
-  )
-
-  function call_number() {
-    Object.assign(document.createElement("a"), {
-      href: "tel:" + phone_number_to_use,
-    }).click()
-  }
-  return {
-    get phone_number_to_use() {
-      return phone_number_to_use
-    },
-    button_manager,
-  }
-}

package/dist/Components/Qr/index.svelte

@@ -1,85 +0,0 @@
-<script>
-  import Button from "../Button/index.svelte"
-  import TextInput from "../TextInput/index.svelte"
-  import Dropdown from "../Dropdown/index.svelte"
-  import LoadingWheel from "../LoadingWheel/index.svelte"
-  import InfoBox from "../InfoBox/index.svelte"
-  import { onMount } from "svelte"
-
-  let { manager } = $props()
-
-  onMount(() => {
-    if (typeof manager?.on_mount == "function") {
-      manager?.on_mount()
-    }
-  })
-</script>
-
-<div style="display: flex; flex-direction: column; gap: .5rem;">
-  <div
-    class="qr_wrap"
-    style="--base: {manager?.size}px; --scale: {manager?.scale}; --target: calc(var(--base) * var(--scale));"
-  >
-    <div class="qr_fit">
-      <div
-        class="qr_container"
-        style="
-        width: var(--base);
-        height: var(--base);
-        background-color: {manager?.background_color};
-        border-radius: {manager?.border_radius}rem;
-        box-shadow: 0 0 0 {manager?.border_width}px {manager?.border_color};
-      "
-      >
-        <div style="grid-area: stack;" id={`qr_${manager?.id}`}></div>
-        {#if !manager?.is_loaded}
-          <div class="load"><LoadingWheel color={"var(--g14-t)"} sw={0.4} /></div>
-        {/if}
-      </div>
-    </div>
-  </div>
-  {#if manager?.is_show_copy}
-    <div style="display: flex; flex-wrap: wrap; gap: .5rem; max-width: 30rem;">
-      <span
-        style="margin: 0; padding: 0 1rem; display: grid; place-content: center; border-radius: 1rem; border: 1px solid var(--shadow4-t);"
-        >{manager?.data}</span
-      >
-      <Button manager={manager?.copy_button_manager} />
-    </div>
-  {/if}
-  {#if manager?.is_show_download}
-    <div style="display: flex; flex-wrap: wrap; gap: .5rem; max-width: 30rem;">
-      <Dropdown manager={manager?.extention_dropdown_manager} />
-      <Button manager={manager?.download_button_manager} />
-    </div>
-  {/if}
-  <InfoBox message={manager?.error_message} />
-</div>
-
-<style>
-  .qr_container {
-    aspect-ratio: 1;
-    overflow: hidden;
-    display: grid;
-    grid-template-areas: "stack";
-  }
-  .qr_wrap {
-    width: var(--target);
-    height: var(--target);
-    position: relative;
-  }
-  .qr_fit {
-    position: absolute;
-    inset: 0;
-    width: var(--base);
-    height: var(--base);
-    transform: scale(var(--scale));
-    transform-origin: top left;
-  }
-  .load {
-    grid-area: stack;
-    width: 50%;
-    height: 50%;
-    margin: auto;
-  }
-</style>