@forgebuild/sidon-booking-widget 1.2.0 → 1.3.0

package/README.md

@@ -243,7 +243,8 @@ shows the booking view again, with a *Start a new booking* action.
 | `maps-api-key` | | Google Maps JS API key. The map renders only when this is set. It never renders on step 3 or in booking-page mode. |
 | `map-style` | `chart` | `chart` (buoy circles) or `coastal` (SVG pontoon overlays). |
 | `map-height` / `map-width` / `map-gap` | `280px` / `100%` / `0px` | The map's size, and the gap below it. `map-width="100vw"` breaks the map out of the card. |
-| `width` | `560px` | The element's max width, read once at mount. |
+| `width` | `560px` | The element's max width, read once at mount. In `overlay` layout, the card's max width. |
+| `layout` | `stacked` | `stacked` puts the map above the card. `overlay` floats the card over the map's left side, `map-gap` down from its top and `--sbw-card-inset` (CSS custom property, default `24px`) in from its left. Read once at mount. Below 768px it stacks. |
 | `logo-mark` / `marina-name` | | The marina's logo pin on the map. |
 | `otherMarinas` (JS property) | `[]` | Peer-marina pins; see [`otherMarinas`](#othermarinas-js-property). |
 

package/dist/elements.d.ts

@@ -57,6 +57,7 @@ export interface SidonBookingWidgetElement extends HTMLElement {
   mapWidth?: string;
   mapGap?: string;
   width?: string;
+  layout?: 'stacked' | 'overlay';
   logoMark?: string | null;
   marinaName?: string;
   otherMarinas?: OtherMarina[];

package/dist/sidon-berth-map.js

@@ -2651,8 +2651,7 @@ function Ri(e, t) {
 		let t = {};
 		for (let e of u()) e.berthId && (t[e.berthId] = {
 			price: e.pricePerNight,
-			status: e.status,
-			rotation: e.rotation
+			status: e.status
 		});
 		try {
 			let n = new DOMParser().parseFromString(e, "image/svg+xml");
@@ -2664,15 +2663,7 @@ function Ri(e, t) {
 				let a = D[i] ?? D.occupied, o = e.querySelector("rect:not([data-role]), circle");
 				o && (o.setAttribute("fill", a.fill), o.setAttribute("stroke", a.stroke));
 				let s = e.querySelector("[data-role=\"entrance\"]");
-				if (s && s.setAttribute("fill", a.stroke), r?.rotation != null && o) {
-					let t = o, n = 0, i = 0;
-					if (t.tagName.toLowerCase() === "rect") {
-						let e = parseFloat(t.getAttribute("x") || "0"), r = parseFloat(t.getAttribute("y") || "0"), a = parseFloat(t.getAttribute("width") || "0"), o = parseFloat(t.getAttribute("height") || "0");
-						n = e + a / 2, i = r + o / 2;
-					} else t.tagName.toLowerCase() === "circle" && (n = parseFloat(t.getAttribute("cx") || "0"), i = parseFloat(t.getAttribute("cy") || "0"));
-					let a = e.getAttribute("transform") || "";
-					e.setAttribute("transform", `${a} rotate(${r.rotation} ${n} ${i})`.trim());
-				}
+				s && s.setAttribute("fill", a.stroke);
 			});
 			let r = n.createElementNS("http://www.w3.org/2000/svg", "style");
 			return r.textContent = `