@pie-element/hotspot 11.2.0-beta.0 → 11.2.0-next.18

package/dist/delivery/hotspot/image-konva-tooltip.js

@@ -0,0 +1,66 @@
+import e from "react";
+import t from "prop-types";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Group as i, Image as a, Label as o, Tag as s, Text as c } from "react-konva";
+//#region src/delivery/hotspot/image-konva-tooltip.tsx
+function l(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function u(e, t) {
+	return !e || l(e) ? e : l(e.default) ? e.default : t && l(e[t]) ? e[t] : t && l(e[t]?.default) ? e[t].default : e;
+}
+var d = u(o, "Label"), f = u(s, "Tag"), p = u(c, "Text"), m = u(a, "Image"), h = u(i, "Group"), g = class extends e.Component {
+	constructor(e) {
+		super(e), this.state = {
+			image: null,
+			showTooltip: !1
+		};
+	}
+	componentDidMount() {
+		this.loadImage();
+	}
+	componentDidUpdate(e) {
+		e.src !== this.props.src && this.loadImage();
+	}
+	componentWillUnmount() {
+		this.image.removeEventListener("load", this.handleLoad);
+	}
+	loadImage() {
+		let { src: e } = this.props;
+		this.image = new window.Image(), this.image.src = e, this.image.addEventListener("load", this.handleLoad);
+	}
+	handleLoad = () => {
+		this.setState({ image: this.image });
+	};
+	render() {
+		let { x: e, y: t, tooltip: i } = this.props, { image: a, showTooltip: o } = this.state;
+		return /* @__PURE__ */ r(h, { children: [/* @__PURE__ */ n(m, {
+			width: 20,
+			height: 20,
+			x: e,
+			y: t,
+			image: a,
+			onMouseEnter: () => this.setState({ showTooltip: !0 }),
+			onMouseLeave: () => this.setState({ showTooltip: !1 })
+		}), o && i && /* @__PURE__ */ r(d, {
+			x: e - 30,
+			y: t + 25,
+			children: [/* @__PURE__ */ n(f, {
+				fill: "white",
+				cornerRadius: 5,
+				opacity: .9
+			}), /* @__PURE__ */ n(p, {
+				text: i,
+				padding: 5
+			})]
+		})] });
+	}
+};
+g.propTypes = {
+	src: t.string.isRequired,
+	x: t.number.isRequired,
+	y: t.number.isRequired,
+	tooltip: t.string.isRequired
+};
+//#endregion
+export { g as default };

package/dist/delivery/hotspot/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/src/hotspot/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+declare class HotspotComponent extends React.Component {
+    constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    onToggle: any;
+    render(): React.JSX.Element;
+}
+export default HotspotComponent;

package/dist/delivery/hotspot/index.js

@@ -0,0 +1,119 @@
+import { Container as e } from "./container.js";
+import t from "react";
+import { renderMath as n } from "@pie-element/shared-math-rendering-mathjax";
+import * as r from "@pie-lib/render-ui";
+import { Collapsible as i, PreviewPrompt as a, UiLayout as o, color as s, hasMedia as c, hasText as l } from "@pie-lib/render-ui";
+import u from "react-dom";
+import d from "prop-types";
+import f from "@pie-lib/correct-answer-toggle";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { styled as h } from "@mui/material/styles";
+//#region src/delivery/hotspot/index.tsx
+function g(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function _(e, t) {
+	return !e || g(e) ? e : g(e.default) ? e.default : t && g(e[t]) ? e[t] : t && g(e[t]?.default) ? e[t].default : e;
+}
+var v = _(o, "UiLayout") || _(C.UiLayout, "UiLayout"), y = _(a, "PreviewPrompt") || _(C.PreviewPrompt, "PreviewPrompt"), b = _(i, "Collapsible") || _(C.Collapsible, "Collapsible"), x = r, S = x.default, C = S && typeof S == "object" ? S : x, w = h(v)({
+	color: s.text(),
+	backgroundColor: s.background(),
+	position: "relative"
+}), T = h(b)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), E = class extends t.Component {
+	constructor(e) {
+		super(e), this.state = {
+			showCorrect: !1,
+			observer: null,
+			scale: 1
+		};
+	}
+	componentDidMount() {
+		this.observer = new MutationObserver((e) => {
+			e.forEach(() => {
+				let e = document.getElementById("question-container")?.style?.cssText, t = (e?.substring(e.indexOf("--pie-zoom") + 11, e.lastIndexOf("%")))?.replace(/\s/g, "");
+				t ? parseFloat(t) / 100 !== this.state.scale && this.setState({ scale: parseFloat(t) / 100 }) : !t && this.state.scale !== 1 && this.setState({ scale: 1 });
+			});
+		});
+		let e = document.getElementById("question-container");
+		e && this.observer.observe(e, {
+			attributes: !0,
+			attributeFilter: ["style"]
+		}), n(u.findDOMNode(this));
+	}
+	componentDidUpdate() {
+		n(u.findDOMNode(this));
+	}
+	componentWillUnmount() {
+		this.observer?.disconnect();
+	}
+	onToggle = () => {
+		let { showCorrect: e } = this.state;
+		this.setState({ showCorrect: !e });
+	};
+	render() {
+		let { session: t, model: { disabled: n, extraCSSRules: r, imageUrl: i, prompt: a, mode: o, multipleCorrect: s, shapes: u, outlineColor: d, hotspotColor: h, hoverOutlineColor: g, selectedHotspotColor: _, dimensions: v, rationale: x, teacherInstructions: S, strokeWidth: C, responseCorrect: E, language: D, fontSizeFactor: O, autoplayAudioEnabled: k, customAudioButton: A }, onSelectChoice: j } = this.props, { showCorrect: M } = this.state, N = o === "evaluate", P = o === "gather", F = N && !E, I = x && (l(x) || c(x));
+		return /* @__PURE__ */ m(w, {
+			extraCSSRules: r,
+			id: "main-container",
+			fontSizeFactor: O,
+			children: [
+				S && (l(S) || c(S)) && /* @__PURE__ */ p(T, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: /* @__PURE__ */ p(y, {
+						className: "prompt",
+						prompt: S
+					})
+				}),
+				a && /* @__PURE__ */ p(y, {
+					className: "prompt",
+					prompt: a,
+					autoplayAudioEnabled: k,
+					customAudioButton: A
+				}),
+				F && /* @__PURE__ */ p(f, {
+					show: F,
+					toggled: M,
+					onToggle: this.onToggle.bind(this),
+					language: D
+				}),
+				i ? /* @__PURE__ */ p(e, {
+					isEvaluateMode: N,
+					session: t,
+					dimensions: v,
+					imageUrl: i,
+					hotspotColor: h,
+					hoverOutlineColor: P ? g : void 0,
+					selectedHotspotColor: _,
+					multipleCorrect: s,
+					outlineColor: d,
+					onSelectChoice: j,
+					shapes: u,
+					disabled: n,
+					strokeWidth: C,
+					scale: this.state.scale,
+					showCorrect: M
+				}) : null,
+				I && /* @__PURE__ */ p(b, {
+					labels: {
+						hidden: "Show Rationale",
+						visible: "Hide Rationale"
+					},
+					children: /* @__PURE__ */ p(y, {
+						className: "prompt",
+						prompt: x
+					})
+				})
+			]
+		});
+	}
+};
+E.propTypes = {
+	model: d.object.isRequired,
+	onSelectChoice: d.func.isRequired,
+	session: d.object.isRequired
+};
+//#endregion
+export { E as default };

