sveltekit-ui 1.1.17 → 1.1.19

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

@@ -0,0 +1,965 @@
+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 { browser } from "$app/environment"
+
+export function create_location_input_manager(config) {
+  const id = create_unique_id(null, 20)
+
+  const poi_categories = [
+    { key: "Airport", name: "Airport" },
+    { key: "AirportGate", name: "Airport Gate" },
+    { key: "AirportTerminal", name: "Airport Terminal" },
+    { key: "AmusementPark", name: "Amusement Park" },
+    { key: "ATM", name: "ATM" },
+    { key: "Aquarium", name: "Aquarium" },
+    { key: "Bakery", name: "Bakery" },
+    { key: "Bank", name: "Bank" },
+    { key: "Beach", name: "Beach" },
+    { key: "Brewery", name: "Brewery" },
+    { key: "Cafe", name: "Cafe" },
+    { key: "Campground", name: "Campground" },
+    { key: "CarRental", name: "Car Rental" },
+    { key: "EVCharger", name: "EV Charger" },
+    { key: "FireStation", name: "Fire Station" },
+    { key: "FitnessCenter", name: "Fitness Center" },
+    { key: "FoodMarket", name: "Food Market" },
+    { key: "GasStation", name: "Gas Station" },
+    { key: "Hospital", name: "Hospital" },
+    { key: "Hotel", name: "Hotel" },
+    { key: "Laundry", name: "Laundry" },
+    { key: "Library", name: "Library" },
+    { key: "Marina", name: "Marina" },
+    { key: "MovieTheater", name: "Movie Theater" },
+    { key: "Museum", name: "Museum" },
+    { key: "NationalPark", name: "National Park" },
+    { key: "Nightlife", name: "Nightlife" },
+    { key: "Park", name: "Park" },
+    { key: "Parking", name: "Parking" },
+    { key: "Pharmacy", name: "Pharmacy" },
+    { key: "Playground", name: "Playground" },
+    { key: "Police", name: "Police Station" },
+    { key: "PostOffice", name: "Post Office" },
+    { key: "PublicTransport", name: "Public Transport" },
+    { key: "ReligiousSite", name: "Religious Site" },
+    { key: "Restaurant", name: "Restaurant" },
+    { key: "Restroom", name: "Restroom" },
+    { key: "School", name: "School" },
+    { key: "Stadium", name: "Stadium" },
+    { key: "Store", name: "Store" },
+    { key: "Theater", name: "Theater" },
+    { key: "University", name: "University" },
+    { key: "Winery", name: "Winery" },
+    { key: "Zoo", name: "Zoo" },
+    { key: "AnimalService", name: "Animal Service" },
+    { key: "AutomotiveRepair", name: "Automotive Repair" },
+    { key: "Baseball", name: "Baseball" },
+    { key: "Basketball", name: "Basketball" },
+    { key: "Beauty", name: "Beauty" },
+    { key: "Bowling", name: "Bowling" },
+    { key: "Castle", name: "Castle" },
+    { key: "ConventionCenter", name: "Convention Center" },
+    { key: "Distillery", name: "Distillery" },
+    { key: "Fairground", name: "Fairground" },
+    { key: "Fishing", name: "Fishing" },
+    { key: "Fortress", name: "Fortress" },
+    { key: "GoKart", name: "Go Kart" },
+    { key: "Golf", name: "Golf" },
+    { key: "Hiking", name: "Hiking" },
+    { key: "Kayaking", name: "Kayaking" },
+    { key: "Landmark", name: "Landmark" },
+    { key: "Mailbox", name: "Mailbox" },
+    { key: "MiniGolf", name: "Mini Golf" },
+    { key: "MusicVenue", name: "Music Venue" },
+    { key: "NationalMonument", name: "National Monument" },
+    { key: "Planetarium", name: "Planetarium" },
+    { key: "RockClimbing", name: "Rock Climbing" },
+    { key: "RVPark", name: "RV Park" },
+    { key: "SkatePark", name: "Skate Park" },
+    { key: "Skating", name: "Skating" },
+    { key: "Skiing", name: "Skiing" },
+    { key: "Soccer", name: "Soccer" },
+    { key: "Spa", name: "Spa" },
+    { key: "Surfing", name: "Surfing" },
+    { key: "Swimming", name: "Swimming" },
+    { key: "Tennis", name: "Tennis" },
+    { key: "Volleyball", name: "Volleyball" },
+  ]
+
+  const search_ac_result_types = [
+    // {
+    //   key: "poi",
+    //   name: "POI",
+    //   description: "A point of interest.",
+    // },
+    {
+      key: "address",
+      name: "Address",
+      description: "An address such as a street address, suburb, city, state, or country.",
+    },
+    {
+      key: "physicalFeature",
+      name: "Physical Feature",
+      description: "A natural physical feature, such as a river, mountain, or delta.",
+    },
+    {
+      key: "pointOfInterest",
+      name: "Point of Interest",
+      description: "A point of interest.",
+    },
+    {
+      key: "query",
+      name: "Query",
+      description: "A search query string.",
+    },
+  ]
+
+  const address_categories = [
+    {
+      key: "Country",
+      name: "Country",
+      description: "Countries and regions.",
+    },
+    {
+      key: "AdministrativeArea",
+      name: "Administrative Area",
+      description: "The primary administrative divisions of countries or regions.",
+    },
+    {
+      key: "SubAdministrativeArea",
+      name: "Sub-Administrative Area",
+      description: "The secondary administrative divisions of countries or regions.",
+    },
+    {
+      key: "Locality",
+      name: "Locality",
+      description: "Local administrative divisions, postal cities and populated places.",
+    },
+    {
+      key: "SubLocality",
+      name: "Sub-Locality",
+      description: "Local administrative sub-divisions, postal city sub-districts, and neighborhoods.",
+    },
+    {
+      key: "PostalCode",
+      name: "Postal Code",
+      description: "A code assigned to addresses for mail sorting and delivery.",
+    },
+  ]
+
+  const countries = [
+    { key: "AF", name: "Afghanistan" },
+    { key: "AX", name: "Åland Islands" },
+    { key: "AL", name: "Albania" },
+    { key: "DZ", name: "Algeria" },
+    { key: "AS", name: "American Samoa" },
+    { key: "AD", name: "Andorra" },
+    { key: "AO", name: "Angola" },
+    { key: "AI", name: "Anguilla" },
+    { key: "AQ", name: "Antarctica" },
+    { key: "AG", name: "Antigua and Barbuda" },
+    { key: "AR", name: "Argentina" },
+    { key: "AM", name: "Armenia" },
+    { key: "AW", name: "Aruba" },
+    { key: "AU", name: "Australia" },
+    { key: "AT", name: "Austria" },
+    { key: "AZ", name: "Azerbaijan" },
+    { key: "BS", name: "Bahamas" },
+    { key: "BH", name: "Bahrain" },
+    { key: "BD", name: "Bangladesh" },
+    { key: "BB", name: "Barbados" },
+    { key: "BY", name: "Belarus" },
+    { key: "BE", name: "Belgium" },
+    { key: "BZ", name: "Belize" },
+    { key: "BJ", name: "Benin" },
+    { key: "BM", name: "Bermuda" },
+    { key: "BT", name: "Bhutan" },
+    { key: "BO", name: "Bolivia (Plurinational State of)" },
+    { key: "BQ", name: "Bonaire, Sint Eustatius and Saba" },
+    { key: "BA", name: "Bosnia and Herzegovina" },
+    { key: "BW", name: "Botswana" },
+    { key: "BV", name: "Bouvet Island" },
+    { key: "BR", name: "Brazil" },
+    { key: "IO", name: "British Indian Ocean Territory" },
+    { key: "BN", name: "Brunei Darussalam" },
+    { key: "BG", name: "Bulgaria" },
+    { key: "BF", name: "Burkina Faso" },
+    { key: "BI", name: "Burundi" },
+    { key: "CV", name: "Cabo Verde" },
+    { key: "KH", name: "Cambodia" },
+    { key: "CM", name: "Cameroon" },
+    { key: "CA", name: "Canada" },
+    { key: "KY", name: "Cayman Islands" },
+    { key: "CF", name: "Central African Republic" },
+    { key: "TD", name: "Chad" },
+    { key: "CL", name: "Chile" },
+    { key: "CN", name: "China" },
+    { key: "CX", name: "Christmas Island" },
+    { key: "CC", name: "Cocos (Keeling) Islands" },
+    { key: "CO", name: "Colombia" },
+    { key: "KM", name: "Comoros" },
+    { key: "CG", name: "Congo" },
+    { key: "CD", name: "Congo (Democratic Republic of the)" },
+    { key: "CK", name: "Cook Islands" },
+    { key: "CR", name: "Costa Rica" },
+    { key: "HR", name: "Croatia" },
+    { key: "CU", name: "Cuba" },
+    { key: "CW", name: "Curaçao" },
+    { key: "CY", name: "Cyprus" },
+    { key: "CZ", name: "Czechia" },
+    { key: "CI", name: "Côte d'Ivoire" },
+    { key: "DK", name: "Denmark" },
+    { key: "DJ", name: "Djibouti" },
+    { key: "DM", name: "Dominica" },
+    { key: "DO", name: "Dominican Republic" },
+    { key: "EC", name: "Ecuador" },
+    { key: "EG", name: "Egypt" },
+    { key: "SV", name: "El Salvador" },
+    { key: "GQ", name: "Equatorial Guinea" },
+    { key: "ER", name: "Eritrea" },
+    { key: "EE", name: "Estonia" },
+    { key: "SZ", name: "Eswatini" },
+    { key: "ET", name: "Ethiopia" },
+    { key: "FK", name: "Falkland Islands (Malvinas)" },
+    { key: "FO", name: "Faroe Islands" },
+    { key: "FJ", name: "Fiji" },
+    { key: "FI", name: "Finland" },
+    { key: "FR", name: "France" },
+    { key: "GF", name: "French Guiana" },
+    { key: "PF", name: "French Polynesia" },
+    { key: "TF", name: "French Southern Territories" },
+    { key: "GA", name: "Gabon" },
+    { key: "GM", name: "Gambia" },
+    { key: "GE", name: "Georgia" },
+    { key: "DE", name: "Germany" },
+    { key: "GH", name: "Ghana" },
+    { key: "GI", name: "Gibraltar" },
+    { key: "GR", name: "Greece" },
+    { key: "GL", name: "Greenland" },
+    { key: "GD", name: "Grenada" },
+    { key: "GP", name: "Guadeloupe" },
+    { key: "GU", name: "Guam" },
+    { key: "GT", name: "Guatemala" },
+    { key: "GG", name: "Guernsey" },
+    { key: "GN", name: "Guinea" },
+    { key: "GW", name: "Guinea-Bissau" },
+    { key: "GY", name: "Guyana" },
+    { key: "HT", name: "Haiti" },
+    { key: "HM", name: "Heard Island and McDonald Islands" },
+    { key: "VA", name: "Holy See" },
+    { key: "HN", name: "Honduras" },
+    { key: "HK", name: "Hong Kong" },
+    { key: "HU", name: "Hungary" },
+    { key: "IS", name: "Iceland" },
+    { key: "IN", name: "India" },
+    { key: "ID", name: "Indonesia" },
+    { key: "IR", name: "Iran (Islamic Republic of)" },
+    { key: "IQ", name: "Iraq" },
+    { key: "IE", name: "Ireland" },
+    { key: "IM", name: "Isle of Man" },
+    { key: "IL", name: "Israel" },
+    { key: "IT", name: "Italy" },
+    { key: "JM", name: "Jamaica" },
+    { key: "JP", name: "Japan" },
+    { key: "JE", name: "Jersey" },
+    { key: "JO", name: "Jordan" },
+    { key: "KZ", name: "Kazakhstan" },
+    { key: "KE", name: "Kenya" },
+    { key: "KI", name: "Kiribati" },
+    { key: "KP", name: "Korea (Democratic People's Republic of)" },
+    { key: "KR", name: "Korea (Republic of)" },
+    { key: "KW", name: "Kuwait" },
+    { key: "KG", name: "Kyrgyzstan" },
+    { key: "LA", name: "Lao People's Democratic Republic" },
+    { key: "LV", name: "Latvia" },
+    { key: "LB", name: "Lebanon" },
+    { key: "LS", name: "Lesotho" },
+    { key: "LR", name: "Liberia" },
+    { key: "LY", name: "Libya" },
+    { key: "LI", name: "Liechtenstein" },
+    { key: "LT", name: "Lithuania" },
+    { key: "LU", name: "Luxembourg" },
+    { key: "MO", name: "Macao" },
+    { key: "MG", name: "Madagascar" },
+    { key: "MW", name: "Malawi" },
+    { key: "MY", name: "Malaysia" },
+    { key: "MV", name: "Maldives" },
+    { key: "ML", name: "Mali" },
+    { key: "MT", name: "Malta" },
+    { key: "MH", name: "Marshall Islands" },
+    { key: "MQ", name: "Martinique" },
+    { key: "MR", name: "Mauritania" },
+    { key: "MU", name: "Mauritius" },
+    { key: "YT", name: "Mayotte" },
+    { key: "MX", name: "Mexico" },
+    { key: "FM", name: "Micronesia (Federated States of)" },
+    { key: "MD", name: "Moldova (Republic of)" },
+    { key: "MC", name: "Monaco" },
+    { key: "MN", name: "Mongolia" },
+    { key: "ME", name: "Montenegro" },
+    { key: "MS", name: "Montserrat" },
+    { key: "MA", name: "Morocco" },
+    { key: "MZ", name: "Mozambique" },
+    { key: "MM", name: "Myanmar" },
+    { key: "NA", name: "Namibia" },
+    { key: "NR", name: "Nauru" },
+    { key: "NP", name: "Nepal" },
+    { key: "NL", name: "Netherlands" },
+    { key: "NC", name: "New Caledonia" },
+    { key: "NZ", name: "New Zealand" },
+    { key: "NI", name: "Nicaragua" },
+    { key: "NE", name: "Niger" },
+    { key: "NG", name: "Nigeria" },
+    { key: "NU", name: "Niue" },
+    { key: "NF", name: "Norfolk Island" },
+    { key: "MK", name: "North Macedonia" },
+    { key: "MP", name: "Northern Mariana Islands" },
+    { key: "NO", name: "Norway" },
+    { key: "OM", name: "Oman" },
+    { key: "PK", name: "Pakistan" },
+    { key: "PW", name: "Palau" },
+    { key: "PS", name: "Palestine, State of" },
+    { key: "PA", name: "Panama" },
+    { key: "PG", name: "Papua New Guinea" },
+    { key: "PY", name: "Paraguay" },
+    { key: "PE", name: "Peru" },
+    { key: "PH", name: "Philippines" },
+    { key: "PN", name: "Pitcairn" },
+    { key: "PL", name: "Poland" },
+    { key: "PT", name: "Portugal" },
+    { key: "PR", name: "Puerto Rico" },
+    { key: "QA", name: "Qatar" },
+    { key: "RE", name: "Réunion" },
+    { key: "RO", name: "Romania" },
+    { key: "RU", name: "Russian Federation" },
+    { key: "RW", name: "Rwanda" },
+    { key: "BL", name: "Saint Barthélemy" },
+    { key: "SH", name: "Saint Helena, Ascension and Tristan da Cunha" },
+    { key: "KN", name: "Saint Kitts and Nevis" },
+    { key: "LC", name: "Saint Lucia" },
+    { key: "MF", name: "Saint Martin (French part)" },
+    { key: "PM", name: "Saint Pierre and Miquelon" },
+    { key: "VC", name: "Saint Vincent and the Grenadines" },
+    { key: "WS", name: "Samoa" },
+    { key: "SM", name: "San Marino" },
+    { key: "ST", name: "Sao Tome and Principe" },
+    { key: "SA", name: "Saudi Arabia" },
+    { key: "SN", name: "Senegal" },
+    { key: "RS", name: "Serbia" },
+    { key: "SC", name: "Seychelles" },
+    { key: "SL", name: "Sierra Leone" },
+    { key: "SG", name: "Singapore" },
+    { key: "SX", name: "Sint Maarten (Dutch part)" },
+    { key: "SK", name: "Slovakia" },
+    { key: "SI", name: "Slovenia" },
+    { key: "SB", name: "Solomon Islands" },
+    { key: "SO", name: "Somalia" },
+    { key: "ZA", name: "South Africa" },
+    { key: "GS", name: "South Georgia and the South Sandwich Islands" },
+    { key: "SS", name: "South Sudan" },
+    { key: "ES", name: "Spain" },
+    { key: "LK", name: "Sri Lanka" },
+    { key: "SD", name: "Sudan" },
+    { key: "SR", name: "Suriname" },
+    { key: "SJ", name: "Svalbard and Jan Mayen" },
+    { key: "SE", name: "Sweden" },
+    { key: "CH", name: "Switzerland" },
+    { key: "SY", name: "Syrian Arab Republic" },
+    { key: "TW", name: "Taiwan" },
+    { key: "TJ", name: "Tajikistan" },
+    { key: "TZ", name: "Tanzania, United Republic of" },
+    { key: "TH", name: "Thailand" },
+    { key: "TL", name: "Timor-Leste" },
+    { key: "TG", name: "Togo" },
+    { key: "TK", name: "Tokelau" },
+    { key: "TO", name: "Tonga" },
+    { key: "TT", name: "Trinidad and Tobago" },
+    { key: "TN", name: "Tunisia" },
+    { key: "TR", name: "Turkey" },
+    { key: "TM", name: "Turkmenistan" },
+    { key: "TC", name: "Turks and Caicos Islands" },
+    { key: "TV", name: "Tuvalu" },
+    { key: "UG", name: "Uganda" },
+    { key: "UA", name: "Ukraine" },
+    { key: "AE", name: "United Arab Emirates" },
+    { key: "GB", name: "United Kingdom of Great Britain and Northern Ireland" },
+    { key: "UM", name: "United States Minor Outlying Islands" },
+    { key: "US", name: "United States of America" },
+    { key: "UY", name: "Uruguay" },
+    { key: "UZ", name: "Uzbekistan" },
+    { key: "VU", name: "Vanuatu" },
+    { key: "VE", name: "Venezuela (Bolivarian Republic of)" },
+    { key: "VN", name: "Viet Nam" },
+    { key: "VG", name: "Virgin Islands (British)" },
+    { key: "VI", name: "Virgin Islands (U.S.)" },
+    { key: "WF", name: "Wallis and Futuna" },
+    { key: "EH", name: "Western Sahara" },
+    { key: "YE", name: "Yemen" },
+    { key: "ZM", name: "Zambia" },
+    { key: "ZW", name: "Zimbabwe" },
+  ]
+
+  // const celestial_bodies = {
+  //   earth: "Earth",
+  //   earths_moon: "Earth's Moon",
+  //   mars: "Mars",
+  //   sun: "Sun",
+  //   asteroid: "Asteroid",
+  //   milky_way: "Milky Way Galaxy",
+  //   mercury: "Mercury",
+  //   venus: "Venus",
+  //   jupiter: "Jupiter",
+  //   saturn: "Saturn",
+  //   uranus: "Uranus",
+  //   neptune: "Neptune",
+  //   pluto: "Pluto",
+  //   comet: "Comet",
+  //   star: "Star",
+  //   black_hole: "Black Hole",
+  //   other: "Other",
+  // }
+
+  let popover_manager = $state(null)
+  let popover_button_manager = $state(null)
+  let extra_popover_manager = $state(null)
+  let extra_popover_button_manager = $state(null)
+  let finish_button_manager = $state(null)
+  let suggestions_prepped = $state(null)
+  let search_text_input_manager = $state(null)
+  let search_button_manager = $state(null)
+  let is_dark_mode_checkbox_manager = $state(null)
+  let clear_suggestions_button_manager = $state(null)
+  let search_filter_within_map_boundries_checkbox_manager = $state(null)
+  let search_filter_include_poi_categories_dropdown_manager = $state(null)
+  let search_filter_exclude_poi_categories_dropdown_manager = $state(null)
+  let search_filter_limit_to_countries_dropdown_manager = $state(null)
+  let search_filter_result_type_dropdown_manager = $state(null)
+  let search_filter_include_address_categories_dropdown_manager = $state(null)
+  let search_filter_exclude_address_categories_dropdown_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 label = $derived(set_closurable(config?.label, 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))
+  let mapkit_js_token = $derived(set_closurable(config?.mapkit_js_token, null))
+
+  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() {
+    console.log("initialize_map")
+    if (!browser) {
+      console.log("document is not defined")
+      return
+    }
+    await load_mapkit_script()
+    if (!window.mapkit) {
+      console.log("MapKit is not defined")
+      return
+    }
+    const is_map_div_found = document?.querySelector(`#map_${id}`)
+    if (!is_map_div_found) {
+      console.log("Map div not found")
+      return
+    }
+    const initial_region = new mapkit.CoordinateRegion(
+      new mapkit.Coordinate(val?.latitude ?? 37.3316850890998, val?.longitude ?? -122.030067374026),
+      new mapkit.CoordinateSpan(0.1, 0.1)
+    )
+    if (!map) {
+      map = new mapkit.Map(`map_${id}`)
+    }
+    map.annotations = []
+    map.region = initial_region
+    map.colorScheme = is_dark_mode_checkbox_manager?.val ? "dark" : "light"
+    if (val?.place_id) {
+      const lookup = new mapkit.PlaceLookup()
+      lookup.getPlace(val?.place_id, (error, place) => {
+        if (error) {
+          console.error("Place lookup error:", error)
+          return
+        }
+        const marker = new mapkit.PlaceAnnotation(place)
+        map.addAnnotation(marker)
+        const accessory = new mapkit.PlaceSelectionAccessory()
+        marker.selectionAccessory = accessory
+        marker.selected = true
+      })
+    } else if (val?.name) {
+      // make annotation with name maybe? or use muid
+    }
+  }
+
+  function suggestion_clicked(input) {
+    if (input?.id) {
+      const lookup = new mapkit.PlaceLookup()
+      lookup.getPlace(input?.id, (error, place) => {
+        if (error) {
+          console.error("Place lookup error:", error)
+          return
+        }
+        const center = place.coordinate
+        const span = new mapkit.CoordinateSpan(0.01, 0.01)
+        const region = new mapkit.CoordinateRegion(center, span)
+        map.region = region
+        const marker = new mapkit.PlaceAnnotation(place)
+        marker.addEventListener("select", (input) => {
+          // i think there is a mistake where this doesnt give pointOfInterestCategory
+          val = {
+            place_id: place?.id,
+            muid: place?.muid,
+            poi_category: place?.pointOfInterestCategory,
+            latitude: place?.coordinate?.latitude,
+            longitude: place?.coordinate?.longitude,
+            name:
+              place?.name && place?.name == place?.locality && place?.administrativeArea
+                ? `${place?.locality}, ${place?.administrativeArea}`
+                : place?.name,
+            formatted_address: place?.formattedAddress,
+            country: place?.country,
+            country_code: place?.countryCode,
+            administrative_area: place?.administrativeArea,
+            administrative_area_code: place?.administrativeAreaCode,
+            locality: place?.locality,
+            sub_locality: place?.subLocality,
+            full_thoroughfare: place?.fullThoroughfare,
+          }
+        })
+        map.addAnnotation(marker)
+        const accessory = new mapkit.PlaceSelectionAccessory()
+        marker.selectionAccessory = accessory
+        marker.selected = true
+      })
+    } else if (input?.coordinate) {
+      const center = input.coordinate
+      const span = new mapkit.CoordinateSpan(0.01, 0.01)
+      const region = new mapkit.CoordinateRegion(center, span)
+      map.region = region
+    }
+    suggestions_prepped = []
+  }
+
+  function prepare_search_options(is_autocomplete = false) {
+    const result_type = Array.isArray(search_filter_result_type_dropdown_manager?.val)
+      ? search_filter_result_type_dropdown_manager?.val
+      : []
+    let options = {
+      includeAddresses: result_type.length == 0 || result_type.includes("address"),
+      includePointsOfInterest: result_type.length == 0 || result_type.includes("pointOfInterest"),
+      includePhysicalFeatures: result_type.length == 0 || result_type.includes("physicalFeature"),
+    }
+    if (is_autocomplete) {
+      options.includeQueries = result_type.length == 0 || result_type.includes("query")
+    }
+    if (map) {
+      options.coordinate = map.center
+    }
+    if (search_filter_within_map_boundries_checkbox_manager?.val && map) {
+      options.region = map.region
+    }
+    if (
+      Array.isArray(search_filter_limit_to_countries_dropdown_manager?.val) &&
+      search_filter_limit_to_countries_dropdown_manager?.val.length > 0
+    ) {
+      options.limitToCountries = search_filter_limit_to_countries_dropdown_manager?.val.join(",")
+    }
+    if (
+      Array.isArray(search_filter_include_poi_categories_dropdown_manager?.val) &&
+      search_filter_include_poi_categories_dropdown_manager?.val.length > 0
+    ) {
+      options.pointOfInterestFilter = mapkit.PointOfInterestFilter.including(
+        search_filter_include_poi_categories_dropdown_manager?.val
+      )
+    }
+    if (
+      Array.isArray(search_filter_include_address_categories_dropdown_manager?.val) &&
+      search_filter_include_address_categories_dropdown_manager?.val.length > 0
+    ) {
+      options.addressFilter = mapkit.AddressFilter.including(
+        search_filter_include_address_categories_dropdown_manager?.val.map(
+          (category) => mapkit.AddressCategory[category]
+        )
+      )
+    }
+    if (
+      Array.isArray(search_filter_exclude_address_categories_dropdown_manager?.val) &&
+      search_filter_exclude_address_categories_dropdown_manager?.val.length > 0
+    ) {
+      options.addressFilter = mapkit.AddressFilter.excluding(
+        search_filter_exclude_address_categories_dropdown_manager?.val.map(
+          (category) => mapkit.AddressCategory[category]
+        )
+      )
+    }
+    return options
+  }
+
+  function search_for_autocomplete(input) {
+    if (!input) {
+      suggestions_prepped = []
+      return
+    }
+    const autocomplete_search_options = prepare_search_options(true)
+    const place_search = new mapkit.Search()
+    place_search.autocomplete(
+      input,
+      (error, result) => {
+        if (error) {
+          console.error("Autocomplete error:", error)
+          return
+        }
+        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)
+              if (suggestion?.id) {
+                choose_selection_button_manager = create_button_manager({
+                  support_icon: "arrow_tailed",
+                  is_uniform: true,
+                  on_click: () => suggestion_clicked(suggestion),
+                })
+              } else {
+                choose_selection_button_manager = create_button_manager({
+                  support_icon: "magnifying_glass",
+                  is_uniform: true,
+                  on_click: () => search_for(`${suggestion?.displayLines?.[0]}`),
+                })
+              }
+              suggestions_prepped_loc.push({
+                ...suggestion,
+                choose_selection_button_manager,
+              })
+            }
+          }
+          suggestions_prepped = suggestions_prepped_loc
+        }
+      },
+      autocomplete_search_options
+    )
+  }
+
+  function search_for(input) {
+    const search_options = prepare_search_options()
+    if (!map) {
+      console.log("map not found")
+      return
+    }
+    map.removeAnnotations(map.annotations)
+    const place_search = new mapkit.Search()
+    place_search.search(
+      input,
+      (error, result) => {
+        if (error) {
+          console.error("Search error:", error)
+          return
+        }
+        if (result.places.length > 0) {
+          if (!search_filter_within_map_boundries_checkbox_manager?.val) {
+            const center = result.places[0].coordinate
+            const span = new mapkit.CoordinateSpan(0.01, 0.01)
+            const region = new mapkit.CoordinateRegion(center, span)
+            map.region = region
+          }
+          for (const place of result.places) {
+            const marker = new mapkit.PlaceAnnotation(place)
+            marker.addEventListener("select", (input) => {
+              val = {
+                place_id: place?.id,
+                muid: place?.muid,
+                poi_category: place?.pointOfInterestCategory,
+                latitude: place?.coordinate?.latitude,
+                longitude: place?.coordinate?.longitude,
+                name:
+                  place?.name && place?.name == place?.locality && place?.administrativeArea
+                    ? `${place?.locality}, ${place?.administrativeArea}`
+                    : place?.name,
+                formatted_address: place?.formattedAddress,
+                country: place?.country,
+                country_code: place?.countryCode,
+                administrative_area: place?.administrativeArea,
+                administrative_area_code: place?.administrativeAreaCode,
+                locality: place?.locality,
+                sub_locality: place?.subLocality,
+                full_thoroughfare: place?.fullThoroughfare,
+              }
+            })
+            map.addAnnotation(marker)
+            const accessory = new mapkit.PlaceSelectionAccessory()
+            marker.selectionAccessory = accessory
+            if (result.places.length == 1) {
+              marker.selected = true
+            }
+          }
+        }
+        suggestions_prepped = []
+      },
+      search_options
+    )
+  }
+
+  function set_val(input) {
+    val = input
+    if (map) {
+      initialize_map()
+    }
+  }
+
+  function reset_map() {
+    // const el = document.getElementById(`map_${id}`)
+    // if (el) {
+    //   // optional: remove child nodes or clear old map if you want
+    //   // el.innerHTML = ''
+    //   map = new mapkit.Map(`map_${id}`)
+    // }
+    initialize_map()
+  }
+
+  function finish() {
+    popover_manager.close()
+    if (typeof config?.on_finish == "function") {
+      config?.on_finish(val)
+    }
+  }
+
+  function init(config) {
+    val = config?.val
+    popover_manager = create_popover_manager({
+      target_width: 600,
+      target_height: 600,
+      type: "center",
+      header: "Location",
+      on_open: () => {
+        if (!map) {
+          setTimeout(() => {
+            initialize_map()
+          }, 20)
+        }
+      },
+    })
+    popover_button_manager = create_button_manager({
+      type: "outlined",
+      is_compressed: true,
+      text: () => (val?.name && val?.name.length > 0 ? val?.name : "Select Location"),
+      popover_target: () => `popover_${popover_manager?.id}`,
+    })
+    extra_popover_manager = create_popover_manager({
+      target_width: 200,
+      target_height: 300,
+      type: "dropdown",
+      anchor_id: () => `button_${extra_popover_button_manager?.id}`,
+    })
+    extra_popover_button_manager = create_button_manager({
+      type: "soft",
+      support_icon: "three_dots",
+      icon_sw: 60,
+      is_uniform: true,
+      popover_target: () => `popover_${extra_popover_manager?.id}`,
+    })
+    search_text_input_manager = create_text_input_manager({
+      type: "search",
+      on_change: (input) => search_for_autocomplete(input),
+    })
+    search_button_manager = create_button_manager({
+      text: "Search",
+      is_compressed: true,
+      is_disabled: () => !search_text_input_manager?.val,
+      on_click: () => search_for(search_text_input_manager?.val),
+    })
+    clear_suggestions_button_manager = create_button_manager({
+      support_icon: "x",
+      is_uniform: true,
+      on_click: () => (suggestions_prepped = []),
+    })
+    is_dark_mode_checkbox_manager = create_checkbox_manager({
+      label: "Dark Color Scheme",
+      type: "toggle",
+      val: config?.is_dark_color_scheme == true ? true : false,
+      on_change: (input) => {
+        if (map?.colorScheme) {
+          map.colorScheme = input ? "dark" : "light"
+        }
+      },
+    })
+    search_filter_within_map_boundries_checkbox_manager = create_checkbox_manager({
+      label: "Search Within Map Boundries",
+      type: "toggle",
+      val: false,
+    })
+    search_filter_include_poi_categories_dropdown_manager = create_dropdown_manager({
+      label: "Include POI Categories",
+      is_multiselect: true,
+      is_button_compressed: true,
+      options: poi_categories,
+    })
+    search_filter_exclude_poi_categories_dropdown_manager = create_dropdown_manager({
+      label: "Exclude POI Categories",
+      is_multiselect: true,
+      is_button_compressed: true,
+      options: poi_categories,
+    })
+    search_filter_limit_to_countries_dropdown_manager = create_dropdown_manager({
+      label: "Limit to Countries",
+      is_multiselect: true,
+      is_button_compressed: true,
+      options: countries,
+    })
+    search_filter_result_type_dropdown_manager = create_dropdown_manager({
+      label: "Filter Result Type",
+      is_multiselect: true,
+      is_button_compressed: true,
+      options: search_ac_result_types,
+    })
+    search_filter_include_address_categories_dropdown_manager = create_dropdown_manager({
+      label: "Include Address Categories",
+      is_multiselect: true,
+      is_button_compressed: true,
+      options: address_categories,
+    })
+    search_filter_exclude_address_categories_dropdown_manager = create_dropdown_manager({
+      label: "Exclude Address Categories",
+      is_multiselect: true,
+      is_button_compressed: true,
+      options: address_categories,
+    })
+    finish_button_manager = create_button_manager({
+      text: "Finish",
+      is_disabled: () => !val,
+      mt: 1,
+      on_click: () => finish(),
+    })
+  }
+
+  init(config)
+
+  return {
+    id,
+    get val() {
+      return val
+    },
+    get map() {
+      return map
+    },
+    get is_popover() {
+      return is_popover
+    },
+    get is_popover_button() {
+      return is_popover_button
+    },
+    get popover_button_manager() {
+      return popover_button_manager
+    },
+    get label() {
+      return label
+    },
+    get height() {
+      return height
+    },
+    get width() {
+      return width
+    },
+    get is_show_search() {
+      return is_show_search
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get extra_popover_manager() {
+      return extra_popover_manager
+    },
+    get extra_popover_button_manager() {
+      return extra_popover_button_manager
+    },
+    get finish_button_manager() {
+      return finish_button_manager
+    },
+    get suggestions_prepped() {
+      return suggestions_prepped
+    },
+    get is_dark_mode_checkbox_manager() {
+      return is_dark_mode_checkbox_manager
+    },
+    get clear_suggestions_button_manager() {
+      return clear_suggestions_button_manager
+    },
+    get search_text_input_manager() {
+      return search_text_input_manager
+    },
+    get search_button_manager() {
+      return search_button_manager
+    },
+    get search_filter_within_map_boundries_checkbox_manager() {
+      return search_filter_within_map_boundries_checkbox_manager
+    },
+    get search_filter_include_poi_categories_dropdown_manager() {
+      return search_filter_include_poi_categories_dropdown_manager
+    },
+    get search_filter_exclude_poi_categories_dropdown_manager() {
+      return search_filter_exclude_poi_categories_dropdown_manager
+    },
+    get search_filter_limit_to_countries_dropdown_manager() {
+      return search_filter_limit_to_countries_dropdown_manager
+    },
+    get search_filter_result_type_dropdown_manager() {
+      return search_filter_result_type_dropdown_manager
+    },
+    get search_filter_include_address_categories_dropdown_manager() {
+      return search_filter_include_address_categories_dropdown_manager
+    },
+    get search_filter_exclude_address_categories_dropdown_manager() {
+      return search_filter_exclude_address_categories_dropdown_manager
+    },
+    get mapkit_js_token() {
+      return mapkit_js_token
+    },
+    initialize_map,
+    set_val,
+    reset_map,
+  }
+}