@collabdt/core 0.0.40

package/dist/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/LocationSettings.js

@@ -0,0 +1,325 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslations } from "next-intl";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../../../../../ui/Select";
+import { MapContext } from "../../../../../../../../store";
+import { useAppConfigContext } from "../../../../../../../../store/AppConfig/context";
+import { Input, CollapsibleSection } from "../../../../../../../ui/";
+import { useState } from "react";
+function LocationSettings() {
+  var _a;
+  const [municipalityInput, setMunicipalityInput] = useState("");
+  const [municipalitySuggestions, setMunicipalitySuggestions] = useState([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const t = useTranslations("SettingsTab");
+  const { dispatch: mapDispatch, state: mapState } = React.useContext(MapContext);
+  const { currentLocation, map, countrySubdivisionsData } = mapState.map;
+  const { state: appConfigState } = useAppConfigContext();
+  const orgCountryCode = (((_a = appConfigState.appConfig.organization) == null ? void 0 : _a.country) || "CA").toLowerCase();
+  const [currentLat, setCurrentLat] = React.useState();
+  const [currentLng, setCurrentLng] = React.useState();
+  const [currentZoom, setCurrentZoom] = React.useState();
+  const [countrySubdivision, setCountrySubdivision] = React.useState("");
+  const [municipality, setMunicipality] = React.useState("");
+  React.useEffect(() => {
+    if (currentLocation) {
+      setCurrentLat(currentLocation.lat);
+      setCurrentLng(currentLocation.lng);
+      setCurrentZoom(currentLocation.zoom);
+      setCountrySubdivision(currentLocation.countrySubdivision || "");
+      setMunicipality(currentLocation.municipality || "");
+    }
+  }, [currentLocation]);
+  const geocodeLocation = async (query) => {
+    try {
+      const response = await fetch(
+        `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=1&countrycodes=${orgCountryCode}`
+      );
+      const data = await response.json();
+      if (data && data.length > 0) {
+        const result = data[0];
+        return {
+          lat: parseFloat(result.lat),
+          lng: parseFloat(result.lon)
+        };
+      }
+      return null;
+    } catch (error) {
+      console.error("Geocoding error:", error);
+      return null;
+    }
+  };
+  const onCountrySubdivisionChange = async (value) => {
+    setMunicipalityInput("");
+    setMunicipalitySuggestions([]);
+    setShowSuggestions(false);
+    mapDispatch({
+      type: "UPDATE_LOCATION",
+      payload: {
+        currentLocation: __spreadProps(__spreadValues({}, currentLocation), {
+          countrySubdivision: value,
+          municipality: ""
+        })
+      }
+    });
+    const location = await geocodeLocation(value);
+    if (location && map) {
+      map.flyTo({
+        center: [location.lng, location.lat],
+        zoom: 6,
+        essential: true
+      });
+    }
+  };
+  const onMunicipalityChange = async (e) => {
+    const value = e.target.value;
+    setMunicipalityInput(value);
+    mapDispatch({
+      type: "UPDATE_LOCATION",
+      payload: {
+        currentLocation: __spreadProps(__spreadValues({}, currentLocation), {
+          municipality: value
+        })
+      }
+    });
+    if (value.length > 2 && countrySubdivision) {
+      const response = await fetch(
+        `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(value + ", " + countrySubdivision)}&limit=5&countrycodes=${orgCountryCode}`
+      );
+      const data = await response.json();
+      const filtered = data.filter(
+        (item) => item.type === "municipality" || item.class === "boundary" && item.type === "administrative"
+      ).slice(0, 3);
+      setMunicipalitySuggestions(filtered.map((item) => ({
+        name: item.display_name.split(",")[0],
+        lat: parseFloat(item.lat),
+        lng: parseFloat(item.lon)
+      })));
+      setShowSuggestions(true);
+    } else {
+      setMunicipalitySuggestions([]);
+      setShowSuggestions(false);
+    }
+  };
+  const onMunicipalitySuggestionSelect = (suggestion) => {
+    setMunicipalityInput(suggestion.name);
+    mapDispatch({
+      type: "UPDATE_LOCATION",
+      payload: {
+        currentLocation: __spreadProps(__spreadValues({}, currentLocation), {
+          municipality: suggestion.name,
+          lat: suggestion.lat,
+          lng: suggestion.lng
+        })
+      }
+    });
+    setShowSuggestions(false);
+    if (map) {
+      map.flyTo({
+        center: [suggestion.lng, suggestion.lat],
+        zoom: 12,
+        essential: true
+      });
+    }
+  };
+  React.useEffect(() => {
+    if (!map) return;
+    const handleMoveEnd = () => {
+      const newCenter = map.getCenter();
+      setCurrentLat(newCenter.lat);
+      setCurrentLng(newCenter.lng);
+      const newZoom = map.getZoom();
+      setCurrentZoom(newZoom);
+    };
+    map.on("moveend", handleMoveEnd);
+    return () => {
+      map.off("moveend", handleMoveEnd);
+    };
+  }, [map]);
+  if (!currentLocation) {
+    return null;
+  }
+  const onLatitudeInputChange = (e) => {
+    setCurrentLat(e.target.value);
+    if (e.nativeEvent.inputType === "insertReplacementText" || e.nativeEvent.inputType === "deleteContentBackward" || e.nativeEvent.inputType === "insertText") {
+      return;
+    }
+    const newLat = Number(e.target.value);
+    if (!isNaN(newLat)) {
+      mapDispatch({ type: "UPDATE_LOCATION", payload: { currentLocation: __spreadProps(__spreadValues({}, currentLocation), { lat: newLat }) } });
+      map == null ? void 0 : map.setCenter([currentLng || 0, newLat]);
+    }
+  };
+  const onLongitudeInputChange = (e) => {
+    setCurrentLng(e.target.value);
+    if (e.nativeEvent.inputType === "insertReplacementText" || e.nativeEvent.inputType === "deleteContentBackward" || e.nativeEvent.inputType === "insertText") {
+      return;
+    }
+    const newLng = Number(e.target.value);
+    if (!isNaN(newLng)) {
+      mapDispatch({ type: "UPDATE_LOCATION", payload: { currentLocation: __spreadProps(__spreadValues({}, currentLocation), { lng: newLng }) } });
+      map == null ? void 0 : map.setCenter([newLng, currentLat || 0]);
+    }
+  };
+  const onZoomInputChange = (e) => {
+    setCurrentZoom(e.target.value);
+    if (e.nativeEvent.inputType === "insertReplacementText" || e.nativeEvent.inputType === "deleteContentBackward" || e.nativeEvent.inputType === "insertText") {
+      return;
+    }
+    const newZoom = Number(e.target.value);
+    if (!isNaN(newZoom)) {
+      mapDispatch({ type: "UPDATE_LOCATION", payload: { currentLocation: __spreadProps(__spreadValues({}, currentLocation), { zoom: newZoom }) } });
+      map == null ? void 0 : map.setZoom(newZoom);
+    }
+  };
+  const commitLat = () => {
+    const newLat = Number(currentLat);
+    if (!isNaN(newLat)) {
+      mapDispatch({ type: "UPDATE_LOCATION", payload: { currentLocation: __spreadProps(__spreadValues({}, currentLocation), { lat: newLat }) } });
+      map == null ? void 0 : map.setCenter([currentLng || 0, newLat]);
+    }
+  };
+  const commitLng = () => {
+    const newLng = Number(currentLng);
+    if (!isNaN(newLng)) {
+      mapDispatch({ type: "UPDATE_LOCATION", payload: { currentLocation: __spreadProps(__spreadValues({}, currentLocation), { lng: newLng }) } });
+      map == null ? void 0 : map.setCenter([newLng, currentLat || 0]);
+    }
+  };
+  const commitZoom = () => {
+    const newZoom = Number(currentZoom);
+    if (!isNaN(newZoom)) {
+      mapDispatch({ type: "UPDATE_LOCATION", payload: { currentLocation: __spreadProps(__spreadValues({}, currentLocation), { zoom: newZoom }) } });
+      map == null ? void 0 : map.setZoom(newZoom);
+    }
+  };
+  const handleLatKeyDown = (e) => {
+    if (e.key === "Enter") commitLat();
+  };
+  const handleLngKeyDown = (e) => {
+    if (e.key === "Enter") commitLng();
+  };
+  const handleZoomKeyDown = (e) => {
+    if (e.key === "Enter") commitZoom();
+  };
+  return /* @__PURE__ */ jsxs(
+    CollapsibleSection,
+    {
+      title: t("location"),
+      chevronPosition: "right",
+      defaultOpen: true,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Latitude" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                value: currentLat != null ? currentLat : "",
+                step: currentZoom ? currentZoom >= 10 ? 1e-4 : currentZoom >= 5 ? 1e-3 : 0.01 : 1e-4,
+                onChange: onLatitudeInputChange,
+                onBlur: commitLat,
+                onKeyDown: handleLatKeyDown,
+                placeholder: t("enter") + " latitude"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Longitude" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                value: currentLng != null ? currentLng : "",
+                step: currentZoom ? currentZoom >= 10 ? 1e-4 : currentZoom >= 5 ? 1e-3 : 0.01 : 1e-4,
+                onChange: onLongitudeInputChange,
+                onBlur: commitLng,
+                onKeyDown: handleLngKeyDown,
+                placeholder: t("enter") + " longitude"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Zoom" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              value: currentZoom != null ? currentZoom : "",
+              step: 0.1,
+              onChange: onZoomInputChange,
+              onBlur: commitZoom,
+              onKeyDown: handleZoomKeyDown,
+              placeholder: t("enter") + " zoom"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: t("countrySubdivision") }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: countrySubdivision,
+              onValueChange: onCountrySubdivisionChange,
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("selectCountrySubdivision") }) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: Object.entries(countrySubdivisionsData != null ? countrySubdivisionsData : {}).map(([code, sub]) => {
+                  var _a2;
+                  return /* @__PURE__ */ jsx(SelectItem, { value: code, children: (_a2 = sub == null ? void 0 : sub.name) != null ? _a2 : code }, code);
+                }) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2 relative", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: t("municipality") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "text",
+              value: municipalityInput,
+              onChange: onMunicipalityChange,
+              placeholder: t("enter") + " " + t("municipality"),
+              autoComplete: "off"
+            }
+          ),
+          showSuggestions && municipalitySuggestions.length > 0 && /* @__PURE__ */ jsx("ul", { className: "absolute z-10 bg-white border rounded shadow w-full mt-1 max-h-40 overflow-auto", children: municipalitySuggestions.map((suggestion, idx) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: "px-3 py-2 cursor-pointer hover:bg-gray-100",
+              onClick: () => onMunicipalitySuggestionSelect(suggestion),
+              children: suggestion.name
+            },
+            suggestion.name + idx
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  LocationSettings
+};
+//# sourceMappingURL=LocationSettings.js.map

package/dist/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/LocationSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../src/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/LocationSettings.tsx"],"sourcesContent":["'use client'\r\n\r\nimport * as React from \"react\";\r\nimport { useTranslations } from 'next-intl'\r\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../../../../ui/Select'\r\nimport { MapContext } from '../../../../../../../../store';\r\nimport { useAppConfigContext } from '../../../../../../../../store/AppConfig/context';\r\nimport { Input, CollapsibleSection } from '../../../../../../../ui/';\r\nimport { useState } from 'react';\r\n\r\nexport function LocationSettings() {\r\n    // Municipality autocomplete state\r\n    const [municipalityInput, setMunicipalityInput] = useState('');\r\n    const [municipalitySuggestions, setMunicipalitySuggestions] = useState<Array<{ name: string, lat: number, lng: number }>>([]);\r\n    const [showSuggestions, setShowSuggestions] = useState(false);\r\n  // Translation\r\n  const t = useTranslations('SettingsTab')\r\n  const {dispatch: mapDispatch, state: mapState} = React.useContext(MapContext)\r\n  const { currentLocation, map, countrySubdivisionsData } = mapState.map;\r\n  const { state: appConfigState } = useAppConfigContext()\r\n  const orgCountryCode = (appConfigState.appConfig.organization?.country || 'CA').toLowerCase()\r\n\r\n  // Local input states for lat/lng/zoom\r\n  const [currentLat, setCurrentLat] = React.useState<number>();\r\n  const [currentLng, setCurrentLng] = React.useState<number>();\r\n  const [currentZoom, setCurrentZoom] = React.useState<number>();\r\n  const [countrySubdivision, setCountrySubdivision] = React.useState<string>('');\r\n  const [municipality, setMunicipality] = React.useState<string>('');\r\n\r\n  React.useEffect(() => {\r\n    if (currentLocation) {\r\n      setCurrentLat(currentLocation.lat);\r\n      setCurrentLng(currentLocation.lng);\r\n      setCurrentZoom(currentLocation.zoom);\r\n      setCountrySubdivision(currentLocation.countrySubdivision || '');\r\n      setMunicipality(currentLocation.municipality || '');\r\n    }\r\n  }, [currentLocation]);\r\n\r\n\r\n  // Geocode helper\r\n  const geocodeLocation = async (query: string) => {\r\n    try {\r\n      const response = await fetch(\r\n        `https://nominatim.openstreetmap.org/search?` +\r\n        `format=json&q=${encodeURIComponent(query)}&limit=1&countrycodes=${orgCountryCode}`\r\n      );\r\n      const data = await response.json();\r\n      if (data && data.length > 0) {\r\n        const result = data[0];\r\n        return {\r\n          lat: parseFloat(result.lat),\r\n          lng: parseFloat(result.lon)\r\n        };\r\n      }\r\n      return null;\r\n    } catch (error) {\r\n      console.error('Geocoding error:', error);\r\n      return null;\r\n    }\r\n  };\r\n\r\n  // Country subdivision change handler with geocoding\r\n  const onCountrySubdivisionChange = async (value: string) => {\r\n    // Clear municipality input and state\r\n    setMunicipalityInput('');\r\n    setMunicipalitySuggestions([]);\r\n    setShowSuggestions(false);\r\n    mapDispatch({\r\n      type: 'UPDATE_LOCATION',\r\n      payload: {\r\n        currentLocation: {\r\n          ...currentLocation,\r\n          countrySubdivision: value,\r\n          municipality: ''\r\n        }\r\n      }\r\n    });\r\n\r\n    // Geocode and navigate to country subdivision\r\n    const location = await geocodeLocation(value);\r\n    if (location && map) {\r\n      map.flyTo({\r\n        center: [location.lng, location.lat],\r\n        zoom: 6,\r\n        essential: true\r\n      });\r\n    }\r\n  };\r\n\r\n  // Municipality change handler with geocoding\r\n  const onMunicipalityChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const value = e.target.value;\r\n    setMunicipalityInput(value);\r\n    mapDispatch({\r\n      type: 'UPDATE_LOCATION',\r\n      payload: {\r\n        currentLocation: {\r\n          ...currentLocation,\r\n          municipality: value\r\n        }\r\n      }\r\n    });\r\n\r\n    // Fetch municipality suggestions\r\n    if (value.length > 2 && countrySubdivision) {\r\n      const response = await fetch(\r\n        `https://nominatim.openstreetmap.org/search?` +\r\n        `format=json&q=${encodeURIComponent(value + ', ' + countrySubdivision)}&limit=5&countrycodes=${orgCountryCode}`\r\n      );\r\n      const data = await response.json();\r\n      // Only show municipality results\r\n      const filtered = data.filter((item: any) =>\r\n        item.type === 'municipality' || item.class === 'boundary' && item.type === 'administrative'\r\n      ).slice(0, 3);\r\n      setMunicipalitySuggestions(filtered.map((item: any) => ({\r\n        name: item.display_name.split(',')[0],\r\n        lat: parseFloat(item.lat),\r\n        lng: parseFloat(item.lon)\r\n      })));\r\n      setShowSuggestions(true);\r\n    } else {\r\n      setMunicipalitySuggestions([]);\r\n      setShowSuggestions(false);\r\n    }\r\n  };\r\n\r\n  // When a suggestion is selected, update and fly\r\n  const onMunicipalitySuggestionSelect = (suggestion: { name: string, lat: number, lng: number }) => {\r\n    setMunicipalityInput(suggestion.name);\r\n    mapDispatch({\r\n      type: 'UPDATE_LOCATION',\r\n      payload: {\r\n        currentLocation: {\r\n          ...currentLocation,\r\n          municipality: suggestion.name,\r\n          lat: suggestion.lat,\r\n          lng: suggestion.lng\r\n        }\r\n      }\r\n    });\r\n    setShowSuggestions(false);\r\n    if (map) {\r\n      map.flyTo({\r\n        center: [suggestion.lng, suggestion.lat],\r\n        zoom: 12,\r\n        essential: true\r\n      });\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    if (!map) return;\r\n    const handleMoveEnd = () => {\r\n      const newCenter = map.getCenter();\r\n      setCurrentLat(newCenter.lat);\r\n      setCurrentLng(newCenter.lng);\r\n      const newZoom = map.getZoom();\r\n      setCurrentZoom(newZoom);\r\n    };\r\n    map.on('moveend', handleMoveEnd);\r\n    return () => {\r\n      map.off('moveend', handleMoveEnd);\r\n    };\r\n  }, [map]);\r\n\r\n  // Early return if currentLocation is not yet initialized\r\n  if (!currentLocation) {\r\n    return null;\r\n  }\r\n\r\n  // Input change handlers (local state only)\r\n  // If the input is changed by arrows (stepper), update instantly\r\n  const onLatitudeInputChange = (e) => {\r\n    setCurrentLat(e.target.value);\r\n    if (e.nativeEvent.inputType === 'insertReplacementText' || e.nativeEvent.inputType === 'deleteContentBackward' || e.nativeEvent.inputType === 'insertText') {\r\n      // Do not update instantly when typing\r\n      return;\r\n    }\r\n    // If value is a valid number, update instantly (arrows/stepper)\r\n    const newLat = Number(e.target.value);\r\n    if (!isNaN(newLat)) {\r\n      mapDispatch({ type: 'UPDATE_LOCATION', payload: { currentLocation: { ...currentLocation, lat: newLat } } });\r\n      map?.setCenter([currentLng || 0, newLat]);\r\n    }\r\n  };\r\n  const onLongitudeInputChange = (e) => {\r\n    setCurrentLng(e.target.value);\r\n    if (e.nativeEvent.inputType === 'insertReplacementText' || e.nativeEvent.inputType === 'deleteContentBackward' || e.nativeEvent.inputType === 'insertText') {\r\n      return;\r\n    }\r\n    const newLng = Number(e.target.value);\r\n    if (!isNaN(newLng)) {\r\n      mapDispatch({ type: 'UPDATE_LOCATION', payload: { currentLocation: { ...currentLocation, lng: newLng } } });\r\n      map?.setCenter([newLng, currentLat || 0]);\r\n    }\r\n  };\r\n  const onZoomInputChange = (e) => {\r\n    setCurrentZoom(e.target.value);\r\n    if (e.nativeEvent.inputType === 'insertReplacementText' || e.nativeEvent.inputType === 'deleteContentBackward' || e.nativeEvent.inputType === 'insertText') {\r\n      return;\r\n    }\r\n    const newZoom = Number(e.target.value);\r\n    if (!isNaN(newZoom)) {\r\n      mapDispatch({ type: 'UPDATE_LOCATION', payload: { currentLocation: { ...currentLocation, zoom: newZoom } } });\r\n      map?.setZoom(newZoom);\r\n    }\r\n  };\r\n\r\n  // Commit changes onBlur or Enter\r\n  const commitLat = () => {\r\n    const newLat = Number(currentLat);\r\n    if (!isNaN(newLat)) {\r\n      mapDispatch({ type: 'UPDATE_LOCATION', payload: { currentLocation: { ...currentLocation, lat: newLat } } });\r\n      map?.setCenter([currentLng || 0, newLat]);\r\n    }\r\n  };\r\n  const commitLng = () => {\r\n    const newLng = Number(currentLng);\r\n    if (!isNaN(newLng)) {\r\n      mapDispatch({ type: 'UPDATE_LOCATION', payload: { currentLocation: { ...currentLocation, lng: newLng } } });\r\n      map?.setCenter([newLng, currentLat || 0]);\r\n    }\r\n  };\r\n  const commitZoom = () => {\r\n    const newZoom = Number(currentZoom);\r\n    if (!isNaN(newZoom)) {\r\n      mapDispatch({ type: 'UPDATE_LOCATION', payload: { currentLocation: { ...currentLocation, zoom: newZoom } } });\r\n      map?.setZoom(newZoom);\r\n    }\r\n  };\r\n\r\n  // Handle Enter key for inputs\r\n  const handleLatKeyDown = (e) => { if (e.key === 'Enter') commitLat(); };\r\n  const handleLngKeyDown = (e) => { if (e.key === 'Enter') commitLng(); };\r\n  const handleZoomKeyDown = (e) => { if (e.key === 'Enter') commitZoom(); };\r\n\r\n  return (\r\n    <CollapsibleSection\r\n          title={t('location')}\r\n          chevronPosition=\"right\"\r\n          defaultOpen={true}\r\n        >\r\n\r\n      {/* Latitude & Longitude Inputs in 2 columns */}\r\n      <div className=\"flex gap-4\">\r\n        <div className=\"flex-1 space-y-2\">\r\n          <label className=\"text-sm font-medium\">Latitude</label>\r\n          <Input\r\n            type=\"number\"\r\n            value={currentLat ?? ''}\r\n            step={currentZoom ? currentZoom >= 10 ? 0.0001 : currentZoom >= 5 ? 0.001 : 0.01 : 0.0001}\r\n            onChange={onLatitudeInputChange}\r\n            onBlur={commitLat}\r\n            onKeyDown={handleLatKeyDown}\r\n            placeholder={t('enter') + ' latitude'}\r\n          />\r\n        </div>\r\n        <div className=\"flex-1 space-y-2\">\r\n          <label className=\"text-sm font-medium\">Longitude</label>\r\n          <Input\r\n            type=\"number\"\r\n            value={currentLng ?? ''}\r\n            step={currentZoom ? currentZoom >= 10 ? 0.0001 : currentZoom >= 5 ? 0.001 : 0.01 : 0.0001}\r\n            onChange={onLongitudeInputChange}\r\n            onBlur={commitLng}\r\n            onKeyDown={handleLngKeyDown}\r\n            placeholder={t('enter') + ' longitude'}\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      {/* Zoom Input */}\r\n      <div className=\"space-y-2\">\r\n        <label className=\"text-sm font-medium\">Zoom</label>\r\n        <Input\r\n          type=\"number\"\r\n          value={currentZoom ?? ''}\r\n          step={0.1}\r\n          onChange={onZoomInputChange}\r\n          onBlur={commitZoom}\r\n          onKeyDown={handleZoomKeyDown}\r\n          placeholder={t('enter') + ' zoom'}\r\n        />\r\n      </div>\r\n\r\n      {/* Country Subdivision Select */}\r\n      <div className=\"space-y-2\">\r\n        <label className=\"text-sm font-medium\">{t('countrySubdivision')}</label>\r\n        <Select\r\n          value={countrySubdivision}\r\n          onValueChange={onCountrySubdivisionChange}\r\n        >\r\n          <SelectTrigger>\r\n            <SelectValue placeholder={t('selectCountrySubdivision')} />\r\n          </SelectTrigger>\r\n          <SelectContent>\r\n            {Object.entries(countrySubdivisionsData ?? {}).map(([code, sub]) => (\r\n              <SelectItem key={code} value={code}>\r\n                {(sub as any)?.name ?? code}\r\n              </SelectItem>\r\n            ))}\r\n          </SelectContent>\r\n        </Select>\r\n      </div>\r\n\r\n      {/* Municipality Input with suggestions */}\r\n      <div className=\"space-y-2 relative\">\r\n        <label className=\"text-sm font-medium\">{t('municipality')}</label>\r\n        <Input\r\n          type=\"text\"\r\n          value={municipalityInput}\r\n          onChange={onMunicipalityChange}\r\n          placeholder={t('enter') + ' ' + t('municipality')}\r\n          autoComplete=\"off\"\r\n        />\r\n        {showSuggestions && municipalitySuggestions.length > 0 && (\r\n          <ul className=\"absolute z-10 bg-white border rounded shadow w-full mt-1 max-h-40 overflow-auto\">\r\n            {municipalitySuggestions.map((suggestion, idx) => (\r\n              <li\r\n                key={suggestion.name + idx}\r\n                className=\"px-3 py-2 cursor-pointer hover:bg-gray-100\"\r\n                onClick={() => onMunicipalitySuggestionSelect(suggestion)}\r\n              >\r\n                {suggestion.name}\r\n              </li>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </div>\r\n    </CollapsibleSection>\r\n  )\r\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsPQ,SACE,KADF;AApPR,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,SAAS,QAAQ,eAAe,YAAY,eAAe,mBAAmB;AAC9E,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,OAAO,0BAA0B;AAC1C,SAAS,gBAAgB;AAElB,SAAS,mBAAmB;AAVnC;AAYI,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,EAAE;AAC7D,QAAM,CAAC,yBAAyB,0BAA0B,IAAI,SAA4D,CAAC,CAAC;AAC5H,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAE9D,QAAM,IAAI,gBAAgB,aAAa;AACvC,QAAM,EAAC,UAAU,aAAa,OAAO,SAAQ,IAAI,MAAM,WAAW,UAAU;AAC5E,QAAM,EAAE,iBAAiB,KAAK,wBAAwB,IAAI,SAAS;AACnE,QAAM,EAAE,OAAO,eAAe,IAAI,oBAAoB;AACtD,QAAM,oBAAkB,oBAAe,UAAU,iBAAzB,mBAAuC,YAAW,MAAM,YAAY;AAG5F,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAiB;AAC3D,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAiB;AAC3D,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAiB;AAC7D,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,MAAM,SAAiB,EAAE;AAC7E,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAiB,EAAE;AAEjE,QAAM,UAAU,MAAM;AACpB,QAAI,iBAAiB;AACnB,oBAAc,gBAAgB,GAAG;AACjC,oBAAc,gBAAgB,GAAG;AACjC,qBAAe,gBAAgB,IAAI;AACnC,4BAAsB,gBAAgB,sBAAsB,EAAE;AAC9D,sBAAgB,gBAAgB,gBAAgB,EAAE;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAIpB,QAAM,kBAAkB,OAAO,UAAkB;AAC/C,QAAI;AACF,YAAM,WAAW,MAAM;AAAA,QACrB,4DACiB,mBAAmB,KAAK,CAAC,yBAAyB,cAAc;AAAA,MACnF;AACA,YAAM,OAAO,MAAM,SAAS,KAAK;AACjC,UAAI,QAAQ,KAAK,SAAS,GAAG;AAC3B,cAAM,SAAS,KAAK,CAAC;AACrB,eAAO;AAAA,UACL,KAAK,WAAW,OAAO,GAAG;AAAA,UAC1B,KAAK,WAAW,OAAO,GAAG;AAAA,QAC5B;AAAA,MACF;AACA,aAAO;AAAA,IACT,SAAS,OAAO;AACd,cAAQ,MAAM,oBAAoB,KAAK;AACvC,aAAO;AAAA,IACT;AAAA,EACF;AAGA,QAAM,6BAA6B,OAAO,UAAkB;AAE1D,yBAAqB,EAAE;AACvB,+BAA2B,CAAC,CAAC;AAC7B,uBAAmB,KAAK;AACxB,gBAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,QACP,iBAAiB,iCACZ,kBADY;AAAA,UAEf,oBAAoB;AAAA,UACpB,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,IACF,CAAC;AAGD,UAAM,WAAW,MAAM,gBAAgB,KAAK;AAC5C,QAAI,YAAY,KAAK;AACnB,UAAI,MAAM;AAAA,QACR,QAAQ,CAAC,SAAS,KAAK,SAAS,GAAG;AAAA,QACnC,MAAM;AAAA,QACN,WAAW;AAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF;AAGA,QAAM,uBAAuB,OAAO,MAA2C;AAC7E,UAAM,QAAQ,EAAE,OAAO;AACvB,yBAAqB,KAAK;AAC1B,gBAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,QACP,iBAAiB,iCACZ,kBADY;AAAA,UAEf,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,IACF,CAAC;AAGD,QAAI,MAAM,SAAS,KAAK,oBAAoB;AAC1C,YAAM,WAAW,MAAM;AAAA,QACrB,4DACiB,mBAAmB,QAAQ,OAAO,kBAAkB,CAAC,yBAAyB,cAAc;AAAA,MAC/G;AACA,YAAM,OAAO,MAAM,SAAS,KAAK;AAEjC,YAAM,WAAW,KAAK;AAAA,QAAO,CAAC,SAC5B,KAAK,SAAS,kBAAkB,KAAK,UAAU,cAAc,KAAK,SAAS;AAAA,MAC7E,EAAE,MAAM,GAAG,CAAC;AACZ,iCAA2B,SAAS,IAAI,CAAC,UAAe;AAAA,QACtD,MAAM,KAAK,aAAa,MAAM,GAAG,EAAE,CAAC;AAAA,QACpC,KAAK,WAAW,KAAK,GAAG;AAAA,QACxB,KAAK,WAAW,KAAK,GAAG;AAAA,MAC1B,EAAE,CAAC;AACH,yBAAmB,IAAI;AAAA,IACzB,OAAO;AACL,iCAA2B,CAAC,CAAC;AAC7B,yBAAmB,KAAK;AAAA,IAC1B;AAAA,EACF;AAGA,QAAM,iCAAiC,CAAC,eAA2D;AACjG,yBAAqB,WAAW,IAAI;AACpC,gBAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,QACP,iBAAiB,iCACZ,kBADY;AAAA,UAEf,cAAc,WAAW;AAAA,UACzB,KAAK,WAAW;AAAA,UAChB,KAAK,WAAW;AAAA,QAClB;AAAA,MACF;AAAA,IACF,CAAC;AACD,uBAAmB,KAAK;AACxB,QAAI,KAAK;AACP,UAAI,MAAM;AAAA,QACR,QAAQ,CAAC,WAAW,KAAK,WAAW,GAAG;AAAA,QACvC,MAAM;AAAA,QACN,WAAW;AAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF;AAEA,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,IAAK;AACV,UAAM,gBAAgB,MAAM;AAC1B,YAAM,YAAY,IAAI,UAAU;AAChC,oBAAc,UAAU,GAAG;AAC3B,oBAAc,UAAU,GAAG;AAC3B,YAAM,UAAU,IAAI,QAAQ;AAC5B,qBAAe,OAAO;AAAA,IACxB;AACA,QAAI,GAAG,WAAW,aAAa;AAC/B,WAAO,MAAM;AACX,UAAI,IAAI,WAAW,aAAa;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAGR,MAAI,CAAC,iBAAiB;AACpB,WAAO;AAAA,EACT;AAIA,QAAM,wBAAwB,CAAC,MAAM;AACnC,kBAAc,EAAE,OAAO,KAAK;AAC5B,QAAI,EAAE,YAAY,cAAc,2BAA2B,EAAE,YAAY,cAAc,2BAA2B,EAAE,YAAY,cAAc,cAAc;AAE1J;AAAA,IACF;AAEA,UAAM,SAAS,OAAO,EAAE,OAAO,KAAK;AACpC,QAAI,CAAC,MAAM,MAAM,GAAG;AAClB,kBAAY,EAAE,MAAM,mBAAmB,SAAS,EAAE,iBAAiB,iCAAK,kBAAL,EAAsB,KAAK,OAAO,GAAE,EAAE,CAAC;AAC1G,iCAAK,UAAU,CAAC,cAAc,GAAG,MAAM;AAAA,IACzC;AAAA,EACF;AACA,QAAM,yBAAyB,CAAC,MAAM;AACpC,kBAAc,EAAE,OAAO,KAAK;AAC5B,QAAI,EAAE,YAAY,cAAc,2BAA2B,EAAE,YAAY,cAAc,2BAA2B,EAAE,YAAY,cAAc,cAAc;AAC1J;AAAA,IACF;AACA,UAAM,SAAS,OAAO,EAAE,OAAO,KAAK;AACpC,QAAI,CAAC,MAAM,MAAM,GAAG;AAClB,kBAAY,EAAE,MAAM,mBAAmB,SAAS,EAAE,iBAAiB,iCAAK,kBAAL,EAAsB,KAAK,OAAO,GAAE,EAAE,CAAC;AAC1G,iCAAK,UAAU,CAAC,QAAQ,cAAc,CAAC;AAAA,IACzC;AAAA,EACF;AACA,QAAM,oBAAoB,CAAC,MAAM;AAC/B,mBAAe,EAAE,OAAO,KAAK;AAC7B,QAAI,EAAE,YAAY,cAAc,2BAA2B,EAAE,YAAY,cAAc,2BAA2B,EAAE,YAAY,cAAc,cAAc;AAC1J;AAAA,IACF;AACA,UAAM,UAAU,OAAO,EAAE,OAAO,KAAK;AACrC,QAAI,CAAC,MAAM,OAAO,GAAG;AACnB,kBAAY,EAAE,MAAM,mBAAmB,SAAS,EAAE,iBAAiB,iCAAK,kBAAL,EAAsB,MAAM,QAAQ,GAAE,EAAE,CAAC;AAC5G,iCAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAGA,QAAM,YAAY,MAAM;AACtB,UAAM,SAAS,OAAO,UAAU;AAChC,QAAI,CAAC,MAAM,MAAM,GAAG;AAClB,kBAAY,EAAE,MAAM,mBAAmB,SAAS,EAAE,iBAAiB,iCAAK,kBAAL,EAAsB,KAAK,OAAO,GAAE,EAAE,CAAC;AAC1G,iCAAK,UAAU,CAAC,cAAc,GAAG,MAAM;AAAA,IACzC;AAAA,EACF;AACA,QAAM,YAAY,MAAM;AACtB,UAAM,SAAS,OAAO,UAAU;AAChC,QAAI,CAAC,MAAM,MAAM,GAAG;AAClB,kBAAY,EAAE,MAAM,mBAAmB,SAAS,EAAE,iBAAiB,iCAAK,kBAAL,EAAsB,KAAK,OAAO,GAAE,EAAE,CAAC;AAC1G,iCAAK,UAAU,CAAC,QAAQ,cAAc,CAAC;AAAA,IACzC;AAAA,EACF;AACA,QAAM,aAAa,MAAM;AACvB,UAAM,UAAU,OAAO,WAAW;AAClC,QAAI,CAAC,MAAM,OAAO,GAAG;AACnB,kBAAY,EAAE,MAAM,mBAAmB,SAAS,EAAE,iBAAiB,iCAAK,kBAAL,EAAsB,MAAM,QAAQ,GAAE,EAAE,CAAC;AAC5G,iCAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAGA,QAAM,mBAAmB,CAAC,MAAM;AAAE,QAAI,EAAE,QAAQ,QAAS,WAAU;AAAA,EAAG;AACtE,QAAM,mBAAmB,CAAC,MAAM;AAAE,QAAI,EAAE,QAAQ,QAAS,WAAU;AAAA,EAAG;AACtE,QAAM,oBAAoB,CAAC,MAAM;AAAE,QAAI,EAAE,QAAQ,QAAS,YAAW;AAAA,EAAG;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACK,OAAO,EAAE,UAAU;AAAA,MACnB,iBAAgB;AAAA,MAChB,aAAa;AAAA,MAIjB;AAAA,6BAAC,SAAI,WAAU,cACb;AAAA,+BAAC,SAAI,WAAU,oBACb;AAAA,gCAAC,WAAM,WAAU,uBAAsB,sBAAQ;AAAA,YAC/C;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO,kCAAc;AAAA,gBACrB,MAAM,cAAc,eAAe,KAAK,OAAS,eAAe,IAAI,OAAQ,OAAO;AAAA,gBACnF,UAAU;AAAA,gBACV,QAAQ;AAAA,gBACR,WAAW;AAAA,gBACX,aAAa,EAAE,OAAO,IAAI;AAAA;AAAA,YAC5B;AAAA,aACF;AAAA,UACA,qBAAC,SAAI,WAAU,oBACb;AAAA,gCAAC,WAAM,WAAU,uBAAsB,uBAAS;AAAA,YAChD;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO,kCAAc;AAAA,gBACrB,MAAM,cAAc,eAAe,KAAK,OAAS,eAAe,IAAI,OAAQ,OAAO;AAAA,gBACnF,UAAU;AAAA,gBACV,QAAQ;AAAA,gBACR,WAAW;AAAA,gBACX,aAAa,EAAE,OAAO,IAAI;AAAA;AAAA,YAC5B;AAAA,aACF;AAAA,WACF;AAAA,QAGA,qBAAC,SAAI,WAAU,aACb;AAAA,8BAAC,WAAM,WAAU,uBAAsB,kBAAI;AAAA,UAC3C;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,oCAAe;AAAA,cACtB,MAAM;AAAA,cACN,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,WAAW;AAAA,cACX,aAAa,EAAE,OAAO,IAAI;AAAA;AAAA,UAC5B;AAAA,WACF;AAAA,QAGA,qBAAC,SAAI,WAAU,aACb;AAAA,8BAAC,WAAM,WAAU,uBAAuB,YAAE,oBAAoB,GAAE;AAAA,UAChE;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,eAAe;AAAA,cAEf;AAAA,oCAAC,iBACC,8BAAC,eAAY,aAAa,EAAE,0BAA0B,GAAG,GAC3D;AAAA,gBACA,oBAAC,iBACE,iBAAO,QAAQ,4DAA2B,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,MAAM,GAAG,MAAG;AAzS7E,sBAAAA;AA0Sc,6CAAC,cAAsB,OAAO,MAC1B,WAAAA,MAAA,2BAAa,SAAb,OAAAA,MAAqB,QADR,IAEjB;AAAA,iBACD,GACH;AAAA;AAAA;AAAA,UACF;AAAA,WACF;AAAA,QAGA,qBAAC,SAAI,WAAU,sBACb;AAAA,8BAAC,WAAM,WAAU,uBAAuB,YAAE,cAAc,GAAE;AAAA,UAC1D;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAa,EAAE,OAAO,IAAI,MAAM,EAAE,cAAc;AAAA,cAChD,cAAa;AAAA;AAAA,UACf;AAAA,UACC,mBAAmB,wBAAwB,SAAS,KACnD,oBAAC,QAAG,WAAU,mFACX,kCAAwB,IAAI,CAAC,YAAY,QACxC;AAAA,YAAC;AAAA;AAAA,cAEC,WAAU;AAAA,cACV,SAAS,MAAM,+BAA+B,UAAU;AAAA,cAEvD,qBAAW;AAAA;AAAA,YAJP,WAAW,OAAO;AAAA,UAKzB,CACD,GACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["_a"]}

package/dist/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/MapCustomization.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function MapCustomization(): React.JSX.Element;
+//# sourceMappingURL=MapCustomization.d.ts.map

package/dist/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/MapCustomization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapCustomization.d.ts","sourceRoot":"","sources":["../../../../../../../../../../src/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/MapCustomization.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,wBAAgB,gBAAgB,sBAsE/B"}

package/dist/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/MapCustomization.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslations } from "next-intl";
+import { ColorInput } from "../../../../../../../ui/Input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../../../../../ui/Select";
+import { AppConfigContext, MapContext } from "../../../../../../../../store";
+import { TerrainLevel } from "./TerrainLevel";
+import { buildMapStylesCatalog, resolveMapStyle } from "../../../../../utils/mapStyleCatalog";
+import { MapProjection } from "./MapProjection";
+function MapCustomization() {
+  var _a;
+  const tSettings = useTranslations("SettingsTab");
+  const tMap = useTranslations("MapCustomization");
+  const { state: appConfigState } = React.useContext(AppConfigContext);
+  const { dispatch: mapDispatch, state: mapState } = React.useContext(MapContext);
+  const { dimensionsColour, mapStyle: currentMapStyle } = mapState.map;
+  const mapStylesArray = React.useMemo(
+    () => {
+      var _a2;
+      return buildMapStylesCatalog((_a2 = appConfigState.appConfig.organization) == null ? void 0 : _a2.mapStyles);
+    },
+    [(_a = appConfigState.appConfig.organization) == null ? void 0 : _a.mapStyles]
+  );
+  const resolvedMapStyle = React.useMemo(
+    () => resolveMapStyle(currentMapStyle, mapStylesArray),
+    [currentMapStyle, mapStylesArray]
+  );
+  const handleDimensionsColour = (value) => {
+    mapDispatch({ type: "UPDATE_DIMENSIONS_COLOUR", payload: { dimensionsColour: value } });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: tSettings("mapStyle") }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: resolvedMapStyle.url,
+          onValueChange: (value) => {
+            const selectedStyle = mapStylesArray.find((style) => style.url === value);
+            if (selectedStyle) {
+              mapDispatch({ type: "UPDATE_MAP_STYLE", payload: { mapStyle: selectedStyle } });
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: mapStylesArray.map((mapStyle, index) => /* @__PURE__ */ jsx(SelectItem, { value: mapStyle.url, children: mapStyle.name }, index)) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(TerrainLevel, {}),
+    /* @__PURE__ */ jsx(MapProjection, {}),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: tMap("dimensionsColour") }),
+      /* @__PURE__ */ jsx("div", { className: "p-2 border rounded-md bg-white", children: /* @__PURE__ */ jsx(
+        ColorInput,
+        {
+          value: dimensionsColour,
+          onInput: (e) => handleDimensionsColour(e.currentTarget.value),
+          defaultColor: dimensionsColour
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  MapCustomization
+};
+//# sourceMappingURL=MapCustomization.js.map

package/dist/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/MapCustomization.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../src/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/MapCustomization.tsx"],"sourcesContent":["'use client'\r\n\r\nimport * as React from 'react'\r\nimport { useTranslations } from 'next-intl'\r\nimport * as LR from 'lucide-react'\r\nimport { ColorInput } from '../../../../../../../ui/Input'\r\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../../../../ui/Select'\r\nimport { Tabs, TabsList, TabsTrigger } from '../../../../../../../ui/Tabs'\r\nimport { AppConfigContext, MapContext } from '../../../../../../../../store'\r\nimport { TerrainLevel } from './TerrainLevel'\r\nimport { buildMapStylesCatalog, resolveMapStyle } from '../../../../../utils/mapStyleCatalog'\r\nimport { MapProjection } from './MapProjection'\r\n\r\nexport function MapCustomization() {\r\n  // Translation\r\n  const tSettings = useTranslations('SettingsTab')\r\n  const tMap = useTranslations('MapCustomization')\r\n\r\n  // Contexts\r\n  const { state: appConfigState } = React.useContext(AppConfigContext)\r\n  const { dispatch: mapDispatch, state: mapState } = React.useContext(MapContext)\r\n  const { dimensionsColour, mapStyle: currentMapStyle } = mapState.map\r\n\r\n  const mapStylesArray = React.useMemo(\r\n    () => buildMapStylesCatalog(appConfigState.appConfig.organization?.mapStyles),\r\n    [appConfigState.appConfig.organization?.mapStyles],\r\n  )\r\n\r\n  const resolvedMapStyle = React.useMemo(\r\n    () => resolveMapStyle(currentMapStyle, mapStylesArray),\r\n    [currentMapStyle, mapStylesArray],\r\n  )\r\n\r\n  const handleDimensionsColour = (value: string) => {\r\n    mapDispatch({ type: 'UPDATE_DIMENSIONS_COLOUR', payload: { dimensionsColour: value } })\r\n  }\r\n\r\n  return (\r\n    <div className=\"space-y-6\">\r\n      {/* Map Style Selector */}\r\n      <div className=\"space-y-2\">\r\n        <label className=\"text-sm font-medium\">{tSettings('mapStyle')}</label>\r\n        <Select\r\n          value={resolvedMapStyle.url}\r\n          onValueChange={(value: string) => {\r\n            const selectedStyle = mapStylesArray.find(style => style.url === value)\r\n            if (selectedStyle) {\r\n              mapDispatch({ type: 'UPDATE_MAP_STYLE', payload: { mapStyle: selectedStyle } })\r\n            }\r\n          }}\r\n        >\r\n          <SelectTrigger>\r\n            <SelectValue />\r\n          </SelectTrigger>\r\n          <SelectContent>\r\n            {mapStylesArray.map((mapStyle, index) => (\r\n              <SelectItem key={index} value={mapStyle.url}>\r\n                {mapStyle.name}\r\n              </SelectItem>\r\n            ))}\r\n          </SelectContent>\r\n        </Select>\r\n      </div>\r\n\r\n      {/* Terrain */}\r\n      <TerrainLevel />\r\n\r\n      {/* Map Projection */}\r\n      <MapProjection />\r\n\r\n      {/* Dimensions Colour */}\r\n      <div className=\"space-y-2\">\r\n        <label className=\"text-sm font-medium\">{tMap('dimensionsColour')}</label>\r\n        <div className=\"p-2 border rounded-md bg-white\">\r\n          <ColorInput\r\n            value={dimensionsColour}\r\n            onInput={e => handleDimensionsColour(e.currentTarget.value)}\r\n            defaultColor={dimensionsColour}\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n"],"mappings":";AAyCQ,cACA,YADA;AAvCR,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAEhC,SAAS,kBAAkB;AAC3B,SAAS,QAAQ,eAAe,YAAY,eAAe,mBAAmB;AAE9E,SAAS,kBAAkB,kBAAkB;AAC7C,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB,uBAAuB;AACvD,SAAS,qBAAqB;AAEvB,SAAS,mBAAmB;AAbnC;AAeE,QAAM,YAAY,gBAAgB,aAAa;AAC/C,QAAM,OAAO,gBAAgB,kBAAkB;AAG/C,QAAM,EAAE,OAAO,eAAe,IAAI,MAAM,WAAW,gBAAgB;AACnE,QAAM,EAAE,UAAU,aAAa,OAAO,SAAS,IAAI,MAAM,WAAW,UAAU;AAC9E,QAAM,EAAE,kBAAkB,UAAU,gBAAgB,IAAI,SAAS;AAEjE,QAAM,iBAAiB,MAAM;AAAA,IAC3B,MAAG;AAxBP,UAAAA;AAwBU,oCAAsBA,MAAA,eAAe,UAAU,iBAAzB,gBAAAA,IAAuC,SAAS;AAAA;AAAA,IAC5E,EAAC,oBAAe,UAAU,iBAAzB,mBAAuC,SAAS;AAAA,EACnD;AAEA,QAAM,mBAAmB,MAAM;AAAA,IAC7B,MAAM,gBAAgB,iBAAiB,cAAc;AAAA,IACrD,CAAC,iBAAiB,cAAc;AAAA,EAClC;AAEA,QAAM,yBAAyB,CAAC,UAAkB;AAChD,gBAAY,EAAE,MAAM,4BAA4B,SAAS,EAAE,kBAAkB,MAAM,EAAE,CAAC;AAAA,EACxF;AAEA,SACE,qBAAC,SAAI,WAAU,aAEb;AAAA,yBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,WAAM,WAAU,uBAAuB,oBAAU,UAAU,GAAE;AAAA,MAC9D;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,iBAAiB;AAAA,UACxB,eAAe,CAAC,UAAkB;AAChC,kBAAM,gBAAgB,eAAe,KAAK,WAAS,MAAM,QAAQ,KAAK;AACtE,gBAAI,eAAe;AACjB,0BAAY,EAAE,MAAM,oBAAoB,SAAS,EAAE,UAAU,cAAc,EAAE,CAAC;AAAA,YAChF;AAAA,UACF;AAAA,UAEA;AAAA,gCAAC,iBACC,8BAAC,eAAY,GACf;AAAA,YACA,oBAAC,iBACE,yBAAe,IAAI,CAAC,UAAU,UAC7B,oBAAC,cAAuB,OAAO,SAAS,KACrC,mBAAS,QADK,KAEjB,CACD,GACH;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,IAGA,oBAAC,gBAAa;AAAA,IAGd,oBAAC,iBAAc;AAAA,IAGf,qBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,WAAM,WAAU,uBAAuB,eAAK,kBAAkB,GAAE;AAAA,MACjE,oBAAC,SAAI,WAAU,kCACb;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,SAAS,OAAK,uBAAuB,EAAE,cAAc,KAAK;AAAA,UAC1D,cAAc;AAAA;AAAA,MAChB,GACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":["_a"]}

package/dist/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/MapProjection.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function MapProjection(): React.JSX.Element;
+//# sourceMappingURL=MapProjection.d.ts.map

package/dist/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/MapProjection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapProjection.d.ts","sourceRoot":"","sources":["../../../../../../../../../../src/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/MapProjection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,wBAAgB,aAAa,sBAuD5B"}

package/dist/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/MapProjection.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslations } from "next-intl";
+import * as LR from "lucide-react";
+import { Tabs, TabsList, TabsTrigger } from "../../../../../../../ui/Tabs";
+import { MapContext } from "../../../../../../../../store";
+function MapProjection() {
+  const tMap = useTranslations("MapCustomization");
+  const { state: mapState } = React.useContext(MapContext);
+  const { map } = mapState.map;
+  const [mapProjection, setMapProjection] = React.useState("globe");
+  const getCurrentProjection = React.useCallback(() => {
+    var _a;
+    if (!map) return "globe";
+    const projection = map.getProjection();
+    if (typeof projection === "string") {
+      return projection === "globe" ? "globe" : "mercator";
+    }
+    const projectionType = (_a = projection == null ? void 0 : projection.type) != null ? _a : projection == null ? void 0 : projection.name;
+    return projectionType === "globe" ? "globe" : "mercator";
+  }, [map]);
+  React.useEffect(() => {
+    if (!map || !map.loaded()) return;
+    setMapProjection(getCurrentProjection());
+  }, [map, getCurrentProjection]);
+  const handleMapProjection = () => {
+    if (!map) return;
+    const currentProjection = getCurrentProjection();
+    const nextProjection = currentProjection !== "globe" ? "globe" : "mercator";
+    map.setProjection({ type: nextProjection });
+    setMapProjection(nextProjection);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: tMap("mapProjection") }),
+    /* @__PURE__ */ jsx(Tabs, { value: mapProjection, onValueChange: handleMapProjection, variant: "switch", children: /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [
+      /* @__PURE__ */ jsxs(TabsTrigger, { value: "globe", children: [
+        /* @__PURE__ */ jsx(LR.Globe, { className: "w-4 h-4 mr-2" }),
+        tMap("globe")
+      ] }),
+      /* @__PURE__ */ jsxs(TabsTrigger, { value: "mercator", children: [
+        /* @__PURE__ */ jsx(LR.Map, { className: "w-4 h-4 mr-2" }),
+        tMap("mercator")
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  MapProjection
+};
+//# sourceMappingURL=MapProjection.js.map

package/dist/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/MapProjection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../src/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/MapProjection.tsx"],"sourcesContent":["'use client'\r\n\r\nimport * as React from 'react'\r\nimport { useTranslations } from 'next-intl'\r\nimport * as LR from 'lucide-react'\r\nimport { Tabs, TabsList, TabsTrigger } from '../../../../../../../ui/Tabs'\r\nimport { MapContext } from '../../../../../../../../store'\r\n\r\ntype MapProjectionType = 'globe' | 'mercator'\r\n\r\nexport function MapProjection() {\r\n  const tMap = useTranslations('MapCustomization')\r\n  const { state: mapState } = React.useContext(MapContext)\r\n  const { map } = mapState.map\r\n  const [mapProjection, setMapProjection] = React.useState<MapProjectionType>('globe')\r\n\r\n  const getCurrentProjection = React.useCallback((): MapProjectionType => {\r\n    if (!map) return 'globe'\r\n\r\n    const projection = map.getProjection()\r\n\r\n    if (typeof projection === 'string') {\r\n      return projection === 'globe' ? 'globe' : 'mercator'\r\n    }\r\n\r\n    const projectionType =\r\n      (projection as { type?: string; name?: string })?.type ??\r\n      (projection as { type?: string; name?: string })?.name\r\n\r\n    return projectionType === 'globe' ? 'globe' : 'mercator'\r\n  }, [map])\r\n\r\n  React.useEffect(() => {\r\n    if (!map || !map.loaded()) return\r\n\r\n    setMapProjection(getCurrentProjection())\r\n  }, [map, getCurrentProjection])\r\n\r\n  const handleMapProjection = () => {\r\n    if (!map) return\r\n\r\n    const currentProjection = getCurrentProjection()\r\n    const nextProjection = currentProjection !== 'globe' ? 'globe' : 'mercator'\r\n\r\n    map.setProjection({ type: nextProjection })\r\n    setMapProjection(nextProjection)\r\n  }\r\n\r\n  return (\r\n    <div className=\"space-y-2\">\r\n      <label className=\"text-sm font-medium\">{tMap('mapProjection')}</label>\r\n      <Tabs value={mapProjection} onValueChange={handleMapProjection} variant=\"switch\">\r\n        <TabsList className=\"grid w-full grid-cols-2\">\r\n          <TabsTrigger value=\"globe\">\r\n            <LR.Globe className=\"w-4 h-4 mr-2\" />\r\n            {tMap('globe')}\r\n          </TabsTrigger>\r\n          <TabsTrigger value=\"mercator\">\r\n            <LR.Map className=\"w-4 h-4 mr-2\" />\r\n            {tMap('mercator')}\r\n          </TabsTrigger>\r\n        </TabsList>\r\n      </Tabs>\r\n    </div>\r\n  )\r\n}\r\n"],"mappings":";AAkDM,cAGI,YAHJ;AAhDN,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,YAAY,QAAQ;AACpB,SAAS,MAAM,UAAU,mBAAmB;AAC5C,SAAS,kBAAkB;AAIpB,SAAS,gBAAgB;AAC9B,QAAM,OAAO,gBAAgB,kBAAkB;AAC/C,QAAM,EAAE,OAAO,SAAS,IAAI,MAAM,WAAW,UAAU;AACvD,QAAM,EAAE,IAAI,IAAI,SAAS;AACzB,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAA4B,OAAO;AAEnF,QAAM,uBAAuB,MAAM,YAAY,MAAyB;AAhB1E;AAiBI,QAAI,CAAC,IAAK,QAAO;AAEjB,UAAM,aAAa,IAAI,cAAc;AAErC,QAAI,OAAO,eAAe,UAAU;AAClC,aAAO,eAAe,UAAU,UAAU;AAAA,IAC5C;AAEA,UAAM,kBACH,8CAAiD,SAAjD,YACA,yCAAiD;AAEpD,WAAO,mBAAmB,UAAU,UAAU;AAAA,EAChD,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,OAAO,CAAC,IAAI,OAAO,EAAG;AAE3B,qBAAiB,qBAAqB,CAAC;AAAA,EACzC,GAAG,CAAC,KAAK,oBAAoB,CAAC;AAE9B,QAAM,sBAAsB,MAAM;AAChC,QAAI,CAAC,IAAK;AAEV,UAAM,oBAAoB,qBAAqB;AAC/C,UAAM,iBAAiB,sBAAsB,UAAU,UAAU;AAEjE,QAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAC1C,qBAAiB,cAAc;AAAA,EACjC;AAEA,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,WAAM,WAAU,uBAAuB,eAAK,eAAe,GAAE;AAAA,IAC9D,oBAAC,QAAK,OAAO,eAAe,eAAe,qBAAqB,SAAQ,UACtE,+BAAC,YAAS,WAAU,2BAClB;AAAA,2BAAC,eAAY,OAAM,SACjB;AAAA,4BAAC,GAAG,OAAH,EAAS,WAAU,gBAAe;AAAA,QAClC,KAAK,OAAO;AAAA,SACf;AAAA,MACA,qBAAC,eAAY,OAAM,YACjB;AAAA,4BAAC,GAAG,KAAH,EAAO,WAAU,gBAAe;AAAA,QAChC,KAAK,UAAU;AAAA,SAClB;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/TerrainLevel.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function TerrainLevel(): React.JSX.Element;
+//# sourceMappingURL=TerrainLevel.d.ts.map

package/dist/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/TerrainLevel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerrainLevel.d.ts","sourceRoot":"","sources":["../../../../../../../../../../src/core/components/viewers/map/src/MapSidebar/src/SettingsTab/src/TerrainLevel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,wBAAgB,YAAY,sBA6H3B"}