package/dist/delivery/hotspot/polygon.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/src/hotspot/polygon.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+declare class PolygonComponent extends React.Component {
+    constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    moveGroupToTop: any;
+    getPolygonCenter: any;
+    parsePointsForKonva: any;
+    handleClick: any;
+    handleMouseEnter: any;
+    handleMouseLeave: any;
+    getEvaluateOutlineColor: (isCorrect: any, markAsCorrect: any, outlineColor: any) => any;
+    getOutlineWidth: (showCorrectEnabled: any, selected: any, markAsCorrect: any, strokeWidth: any) => any;
+    render(): React.JSX.Element;
+}
+export default PolygonComponent;

package/dist/delivery/hotspot/polygon.js

@@ -0,0 +1,121 @@
+import e from "./image-konva-tooltip.js";
+import { faCorrect as t, faWrong as n } from "./icons.js";
+import r from "react";
+import i from "prop-types";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Group as s, Line as c, Rect as l } from "react-konva";
+//#region src/delivery/hotspot/polygon.tsx
+function u(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function d(e, t) {
+	return !e || u(e) ? e : u(e.default) ? e.default : t && u(e[t]) ? e[t] : t && u(e[t]?.default) ? e[t].default : e;
+}
+var f = d(l, "Rect"), p = d(s, "Group"), m = d(c, "Line"), h = class extends r.Component {
+	constructor(e) {
+		super(e), this.state = { hovered: !1 }, this.groupRef = r.createRef();
+	}
+	componentDidMount() {
+		this.props.focused && this.moveGroupToTop();
+	}
+	componentDidUpdate(e) {
+		!e.focused && this.props.focused && this.moveGroupToTop();
+	}
+	moveGroupToTop = () => {
+		this.groupRef.current && this.groupRef.current.moveToTop();
+	};
+	getPolygonCenter = (e) => {
+		let t = e.map(({ x: e }) => e), n = e.map(({ y: e }) => e), r = Math.min.apply(null, t), i = Math.max.apply(null, t), a = Math.min.apply(null, n), o = Math.max.apply(null, n);
+		return [(r + i) / 2, (a + o) / 2];
+	};
+	parsePointsForKonva = (e) => {
+		let t = [];
+		return e.forEach(({ x: e, y: n }) => {
+			t.push(e), t.push(n);
+		}), t;
+	};
+	handleClick = (e) => {
+		let { onClick: t, id: n, selected: r, disabled: i } = this.props;
+		i || (e.cancelBubble = !0, t({
+			id: n,
+			selected: !r,
+			selector: "Mouse"
+		}));
+	};
+	handleMouseEnter = () => {
+		let { disabled: e } = this.props;
+		e || (document.body.style.cursor = "pointer"), this.setState({ hovered: !0 }), this.moveGroupToTop();
+	};
+	handleMouseLeave = () => {
+		document.body.style.cursor = "default", this.setState({ hovered: !1 });
+	};
+	getEvaluateOutlineColor = (e, t, n) => t ? "green" : e ? n : "red";
+	getOutlineWidth = (e, t, n, r) => n || !n && !e && t ? r : 0;
+	render() {
+		let { hotspotColor: r, isCorrect: i, isEvaluateMode: s, hoverOutlineColor: c, outlineColor: l, selected: u, focused: d, points: h, evaluateText: g, strokeWidth: _, scale: v, markAsCorrect: y, selectedHotspotColor: b, showCorrectEnabled: x } = this.props, { hovered: S } = this.state, C = s ? this.getEvaluateOutlineColor(i, y, l) : l, w = this.getOutlineWidth(x, u, y, _), T = this.parsePointsForKonva(h), E = this.getPolygonCenter(h), D = E[0], O = E[1], k;
+		x ? (u && i || !u && !i) && (k = t) : u ? k = i ? t : n : i || (k = n);
+		let A = (S || d) && c, j = T.filter((e, t) => t % 2 == 0), M = T.filter((e, t) => t % 2 != 0), N = Math.min(...j), P = Math.max(...j), F = Math.min(...M), I = Math.max(...M), L = N, R = F, z = P - N, B = I - F;
+		return /* @__PURE__ */ o(p, {
+			ref: this.groupRef,
+			scaleX: v,
+			scaleY: v,
+			onMouseEnter: this.handleMouseEnter,
+			onMouseLeave: this.handleMouseLeave,
+			children: [
+				/* @__PURE__ */ a(m, {
+					points: T,
+					closed: !0,
+					fill: u && b ? b : r,
+					onClick: this.handleClick,
+					onTap: this.handleClick,
+					draggable: !1,
+					stroke: A && !u ? "transparent" : C,
+					strokeWidth: A && !u ? 0 : w,
+					cursor: "pointer",
+					position: "relative"
+				}),
+				A && /* @__PURE__ */ a(f, {
+					x: L,
+					y: R,
+					width: z,
+					height: B,
+					stroke: c,
+					strokeWidth: _,
+					listening: !1
+				}),
+				s && k ? /* @__PURE__ */ a(e, {
+					src: k,
+					x: D,
+					y: O,
+					tooltip: g
+				}) : null
+			]
+		});
+	}
+};
+h.propTypes = {
+	hotspotColor: i.string.isRequired,
+	id: i.string.isRequired,
+	isCorrect: i.bool.isRequired,
+	isEvaluateMode: i.bool.isRequired,
+	hoverOutlineColor: i.string,
+	disabled: i.bool.isRequired,
+	focused: i.bool,
+	onClick: i.func.isRequired,
+	outlineColor: i.string.isRequired,
+	points: i.array.isRequired,
+	selected: i.bool.isRequired,
+	evaluateText: i.string,
+	selectedHotspotColor: i.string,
+	strokeWidth: i.number,
+	scale: i.number,
+	markAsCorrect: i.bool.isRequired,
+	showCorrectEnabled: i.bool.isRequired
+}, h.defaultProps = {
+	evaluateText: null,
+	focused: !1,
+	strokeWidth: 5,
+	scale: 1
+};
+//#endregion
+export { h as default };

package/dist/delivery/hotspot/rectangle.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/src/hotspot/rectangle.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+declare class RectComponent extends React.Component {
+    constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    moveGroupToTop: any;
+    handleClick: any;
+    handleMouseEnter: any;
+    handleMouseLeave: any;
+    getEvaluateOutlineColor: (isCorrect: any, markAsCorrect: any, outlineColor: any) => any;
+    getOutlineWidth: (showCorrectEnabled: any, selected: any, markAsCorrect: any, strokeWidth: any) => any;
+    render(): React.JSX.Element;
+}
+export default RectComponent;

package/dist/delivery/hotspot/rectangle.js

@@ -0,0 +1,116 @@
+import e from "./image-konva-tooltip.js";
+import { faCorrect as t, faWrong as n } from "./icons.js";
+import r from "react";
+import i from "prop-types";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Group as s, Rect as c } from "react-konva";
+//#region src/delivery/hotspot/rectangle.tsx
+function l(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function u(e, t) {
+	return !e || l(e) ? e : l(e.default) ? e.default : t && l(e[t]) ? e[t] : t && l(e[t]?.default) ? e[t].default : e;
+}
+var d = u(s, "Group"), f = u(c, "Rect"), p = class extends r.Component {
+	constructor(e) {
+		super(e), this.state = { hovered: !1 }, this.groupRef = r.createRef();
+	}
+	componentDidMount() {
+		this.props.focused && this.moveGroupToTop();
+	}
+	componentDidUpdate(e) {
+		!e.focused && this.props.focused && this.moveGroupToTop();
+	}
+	moveGroupToTop = () => {
+		this.groupRef.current && this.groupRef.current.moveToTop();
+	};
+	handleClick = (e) => {
+		let { onClick: t, id: n, selected: r, disabled: i } = this.props;
+		i || (e.cancelBubble = !0, t({
+			id: n,
+			selected: !r,
+			selector: "Mouse"
+		}));
+	};
+	handleMouseEnter = () => {
+		let { disabled: e } = this.props;
+		e || (document.body.style.cursor = "pointer"), this.setState({ hovered: !0 }), this.moveGroupToTop();
+	};
+	handleMouseLeave = () => {
+		document.body.style.cursor = "default", this.setState({ hovered: !1 });
+	};
+	getEvaluateOutlineColor = (e, t, n) => t ? "green" : e ? n : "red";
+	getOutlineWidth = (e, t, n, r) => n || !n && !e && t ? r : 0;
+	render() {
+		let { height: r, hotspotColor: i, hoverOutlineColor: s, selectedHotspotColor: c, isCorrect: l, isEvaluateMode: u, outlineColor: p, selected: m, focused: h, width: g, x: _, y: v, evaluateText: y, strokeWidth: b, scale: x, markAsCorrect: S, showCorrectEnabled: C } = this.props, { hovered: w } = this.state, T = u ? this.getEvaluateOutlineColor(l, S, p) : p, E = this.getOutlineWidth(C, m, S, b), D = _ + g / 2 - 10, O = v + r / 2 - 10, k;
+		C ? (m && l || !m && !l) && (k = t) : m ? k = l ? t : n : l || (k = n);
+		let A = (w || h) && s;
+		return /* @__PURE__ */ o(d, {
+			ref: this.groupRef,
+			scaleX: x,
+			scaleY: x,
+			onMouseLeave: this.handleMouseLeave,
+			onMouseEnter: this.handleMouseEnter,
+			children: [
+				/* @__PURE__ */ a(f, {
+					x: _,
+					y: v,
+					width: g,
+					height: r,
+					fill: m && c ? c : i,
+					onClick: this.handleClick,
+					onTap: this.handleClick,
+					draggable: !1,
+					stroke: A && !m ? "transparent" : T,
+					strokeWidth: A && !m ? 0 : E,
+					cursor: "pointer"
+				}),
+				A && /* @__PURE__ */ a(f, {
+					x: _,
+					y: v,
+					width: g,
+					height: r,
+					stroke: s,
+					strokeWidth: b,
+					listening: !1
+				}),
+				u && k ? /* @__PURE__ */ a(e, {
+					src: k,
+					x: D,
+					y: O,
+					tooltip: y
+				}) : null
+			]
+		});
+	}
+};
+p.propTypes = {
+	height: i.number.isRequired,
+	hotspotColor: i.string.isRequired,
+	id: i.string.isRequired,
+	isCorrect: i.oneOfType([i.bool, i.string]),
+	isEvaluateMode: i.bool.isRequired,
+	hoverOutlineColor: i.string,
+	disabled: i.bool.isRequired,
+	focused: i.bool,
+	onClick: i.func.isRequired,
+	outlineColor: i.string.isRequired,
+	selected: i.bool.isRequired,
+	width: i.number.isRequired,
+	x: i.number.isRequired,
+	y: i.number.isRequired,
+	evaluateText: i.string,
+	strokeWidth: i.number,
+	scale: i.number,
+	selectedHotspotColor: i.string,
+	markAsCorrect: i.bool.isRequired,
+	showCorrectEnabled: i.bool.isRequired
+}, p.defaultProps = {
+	isCorrect: !1,
+	evaluateText: null,
+	focused: !1,
+	strokeWidth: 5,
+	scale: 1
+};
+//#endregion
+export { p as default };

package/dist/delivery/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export default class Hotspot extends HTMLElement {
+    constructor();
+    set model(m: any);
+    isComplete(): boolean;
+    set session(s: any);
+    get session(): any;
+    onSelectChoice(data: any): void;
+    _createAudioInfoToast(): HTMLDivElement;
+    connectedCallback(): void;
+    _render(): void;
+    disconnectedCallback(): void;
+}

package/dist/delivery/index.js

@@ -0,0 +1,109 @@
+import e from "./hotspot/index.js";
+import { updateSessionMetadata as t, updateSessionValue as n } from "./session-updater.js";
+import r from "react";
+import { createRoot as i } from "react-dom/client";
+import { renderMath as a } from "@pie-element/shared-math-rendering-mathjax";
+import * as o from "@pie-lib/render-ui";
+import { EnableAudioAutoplayImage as s } from "@pie-lib/render-ui";
+import { ModelSetEvent as c, SessionChangedEvent as l } from "@pie-element/shared-player-events";
+//#region src/delivery/index.ts
+function u(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function d(e, t) {
+	return !e || u(e) ? e : u(e.default) ? e.default : t && u(e[t]) ? e[t] : t && u(e[t]?.default) ? e[t].default : e;
+}
+var f = d(s, "EnableAudioAutoplayImage") || d(h.EnableAudioAutoplayImage, "EnableAudioAutoplayImage"), p = o, m = p.default, h = m && typeof m == "object" ? m : p, g = class extends HTMLElement {
+	constructor() {
+		super(), this._model = null, this._session = null, this._audioInitialized = !1, this.audioComplete = !1, this._root = null;
+	}
+	set model(e) {
+		this._model = e, this.dispatchEvent(new c(this.tagName.toLowerCase(), this.isComplete(), !!this._model)), this._audioInitialized = !1, this._render();
+	}
+	isComplete() {
+		if (!this._session || !this._session.answers) return !1;
+		let { completeAudioEnabled: e } = this._model || {}, t = this;
+		if (e && !this.audioComplete && t) {
+			let e = t.querySelector("audio"), n = e && e.closest(".preview-prompt");
+			if (e && n) return !1;
+		}
+		return Array.isArray(this._session.answers) ? this._session.answers.length > 0 : !1;
+	}
+	set session(e) {
+		e && !e.answers && (e.answers = []), this._session = e, this._render();
+	}
+	get session() {
+		return this._session;
+	}
+	onSelectChoice(e) {
+		n(this._session, this._model, e), this.dispatchEvent(new l(this.tagName.toLowerCase(), this.isComplete())), this._render();
+	}
+	_createAudioInfoToast() {
+		let e = document.createElement("div");
+		e.id = "play-audio-info", Object.assign(e.style, {
+			position: "absolute",
+			top: 0,
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			background: "white",
+			zIndex: "1000",
+			cursor: "pointer"
+		});
+		let t = document.createElement("img");
+		return t.src = f, t.alt = "Click anywhere to enable audio autoplay", t.width = 500, t.height = 300, e.appendChild(t), e;
+	}
+	connectedCallback() {
+		this._render(), new MutationObserver((e, n) => {
+			e.forEach((e) => {
+				if (e.type === "childList") {
+					if (this._audioInitialized) return;
+					let e = this.querySelector("audio"), r = e && e.closest(".preview-prompt");
+					if (!this._model) return;
+					let { autoplayAudioEnabled: i, completeAudioEnabled: a } = this._model;
+					if (!i && !a || e && !r || !e) return;
+					let o = this._createAudioInfoToast(), s = this.querySelector("#main-container"), c = () => {
+						this.querySelector("#play-audio-info") && (e.play(), s.removeChild(o)), document.removeEventListener("click", c);
+					};
+					i && setTimeout(() => {
+						e.paused && !this.querySelector("#play-audio-info") ? (s.appendChild(o), document.addEventListener("click", c)) : document.removeEventListener("click", c);
+					}, 500);
+					let u = () => {
+						t(this._session, { audioStartTime: (/* @__PURE__ */ new Date()).getTime() });
+						let n = this.querySelector("#play-audio-info");
+						n && s.removeChild(n), e.removeEventListener("playing", u);
+					};
+					e.addEventListener("playing", u);
+					let d = () => {
+						t(this._session, { audioEndTime: (/* @__PURE__ */ new Date()).getTime() });
+						let { audioStartTime: n, audioEndTime: r, waitTime: i } = this._session;
+						!i && n && r && (this._session.waitTime = r - n), this.audioComplete = !0, this.dispatchEvent(new l(this.tagName.toLowerCase(), this.isComplete())), e.removeEventListener("ended", d);
+					};
+					e.addEventListener("ended", d), this._audio = e, this._handlePlaying = u, this._handleEnded = d, this._enableAudio = c, this._audioInitialized = !0, n.disconnect();
+				}
+			});
+		}).observe(this, {
+			childList: !0,
+			subtree: !0
+		});
+	}
+	_render() {
+		if (this._model && this._session) {
+			let t = r.createElement(e, {
+				model: this._model,
+				session: this._session,
+				onSelectChoice: this.onSelectChoice.bind(this)
+			});
+			this._root ||= i(this), this._root.render(t), queueMicrotask(() => {
+				a(this);
+			});
+		}
+	}
+	disconnectedCallback() {
+		document.removeEventListener("click", this._enableAudio), this._audio &&= (this._audio.removeEventListener("playing", this._handlePlaying), this._audio.removeEventListener("ended", this._handleEnded), null), this._root &&= (this._root.unmount(), null);
+	}
+};
+//#endregion
+export { g as default };

package/dist/delivery/session-updater.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/src/session-updater.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare function updateSessionValue(session: any, model: any, data: any): void;
+export declare function updateSessionMetadata(session: any, metadata: any): void;

package/dist/delivery/session-updater.js

@@ -0,0 +1,14 @@
+//#region src/delivery/session-updater.ts
+function e(e, t, n) {
+	let { id: r, selected: i } = n, { multipleCorrect: a } = t || {};
+	if (e.answers = e.answers || [], !i) e.answers = e.answers.filter((e) => e.id !== r);
+	else {
+		let t = { id: r };
+		a ? e.answers.push(t) : e.answers = [t], e.selector = n.selector;
+	}
+}
+function t(e, t) {
+	e.audioStartTime = e.audioStartTime || t.audioStartTime, e.audioEndTime = e.audioEndTime || t.audioEndTime, !e.waitTime && e.audioStartTime && e.audioEndTime && (e.waitTime = e.audioEndTime - e.audioStartTime);
+}
+//#endregion
+export { t as updateSessionMetadata, e as updateSessionValue };

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default } from './delivery/index.js';

package/dist/index.iife.d.ts

@@ -0,0 +1,8 @@
+/**
+ * IIFE entry point for hotspot element
+ * This file is only used for IIFE builds and includes auto-registration
+ *
+ * @sync-generated - Auto-generated during sync from pie-elements
+ */
+import Element from './index.js';
+export default Element;