@alfadocs/ui-kit-debug 1.119.0 → 1.120.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_chunks/{address-autocomplete-zLygkxFc.js → address-autocomplete-D2uNpxcE.js} +2 -2
- package/dist/_chunks/{address-autocomplete-zLygkxFc.js.map → address-autocomplete-D2uNpxcE.js.map} +1 -1
- package/dist/_chunks/{address-fields-Dl1ALKhP.js → address-fields-BU65pA-V.js} +2 -2
- package/dist/_chunks/{address-fields-Dl1ALKhP.js.map → address-fields-BU65pA-V.js.map} +1 -1
- package/dist/_chunks/map-view-h6ngp2xi.js +1578 -0
- package/dist/_chunks/map-view-h6ngp2xi.js.map +1 -0
- package/dist/_chunks/maps-core-gate-DKx96CC_.js +1492 -0
- package/dist/_chunks/{maps-core-gate-C4dyo1ic.js.map → maps-core-gate-DKx96CC_.js.map} +1 -1
- package/dist/_chunks/{practice-results-b3uchdBn.js → practice-results-yCresv86.js} +759 -750
- package/dist/_chunks/practice-results-yCresv86.js.map +1 -0
- package/dist/_chunks/{reserved.agent-V2Eqoabh.js → reserved.agent-DRSZ8UcL.js} +2 -2
- package/dist/_chunks/{reserved.agent-V2Eqoabh.js.map → reserved.agent-DRSZ8UcL.js.map} +1 -1
- package/dist/agent-catalog.json +1 -1
- package/dist/browser-support.js +1 -1
- package/dist/components/address-autocomplete/index.js +1 -1
- package/dist/components/address-fields/index.js +1 -1
- package/dist/components/booking/index.js +1 -1
- package/dist/components/map-view/index.js +1 -1
- package/dist/components/map-view/map-view-pin-geometry.d.ts +39 -0
- package/dist/components/map-view/map-view-pin-geometry.d.ts.map +1 -0
- package/dist/components/map-view/map-view-pin.d.ts +15 -0
- package/dist/components/map-view/map-view-pin.d.ts.map +1 -0
- package/dist/components/map-view/map-view.d.ts.map +1 -1
- package/dist/components/practice-results/index.js +1 -1
- package/dist/components/practice-results/practice-results.d.ts +8 -0
- package/dist/components/practice-results/practice-results.d.ts.map +1 -1
- package/dist/core.css +1 -1
- package/dist/index.js +5 -5
- package/dist/tokens.css +1 -1
- package/package.json +4 -1
- package/dist/_chunks/map-view-CHeGd94F.js +0 -1443
- package/dist/_chunks/map-view-CHeGd94F.js.map +0 -1
- package/dist/_chunks/maps-core-gate-C4dyo1ic.js +0 -1571
- package/dist/_chunks/practice-results-b3uchdBn.js.map +0 -1
|
@@ -0,0 +1,1578 @@
|
|
|
1
|
+
import { jsx as d, jsxs as C, Fragment as ht } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as gt, useRef as x, useMemo as A, useId as Ve, useState as N, useEffect as $, useCallback as D, useImperativeHandle as vt, useContext as Oe, useLayoutEffect as je, createContext as bt } from "react";
|
|
3
|
+
import { createPortal as Ge } from "react-dom";
|
|
4
|
+
import { c as J } from "./index-D2ZczOXr.js";
|
|
5
|
+
import { useTranslation as B } from "react-i18next";
|
|
6
|
+
import { M as yt, A as wt, a as kt, b as Mt, u as De, c as W, d as Ze, e as Fe } from "./maps-core-gate-DKx96CC_.js";
|
|
7
|
+
import { B as Ue } from "./button-DohK_Ak_.js";
|
|
8
|
+
import { S as xt } from "./skeleton-tTWJpvAq.js";
|
|
9
|
+
import { V as We } from "./visually-hidden-BHxEUGyT.js";
|
|
10
|
+
import { E as Et } from "./error-boundary-tAn_GuCu.js";
|
|
11
|
+
import { u as _t } from "./registry-DvAUVLHh.js";
|
|
12
|
+
import { l as he } from "./length-token-DwMnGEYT.js";
|
|
13
|
+
import { M as zt } from "./map-pin-BaY37-Km.js";
|
|
14
|
+
import { E as Be } from "./external-link-CY6zAXXU.js";
|
|
15
|
+
const St = {
|
|
16
|
+
id: "map-view",
|
|
17
|
+
// pan → scroll (viewport move); set_zoom → set_value; select_marker → pick
|
|
18
|
+
// (NON-persisting marker focus, no value state slot).
|
|
19
|
+
capabilities: ["scroll", "set_value", "pick"],
|
|
20
|
+
// Every action routes through the imperative bridge, which only exists
|
|
21
|
+
// once the map has loaded: consent granted (the default is
|
|
22
|
+
// `consentGranted={false}`) and Google Maps finished loading. Until then
|
|
23
|
+
// all three actions are silent no-ops. `consentGranted` says whether the
|
|
24
|
+
// gate is passed, and a null `center` after it means the map is still
|
|
25
|
+
// loading. `center` / `zoom` are read off the live
|
|
26
|
+
// map because Google clamps zoom and animates pans, so requested is not
|
|
27
|
+
// applied; `selectedMarkerId` is the only confirmation the host accepted
|
|
28
|
+
// a `select_marker` proposal.
|
|
29
|
+
//
|
|
30
|
+
// A9: marker ids only (`MapMarker.id` is a stable opaque id). Never
|
|
31
|
+
// `MapMarker.label`, never the `address` prop (consumer-supplied free
|
|
32
|
+
// text, PII in any patient-address deployment), never `apiKey`.
|
|
33
|
+
state: {
|
|
34
|
+
consentGranted: {
|
|
35
|
+
type: "boolean",
|
|
36
|
+
descriptionKey: "ui.agent.mapView.state.consentGranted",
|
|
37
|
+
description: "True when the GDPR consent gate has been passed. Read this FIRST: while it is false every action is a silent no-op against a placeholder, and nothing else in the surface says so. When it is true but `center` is still null, Google Maps is loading; wait for `center` before acting.",
|
|
38
|
+
read: (e) => e.isConsentGranted()
|
|
39
|
+
},
|
|
40
|
+
markerCount: {
|
|
41
|
+
type: "number",
|
|
42
|
+
descriptionKey: "ui.agent.mapView.state.markerCount",
|
|
43
|
+
description: "Number of markers the consumer passed. Zero means there is nothing for `select_marker` to select. A count only — no ids, labels or positions.",
|
|
44
|
+
read: (e) => e.getMarkerCount()
|
|
45
|
+
},
|
|
46
|
+
selectedMarkerId: {
|
|
47
|
+
type: "string | null",
|
|
48
|
+
descriptionKey: "ui.agent.mapView.state.selectedMarkerId",
|
|
49
|
+
description: "Id of the marker the host currently holds as selected, or null. Selection is fully controlled by the consumer, so `select_marker` only proposes — this slot is the only way to see whether the proposal was accepted.",
|
|
50
|
+
read: (e) => e.getSelectedMarkerId()
|
|
51
|
+
},
|
|
52
|
+
center: {
|
|
53
|
+
type: "{ lat: number; lng: number } | null",
|
|
54
|
+
descriptionKey: "ui.agent.mapView.state.center",
|
|
55
|
+
description: "Live map centre in lat/lng, or null until the map has loaded (consent not granted, or Google Maps still loading). The read-back for `pan_to`, and the sign that the map is ready.",
|
|
56
|
+
read: (e) => e.getCenter()
|
|
57
|
+
},
|
|
58
|
+
zoom: {
|
|
59
|
+
type: "number | null",
|
|
60
|
+
descriptionKey: "ui.agent.mapView.state.zoom",
|
|
61
|
+
description: "Live zoom level, or null until the map has loaded. Google clamps zoom to the map type's range, so this is not necessarily the value last passed to `set_zoom`.",
|
|
62
|
+
read: (e) => e.getZoom()
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
actions: {
|
|
66
|
+
pan_to: {
|
|
67
|
+
// Ephemeral viewport move, no data loss → read.
|
|
68
|
+
safety: "read",
|
|
69
|
+
argsType: "{ position: { lat: number; lng: number } }",
|
|
70
|
+
argsSchema: {
|
|
71
|
+
type: "object",
|
|
72
|
+
properties: {
|
|
73
|
+
position: {
|
|
74
|
+
type: "object",
|
|
75
|
+
properties: {
|
|
76
|
+
lat: { type: "number", description: "Latitude in degrees." },
|
|
77
|
+
lng: { type: "number", description: "Longitude in degrees." }
|
|
78
|
+
},
|
|
79
|
+
required: ["lat", "lng"]
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
required: ["position"]
|
|
83
|
+
},
|
|
84
|
+
idempotent: !0,
|
|
85
|
+
descriptionKey: "ui.agent.mapView.actions.panTo",
|
|
86
|
+
description: "Pan the map to a new centre without changing zoom. Read the `center` slot back to confirm — Google animates the pan, so the applied centre settles after the call.",
|
|
87
|
+
errors: [
|
|
88
|
+
"Silent no-op until the map has loaded: while `consentGranted` is false (only the consent placeholder shows) or while `center` is still null (Google Maps is loading)."
|
|
89
|
+
],
|
|
90
|
+
invoke: (e, t) => {
|
|
91
|
+
e.panTo(t.position);
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
set_zoom: {
|
|
95
|
+
// Ephemeral viewport zoom, no data loss → read.
|
|
96
|
+
safety: "read",
|
|
97
|
+
argsType: "{ zoom: number }",
|
|
98
|
+
argsSchema: {
|
|
99
|
+
type: "object",
|
|
100
|
+
properties: {
|
|
101
|
+
zoom: {
|
|
102
|
+
type: "number",
|
|
103
|
+
description: "Zoom level, typical range 1–20."
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
required: ["zoom"]
|
|
107
|
+
},
|
|
108
|
+
idempotent: !0,
|
|
109
|
+
descriptionKey: "ui.agent.mapView.actions.setZoom",
|
|
110
|
+
description: "Set the map zoom level (typical range 1–20). Read the `zoom` slot back — Google clamps the request to the map type’s supported range, so requested and applied can differ.",
|
|
111
|
+
errors: [
|
|
112
|
+
"Silent no-op until the map has loaded: while `consentGranted` is false (only the consent placeholder shows) or while `center` is still null (Google Maps is loading).",
|
|
113
|
+
"Requested zoom is clamped to the map type's range; `zoom` reports what was actually applied."
|
|
114
|
+
],
|
|
115
|
+
invoke: (e, t) => {
|
|
116
|
+
e.setZoom(t.zoom);
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
select_marker: {
|
|
120
|
+
// Ephemeral marker focus, no data loss → read.
|
|
121
|
+
safety: "read",
|
|
122
|
+
argsType: "{ id: string | null }",
|
|
123
|
+
argsSchema: {
|
|
124
|
+
type: "object",
|
|
125
|
+
properties: {
|
|
126
|
+
id: {
|
|
127
|
+
type: ["string", "null"],
|
|
128
|
+
description: "Marker id to select, or null to clear the selection."
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
required: ["id"]
|
|
132
|
+
},
|
|
133
|
+
idempotent: !0,
|
|
134
|
+
descriptionKey: "ui.agent.mapView.actions.selectMarker",
|
|
135
|
+
description: "Propose a marker selection by id, or pass null to clear it. Fires the host's `onMarkerClick`; selection is controlled by the host, so read the `selectedMarkerId` slot back to see whether it accepted.",
|
|
136
|
+
errors: [
|
|
137
|
+
"Silent no-op until the map has loaded: while `consentGranted` is false (only the consent placeholder shows) or while `center` is still null (Google Maps is loading).",
|
|
138
|
+
"The host owns `selectedMarkerId` and may ignore the proposal; `selectedMarkerId` is unchanged when it does."
|
|
139
|
+
],
|
|
140
|
+
invoke: (e, t) => {
|
|
141
|
+
e.selectMarker(t.id);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
domHooks: {
|
|
146
|
+
root: {
|
|
147
|
+
attr: "data-component",
|
|
148
|
+
value: "map-view",
|
|
149
|
+
description: "Marks the element as a kit MapView."
|
|
150
|
+
},
|
|
151
|
+
instanceId: {
|
|
152
|
+
attr: "data-component-id",
|
|
153
|
+
sourceProp: "id",
|
|
154
|
+
description: "Sourced from the id prop."
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}, q = 32, X = 40, ie = "M16 38C16 38 2 26 2 16A14 14 0 0 1 30 16C30 26 16 38 16 38Z", Ke = 2, He = 4, qe = "translate(8.25 8.25) scale(0.10473)", Xe = [
|
|
158
|
+
{
|
|
159
|
+
tag: "rect",
|
|
160
|
+
attrs: {
|
|
161
|
+
x: "53.04",
|
|
162
|
+
y: "2.54",
|
|
163
|
+
width: "33.99",
|
|
164
|
+
height: "49.34",
|
|
165
|
+
rx: "4.56",
|
|
166
|
+
ry: "4.56",
|
|
167
|
+
transform: "translate(-4.66 19.05) rotate(-15)"
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
tag: "rect",
|
|
172
|
+
attrs: {
|
|
173
|
+
x: "96.12",
|
|
174
|
+
y: "53.04",
|
|
175
|
+
width: "49.34",
|
|
176
|
+
height: "33.99",
|
|
177
|
+
rx: "4.56",
|
|
178
|
+
ry: "4.56",
|
|
179
|
+
transform: "translate(-14.01 33.65) rotate(-15)"
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
tag: "path",
|
|
184
|
+
attrs: {
|
|
185
|
+
d: "M47.82,59.56c-.65-2.43-3.15-3.87-5.58-3.22L3.38,66.75c-2.43.65-3.87,3.15-3.22,5.58l6.44,24.03c.65,2.43,3.15,3.87,5.58,3.22l38.86-10.41c2.43-.65,3.87-3.15,3.22-5.58l-6.44-24.03Z"
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
tag: "rect",
|
|
190
|
+
attrs: {
|
|
191
|
+
x: "60.97",
|
|
192
|
+
y: "96.12",
|
|
193
|
+
width: "33.99",
|
|
194
|
+
height: "49.34",
|
|
195
|
+
rx: "4.56",
|
|
196
|
+
ry: "4.56",
|
|
197
|
+
transform: "translate(-28.61 24.29) rotate(-15)"
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
], $t = (e) => Object.entries(e).map(([t, n]) => `${t}="${n}"`).join(" ");
|
|
201
|
+
function Lt(e, t, n, r = {
|
|
202
|
+
width: q,
|
|
203
|
+
height: X
|
|
204
|
+
}) {
|
|
205
|
+
const o = Xe.map(
|
|
206
|
+
({ tag: s, attrs: i }) => `<${s} ${$t(i)}/>`
|
|
207
|
+
).join("");
|
|
208
|
+
return `<svg xmlns="http://www.w3.org/2000/svg" width="${r.width}" height="${r.height}" viewBox="0 0 ${q} ${X}"><path d="${ie}" fill="none" stroke="${n}" stroke-width="${He}" stroke-linejoin="round"/><path d="${ie}" fill="${e}" stroke="${t}" stroke-width="${Ke}" stroke-linejoin="round"/><g fill="${t}" transform="${qe}">${o}</g></svg>`;
|
|
209
|
+
}
|
|
210
|
+
const Je = 1.4, Tt = [
|
|
211
|
+
"ds:[gmp-advanced-marker:focus-visible_&]:outline-[length:var(--focus-ring-width)]",
|
|
212
|
+
"ds:[gmp-advanced-marker:focus-visible_&]:outline-solid",
|
|
213
|
+
"ds:[gmp-advanced-marker:focus-visible_&]:outline-[color:var(--map-marker-hover-color)]",
|
|
214
|
+
"ds:[gmp-advanced-marker:focus-visible_&]:outline-offset-[length:var(--focus-ring-offset)]",
|
|
215
|
+
"ds:[gmp-advanced-marker:focus-visible_&]:forced-colors:outline-[CanvasText]"
|
|
216
|
+
].join(" ");
|
|
217
|
+
function Ct({ hovered: e }) {
|
|
218
|
+
const t = e ? Je : 1, n = e ? "ds:fill-[var(--map-marker-hover-color)]" : "ds:fill-[var(--map-marker-color)]";
|
|
219
|
+
return /* @__PURE__ */ d(
|
|
220
|
+
"span",
|
|
221
|
+
{
|
|
222
|
+
"data-component": "map-view-pin",
|
|
223
|
+
className: "ds:flex ds:items-end ds:justify-center ds:[min-inline-size:var(--min-target-size)] ds:[min-block-size:var(--min-target-size)]",
|
|
224
|
+
children: /* @__PURE__ */ C(
|
|
225
|
+
"svg",
|
|
226
|
+
{
|
|
227
|
+
"aria-hidden": "true",
|
|
228
|
+
focusable: "false",
|
|
229
|
+
"data-map-pin": e ? "hovered" : "normal",
|
|
230
|
+
width: q * t,
|
|
231
|
+
height: X * t,
|
|
232
|
+
viewBox: `0 0 ${q} ${X}`,
|
|
233
|
+
className: `ds:block ds:fill-[var(--map-marker-hover-ring)] ds:forced-colors:fill-[Canvas] ${Tt}`,
|
|
234
|
+
children: [
|
|
235
|
+
/* @__PURE__ */ d(
|
|
236
|
+
"path",
|
|
237
|
+
{
|
|
238
|
+
d: ie,
|
|
239
|
+
fill: "none",
|
|
240
|
+
strokeWidth: He,
|
|
241
|
+
strokeLinejoin: "round",
|
|
242
|
+
className: "ds:stroke-[color:var(--map-marker-hover-color)] ds:forced-colors:stroke-[ButtonText]"
|
|
243
|
+
}
|
|
244
|
+
),
|
|
245
|
+
/* @__PURE__ */ d(
|
|
246
|
+
"path",
|
|
247
|
+
{
|
|
248
|
+
d: ie,
|
|
249
|
+
strokeWidth: Ke,
|
|
250
|
+
strokeLinejoin: "round",
|
|
251
|
+
className: `${n} ds:stroke-[color:var(--map-marker-hover-ring)] ds:forced-colors:fill-[ButtonText] ds:forced-colors:stroke-[Canvas]`
|
|
252
|
+
}
|
|
253
|
+
),
|
|
254
|
+
/* @__PURE__ */ d("g", { transform: qe, children: Xe.map(
|
|
255
|
+
({ tag: r, attrs: o }, s) => r === "path" ? /* @__PURE__ */ d("path", { d: o.d }, s) : /* @__PURE__ */ d(
|
|
256
|
+
"rect",
|
|
257
|
+
{
|
|
258
|
+
x: o.x,
|
|
259
|
+
y: o.y,
|
|
260
|
+
width: o.width,
|
|
261
|
+
height: o.height,
|
|
262
|
+
rx: o.rx,
|
|
263
|
+
ry: o.ry,
|
|
264
|
+
transform: o.transform
|
|
265
|
+
},
|
|
266
|
+
s
|
|
267
|
+
)
|
|
268
|
+
) })
|
|
269
|
+
]
|
|
270
|
+
}
|
|
271
|
+
)
|
|
272
|
+
}
|
|
273
|
+
);
|
|
274
|
+
}
|
|
275
|
+
const It = 30, Nt = 56, fe = 17, Pt = 256, At = (e) => e * Math.PI / 180;
|
|
276
|
+
function Rt(e, t, n) {
|
|
277
|
+
const r = Pt * 2 ** n, o = Math.min(Math.max(Math.sin(At(e)), -0.9999), 0.9999), s = Math.log((1 + o) / (1 - o)) / 2;
|
|
278
|
+
return {
|
|
279
|
+
x: (t + 180) / 360 * r,
|
|
280
|
+
y: (0.5 - s / (2 * Math.PI)) * r
|
|
281
|
+
};
|
|
282
|
+
}
|
|
283
|
+
function Vt(e, t) {
|
|
284
|
+
return e === "auto" ? t > It : e && t > 1;
|
|
285
|
+
}
|
|
286
|
+
function Ot(e, t, n = Nt) {
|
|
287
|
+
if (t >= fe || e.length < 2)
|
|
288
|
+
return { singles: [...e], clusters: [] };
|
|
289
|
+
const r = e.map((a) => ({
|
|
290
|
+
marker: a,
|
|
291
|
+
...Rt(a.position.lat, a.position.lng, t)
|
|
292
|
+
})).sort(
|
|
293
|
+
(a, l) => a.x - l.x || a.y - l.y || (a.marker.id < l.marker.id ? -1 : 1)
|
|
294
|
+
), o = [], s = /* @__PURE__ */ new Map(), i = (a) => Math.floor(a / n), m = n * n;
|
|
295
|
+
for (const a of r) {
|
|
296
|
+
const l = i(a.x), f = i(a.y);
|
|
297
|
+
let v = null, c = m;
|
|
298
|
+
for (let p = -1; p <= 1; p += 1)
|
|
299
|
+
for (let y = -1; y <= 1; y += 1)
|
|
300
|
+
for (const b of s.get(`${l + p}:${f + y}`) ?? []) {
|
|
301
|
+
const k = (b.x - a.x) ** 2 + (b.y - a.y) ** 2;
|
|
302
|
+
k <= c && (v = b, c = k);
|
|
303
|
+
}
|
|
304
|
+
if (v) {
|
|
305
|
+
const p = v.members.length, y = `${i(v.x)}:${i(v.y)}`;
|
|
306
|
+
v.x = (v.x * p + a.x) / (p + 1), v.y = (v.y * p + a.y) / (p + 1), v.lat = (v.lat * p + a.marker.position.lat) / (p + 1), v.lng = (v.lng * p + a.marker.position.lng) / (p + 1), v.members.push(a.marker);
|
|
307
|
+
const b = `${i(v.x)}:${i(v.y)}`;
|
|
308
|
+
if (y !== b) {
|
|
309
|
+
const k = s.get(y);
|
|
310
|
+
k && k.splice(k.indexOf(v), 1);
|
|
311
|
+
const T = s.get(b);
|
|
312
|
+
T ? T.push(v) : s.set(b, [v]);
|
|
313
|
+
}
|
|
314
|
+
} else {
|
|
315
|
+
const p = {
|
|
316
|
+
x: a.x,
|
|
317
|
+
y: a.y,
|
|
318
|
+
members: [a.marker],
|
|
319
|
+
lat: a.marker.position.lat,
|
|
320
|
+
lng: a.marker.position.lng
|
|
321
|
+
};
|
|
322
|
+
o.push(p);
|
|
323
|
+
const y = `${l}:${f}`, b = s.get(y);
|
|
324
|
+
b ? b.push(p) : s.set(y, [p]);
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
const h = [], u = [];
|
|
328
|
+
for (const a of o)
|
|
329
|
+
a.members.length === 1 ? h.push(a.members[0]) : u.push({
|
|
330
|
+
id: a.members[0].id,
|
|
331
|
+
position: { lat: a.lat, lng: a.lng },
|
|
332
|
+
members: a.members
|
|
333
|
+
});
|
|
334
|
+
return { singles: h, clusters: u };
|
|
335
|
+
}
|
|
336
|
+
function Ce(e) {
|
|
337
|
+
if (!(e instanceof Element)) return !1;
|
|
338
|
+
try {
|
|
339
|
+
return e.matches(":focus-visible");
|
|
340
|
+
} catch {
|
|
341
|
+
return !0;
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
const jt = J(
|
|
345
|
+
[
|
|
346
|
+
"ds:relative ds:overflow-hidden ds:block",
|
|
347
|
+
"ds:bg-[var(--muted)]",
|
|
348
|
+
// Focus lands on the region when the interactive map replaces its button.
|
|
349
|
+
"ds:focus-visible:outline-solid ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
|
|
350
|
+
].join(" "),
|
|
351
|
+
{
|
|
352
|
+
variants: {
|
|
353
|
+
size: {
|
|
354
|
+
sm: "ds:[--map-block-size:14rem]",
|
|
355
|
+
md: "ds:[--map-block-size:20rem]",
|
|
356
|
+
lg: "ds:[--map-block-size:28rem]",
|
|
357
|
+
// `fill` defers sizing to the parent. The outer takes
|
|
358
|
+
// `block-size: 100%` so the inner (also 100%) has something
|
|
359
|
+
// to inherit from. Use inside a viewport-locked column —
|
|
360
|
+
// `<PracticeResults variant="map-first">` wires this through
|
|
361
|
+
// automatically; standalone consumers must give the parent
|
|
362
|
+
// a constrained block-size or the map collapses to 0.
|
|
363
|
+
fill: "ds:[block-size:100%]"
|
|
364
|
+
},
|
|
365
|
+
surface: {
|
|
366
|
+
bordered: "ds:rounded-[var(--radius-md)] ds:border ds:border-[color:var(--border)]",
|
|
367
|
+
elevated: "ds:rounded-[var(--radius-md)] ds:shadow-[var(--shadow-card)] ds:[:where(&)]:border-[length:var(--surface-border-width,var(--border-width-sm))] ds:border-[color:var(--card-border)]",
|
|
368
|
+
bare: "ds:rounded-none ds:border-0"
|
|
369
|
+
}
|
|
370
|
+
},
|
|
371
|
+
defaultVariants: { size: "md", surface: "bordered" }
|
|
372
|
+
}
|
|
373
|
+
), Gt = J("ds:block ds:w-full", {
|
|
374
|
+
variants: {
|
|
375
|
+
size: {
|
|
376
|
+
sm: "ds:[block-size:var(--map-block-size)]",
|
|
377
|
+
md: "ds:[block-size:var(--map-block-size)]",
|
|
378
|
+
lg: "ds:[block-size:var(--map-block-size)]",
|
|
379
|
+
fill: "ds:[block-size:100%]"
|
|
380
|
+
}
|
|
381
|
+
},
|
|
382
|
+
defaultVariants: { size: "md" }
|
|
383
|
+
}), Dt = J(
|
|
384
|
+
[
|
|
385
|
+
"ds:absolute ds:inset-0",
|
|
386
|
+
"ds:flex ds:flex-col ds:items-center ds:justify-center",
|
|
387
|
+
"ds:gap-[var(--spacing-sm)]",
|
|
388
|
+
"ds:p-[var(--spacing-md)]",
|
|
389
|
+
"ds:bg-[var(--muted)] ds:text-[var(--foreground)]",
|
|
390
|
+
"ds:text-center"
|
|
391
|
+
].join(" ")
|
|
392
|
+
), Zt = J("type-heading-3 ds:m-0"), Ie = J(
|
|
393
|
+
"type-body-sm ds:text-[var(--muted-foreground)] ds:[max-inline-size:28rem] ds:m-0"
|
|
394
|
+
);
|
|
395
|
+
function Ft({
|
|
396
|
+
onHandleReady: e,
|
|
397
|
+
onMarkerSelect: t,
|
|
398
|
+
onCameraMove: n
|
|
399
|
+
}) {
|
|
400
|
+
const r = W();
|
|
401
|
+
return $(() => {
|
|
402
|
+
if (r)
|
|
403
|
+
return e({
|
|
404
|
+
panTo: (o) => {
|
|
405
|
+
n(), r.panTo(o);
|
|
406
|
+
},
|
|
407
|
+
setZoom: (o) => {
|
|
408
|
+
n(), r.setZoom(o);
|
|
409
|
+
},
|
|
410
|
+
jumpTo: (o, s) => {
|
|
411
|
+
n(), r.moveCamera({ center: o, zoom: s });
|
|
412
|
+
},
|
|
413
|
+
selectMarker: (o) => t(o),
|
|
414
|
+
// Read straight off the live map: Google clamps `setZoom` to the
|
|
415
|
+
// map type's range and animates `panTo`, so requested and applied
|
|
416
|
+
// are not the same value.
|
|
417
|
+
getCenter: () => {
|
|
418
|
+
var o;
|
|
419
|
+
return ((o = r.getCenter()) == null ? void 0 : o.toJSON()) ?? null;
|
|
420
|
+
},
|
|
421
|
+
getZoom: () => r.getZoom() ?? null
|
|
422
|
+
}), () => e(null);
|
|
423
|
+
}, [r, e, t, n]), null;
|
|
424
|
+
}
|
|
425
|
+
function Ut({
|
|
426
|
+
onBoundsChange: e,
|
|
427
|
+
userInteraction: t
|
|
428
|
+
}) {
|
|
429
|
+
const n = W(), r = x(e);
|
|
430
|
+
return r.current = e, $(() => {
|
|
431
|
+
if (!n) return;
|
|
432
|
+
const o = n.getDiv();
|
|
433
|
+
let s = null;
|
|
434
|
+
const i = () => {
|
|
435
|
+
t.current = {
|
|
436
|
+
pendingInput: !1,
|
|
437
|
+
moved: !1,
|
|
438
|
+
programmatic: !1
|
|
439
|
+
};
|
|
440
|
+
};
|
|
441
|
+
i();
|
|
442
|
+
let m;
|
|
443
|
+
const h = /* @__PURE__ */ new Set(), u = (c) => {
|
|
444
|
+
if (c instanceof PointerEvent && c.pointerType === "touch" && (c.type === "pointerdown" && h.add(c.pointerId), c.type === "pointerup" || c.type === "pointercancel")) {
|
|
445
|
+
h.delete(c.pointerId);
|
|
446
|
+
return;
|
|
447
|
+
}
|
|
448
|
+
if (c instanceof PointerEvent && c.type === "pointermove" && c.buttons === 0 && c.pointerType !== "touch" || c instanceof KeyboardEvent && ![
|
|
449
|
+
"ArrowUp",
|
|
450
|
+
"ArrowDown",
|
|
451
|
+
"ArrowLeft",
|
|
452
|
+
"ArrowRight",
|
|
453
|
+
"+",
|
|
454
|
+
"=",
|
|
455
|
+
"-",
|
|
456
|
+
"_",
|
|
457
|
+
"Enter",
|
|
458
|
+
" ",
|
|
459
|
+
"PageUp",
|
|
460
|
+
"PageDown"
|
|
461
|
+
].includes(c.key))
|
|
462
|
+
return;
|
|
463
|
+
const p = document.fullscreenElement, y = !!(p && (p.contains(o) || o.contains(p)));
|
|
464
|
+
let b = c.type === "dblclick";
|
|
465
|
+
c instanceof PointerEvent && c.type === "pointermove" && (b = c.pointerType !== "touch" || h.size >= 2 || y), c.type === "touchmove" && (b = c.touches.length >= 2 || y), c instanceof KeyboardEvent && (b = c.key !== "Enter" && c.key !== " "), c instanceof WheelEvent && (b = c.ctrlKey || c.metaKey || y), c.type === "click" && (b = c.target instanceof Element && c.target.closest('button, [role="button"]') != null), b && (t.current.programmatic = !1), t.current.pendingInput = !0, clearTimeout(m), m = setTimeout(() => {
|
|
466
|
+
t.current.pendingInput = !1;
|
|
467
|
+
}, 250);
|
|
468
|
+
}, a = () => {
|
|
469
|
+
t.current.pendingInput && !t.current.programmatic && (t.current.moved = !0);
|
|
470
|
+
}, l = () => {
|
|
471
|
+
var R, j;
|
|
472
|
+
const c = (R = n.getBounds()) == null ? void 0 : R.toJSON(), p = (j = n.getCenter()) == null ? void 0 : j.toJSON(), y = n.getZoom(), b = t.current.moved;
|
|
473
|
+
if (i(), clearTimeout(m), !c || !p || y == null) return;
|
|
474
|
+
const k = !s || Object.keys(c).some(
|
|
475
|
+
(G) => c[G] !== s.bounds[G]
|
|
476
|
+
), T = s != null && (y !== s.zoom || p.lat !== s.center.lat || p.lng !== s.center.lng);
|
|
477
|
+
s = { bounds: c, center: p, zoom: y }, k && r.current(c, { userInteraction: b && T });
|
|
478
|
+
}, f = [
|
|
479
|
+
"pointerdown",
|
|
480
|
+
"pointermove",
|
|
481
|
+
"pointerup",
|
|
482
|
+
"pointercancel",
|
|
483
|
+
"touchstart",
|
|
484
|
+
"touchmove",
|
|
485
|
+
"click",
|
|
486
|
+
"dblclick",
|
|
487
|
+
"wheel",
|
|
488
|
+
"keydown"
|
|
489
|
+
];
|
|
490
|
+
f.forEach(
|
|
491
|
+
(c) => o.addEventListener(c, u, { capture: !0, passive: !0 })
|
|
492
|
+
);
|
|
493
|
+
const v = [
|
|
494
|
+
n.addListener("dragstart", () => {
|
|
495
|
+
t.current.programmatic = !1, t.current.moved = !0;
|
|
496
|
+
}),
|
|
497
|
+
n.addListener("center_changed", a),
|
|
498
|
+
n.addListener("zoom_changed", a),
|
|
499
|
+
n.addListener("idle", l)
|
|
500
|
+
];
|
|
501
|
+
return l(), () => {
|
|
502
|
+
v.forEach((c) => c.remove()), f.forEach(
|
|
503
|
+
(c) => o.removeEventListener(c, u, !0)
|
|
504
|
+
), clearTimeout(m), i();
|
|
505
|
+
};
|
|
506
|
+
}, [n, t]), null;
|
|
507
|
+
}
|
|
508
|
+
function Wt(e, t) {
|
|
509
|
+
const n = W(), [r, o] = N(null), { lat: s, lng: i } = t;
|
|
510
|
+
return $(() => {
|
|
511
|
+
if (!n || typeof n.getCenter != "function") return;
|
|
512
|
+
const m = () => {
|
|
513
|
+
var p, y;
|
|
514
|
+
const u = (p = n.getCenter()) == null ? void 0 : p.toJSON(), a = n.getZoom(), l = (y = n.getDiv) == null ? void 0 : y.call(n);
|
|
515
|
+
if (!u || a == null || !l) {
|
|
516
|
+
o(null);
|
|
517
|
+
return;
|
|
518
|
+
}
|
|
519
|
+
const f = l.clientWidth, v = l.clientHeight, c = Ye * 2 ** a;
|
|
520
|
+
o({
|
|
521
|
+
id: e,
|
|
522
|
+
width: f,
|
|
523
|
+
height: v,
|
|
524
|
+
x: f / 2 + (i - u.lng) / 360 * c,
|
|
525
|
+
y: v / 2 - (ae(s) - ae(u.lat)) * c / (2 * Math.PI)
|
|
526
|
+
});
|
|
527
|
+
};
|
|
528
|
+
m();
|
|
529
|
+
const h = ["bounds_changed", "zoom_changed", "center_changed", "idle"].flatMap(
|
|
530
|
+
(u) => typeof n.addListener == "function" ? [n.addListener(u, m)] : []
|
|
531
|
+
);
|
|
532
|
+
return () => h.forEach((u) => u.remove());
|
|
533
|
+
}, [n, e, s, i]), (r == null ? void 0 : r.id) === e ? r : null;
|
|
534
|
+
}
|
|
535
|
+
function Bt({
|
|
536
|
+
marker: e,
|
|
537
|
+
frame: t,
|
|
538
|
+
direction: n,
|
|
539
|
+
children: r
|
|
540
|
+
}) {
|
|
541
|
+
const o = Wt(e.id, e.position);
|
|
542
|
+
return !o || !t ? null : Ge(
|
|
543
|
+
/* @__PURE__ */ d(qt, { anchor: o, direction: n, children: r }),
|
|
544
|
+
t
|
|
545
|
+
);
|
|
546
|
+
}
|
|
547
|
+
const Kt = 52, Ht = 12, oe = 8;
|
|
548
|
+
function qt({
|
|
549
|
+
anchor: e,
|
|
550
|
+
children: t,
|
|
551
|
+
direction: n
|
|
552
|
+
}) {
|
|
553
|
+
const r = x(null), [o, s] = N(
|
|
554
|
+
null
|
|
555
|
+
);
|
|
556
|
+
if (je(() => {
|
|
557
|
+
const c = r.current;
|
|
558
|
+
c && s(
|
|
559
|
+
(p) => (p == null ? void 0 : p.width) === c.offsetWidth && p.height === c.offsetHeight ? p : { width: c.offsetWidth, height: c.offsetHeight }
|
|
560
|
+
);
|
|
561
|
+
}, [t, e.id]), !(e.x >= 0 && e.x <= e.width && e.y >= 0 && e.y <= e.height)) return null;
|
|
562
|
+
const m = (o == null ? void 0 : o.width) ?? 0, h = (o == null ? void 0 : o.height) ?? 0, u = Math.max(oe, e.width - m - oe), a = Math.min(Math.max(e.x - m / 2, oe), u), l = e.y - Kt - h, f = l < oe, v = f ? e.y + Ht : l;
|
|
563
|
+
return (
|
|
564
|
+
// The layer is `ltr` because the map is geographic: x is always measured
|
|
565
|
+
// from the physical left. The card inside takes the page direction.
|
|
566
|
+
/* @__PURE__ */ d(
|
|
567
|
+
"div",
|
|
568
|
+
{
|
|
569
|
+
dir: "ltr",
|
|
570
|
+
"aria-hidden": "true",
|
|
571
|
+
"data-component": "map-view-marker-card-layer",
|
|
572
|
+
className: "ds:pointer-events-none ds:absolute ds:inset-0 ds:overflow-hidden",
|
|
573
|
+
children: /* @__PURE__ */ d(
|
|
574
|
+
"div",
|
|
575
|
+
{
|
|
576
|
+
ref: r,
|
|
577
|
+
"data-component": "map-view-marker-card",
|
|
578
|
+
"data-marker-id": e.id,
|
|
579
|
+
"data-placement": f ? "below" : "above",
|
|
580
|
+
style: {
|
|
581
|
+
"--marker-card-x": `${a}px`,
|
|
582
|
+
"--marker-card-y": `${v}px`
|
|
583
|
+
},
|
|
584
|
+
"data-measured": o ? "true" : "false",
|
|
585
|
+
className: "ds:absolute ds:[inset-inline-start:var(--marker-card-x)] ds:[inset-block-start:var(--marker-card-y)] ds:[inline-size:max-content] ds:[max-inline-size:calc(100%-var(--spacing-md))] ds:data-[measured=false]:invisible",
|
|
586
|
+
children: /* @__PURE__ */ d("div", { dir: n, children: t })
|
|
587
|
+
}
|
|
588
|
+
)
|
|
589
|
+
}
|
|
590
|
+
)
|
|
591
|
+
);
|
|
592
|
+
}
|
|
593
|
+
function re(e) {
|
|
594
|
+
if (!e) return null;
|
|
595
|
+
if (e instanceof HTMLElement) return e;
|
|
596
|
+
const t = e.element;
|
|
597
|
+
return t instanceof HTMLElement ? t : null;
|
|
598
|
+
}
|
|
599
|
+
function Xt({
|
|
600
|
+
marker: e,
|
|
601
|
+
label: t,
|
|
602
|
+
isSelected: n,
|
|
603
|
+
isHovered: r,
|
|
604
|
+
onSelect: o,
|
|
605
|
+
onHover: s,
|
|
606
|
+
elements: i
|
|
607
|
+
}) {
|
|
608
|
+
const [m, h] = N(null), { id: u } = e, a = x(!1);
|
|
609
|
+
return $(() => {
|
|
610
|
+
const l = re(m);
|
|
611
|
+
if (l && (l.style.outline = "none"), !l || !i) return;
|
|
612
|
+
const f = i.current;
|
|
613
|
+
return f.set(`pin:${e.id}`, l), () => {
|
|
614
|
+
f.delete(`pin:${e.id}`);
|
|
615
|
+
};
|
|
616
|
+
}, [m, i, e.id]), $(() => {
|
|
617
|
+
const l = re(m);
|
|
618
|
+
if (!l || !s) return;
|
|
619
|
+
const f = (p) => {
|
|
620
|
+
Ce(p.target) && s(u, !0, "focus");
|
|
621
|
+
}, v = (p) => {
|
|
622
|
+
l.contains(p.relatedTarget) || a.current || s(u, !1, "focus");
|
|
623
|
+
}, c = (p) => {
|
|
624
|
+
p.key === "Escape" && s(u, !1, "focus");
|
|
625
|
+
};
|
|
626
|
+
return l.addEventListener("focusin", f), l.addEventListener("focusout", v), l.addEventListener("keydown", c), () => {
|
|
627
|
+
l.removeEventListener("focusin", f), l.removeEventListener("focusout", v), l.removeEventListener("keydown", c);
|
|
628
|
+
};
|
|
629
|
+
}, [m, u, s]), /* @__PURE__ */ d(
|
|
630
|
+
Ze,
|
|
631
|
+
{
|
|
632
|
+
ref: h,
|
|
633
|
+
position: e.position,
|
|
634
|
+
title: t,
|
|
635
|
+
"aria-label": t,
|
|
636
|
+
"data-selected": n ? "true" : "false",
|
|
637
|
+
"data-hovered": r ? "true" : "false",
|
|
638
|
+
zIndex: r ? 1e3 : n ? 500 : void 0,
|
|
639
|
+
onClick: () => o(u),
|
|
640
|
+
onMouseEnter: s ? () => {
|
|
641
|
+
a.current = !0, s(u, !0, "pointer");
|
|
642
|
+
} : void 0,
|
|
643
|
+
onMouseLeave: s ? () => {
|
|
644
|
+
a.current = !1;
|
|
645
|
+
const l = re(m), f = document.activeElement;
|
|
646
|
+
l && f && l.contains(f) && Ce(f) || s(u, !1, "pointer");
|
|
647
|
+
} : void 0,
|
|
648
|
+
children: /* @__PURE__ */ d(Ct, { hovered: r })
|
|
649
|
+
}
|
|
650
|
+
);
|
|
651
|
+
}
|
|
652
|
+
const Ye = 256, Jt = (e) => e * Math.PI / 180;
|
|
653
|
+
function ae(e) {
|
|
654
|
+
const t = Math.min(Math.max(Math.sin(Jt(e)), -0.9999), 0.9999);
|
|
655
|
+
return Math.log((1 + t) / (1 - t)) / 2;
|
|
656
|
+
}
|
|
657
|
+
const Yt = (e) => Math.atan(Math.sinh(e)) * 180 / Math.PI;
|
|
658
|
+
function Qt(e) {
|
|
659
|
+
let t = -90, n = 90, r = -180, o = 180;
|
|
660
|
+
for (const { lat: s, lng: i } of e)
|
|
661
|
+
t = Math.max(t, s), n = Math.min(n, s), r = Math.max(r, i), o = Math.min(o, i);
|
|
662
|
+
return { north: t, south: n, east: r, west: o };
|
|
663
|
+
}
|
|
664
|
+
function Qe(e, t, n, r, o) {
|
|
665
|
+
const { north: s, south: i, east: m, west: h } = Qt(e);
|
|
666
|
+
if (s === i && m === h)
|
|
667
|
+
return { center: { lat: s, lng: m }, zoom: o };
|
|
668
|
+
const u = ae(s), a = ae(i), l = {
|
|
669
|
+
lat: Yt((u + a) / 2),
|
|
670
|
+
lng: (m + h) / 2
|
|
671
|
+
}, f = (c, p) => p > 0 ? Math.log2(Math.max(c, 1) / Ye / p) : o, v = Math.min(
|
|
672
|
+
f(t - 2 * r, (m - h) / 360),
|
|
673
|
+
f(n - 2 * r, (u - a) / (2 * Math.PI)),
|
|
674
|
+
o
|
|
675
|
+
);
|
|
676
|
+
return { center: l, zoom: Math.max(0, Math.floor(v)) };
|
|
677
|
+
}
|
|
678
|
+
const et = ({ id: e, lat: t, lng: n }) => e != null ? `id:${e}` : `at:${t},${n}`;
|
|
679
|
+
function en({
|
|
680
|
+
points: e,
|
|
681
|
+
fitKey: t,
|
|
682
|
+
maxZoom: n,
|
|
683
|
+
onCameraMove: r
|
|
684
|
+
}) {
|
|
685
|
+
const o = W(), s = x(null), i = x(!1), m = x(null);
|
|
686
|
+
return $(() => {
|
|
687
|
+
if (!o) return;
|
|
688
|
+
const h = () => {
|
|
689
|
+
var c;
|
|
690
|
+
const a = m.current, l = (c = o.getCenter()) == null ? void 0 : c.toJSON(), f = o.getZoom();
|
|
691
|
+
a != null && f === a.zoom && l != null && Math.abs(l.lat - a.center.lat) < 1e-6 && Math.abs(l.lng - a.center.lng) < 1e-6 || (i.current = !0);
|
|
692
|
+
}, u = [
|
|
693
|
+
o.addListener("dragstart", () => {
|
|
694
|
+
i.current = !0;
|
|
695
|
+
}),
|
|
696
|
+
o.addListener("center_changed", h),
|
|
697
|
+
o.addListener("zoom_changed", h)
|
|
698
|
+
];
|
|
699
|
+
return () => u.forEach((a) => a.remove());
|
|
700
|
+
}, [o]), $(() => {
|
|
701
|
+
var y;
|
|
702
|
+
if (!o) return;
|
|
703
|
+
const h = ((y = s.current) == null ? void 0 : y.map) === o ? s.current : null;
|
|
704
|
+
if ((h == null ? void 0 : h.key) === t) return;
|
|
705
|
+
const u = new Set(e.map(et)), a = (b, k) => {
|
|
706
|
+
m.current = { center: b, zoom: k }, r(), o.moveCamera({ center: b, zoom: k }), i.current = !1;
|
|
707
|
+
};
|
|
708
|
+
if (e.length === 0) {
|
|
709
|
+
s.current = { map: o, key: t, points: u };
|
|
710
|
+
return;
|
|
711
|
+
}
|
|
712
|
+
if (h != null && h.points.size > 0 && [...h.points].every((b) => u.has(b)) && i.current) {
|
|
713
|
+
s.current = { map: o, key: t, points: u };
|
|
714
|
+
return;
|
|
715
|
+
}
|
|
716
|
+
const f = o.getDiv();
|
|
717
|
+
if (!(f instanceof Element)) return;
|
|
718
|
+
const v = () => {
|
|
719
|
+
s.current = { map: o, key: t, points: u };
|
|
720
|
+
const b = Math.min(
|
|
721
|
+
he("--spacing-2xl", f, 48),
|
|
722
|
+
f.clientWidth / 4,
|
|
723
|
+
f.clientHeight / 4
|
|
724
|
+
), { center: k, zoom: T } = Qe(
|
|
725
|
+
e,
|
|
726
|
+
f.clientWidth,
|
|
727
|
+
f.clientHeight,
|
|
728
|
+
b,
|
|
729
|
+
n
|
|
730
|
+
);
|
|
731
|
+
a(k, T);
|
|
732
|
+
}, c = () => f.clientWidth > 0 && f.clientHeight > 0;
|
|
733
|
+
if (c() || typeof ResizeObserver > "u") {
|
|
734
|
+
v();
|
|
735
|
+
return;
|
|
736
|
+
}
|
|
737
|
+
const p = new ResizeObserver(() => {
|
|
738
|
+
c() && (p.disconnect(), v());
|
|
739
|
+
});
|
|
740
|
+
return p.observe(f), () => p.disconnect();
|
|
741
|
+
}, [o, t, e, n, r]), null;
|
|
742
|
+
}
|
|
743
|
+
const Ne = 10;
|
|
744
|
+
function tn(e) {
|
|
745
|
+
const t = W(), [n, r] = N(e);
|
|
746
|
+
return $(() => {
|
|
747
|
+
if (!t || typeof t.addListener != "function" || typeof t.getZoom != "function")
|
|
748
|
+
return;
|
|
749
|
+
const o = () => {
|
|
750
|
+
const i = t.getZoom();
|
|
751
|
+
i != null && r(Math.round(i * 4) / 4);
|
|
752
|
+
};
|
|
753
|
+
o();
|
|
754
|
+
const s = ["zoom_changed", "idle"].map(
|
|
755
|
+
(i) => t.addListener(i, o)
|
|
756
|
+
);
|
|
757
|
+
return () => s.forEach((i) => i.remove());
|
|
758
|
+
}, [t]), n;
|
|
759
|
+
}
|
|
760
|
+
const nn = [
|
|
761
|
+
"ds:inline-flex ds:items-center ds:justify-center",
|
|
762
|
+
// 44 px, 48 px in the accessible themes, with room for a long count.
|
|
763
|
+
"ds:[min-inline-size:var(--min-target-size)] ds:[min-block-size:var(--min-target-size)]",
|
|
764
|
+
"ds:px-[var(--spacing-xs)] ds:rounded-full",
|
|
765
|
+
"ds:border-2 ds:border-solid ds:border-[color:var(--map-marker-hover-ring)]",
|
|
766
|
+
// The theme-stable map marker colour, as the pins (see KitAdvancedMarker).
|
|
767
|
+
"ds:bg-[var(--map-marker-color)] ds:text-[var(--map-marker-hover-ring)]",
|
|
768
|
+
// A 1 px ink edge outside the white ring: the ring separates the marker on
|
|
769
|
+
// dark tiles, the edge carries 3:1 on light ones (WCAG 1.4.11).
|
|
770
|
+
"ds:shadow-[0_0_0_1px_var(--map-marker-hover-color),var(--shadow-md)] ds:tabular-nums ds:select-none type-label",
|
|
771
|
+
"ds:forced-colors:border-[ButtonText]",
|
|
772
|
+
// Google's marker element takes the focus; the ring is drawn on the badge,
|
|
773
|
+
// and the element's own outline is removed (see KitClusterMarker). The ring
|
|
774
|
+
// is the theme-stable deep ink, not `--ring`, which is light in the dark
|
|
775
|
+
// themes: the tiles do not follow the kit theme. `--focus-ring-width` is
|
|
776
|
+
// thicker in the accessible themes.
|
|
777
|
+
"ds:[gmp-advanced-marker:focus-visible_&]:outline-[length:var(--focus-ring-width)] ds:[gmp-advanced-marker:focus-visible_&]:outline-solid ds:[gmp-advanced-marker:focus-visible_&]:outline-[color:var(--map-marker-hover-color)] ds:[gmp-advanced-marker:focus-visible_&]:outline-offset-[length:var(--focus-ring-offset)]",
|
|
778
|
+
"ds:[gmp-advanced-marker:focus-visible_&]:forced-colors:outline-[CanvasText]"
|
|
779
|
+
].join(" ");
|
|
780
|
+
function on({ count: e }) {
|
|
781
|
+
return /* @__PURE__ */ d(
|
|
782
|
+
"span",
|
|
783
|
+
{
|
|
784
|
+
"aria-hidden": "true",
|
|
785
|
+
"data-component": "map-view-cluster",
|
|
786
|
+
"data-count": e,
|
|
787
|
+
className: nn,
|
|
788
|
+
children: e
|
|
789
|
+
}
|
|
790
|
+
);
|
|
791
|
+
}
|
|
792
|
+
function se(e, t) {
|
|
793
|
+
const n = document.createElement("span");
|
|
794
|
+
n.style.color = `var(${e})`, n.style.display = "none", (t.isConnected ? t : document.documentElement).append(n);
|
|
795
|
+
const r = getComputedStyle(n).color;
|
|
796
|
+
return n.remove(), r || "currentColor";
|
|
797
|
+
}
|
|
798
|
+
function sn(e) {
|
|
799
|
+
const t = W(), [n, r] = N(null);
|
|
800
|
+
return $(() => {
|
|
801
|
+
var a;
|
|
802
|
+
if (!e || !t) return;
|
|
803
|
+
const o = (a = t.getDiv) == null ? void 0 : a.call(t), s = o instanceof Element ? o : document.documentElement, i = () => {
|
|
804
|
+
const l = {
|
|
805
|
+
fill: se("--map-marker-color", s),
|
|
806
|
+
ink: se("--map-marker-hover-ring", s),
|
|
807
|
+
ring: se("--map-marker-hover-ring", s),
|
|
808
|
+
hover: se("--map-marker-hover-color", s),
|
|
809
|
+
target: he("--min-target-size", s, 44)
|
|
810
|
+
};
|
|
811
|
+
r(
|
|
812
|
+
(f) => f && f.fill === l.fill && f.ink === l.ink && f.ring === l.ring && f.hover === l.hover && f.target === l.target ? f : l
|
|
813
|
+
);
|
|
814
|
+
};
|
|
815
|
+
i();
|
|
816
|
+
const m = new MutationObserver(i), h = {
|
|
817
|
+
attributes: !0,
|
|
818
|
+
attributeFilter: ["class", "data-theme"]
|
|
819
|
+
};
|
|
820
|
+
m.observe(document.documentElement, h);
|
|
821
|
+
const u = s.closest('[data-component="theme-root"]');
|
|
822
|
+
return u && m.observe(u, h), () => m.disconnect();
|
|
823
|
+
}, [t, e]), n;
|
|
824
|
+
}
|
|
825
|
+
function rn(e, { fill: t, ink: n, ring: r, hover: o, target: s }) {
|
|
826
|
+
var l;
|
|
827
|
+
const i = Math.max(s, 20 + String(e).length * 12), m = `x="2" y="2" width="${i - 4}" height="${s - 4}" rx="${s / 2}"`, h = `<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${s}"><rect ${m} fill="none" stroke="${o}" stroke-width="4"/><rect ${m} fill="${t}" stroke="${r}" stroke-width="2"/></svg>`, u = (l = globalThis.google) == null ? void 0 : l.maps;
|
|
828
|
+
return {
|
|
829
|
+
icon: {
|
|
830
|
+
url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(h)}`,
|
|
831
|
+
scaledSize: u ? new u.Size(i, s) : void 0,
|
|
832
|
+
anchor: u ? new u.Point(i / 2, s / 2) : void 0
|
|
833
|
+
},
|
|
834
|
+
label: { text: String(e), color: n, fontWeight: "600" }
|
|
835
|
+
};
|
|
836
|
+
}
|
|
837
|
+
const ge = bt(null);
|
|
838
|
+
function an({
|
|
839
|
+
enabled: e,
|
|
840
|
+
children: t
|
|
841
|
+
}) {
|
|
842
|
+
const n = sn(e);
|
|
843
|
+
return /* @__PURE__ */ d(ge.Provider, { value: n, children: t });
|
|
844
|
+
}
|
|
845
|
+
function cn({ fill: e, ring: t, hover: n }, r) {
|
|
846
|
+
var u;
|
|
847
|
+
const o = r ? Je : 1, s = q * o, i = X * o, m = Lt(r ? n : e, t, n, { width: s, height: i }), h = (u = globalThis.google) == null ? void 0 : u.maps;
|
|
848
|
+
return {
|
|
849
|
+
url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(m)}`,
|
|
850
|
+
scaledSize: h ? new h.Size(s, i) : void 0,
|
|
851
|
+
anchor: h ? new h.Point(s / 2, i) : void 0
|
|
852
|
+
};
|
|
853
|
+
}
|
|
854
|
+
function ln({
|
|
855
|
+
marker: e,
|
|
856
|
+
label: t,
|
|
857
|
+
isSelected: n,
|
|
858
|
+
isHovered: r,
|
|
859
|
+
onSelect: o,
|
|
860
|
+
onHover: s
|
|
861
|
+
}) {
|
|
862
|
+
const i = Oe(ge), m = A(
|
|
863
|
+
() => i ? cn(i, r) : void 0,
|
|
864
|
+
[i, r]
|
|
865
|
+
);
|
|
866
|
+
return m ? /* @__PURE__ */ d(
|
|
867
|
+
Fe,
|
|
868
|
+
{
|
|
869
|
+
position: e.position,
|
|
870
|
+
title: t,
|
|
871
|
+
icon: m,
|
|
872
|
+
zIndex: r ? 1e3 : n ? 500 : void 0,
|
|
873
|
+
onClick: () => o(e.id),
|
|
874
|
+
onMouseOver: s ? () => s(e.id, !0, "pointer") : void 0,
|
|
875
|
+
onMouseOut: s ? () => s(e.id, !1, "pointer") : void 0
|
|
876
|
+
}
|
|
877
|
+
) : null;
|
|
878
|
+
}
|
|
879
|
+
function dn({
|
|
880
|
+
cluster: e,
|
|
881
|
+
label: t,
|
|
882
|
+
mapId: n,
|
|
883
|
+
iconTheme: r,
|
|
884
|
+
elements: o,
|
|
885
|
+
onActivate: s
|
|
886
|
+
}) {
|
|
887
|
+
const [i, m] = N(null), h = `cluster:${e.id}`;
|
|
888
|
+
$(() => {
|
|
889
|
+
const l = re(i);
|
|
890
|
+
if (!l) return;
|
|
891
|
+
const f = o.current;
|
|
892
|
+
return f.set(h, l), l.style.outline = "none", () => {
|
|
893
|
+
f.delete(h);
|
|
894
|
+
};
|
|
895
|
+
}, [i, o, h]);
|
|
896
|
+
const u = e.members.length, a = A(
|
|
897
|
+
() => n || !r ? null : rn(u, r),
|
|
898
|
+
[n, u, r]
|
|
899
|
+
);
|
|
900
|
+
return n ? /* @__PURE__ */ d(
|
|
901
|
+
Ze,
|
|
902
|
+
{
|
|
903
|
+
ref: m,
|
|
904
|
+
position: e.position,
|
|
905
|
+
title: t,
|
|
906
|
+
"aria-label": t,
|
|
907
|
+
zIndex: Ne,
|
|
908
|
+
anchorPoint: ["50%", "50%"],
|
|
909
|
+
onClick: () => s(e),
|
|
910
|
+
children: /* @__PURE__ */ d(on, { count: u })
|
|
911
|
+
}
|
|
912
|
+
) : /* @__PURE__ */ d(
|
|
913
|
+
Fe,
|
|
914
|
+
{
|
|
915
|
+
position: e.position,
|
|
916
|
+
title: t,
|
|
917
|
+
zIndex: Ne,
|
|
918
|
+
icon: a == null ? void 0 : a.icon,
|
|
919
|
+
label: a == null ? void 0 : a.label,
|
|
920
|
+
onClick: () => s(e)
|
|
921
|
+
}
|
|
922
|
+
);
|
|
923
|
+
}
|
|
924
|
+
const un = 100, mn = 30;
|
|
925
|
+
function pn({
|
|
926
|
+
markers: e,
|
|
927
|
+
fallbackZoom: t,
|
|
928
|
+
selectedMarkerId: n,
|
|
929
|
+
hoveredMarkerId: r,
|
|
930
|
+
renderMarker: o,
|
|
931
|
+
mapId: s,
|
|
932
|
+
frame: i,
|
|
933
|
+
elements: m,
|
|
934
|
+
labelFor: h,
|
|
935
|
+
onCameraMove: u,
|
|
936
|
+
onClusterClick: a
|
|
937
|
+
}) {
|
|
938
|
+
const l = W(), { t: f } = B("ui"), v = tn(t), c = Oe(ge), p = A(
|
|
939
|
+
() => Ot(e, v),
|
|
940
|
+
[e, v]
|
|
941
|
+
), { singles: y, clusters: b } = A(() => {
|
|
942
|
+
const w = (E) => E.id === n || E.id === r, _ = p.singles.slice(), V = [];
|
|
943
|
+
for (const E of p.clusters) {
|
|
944
|
+
const P = E.members.filter((L) => !w(L));
|
|
945
|
+
_.push(...E.members.filter(w)), P.length > 1 ? V.push({ ...E, members: P }) : _.push(...P);
|
|
946
|
+
}
|
|
947
|
+
return { singles: _, clusters: V };
|
|
948
|
+
}, [p, n, r]), [k, T] = N(""), R = x(null), j = x(void 0);
|
|
949
|
+
$(() => () => clearTimeout(j.current), []);
|
|
950
|
+
const G = (w) => {
|
|
951
|
+
var z;
|
|
952
|
+
const _ = (z = l == null ? void 0 : l.getDiv) == null ? void 0 : z.call(l);
|
|
953
|
+
if (!l || !(_ instanceof Element)) return;
|
|
954
|
+
const V = Math.min(
|
|
955
|
+
he("--spacing-2xl", _, 48),
|
|
956
|
+
_.clientWidth / 4,
|
|
957
|
+
_.clientHeight / 4
|
|
958
|
+
), E = Qe(
|
|
959
|
+
w.members.map((S) => S.position),
|
|
960
|
+
_.clientWidth,
|
|
961
|
+
_.clientHeight,
|
|
962
|
+
V,
|
|
963
|
+
fe
|
|
964
|
+
), P = l.getZoom() ?? v, L = Math.min(
|
|
965
|
+
fe,
|
|
966
|
+
Math.max(E.zoom, Math.ceil(P + 1))
|
|
967
|
+
), I = w.members.length;
|
|
968
|
+
R.current = {
|
|
969
|
+
ids: new Set(w.members.map((S) => S.id)),
|
|
970
|
+
centre: w.position
|
|
971
|
+
}, T(""), clearTimeout(j.current), j.current = setTimeout(
|
|
972
|
+
() => T(f("mapView.clusterZoomed", { label: h(I) })),
|
|
973
|
+
un
|
|
974
|
+
), u(), a == null || a({
|
|
975
|
+
count: I,
|
|
976
|
+
markerIds: w.members.map((S) => S.id)
|
|
977
|
+
}), l.moveCamera({ center: E.center, zoom: L });
|
|
978
|
+
};
|
|
979
|
+
return $(() => {
|
|
980
|
+
const w = R.current;
|
|
981
|
+
if (!w) return;
|
|
982
|
+
let _ = 0, V = 0;
|
|
983
|
+
const E = () => {
|
|
984
|
+
let L = null;
|
|
985
|
+
for (const z of b) {
|
|
986
|
+
if (!z.members.some((Y) => w.ids.has(Y.id)))
|
|
987
|
+
continue;
|
|
988
|
+
const S = (z.position.lat - w.centre.lat) ** 2 + (z.position.lng - w.centre.lng) ** 2;
|
|
989
|
+
(!L || S < L.distance) && (L = { key: `cluster:${z.id}`, distance: S });
|
|
990
|
+
}
|
|
991
|
+
if (L) return L.key;
|
|
992
|
+
const I = y.find((z) => w.ids.has(z.id));
|
|
993
|
+
return I ? `pin:${I.id}` : null;
|
|
994
|
+
}, P = () => {
|
|
995
|
+
const L = E(), I = L ? m.current.get(L) : null;
|
|
996
|
+
if (I && (I.focus({ preventScroll: !0 }), I.contains(document.activeElement))) {
|
|
997
|
+
R.current = null;
|
|
998
|
+
return;
|
|
999
|
+
}
|
|
1000
|
+
if (V += 1, V < mn && s) {
|
|
1001
|
+
_ = requestAnimationFrame(P);
|
|
1002
|
+
return;
|
|
1003
|
+
}
|
|
1004
|
+
R.current = null;
|
|
1005
|
+
const z = i == null ? void 0 : i.closest('[data-component="map-view"]');
|
|
1006
|
+
z && (z.hasAttribute("tabindex") || z.setAttribute("tabindex", "-1"), z.focus({ preventScroll: !0 }));
|
|
1007
|
+
};
|
|
1008
|
+
return _ = requestAnimationFrame(P), () => cancelAnimationFrame(_);
|
|
1009
|
+
}, [b, y, m, i, s]), /* @__PURE__ */ C(ht, { children: [
|
|
1010
|
+
y.map(o),
|
|
1011
|
+
b.map((w) => /* @__PURE__ */ d(
|
|
1012
|
+
dn,
|
|
1013
|
+
{
|
|
1014
|
+
cluster: w,
|
|
1015
|
+
label: h(w.members.length),
|
|
1016
|
+
mapId: s,
|
|
1017
|
+
iconTheme: c,
|
|
1018
|
+
elements: m,
|
|
1019
|
+
onActivate: G
|
|
1020
|
+
},
|
|
1021
|
+
`${Math.floor(v)}:${w.id}`
|
|
1022
|
+
)),
|
|
1023
|
+
i ? Ge(
|
|
1024
|
+
/* @__PURE__ */ d("div", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: k }),
|
|
1025
|
+
i
|
|
1026
|
+
) : null
|
|
1027
|
+
] });
|
|
1028
|
+
}
|
|
1029
|
+
const tt = (e) => {
|
|
1030
|
+
var t, n;
|
|
1031
|
+
return typeof ((n = (t = globalThis.google) == null ? void 0 : t.maps) == null ? void 0 : n[e]) == "function";
|
|
1032
|
+
};
|
|
1033
|
+
function Pe() {
|
|
1034
|
+
const { t: e } = B("ui");
|
|
1035
|
+
return /* @__PURE__ */ C(
|
|
1036
|
+
"div",
|
|
1037
|
+
{
|
|
1038
|
+
role: "status",
|
|
1039
|
+
"data-testid": "map-view-loading",
|
|
1040
|
+
className: "ds:[inline-size:100%] ds:[block-size:100%]",
|
|
1041
|
+
children: [
|
|
1042
|
+
/* @__PURE__ */ d(xt, { variant: "rectangular", width: "100%", height: "100%" }),
|
|
1043
|
+
/* @__PURE__ */ d(We, { children: e("common.loading") })
|
|
1044
|
+
]
|
|
1045
|
+
}
|
|
1046
|
+
);
|
|
1047
|
+
}
|
|
1048
|
+
function Ae({
|
|
1049
|
+
preview: e,
|
|
1050
|
+
onError: t
|
|
1051
|
+
}) {
|
|
1052
|
+
const { t: n } = B("ui");
|
|
1053
|
+
return /* @__PURE__ */ C(
|
|
1054
|
+
"div",
|
|
1055
|
+
{
|
|
1056
|
+
"data-testid": "map-view-loading",
|
|
1057
|
+
className: "ds:relative ds:[inline-size:100%] ds:[block-size:100%]",
|
|
1058
|
+
children: [
|
|
1059
|
+
/* @__PURE__ */ d(nt, { preview: e, onError: t }),
|
|
1060
|
+
/* @__PURE__ */ d("div", { role: "status", children: /* @__PURE__ */ d(We, { children: n("common.loading") }) })
|
|
1061
|
+
]
|
|
1062
|
+
}
|
|
1063
|
+
);
|
|
1064
|
+
}
|
|
1065
|
+
function nt({
|
|
1066
|
+
preview: e,
|
|
1067
|
+
onError: t
|
|
1068
|
+
}) {
|
|
1069
|
+
return /* @__PURE__ */ d(
|
|
1070
|
+
"img",
|
|
1071
|
+
{
|
|
1072
|
+
src: e.src,
|
|
1073
|
+
srcSet: e.srcSet,
|
|
1074
|
+
alt: e.alt,
|
|
1075
|
+
width: e.width,
|
|
1076
|
+
height: e.height,
|
|
1077
|
+
loading: "lazy",
|
|
1078
|
+
decoding: "async",
|
|
1079
|
+
onError: t,
|
|
1080
|
+
"data-testid": "map-view-preview-image",
|
|
1081
|
+
className: "ds:block ds:[inline-size:100%] ds:[block-size:100%] ds:[object-fit:contain]"
|
|
1082
|
+
}
|
|
1083
|
+
);
|
|
1084
|
+
}
|
|
1085
|
+
function fn({
|
|
1086
|
+
children: e,
|
|
1087
|
+
pending: t,
|
|
1088
|
+
holdUntilLoaded: n = !1
|
|
1089
|
+
}) {
|
|
1090
|
+
const r = Mt();
|
|
1091
|
+
return De("maps") || tt("Map") || !r && !n ? e : t;
|
|
1092
|
+
}
|
|
1093
|
+
function hn({ children: e }) {
|
|
1094
|
+
return De("marker") || tt("Marker") ? e : null;
|
|
1095
|
+
}
|
|
1096
|
+
function ot(e, t) {
|
|
1097
|
+
je(() => {
|
|
1098
|
+
const n = e.current;
|
|
1099
|
+
return () => {
|
|
1100
|
+
t == null || t(!!(n && n.contains(document.activeElement)));
|
|
1101
|
+
};
|
|
1102
|
+
}, [e, t]);
|
|
1103
|
+
}
|
|
1104
|
+
function gn({
|
|
1105
|
+
preview: e,
|
|
1106
|
+
onLoadMap: t,
|
|
1107
|
+
consentCta: n,
|
|
1108
|
+
onImageError: r,
|
|
1109
|
+
description: o,
|
|
1110
|
+
openInGoogleMapsHref: s,
|
|
1111
|
+
onUnmount: i
|
|
1112
|
+
}) {
|
|
1113
|
+
const { t: m } = B("ui"), h = Ve(), u = x(null);
|
|
1114
|
+
return ot(u, i), /* @__PURE__ */ C(
|
|
1115
|
+
"div",
|
|
1116
|
+
{
|
|
1117
|
+
ref: u,
|
|
1118
|
+
className: "ds:absolute ds:inset-0 ds:bg-[var(--muted)]",
|
|
1119
|
+
"data-testid": "map-view-preview",
|
|
1120
|
+
children: [
|
|
1121
|
+
/* @__PURE__ */ d(nt, { preview: e, onError: r }),
|
|
1122
|
+
/* @__PURE__ */ d("div", { className: "ds:absolute ds:start-0 ds:end-0 ds:top-[var(--map-preview-inset-block-start,var(--spacing-md))] ds:flex ds:justify-center ds:px-[var(--spacing-md)]", children: /* @__PURE__ */ C(
|
|
1123
|
+
"div",
|
|
1124
|
+
{
|
|
1125
|
+
"data-testid": "map-view-preview-plate",
|
|
1126
|
+
className: "ds:flex ds:max-w-[24rem] ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)] ds:rounded-[var(--radius-lg)] ds:bg-[var(--background)] ds:p-[var(--spacing-sm)] ds:text-center ds:shadow-[var(--shadow-lg)]",
|
|
1127
|
+
children: [
|
|
1128
|
+
/* @__PURE__ */ d(
|
|
1129
|
+
"p",
|
|
1130
|
+
{
|
|
1131
|
+
id: h,
|
|
1132
|
+
className: "type-meta ds:m-0 ds:text-[var(--muted-foreground)]",
|
|
1133
|
+
children: o
|
|
1134
|
+
}
|
|
1135
|
+
),
|
|
1136
|
+
/* @__PURE__ */ C("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:justify-center ds:gap-x-[var(--spacing-md)] ds:gap-y-[var(--spacing-xs)]", children: [
|
|
1137
|
+
n ?? /* @__PURE__ */ d(
|
|
1138
|
+
Ue,
|
|
1139
|
+
{
|
|
1140
|
+
type: "button",
|
|
1141
|
+
intent: "primary",
|
|
1142
|
+
size: "lg",
|
|
1143
|
+
onClick: t,
|
|
1144
|
+
"aria-describedby": h,
|
|
1145
|
+
"data-testid": "map-view-load-cta",
|
|
1146
|
+
children: m("mapView.consentTitle")
|
|
1147
|
+
}
|
|
1148
|
+
),
|
|
1149
|
+
/* @__PURE__ */ C(
|
|
1150
|
+
"a",
|
|
1151
|
+
{
|
|
1152
|
+
href: s,
|
|
1153
|
+
target: "_blank",
|
|
1154
|
+
rel: "noopener noreferrer",
|
|
1155
|
+
className: "ds:inline-flex ds:min-h-[var(--min-target-size)] ds:items-center ds:gap-[var(--spacing-2xs)] ds:text-[var(--primary-readable)] ds:underline ds:underline-offset-2",
|
|
1156
|
+
children: [
|
|
1157
|
+
m("mapView.openInGoogleMaps"),
|
|
1158
|
+
/* @__PURE__ */ d(Be, { "aria-hidden": "true", className: "ds:size-3" })
|
|
1159
|
+
]
|
|
1160
|
+
}
|
|
1161
|
+
)
|
|
1162
|
+
] })
|
|
1163
|
+
]
|
|
1164
|
+
}
|
|
1165
|
+
) })
|
|
1166
|
+
]
|
|
1167
|
+
}
|
|
1168
|
+
);
|
|
1169
|
+
}
|
|
1170
|
+
function Re({
|
|
1171
|
+
address: e,
|
|
1172
|
+
contentLang: t,
|
|
1173
|
+
description: n,
|
|
1174
|
+
onLoadMap: r,
|
|
1175
|
+
openInGoogleMapsHref: o,
|
|
1176
|
+
consentCta: s,
|
|
1177
|
+
onUnmount: i
|
|
1178
|
+
}) {
|
|
1179
|
+
const { t: m } = B("ui"), h = x(null);
|
|
1180
|
+
return ot(h, i), /* @__PURE__ */ C(
|
|
1181
|
+
"div",
|
|
1182
|
+
{
|
|
1183
|
+
ref: h,
|
|
1184
|
+
className: Dt(),
|
|
1185
|
+
"data-testid": "map-view-consent",
|
|
1186
|
+
children: [
|
|
1187
|
+
/* @__PURE__ */ d(
|
|
1188
|
+
zt,
|
|
1189
|
+
{
|
|
1190
|
+
"aria-hidden": "true",
|
|
1191
|
+
className: "ds:size-6 ds:text-[var(--muted-foreground)]"
|
|
1192
|
+
}
|
|
1193
|
+
),
|
|
1194
|
+
/* @__PURE__ */ d("p", { className: Zt(), children: m("mapView.consentTitle") }),
|
|
1195
|
+
e ? /* @__PURE__ */ d(
|
|
1196
|
+
"p",
|
|
1197
|
+
{
|
|
1198
|
+
className: Ie(),
|
|
1199
|
+
"data-testid": "map-view-address",
|
|
1200
|
+
lang: t,
|
|
1201
|
+
children: e
|
|
1202
|
+
}
|
|
1203
|
+
) : null,
|
|
1204
|
+
/* @__PURE__ */ d("p", { className: Ie(), children: n }),
|
|
1205
|
+
/* @__PURE__ */ C(
|
|
1206
|
+
"div",
|
|
1207
|
+
{
|
|
1208
|
+
className: "ds:flex ds:gap-[var(--spacing-sm)] ds:flex-wrap ds:items-center ds:justify-center",
|
|
1209
|
+
"data-testid": "map-view-consent-actions",
|
|
1210
|
+
children: [
|
|
1211
|
+
s ?? /* @__PURE__ */ d(
|
|
1212
|
+
Ue,
|
|
1213
|
+
{
|
|
1214
|
+
type: "button",
|
|
1215
|
+
intent: "primary",
|
|
1216
|
+
size: "sm",
|
|
1217
|
+
onClick: r,
|
|
1218
|
+
"data-testid": "map-view-load-cta",
|
|
1219
|
+
children: m("mapView.consentCta")
|
|
1220
|
+
}
|
|
1221
|
+
),
|
|
1222
|
+
/* @__PURE__ */ C(
|
|
1223
|
+
"a",
|
|
1224
|
+
{
|
|
1225
|
+
href: o,
|
|
1226
|
+
target: "_blank",
|
|
1227
|
+
rel: "noopener noreferrer",
|
|
1228
|
+
className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)] ds:text-[var(--primary-readable)] ds:underline ds:underline-offset-2",
|
|
1229
|
+
children: [
|
|
1230
|
+
m("mapView.openInGoogleMaps"),
|
|
1231
|
+
/* @__PURE__ */ d(Be, { "aria-hidden": "true", className: "ds:size-3" })
|
|
1232
|
+
]
|
|
1233
|
+
}
|
|
1234
|
+
)
|
|
1235
|
+
]
|
|
1236
|
+
}
|
|
1237
|
+
)
|
|
1238
|
+
]
|
|
1239
|
+
}
|
|
1240
|
+
);
|
|
1241
|
+
}
|
|
1242
|
+
const vn = gt(
|
|
1243
|
+
({
|
|
1244
|
+
id: e,
|
|
1245
|
+
apiKey: t,
|
|
1246
|
+
center: n,
|
|
1247
|
+
zoom: r = 15,
|
|
1248
|
+
markers: o,
|
|
1249
|
+
selectedMarkerId: s,
|
|
1250
|
+
hoveredMarkerId: i,
|
|
1251
|
+
renderMarkerCard: m,
|
|
1252
|
+
onMarkerHover: h,
|
|
1253
|
+
onMarkerClick: u,
|
|
1254
|
+
onBoundsChange: a,
|
|
1255
|
+
consentGranted: l = !1,
|
|
1256
|
+
onConsentRequest: f,
|
|
1257
|
+
staticPreview: v,
|
|
1258
|
+
address: c,
|
|
1259
|
+
contentLang: p,
|
|
1260
|
+
consentDescription: y,
|
|
1261
|
+
consentCta: b,
|
|
1262
|
+
mapId: k,
|
|
1263
|
+
size: T,
|
|
1264
|
+
surface: R,
|
|
1265
|
+
ariaLabel: j,
|
|
1266
|
+
fitToPoints: G,
|
|
1267
|
+
fitKey: w,
|
|
1268
|
+
fitMaxZoom: _ = 15,
|
|
1269
|
+
clusterMarkers: V = "auto",
|
|
1270
|
+
clusterLabel: E,
|
|
1271
|
+
onClusterClick: P,
|
|
1272
|
+
className: L,
|
|
1273
|
+
...I
|
|
1274
|
+
}, z) => {
|
|
1275
|
+
const { t: S, i18n: Y } = B("ui"), ve = x(/* @__PURE__ */ new Map()), Q = A(() => G ?? [], [G]), st = A(
|
|
1276
|
+
() => w ?? Q.map((g) => `${et(g)}@${g.lat},${g.lng}`).sort().join("|"),
|
|
1277
|
+
[w, Q]
|
|
1278
|
+
), Z = Q.length > 0, be = x(Z), ye = Ve(), rt = A(
|
|
1279
|
+
() => `map-${ye.replace(/[^a-zA-Z0-9-_]/g, "")}`,
|
|
1280
|
+
[ye]
|
|
1281
|
+
), [we, it] = N(!1);
|
|
1282
|
+
$(() => {
|
|
1283
|
+
if (typeof window > "u") return;
|
|
1284
|
+
const g = window.matchMedia("(prefers-reduced-motion: reduce)"), M = () => it(g.matches);
|
|
1285
|
+
return M(), g.addEventListener("change", M), () => g.removeEventListener("change", M);
|
|
1286
|
+
}, []);
|
|
1287
|
+
const ce = A(() => `https://www.google.com/maps/search/?api=1&query=${c ? encodeURIComponent(c) : `${n.lat},${n.lng}`}`, [c, n.lat, n.lng]), O = x(null), ke = x({
|
|
1288
|
+
pendingInput: !1,
|
|
1289
|
+
moved: !1,
|
|
1290
|
+
programmatic: !1
|
|
1291
|
+
}), K = D(() => {
|
|
1292
|
+
ke.current = {
|
|
1293
|
+
pendingInput: !1,
|
|
1294
|
+
moved: !1,
|
|
1295
|
+
programmatic: !0
|
|
1296
|
+
};
|
|
1297
|
+
}, []), ee = D(
|
|
1298
|
+
(g) => {
|
|
1299
|
+
K(), u == null || u(g);
|
|
1300
|
+
},
|
|
1301
|
+
[K, u]
|
|
1302
|
+
), [Me, at] = N(null), le = A(
|
|
1303
|
+
() => i != null && m ? (o ?? []).find((g) => g.id === i) ?? null : null,
|
|
1304
|
+
[i, m, o]
|
|
1305
|
+
), ct = D((g) => {
|
|
1306
|
+
O.current = g;
|
|
1307
|
+
}, []), xe = x(!1), Ee = x(null), _e = x(0), te = D(
|
|
1308
|
+
() => ({
|
|
1309
|
+
panTo: (g) => {
|
|
1310
|
+
var M;
|
|
1311
|
+
return (M = O.current) == null ? void 0 : M.panTo(g);
|
|
1312
|
+
},
|
|
1313
|
+
setZoom: (g) => {
|
|
1314
|
+
var M;
|
|
1315
|
+
return (M = O.current) == null ? void 0 : M.setZoom(g);
|
|
1316
|
+
},
|
|
1317
|
+
selectMarker: (g) => {
|
|
1318
|
+
var M;
|
|
1319
|
+
return (M = O.current) == null ? void 0 : M.selectMarker(g);
|
|
1320
|
+
},
|
|
1321
|
+
// Without `isConsentGranted` an agent has no way to learn that
|
|
1322
|
+
// its pan / zoom / select was swallowed by the GDPR gate rather
|
|
1323
|
+
// than applied: under the default (`consentGranted={false}`) the
|
|
1324
|
+
// whole Maps subtree is unmounted and every action optional-chains
|
|
1325
|
+
// into nothing.
|
|
1326
|
+
isConsentGranted: () => xe.current,
|
|
1327
|
+
getCenter: () => {
|
|
1328
|
+
var g;
|
|
1329
|
+
return ((g = O.current) == null ? void 0 : g.getCenter()) ?? null;
|
|
1330
|
+
},
|
|
1331
|
+
getZoom: () => {
|
|
1332
|
+
var g;
|
|
1333
|
+
return ((g = O.current) == null ? void 0 : g.getZoom()) ?? null;
|
|
1334
|
+
},
|
|
1335
|
+
getSelectedMarkerId: () => Ee.current,
|
|
1336
|
+
getMarkerCount: () => _e.current
|
|
1337
|
+
}),
|
|
1338
|
+
[]
|
|
1339
|
+
);
|
|
1340
|
+
vt(z, te, [te]);
|
|
1341
|
+
const lt = A(
|
|
1342
|
+
() => te(),
|
|
1343
|
+
[te]
|
|
1344
|
+
);
|
|
1345
|
+
_t(St, lt, e), $(() => {
|
|
1346
|
+
var M, U;
|
|
1347
|
+
const g = be.current && !Z;
|
|
1348
|
+
if (be.current = Z, !Z) {
|
|
1349
|
+
if (g) {
|
|
1350
|
+
(M = O.current) == null || M.jumpTo(n, r);
|
|
1351
|
+
return;
|
|
1352
|
+
}
|
|
1353
|
+
we || (U = O.current) == null || U.panTo(n);
|
|
1354
|
+
}
|
|
1355
|
+
}, [n.lat, n.lng, we, Z]), $(() => {
|
|
1356
|
+
var g;
|
|
1357
|
+
Z || (g = O.current) == null || g.setZoom(r);
|
|
1358
|
+
}, [r, Z]);
|
|
1359
|
+
const [dt, ze] = N(!1), ne = l || dt;
|
|
1360
|
+
xe.current = ne, Ee.current = s ?? null, _e.current = (o ?? []).length;
|
|
1361
|
+
const [ut, mt] = N(null), F = v && v.src !== ut ? v : void 0, de = v == null ? void 0 : v.src, ue = D(() => {
|
|
1362
|
+
de && mt(de);
|
|
1363
|
+
}, [de]), Se = x(null), me = x(!1), pe = x(!1), $e = D((g) => {
|
|
1364
|
+
pe.current = g;
|
|
1365
|
+
}, []);
|
|
1366
|
+
$(() => {
|
|
1367
|
+
var H;
|
|
1368
|
+
if (!ne) return;
|
|
1369
|
+
const g = document.activeElement, M = !g || g === document.body, U = me.current || pe.current && M;
|
|
1370
|
+
me.current = !1, pe.current = !1, U && ((H = Se.current) == null || H.focus({ preventScroll: !0 }));
|
|
1371
|
+
}, [ne]);
|
|
1372
|
+
const Le = D(() => {
|
|
1373
|
+
if (me.current = !0, f) {
|
|
1374
|
+
f(), ze(!0);
|
|
1375
|
+
return;
|
|
1376
|
+
}
|
|
1377
|
+
ze(!0);
|
|
1378
|
+
}, [f]), Te = (g) => {
|
|
1379
|
+
const M = s != null && s === g.id, U = i != null && i === g.id, H = S("mapView.markerLabel", {
|
|
1380
|
+
label: g.label ?? g.id
|
|
1381
|
+
});
|
|
1382
|
+
return k ? /* @__PURE__ */ d(
|
|
1383
|
+
Xt,
|
|
1384
|
+
{
|
|
1385
|
+
marker: g,
|
|
1386
|
+
label: H,
|
|
1387
|
+
isSelected: M,
|
|
1388
|
+
isHovered: U,
|
|
1389
|
+
onSelect: ee,
|
|
1390
|
+
onHover: h,
|
|
1391
|
+
elements: ve
|
|
1392
|
+
},
|
|
1393
|
+
g.id
|
|
1394
|
+
) : /* @__PURE__ */ d(
|
|
1395
|
+
ln,
|
|
1396
|
+
{
|
|
1397
|
+
marker: g,
|
|
1398
|
+
label: H,
|
|
1399
|
+
isSelected: M,
|
|
1400
|
+
isHovered: U,
|
|
1401
|
+
onSelect: ee,
|
|
1402
|
+
onHover: h
|
|
1403
|
+
},
|
|
1404
|
+
g.id
|
|
1405
|
+
);
|
|
1406
|
+
}, pt = D(
|
|
1407
|
+
(g) => typeof E == "function" ? E(g) : typeof E == "string" ? E.replaceAll("{count}", String(g)) : S("mapView.clusterLabel", { count: g }),
|
|
1408
|
+
[E, S]
|
|
1409
|
+
), ft = Vt(V, (o ?? []).length);
|
|
1410
|
+
return /* @__PURE__ */ d(
|
|
1411
|
+
"div",
|
|
1412
|
+
{
|
|
1413
|
+
ref: Se,
|
|
1414
|
+
className: jt({ size: T, surface: R, className: L }),
|
|
1415
|
+
"data-component": "map-view",
|
|
1416
|
+
"data-component-id": e ?? rt,
|
|
1417
|
+
role: "region",
|
|
1418
|
+
"aria-label": j ?? S("mapView.label"),
|
|
1419
|
+
tabIndex: -1,
|
|
1420
|
+
...I,
|
|
1421
|
+
children: /* @__PURE__ */ d(
|
|
1422
|
+
"div",
|
|
1423
|
+
{
|
|
1424
|
+
ref: at,
|
|
1425
|
+
className: Gt({ size: T, className: "ds:relative" }),
|
|
1426
|
+
children: ne ? (
|
|
1427
|
+
// A provider failure shows the consent placeholder (its "Open in
|
|
1428
|
+
// Google Maps" link needs no script) with "Load map" as the
|
|
1429
|
+
// retry, instead of unmounting the host's React tree. The gate
|
|
1430
|
+
// starts the provider only once Google's `core` and `maps`
|
|
1431
|
+
// libraries have arrived.
|
|
1432
|
+
/* @__PURE__ */ d(
|
|
1433
|
+
Et,
|
|
1434
|
+
{
|
|
1435
|
+
fallback: ({ reset: g }) => /* @__PURE__ */ d(
|
|
1436
|
+
Re,
|
|
1437
|
+
{
|
|
1438
|
+
address: c,
|
|
1439
|
+
contentLang: p,
|
|
1440
|
+
description: y ?? S("mapView.consentDescription"),
|
|
1441
|
+
onLoadMap: g,
|
|
1442
|
+
consentCta: void 0,
|
|
1443
|
+
openInGoogleMapsHref: ce
|
|
1444
|
+
}
|
|
1445
|
+
),
|
|
1446
|
+
children: /* @__PURE__ */ d(
|
|
1447
|
+
yt,
|
|
1448
|
+
{
|
|
1449
|
+
libraries: ["maps"],
|
|
1450
|
+
pending: F ? /* @__PURE__ */ d(
|
|
1451
|
+
Ae,
|
|
1452
|
+
{
|
|
1453
|
+
preview: F,
|
|
1454
|
+
onError: ue
|
|
1455
|
+
}
|
|
1456
|
+
) : /* @__PURE__ */ d(Pe, {}),
|
|
1457
|
+
children: /* @__PURE__ */ d(
|
|
1458
|
+
wt,
|
|
1459
|
+
{
|
|
1460
|
+
apiKey: t,
|
|
1461
|
+
language: Y.language,
|
|
1462
|
+
children: /* @__PURE__ */ d(
|
|
1463
|
+
fn,
|
|
1464
|
+
{
|
|
1465
|
+
holdUntilLoaded: !!F,
|
|
1466
|
+
pending: F ? /* @__PURE__ */ d(
|
|
1467
|
+
Ae,
|
|
1468
|
+
{
|
|
1469
|
+
preview: F,
|
|
1470
|
+
onError: ue
|
|
1471
|
+
}
|
|
1472
|
+
) : /* @__PURE__ */ d(Pe, {}),
|
|
1473
|
+
children: /* @__PURE__ */ C(
|
|
1474
|
+
kt,
|
|
1475
|
+
{
|
|
1476
|
+
defaultCenter: n,
|
|
1477
|
+
defaultZoom: r,
|
|
1478
|
+
mapId: k,
|
|
1479
|
+
gestureHandling: "cooperative",
|
|
1480
|
+
disableDefaultUI: !1,
|
|
1481
|
+
onClick: () => ee(null),
|
|
1482
|
+
className: "ds:[inline-size:100%] ds:[block-size:100%]",
|
|
1483
|
+
children: [
|
|
1484
|
+
/* @__PURE__ */ d(
|
|
1485
|
+
Ft,
|
|
1486
|
+
{
|
|
1487
|
+
onHandleReady: ct,
|
|
1488
|
+
onMarkerSelect: ee,
|
|
1489
|
+
onCameraMove: K
|
|
1490
|
+
}
|
|
1491
|
+
),
|
|
1492
|
+
a ? /* @__PURE__ */ d(
|
|
1493
|
+
Ut,
|
|
1494
|
+
{
|
|
1495
|
+
onBoundsChange: a,
|
|
1496
|
+
userInteraction: ke
|
|
1497
|
+
}
|
|
1498
|
+
) : null,
|
|
1499
|
+
G ? /* @__PURE__ */ d(
|
|
1500
|
+
en,
|
|
1501
|
+
{
|
|
1502
|
+
points: Q,
|
|
1503
|
+
fitKey: st,
|
|
1504
|
+
maxZoom: _,
|
|
1505
|
+
onCameraMove: K
|
|
1506
|
+
}
|
|
1507
|
+
) : null,
|
|
1508
|
+
le && m ? /* @__PURE__ */ d(
|
|
1509
|
+
Bt,
|
|
1510
|
+
{
|
|
1511
|
+
marker: le,
|
|
1512
|
+
frame: Me,
|
|
1513
|
+
direction: Y.dir(),
|
|
1514
|
+
children: m(le.id)
|
|
1515
|
+
}
|
|
1516
|
+
) : null,
|
|
1517
|
+
/* @__PURE__ */ d(hn, { children: /* @__PURE__ */ d(an, { enabled: !k, children: ft ? /* @__PURE__ */ d(
|
|
1518
|
+
pn,
|
|
1519
|
+
{
|
|
1520
|
+
markers: o ?? [],
|
|
1521
|
+
fallbackZoom: r,
|
|
1522
|
+
selectedMarkerId: s ?? null,
|
|
1523
|
+
hoveredMarkerId: i ?? null,
|
|
1524
|
+
renderMarker: Te,
|
|
1525
|
+
mapId: !!k,
|
|
1526
|
+
frame: Me,
|
|
1527
|
+
elements: ve,
|
|
1528
|
+
labelFor: pt,
|
|
1529
|
+
onCameraMove: K,
|
|
1530
|
+
onClusterClick: P
|
|
1531
|
+
}
|
|
1532
|
+
) : (o ?? []).map(Te) }) })
|
|
1533
|
+
]
|
|
1534
|
+
}
|
|
1535
|
+
)
|
|
1536
|
+
}
|
|
1537
|
+
)
|
|
1538
|
+
}
|
|
1539
|
+
)
|
|
1540
|
+
}
|
|
1541
|
+
)
|
|
1542
|
+
}
|
|
1543
|
+
)
|
|
1544
|
+
) : F ? /* @__PURE__ */ d(
|
|
1545
|
+
gn,
|
|
1546
|
+
{
|
|
1547
|
+
preview: F,
|
|
1548
|
+
onLoadMap: Le,
|
|
1549
|
+
consentCta: b,
|
|
1550
|
+
onImageError: ue,
|
|
1551
|
+
description: y ?? S("mapView.consentDescription"),
|
|
1552
|
+
openInGoogleMapsHref: ce,
|
|
1553
|
+
onUnmount: $e
|
|
1554
|
+
}
|
|
1555
|
+
) : /* @__PURE__ */ d(
|
|
1556
|
+
Re,
|
|
1557
|
+
{
|
|
1558
|
+
address: c,
|
|
1559
|
+
contentLang: p,
|
|
1560
|
+
description: y ?? S("mapView.consentDescription"),
|
|
1561
|
+
onLoadMap: Le,
|
|
1562
|
+
consentCta: b,
|
|
1563
|
+
openInGoogleMapsHref: ce,
|
|
1564
|
+
onUnmount: $e
|
|
1565
|
+
}
|
|
1566
|
+
)
|
|
1567
|
+
}
|
|
1568
|
+
)
|
|
1569
|
+
}
|
|
1570
|
+
);
|
|
1571
|
+
}
|
|
1572
|
+
);
|
|
1573
|
+
vn.displayName = "MapView";
|
|
1574
|
+
export {
|
|
1575
|
+
vn as M,
|
|
1576
|
+
Ce as i
|
|
1577
|
+
};
|
|
1578
|
+
//# sourceMappingURL=map-view-h6ngp2xi.js.map
|