@pie-element/math-inline 12.1.0-next.19 → 12.1.1-next.0

package/dist/browser/main-CohR01RN.js

@@ -0,0 +1,973 @@
+import { a as e, t, y as n } from "./dist-BJ5Sm1Fi.js";
+import { C as r, L as i, M as a, Ot as o, R as s, S as c, T as l, _ as u, dt as d, f, ft as p, h as ee, m, mt as h, n as g, p as _, u as te, ut as v, v as y, w as b } from "./dist-DguK2kIS.js";
+import { t as x } from "./dist-D9ARZhQk.js";
+import S, { useRef as C } from "react";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import ne from "react-dom";
+//#region ../../lib-react/correct-answer-toggle/dist/expander.js
+var E = /* @__PURE__ */ n(o(), 1), D = "height ease-in 300ms, opacity ease-in 300ms", O = h("div")(() => ({
+	position: "relative",
+	height: 0,
+	overflow: "hidden",
+	display: "flex",
+	visibility: "hidden",
+	width: 0,
+	"&.enter": {
+		transition: D,
+		opacity: 1,
+		height: "auto",
+		width: "auto",
+		visibility: "visible",
+		minHeight: "25px"
+	},
+	"&.enter-done": {
+		height: "auto",
+		visibility: "visible",
+		width: "auto",
+		minHeight: "25px"
+	},
+	"&.exit": {
+		transition: D,
+		opacity: 0,
+		height: 0,
+		visibility: "visible",
+		width: 0
+	},
+	"&.exit-done": {
+		opacity: 0,
+		visibility: "hidden",
+		height: 0,
+		width: 0
+	}
+})), k = (e) => {
+	let { show: t, children: n, className: r } = e, i = C(null);
+	return /* @__PURE__ */ w(p, {
+		nodeRef: i,
+		in: t,
+		appear: !0,
+		mountOnEnter: !1,
+		timeout: 300,
+		classNames: {
+			enter: "enter",
+			enterDone: "enter-done",
+			exit: "exit",
+			exitDone: "exit-done"
+		},
+		children: /* @__PURE__ */ w(O, {
+			ref: i,
+			className: r,
+			children: n
+		})
+	});
+};
+k.propTypes = {
+	show: E.default.bool.isRequired,
+	className: E.default.string,
+	children: E.default.oneOfType([E.default.arrayOf(E.default.node), E.default.node]).isRequired
+};
+//#endregion
+//#region ../../lib-react/icons/dist/correct-response-icon.js
+var A = ({ bgFill: e, fgFill: t }) => /* @__PURE__ */ T("svg", {
+	preserveAspectRatio: "xMinYMin meet",
+	version: "1.1",
+	viewBox: "-283 359 34 35",
+	style: { enableBackground: "new -283 359 34 35" },
+	children: [
+		/* @__PURE__ */ w("circle", {
+			cx: "-266",
+			cy: "375.9",
+			r: "14",
+			fill: e
+		}),
+		/* @__PURE__ */ w("path", {
+			d: "M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z\n         M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z",
+			fill: e
+		}),
+		/* @__PURE__ */ w("polygon", {
+			points: "-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6",
+			fill: t
+		})
+	]
+});
+A.propTypes = {
+	bgFill: E.default.string.isRequired,
+	fgFill: E.default.string.isRequired
+};
+var j = ({ bgFill: e, fgFill: t, borderFill: n }) => /* @__PURE__ */ T("svg", {
+	preserveAspectRatio: "xMinYMin meet",
+	version: "1.1",
+	viewBox: "-129.5 127 34 35",
+	style: { enableBackground: "new -129.5 127 34 35" },
+	children: [
+		/* @__PURE__ */ w("path", {
+			style: {
+				fill: "#D0CAC5",
+				stroke: "#E6E3E0",
+				strokeWidth: .75,
+				strokeMiterlimit: 10
+			},
+			d: "M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5\n         C-97.4,153.5-104.3,160.4-112.9,160.4z"
+		}),
+		/* @__PURE__ */ w("path", {
+			style: {
+				fill: "#B3ABA4",
+				stroke: "#CDC7C2",
+				strokeWidth: .5,
+				strokeMiterlimit: 10
+			},
+			d: "M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z"
+		}),
+		/* @__PURE__ */ w("circle", {
+			cx: "-114.2",
+			cy: "143.5",
+			r: "14",
+			fill: e
+		}),
+		/* @__PURE__ */ w("path", {
+			d: "M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z\n         M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z",
+			fill: n
+		}),
+		/* @__PURE__ */ w("polygon", {
+			points: "-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2",
+			fill: t
+		})
+	]
+});
+j.propTypes = {
+	bgFill: E.default.string.isRequired,
+	fgFill: E.default.string.isRequired,
+	borderFill: E.default.string.isRequired
+};
+var M = h("div")(({ size: e }) => ({
+	width: e || "25px",
+	height: e || "25px"
+})), N = ({ open: e, size: t }) => /* @__PURE__ */ w(M, {
+	size: t,
+	children: e ? /* @__PURE__ */ w(A, {
+		bgFill: "#bce2ff",
+		fgFill: "#1a9cff"
+	}) : /* @__PURE__ */ w(j, {
+		bgFill: "white",
+		fgFill: "#1a9cff",
+		borderFill: "#bce2ff"
+	})
+});
+N.propTypes = {
+	open: E.default.bool,
+	size: E.default.string
+}, N.defaultProps = { open: !1 };
+//#endregion
+//#region ../../lib-react/correct-answer-toggle/dist/index.js
+function P(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function F(e, t) {
+	return !e || P(e) ? e : P(e.default) ? e.default : t && P(e[t]) ? e[t] : t && P(e[t]?.default) ? e[t].default : e;
+}
+var I = F(b, "Readable") || F(z.Readable, "Readable"), L = y, R = L.default, z = R && typeof R == "object" ? R : L, { translator: B } = x, V = {
+	WebkitTouchCallout: "none",
+	WebkitUserSelect: "none",
+	KhtmlUserSelect: "none",
+	MozUserSelect: "none",
+	msUserSelect: "none",
+	userSelect: "none"
+}, re = h("div")(() => ({
+	width: "100%",
+	cursor: "pointer"
+})), H = h("div")(() => ({
+	margin: "0 auto",
+	textAlign: "center",
+	display: "flex"
+})), U = h("div")(() => ({
+	width: "fit-content",
+	minWidth: "140px",
+	alignSelf: "center",
+	verticalAlign: "middle",
+	color: `var(--correct-answer-toggle-label-color, ${d.text()})`,
+	fontWeight: "normal",
+	...V
+})), W = h("div")(() => ({
+	position: "absolute",
+	width: "25px",
+	"&.enter": { opacity: "0" },
+	"&.enter-active": {
+		opacity: "1",
+		transition: "opacity 0.3s ease-in"
+	},
+	"&.exit": { opacity: "1" },
+	"&.exit-active": {
+		opacity: "0",
+		transition: "opacity 0.3s ease-in"
+	}
+})), G = h("div")(() => ({
+	width: "25px",
+	marginRight: "5px",
+	display: "flex",
+	alignItems: "center"
+})), ie = class e extends S.Component {
+	static propTypes = {
+		onToggle: E.default.func,
+		toggled: E.default.bool,
+		show: E.default.bool,
+		hideMessage: E.default.string,
+		showMessage: E.default.string,
+		className: E.default.string,
+		language: E.default.string
+	};
+	static defaultProps = {
+		showMessage: "Show correct answer",
+		hideMessage: "Hide correct answer",
+		show: !1,
+		toggled: !1
+	};
+	constructor(t) {
+		super(t), this.state = { show: t.show }, this.openIconRef = S.createRef(), this.closedIconRef = S.createRef(), e.defaultProps = {
+			...e.defaultProps,
+			showMessage: B.t("common:showCorrectAnswer", { lng: t.language }),
+			hideMessage: B.t("common:hideCorrectAnswer", { lng: t.language })
+		};
+	}
+	onClick() {
+		this.props.onToggle(!this.props.toggled);
+	}
+	onTouch(e) {
+		e.preventDefault(), this.props.onToggle(!this.props.toggled);
+	}
+	UNSAFE_componentWillReceiveProps(t) {
+		this.setState({ show: t.show }), t.language !== this.props?.language && (e.defaultProps = {
+			...e.defaultProps,
+			showMessage: B.t("common:showCorrectAnswer", { lng: t.language }),
+			hideMessage: B.t("common:hideCorrectAnswer", { lng: t.language })
+		});
+	}
+	render() {
+		let { className: e, toggled: t, hideMessage: n, showMessage: r } = this.props;
+		return /* @__PURE__ */ w(re, {
+			className: e,
+			children: /* @__PURE__ */ w(k, {
+				show: this.state.show,
+				children: /* @__PURE__ */ T(H, {
+					onClick: this.onClick.bind(this),
+					onTouchEnd: this.onTouch.bind(this),
+					children: [/* @__PURE__ */ T(G, { children: [/* @__PURE__ */ w(p, {
+						nodeRef: this.openIconRef,
+						timeout: 400,
+						in: t,
+						exit: !t,
+						classNames: {
+							enter: "enter",
+							enterActive: "enter-active",
+							exit: "exit",
+							exitActive: "exit-active"
+						},
+						children: /* @__PURE__ */ w(W, {
+							ref: this.openIconRef,
+							children: /* @__PURE__ */ w(N, { open: t }, "correct-open")
+						})
+					}), /* @__PURE__ */ w(p, {
+						nodeRef: this.closedIconRef,
+						timeout: 5e3,
+						in: !t,
+						exit: t,
+						classNames: {
+							enter: "enter",
+							enterActive: "enter-active",
+							exit: "exit",
+							exitActive: "exit-active"
+						},
+						children: /* @__PURE__ */ w(W, {
+							ref: this.closedIconRef,
+							children: /* @__PURE__ */ w(N, { open: t }, "correct-closed")
+						})
+					})] }), /* @__PURE__ */ w(I, {
+						false: !0,
+						children: /* @__PURE__ */ w(U, {
+							"aria-hidden": !this.state.show,
+							children: t ? n : r
+						})
+					})]
+				})
+			})
+		});
+	}
+}, ae = {
+	advanced: "Advanced Multi",
+	simple: "Simple"
+}, oe = h("div")(({ theme: e }) => ({
+	marginTop: e.spacing(2),
+	marginBottom: e.spacing(2),
+	padding: e.spacing(1)
+})), se = h("div", { shouldForwardProp: (e) => !["isCorrect", "isIncorrect"].includes(e) })(({ theme: e, isCorrect: t, isIncorrect: n }) => ({
+	color: d.text(),
+	background: d.background(),
+	border: t ? `2px solid ${d.correct()} !important` : n ? `2px solid ${d.incorrect()} !important` : `1px solid ${d.primaryLight()}`,
+	width: "fit-content",
+	fontSize: "1rem",
+	padding: t || n ? e.spacing(1) : e.spacing(.5),
+	letterSpacing: t || n ? "0.5px" : "normal",
+	"& > .mq-math-mode": { "& > .mq-hasCursor": { "& > .mq-cursor": { display: "none" } } }
+}));
+if (typeof document < "u") {
+	let e = "math-inline-simple-question-styles";
+	if (!document.getElementById(e)) {
+		let t = document.createElement("style");
+		t.id = e, t.textContent = `
+      .response-editor {
+        display: flex;
+        justify-content: center;
+        width: auto;
+        max-width: fit-content;
+        height: auto;
+        text-align: left;
+        padding: 8px;
+      }
+      .response-editor.mq-math-mode {
+        border: 1px solid ${d.primaryLight()};
+      }
+    `, document.head.appendChild(t);
+	}
+}
+var ce = class extends S.Component {
+	static propTypes = {
+		onSimpleResponseChange: E.default.func,
+		model: E.default.object.isRequired,
+		emptyResponse: E.default.bool,
+		session: E.default.object.isRequired,
+		showCorrect: E.default.bool,
+		onSubFieldFocus: E.default.func.isRequired,
+		showKeypad: E.default.bool.isRequired
+	};
+	constructor(e) {
+		super(e), this.mathToolBarId = `math-toolbar-${(/* @__PURE__ */ new Date()).getTime()}`;
+	}
+	mathToolBarContainsTarget = (e) => document.getElementById(this.mathToolBarId).contains(e.target);
+	handleClick = (e) => {
+		try {
+			this.mathToolBarContainsTarget(e) || this.setState({ showKeypad: !1 });
+		} catch {}
+	};
+	onFocus = () => {
+		let { onSubFieldFocus: e } = this.props;
+		e(this.mathToolBarId);
+	};
+	render() {
+		let { model: e, showCorrect: t, session: n, emptyResponse: r, onSimpleResponseChange: i, showKeypad: a } = this.props, { config: o, disabled: s, correctness: c } = e || {};
+		if (!o) return;
+		let l = c && c.correct, { responses: u, equationEditor: d } = o;
+		return /* @__PURE__ */ w(oe, {
+			"data-keypad": !0,
+			children: t || s ? /* @__PURE__ */ w(se, {
+				isIncorrect: !r && !l && !t,
+				isCorrect: !r && (l || t),
+				children: /* @__PURE__ */ w(m.Static, { latex: t ? u && u.length && u[0].answer : n.response || "" })
+			}) : /* @__PURE__ */ w("div", {
+				id: this.mathToolBarId,
+				children: /* @__PURE__ */ w(g, {
+					classNames: { editor: "response-editor" },
+					latex: n.response,
+					keypadMode: d,
+					onChange: i,
+					onDone: () => {},
+					onFocus: this.onFocus,
+					controlledKeypad: !0,
+					showKeypad: a,
+					hideDoneButton: !0
+				})
+			})
+		});
+	}
+};
+//#endregion
+//#region src/delivery/main.tsx
+function K(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function q(e, t) {
+	return !e || K(e) ? e : K(e.default) ? e.default : t && K(e[t]) ? e[t] : t && K(e[t]?.default) ? e[t].default : e;
+}
+var le = q(a, "UiLayout") || q(X.UiLayout, "UiLayout"), J = q(l, "PreviewPrompt") || q(X.PreviewPrompt, "PreviewPrompt"), ue = q(b, "Readable") || q(X.Readable, "Readable"), de = q(i, "Collapsible") || q(X.Collapsible, "Collapsible"), fe = q(v, "Feedback") || q(X.Feedback, "Feedback"), pe = y, Y = pe.default, X = Y && typeof Y == "object" ? Y : pe, { translator: Z } = x, me = !1, he = /\\newline/g, Q = /{{response}}/gm, ge = 6, _e = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+function ve(e = []) {
+	return e.map((e) => ({
+		name: e,
+		latex: e,
+		write: e,
+		label: e
+	}));
+}
+function ye(e, t) {
+	let n = e;
+	for (; n !== null;) {
+		if (t && n === t) return !0;
+		n = n.parentNode;
+	}
+	return !1;
+}
+function be(e = [], t) {
+	return Math.floor(e.length / 5) * 30 + (t === "miscellaneous" ? 600 : 500);
+}
+function xe(e, t) {
+	let { config: n, disabled: r } = e || {}, { expression: i, responses: a, printMode: o, alwaysShowCorrect: s } = n || {};
+	if (n && i) {
+		let e = i;
+		if (t.showCorrect) return a && a.length && a[0].answer;
+		let n = 1;
+		return (e || "").replace(Q, function() {
+			let e = t.session.answers[`r${n}`];
+			if (o && !s) {
+				let e = "\\ \\ ".repeat(30) + "\\newline ";
+				return `\\MathQuillMathField[r${n++}]{${e.repeat(3)}}`;
+			}
+			return r ? `\\embed{answerBlock}[r${n++}]` : `\\MathQuillMathField[r${n++}]{${e && e.value || ""}}`;
+		}).replace(he, "\\embed{newLine}[]");
+	}
+}
+function Se(e, t) {
+	let n = {};
+	if (t.config && t.config.expression) {
+		let r = 1;
+		(t.config.expression || "").replace(Q, () => {
+			n[`r${r}`] = { value: e && e.answers && e.answers[`r${r}`] && e.answers[`r${r}`].value || "" }, r += 1;
+		});
+	}
+	return n;
+}
+var Ce = class extends S.Component {
+	static propTypes = {
+		session: E.default.object.isRequired,
+		onSessionChange: E.default.func,
+		model: E.default.object.isRequired
+	};
+	constructor(e) {
+		super(e);
+		let { model: t, session: n } = e, r = Se(n, t);
+		this.state = {
+			session: {
+				...e.session,
+				answers: r
+			},
+			activeAnswerBlock: "",
+			showCorrect: this.props.model.config.alwaysShowCorrect || !1,
+			tooltipContainerRef: S.createRef()
+		};
+	}
+	UNSAFE_componentWillMount() {
+		typeof window < "u" && (me ||= (_("answerBlock", (e) => {
+			let t = we();
+			return {
+				htmlString: `<div class="${t.blockContainer}">
+                <div class="${t.blockResponse}" id="${e}Index">R</div>
+                <div class="${t.blockMath}">
+                  <span id="${e}"></span>
+                </div>
+              </div>`,
+				text: () => "text",
+				latex: () => `\\embed{answerBlock}[${e}]`
+			};
+		}), !0));
+	}
+	handleAnswerBlockDomUpdate = () => {
+		let { model: e } = this.props, { session: t, showCorrect: n } = this.state, r = t.answers;
+		this.root && e.disabled && !n && Object.keys(r).forEach((t) => {
+			let n = this.root.querySelector(`#${t}`), i = this.root.querySelector(`#${t}Index`);
+			if (n) {
+				let a = r[t];
+				f(n, a && a.value || ""), e.view && (n.parentElement.parentElement.classList.remove("correct"), n.parentElement.parentElement.classList.remove("incorrect")), i.textContent = "R";
+			}
+		}), s(this.root);
+	};
+	countResponseOccurrences(e) {
+		let t = e?.match(/\{\{response\}\}/g);
+		return t ? t.length : 0;
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		let { config: n } = this.props.model, { config: r = {} } = e.model || {}, { session: i } = this.props, { session: a = {} } = e || {};
+		if (i && a && !t(i.answers, a.answers) && this.setState({ session: {
+			...a,
+			answers: Se(a, this.props.model)
+		} }), n.note && n.language && n.language !== r.language && n.note === Z.t("mathInline.primaryCorrectWithAlternates", { lng: n.language }) && (n.note = Z.t("mathInline.primaryCorrectWithAlternates", { lng: r.language })), (n.env && n.env.mode !== "evaluate" || r.env && r.env.mode !== "evaluate") && this.setState({
+			...this.state.session,
+			showCorrect: !1
+		}), r.alwaysShowCorrect && this.setState({ showCorrect: !0 }), this.countResponseOccurrences(n.expression) < this.countResponseOccurrences(r.expression) && setTimeout(() => this.updateAria(), 100), n && n.responses && n.responses.length !== r.responses.length || !n && r && r.responses || n && r && n.expression !== r.expression) {
+			let e = {}, t = this.state.session.answers, n = 1;
+			(r.expression || "").replace(Q, () => {
+				e[`r${n}`] = { value: t && t[`r${n}`] && t[`r${n}`].value || "" }, n++;
+			}), this.setState((t) => ({ session: {
+				...t.session,
+				completeAnswer: this.mqStatic && this.mqStatic.mathField.latex(),
+				answers: e
+			} }), this.handleAnswerBlockDomUpdate);
+		}
+	}
+	shouldComponentUpdate(e, n) {
+		let r = t(this.props.model, e.model), i = t(this.state, n);
+		return !r || !i;
+	}
+	componentDidMount() {
+		this.handleAnswerBlockDomUpdate(), this.updateAria(), setTimeout(() => s(this.root), 100);
+	}
+	componentDidUpdate(e, t) {
+		this.handleAnswerBlockDomUpdate(), e.model?.config?.responseType !== this.props.model?.config?.responseType && this.updateAria();
+	}
+	updateAria = () => {
+		this.root && (this.root.querySelectorAll(".mq-selectable").forEach((e) => e.setAttribute("aria-hidden", "true")), this.root.querySelectorAll("textarea").forEach((e, t) => {
+			e.setAttribute("aria-label", "Enter answer.");
+			let n = `instructions-${t}`, r = e.closest(".mq-textarea");
+			if (r) {
+				let t = r.querySelector(`#${n}`);
+				t || (t = document.createElement("span"), t.id = n, t.className = "sr-only", t.textContent = "This field supports both keypad and keyboard input. Use the keyboard to access and interact with the on-screen math keypad, which accepts LaTeX markup. Use the down arrow key to open the keypad and navigate its buttons. Use the escape key to close the keypad and return to the input field.", r.insertBefore(t, e)), e.setAttribute("aria-describedby", n);
+			}
+		}));
+	};
+	focusFirstKeypadElement = () => {
+		setTimeout(() => {
+			let e = document.querySelector("[data-keypad]");
+			if (e) {
+				let t = e.querySelector("button, [role='button']");
+				t && t.focus();
+			}
+		}, 0);
+	};
+	handleKeyDown = (e, t) => {
+		let n = ye(e.target, this.root), r = this.mqStatic && this.mqStatic.inputRef?.current ? this.mqStatic.inputRef?.current.contains(document.activeElement) : document.activeElement?.getAttribute("aria-label") === "Enter answer.", { key: i, type: a } = e;
+		r && (i === "ArrowDown" || a === "click" || a === "touchstart") ? this.state.activeAnswerBlock !== t && n && (this.cleanupKeyDownListener(), this.setState({ activeAnswerBlock: t }, () => {
+			this.onSubFieldFocus(t), i === "ArrowDown" && this.focusFirstKeypadElement();
+		})) : e.key === "Escape" && this.setState({ activeAnswerBlock: "" });
+	};
+	onSubFieldFocus = (e) => {
+		this.handleEvent || (this.handleEvent = (t) => {
+			this.handleKeyDown(t, e);
+		}, document.addEventListener("keydown", this.handleEvent), document.addEventListener("click", this.handleEvent), document.addEventListener("touchstart", this.handleEvent));
+	};
+	cleanupKeyDownListener = () => {
+		this.handleEvent &&= (document.removeEventListener("keydown", this.handleEvent), document.removeEventListener("click", this.handleEvent), document.removeEventListener("touchstart", this.handleEvent), null);
+	};
+	componentWillUnmount() {
+		this.cleanupKeyDownListener && this.cleanupKeyDownListener();
+	}
+	onDone = () => {};
+	onSimpleResponseChange = (e) => {
+		this.setState((t) => ({ session: {
+			...t.session,
+			response: e
+		} }), this.callOnSessionChange);
+	};
+	toNodeData = (e) => {
+		if (!e) return;
+		let { type: t, value: n } = e;
+		return t === "command" || t === "cursor" ? e : t === "answer" ? {
+			type: "answer",
+			...e
+		} : n === "clear" ? { type: "clear" } : {
+			type: "write",
+			value: n
+		};
+	};
+	setInput = (e) => {
+		this.input = e;
+	};
+	onClick = (e) => {
+		let t = window.scrollX, n = window.scrollY, r = this.toNodeData(e);
+		r.type === "clear" ? this.input.clear() : r.type === "command" ? Array.isArray(r.value) ? r.value.forEach((e) => {
+			this.input.cmd(e);
+		}) : this.input.cmd(r.value) : r.type === "cursor" ? this.input.keystroke(r.value) : this.input.write(r.value), this.input.focus(), requestAnimationFrame(() => {
+			window.scrollTo(t, n), requestAnimationFrame(() => window.scrollTo(t, n));
+		});
+	};
+	callOnSessionChange = () => {
+		let { onSessionChange: e } = this.props;
+		e && e(this.state.session);
+	};
+	toggleShowCorrect = (e) => {
+		this.setState({ showCorrect: e }, this.handleAnswerBlockDomUpdate);
+	};
+	subFieldChanged = (e, t) => {
+		if (u(), e) {
+			let n = window.scrollX, r = window.scrollY;
+			this.setState((n) => ({ session: {
+				...n.session,
+				completeAnswer: this.mqStatic && this.mqStatic.mathField.latex(),
+				answers: {
+					...n.session.answers,
+					[e]: { value: t }
+				}
+			} }), () => {
+				this.callOnSessionChange(), requestAnimationFrame(() => {
+					window.scrollTo(n, r);
+				});
+			});
+		}
+	};
+	getFieldName = (e, t) => {
+		let { answers: n } = this.state.session;
+		if (Object.keys(n || {}).length) return Object.keys(n).find((n) => {
+			let r = t[n];
+			return r && r.id == e.id;
+		});
+	};
+	onBlur = (e) => {
+		let { relatedTarget: t, currentTarget: n } = e || {}, r = n && n.closest("[role=tooltip]");
+		function i(e, t = 0) {
+			if (!e || t >= 16) return null;
+			let n = e.offsetParent;
+			return n ? n.getAttribute("role") === "tooltip" ? n : i(n, t + 1) : null;
+		}
+		function a(e, t = 0) {
+			if (!e || t >= 4) return null;
+			let n = e?.children?.[0];
+			return n ? n.attributes && n.attributes["data-keypad"] ? n : a(n, t + 1) : null;
+		}
+		let o = i(t), s = o ? a(o) : null;
+		(!t || !n || !s?.attributes["data-keypad"]) && (r || this.setState({ activeAnswerBlock: "" }));
+	};
+	setTooltipRef(e) {
+		setTimeout(() => {
+			if (e && _e) {
+				let e = document.querySelector("[role='tooltip']");
+				e && e.firstChild.setAttribute("tabindex", "-1");
+			}
+		}, 1);
+	}
+	render() {
+		let { model: t } = this.props, { activeAnswerBlock: n, showCorrect: i, session: a, tooltipContainerRef: o } = this.state, { config: s, correctness: l, disabled: u, extraCSSRules: f, view: p, teacherInstructions: h, rationale: g, feedback: _, animationsDisabled: v, printMode: y, alwaysShowCorrect: b, language: x } = t || {};
+		if (!s) return null;
+		let { showNote: S, note: C, prompt: E, responses: D, responseType: O, equationEditor: k, customKeys: A, id: j, env: { mode: M, role: N } = {} } = s || {}, P = (i || M === "view" && N === "instructor") && S && C, F = e(D), I = !F && l && l.correctness !== "correct", L = u && l, R = ve(A), z = l && l.correct, B = xe(t, this.state) || "", V = u && !l, re = y && !b, H = g && (r(g) || c(g)), U = h && (r(h) || c(h)), W = /* @__PURE__ */ w(Ne, { children: /* @__PURE__ */ w(m.Static, {
+			className: "static-math",
+			ref: (e) => {
+				e && (this.mqStatic = e);
+			},
+			latex: B,
+			onSubFieldChange: this.subFieldChanged,
+			getFieldName: this.getFieldName,
+			setInput: this.setInput,
+			onSubFieldFocus: this.onSubFieldFocus,
+			onBlur: this.onBlur
+		}) }), G = /* @__PURE__ */ T(Oe, { children: [
+			M === "gather" && /* @__PURE__ */ w(Pe, { children: "Math Equation Response Question" }),
+			V && U && (v ? /* @__PURE__ */ w("div", { dangerouslySetInnerHTML: { __html: h } }) : /* @__PURE__ */ w($, {
+				labels: {
+					hidden: "Show Teacher Instructions",
+					visible: "Hide Teacher Instructions"
+				},
+				children: /* @__PURE__ */ w("div", { dangerouslySetInnerHTML: { __html: h } })
+			})),
+			E && /* @__PURE__ */ w(De, { children: /* @__PURE__ */ w(J, { prompt: E }) }),
+			re ? W : /* @__PURE__ */ w(ue, {
+				false: !0,
+				children: /* @__PURE__ */ T(Me, {
+					tabIndex: 0,
+					children: [O === ae.simple && /* @__PURE__ */ w(ce, {
+						onSimpleResponseChange: this.onSimpleResponseChange,
+						showCorrect: i,
+						emptyResponse: F,
+						model: t,
+						session: a,
+						onSubFieldFocus: this.onSubFieldFocus,
+						showKeypad: !!n
+					}), O === ae.advanced && /* @__PURE__ */ w(je, {
+						ref: o,
+						isIncorrect: !F && !z && !i,
+						isCorrect: !F && (z || i),
+						showCorrectness: !F && u && l && !p,
+						correctAnswerShown: i,
+						printCorrect: y && b,
+						children: /* @__PURE__ */ w(te, {
+							ref: (e) => this.setTooltipRef(e),
+							enterTouchDelay: 0,
+							interactive: !0,
+							open: !!n,
+							slotProps: {
+								popper: {
+									container: o?.current || void 0,
+									placement: "bottom-start",
+									sx: {
+										backgroundColor: "transparent",
+										width: "650px",
+										opacity: 1,
+										"& .MuiTooltip-arrow": { display: "none" }
+									},
+									modifiers: [
+										{
+											name: "offset",
+											options: { offset: [0, 8] }
+										},
+										{
+											name: "preventOverflow",
+											enabled: !0,
+											options: {
+												boundary: "viewport",
+												padding: 8
+											}
+										},
+										{
+											name: "computeStyles",
+											options: {
+												adaptive: !0,
+												gpuAcceleration: !0
+											}
+										},
+										{
+											name: "flip",
+											enabled: !1
+										}
+									]
+								},
+								tooltip: { sx: {
+									fontSize: "initial",
+									backgroundColor: "transparent",
+									width: "600px",
+									marginTop: 0,
+									paddingTop: 0,
+									boxShadow: "none"
+								} }
+							},
+							title: Object.keys(a.answers).map((e) => e === n && !(i || u) && /* @__PURE__ */ w(Ae, {
+								"data-keypad": !0,
+								style: { width: be(R, k) },
+								children: /* @__PURE__ */ w(ee, {
+									additionalKeys: R,
+									mode: k || ge,
+									onClick: this.onClick
+								})
+							}, e) || null),
+							children: /* @__PURE__ */ w("div", { children: /* @__PURE__ */ w(m.Static, {
+								className: "static-math",
+								ref: (e) => {
+									e && (this.mqStatic = e);
+								},
+								latex: B,
+								onSubFieldChange: this.subFieldChanged,
+								getFieldName: this.getFieldName,
+								setInput: this.setInput,
+								onSubFieldFocus: this.onSubFieldFocus,
+								onBlur: this.onBlur
+							}) })
+						})
+					})]
+				})
+			}),
+			V && P && /* @__PURE__ */ w(ke, { dangerouslySetInnerHTML: { __html: `<strong>Note:</strong> ${C}` } }),
+			V && H && (v ? /* @__PURE__ */ w("div", { dangerouslySetInnerHTML: { __html: g } }) : /* @__PURE__ */ w(de, {
+				labels: {
+					hidden: "Show Rationale",
+					visible: "Hide Rationale"
+				},
+				children: /* @__PURE__ */ w("div", { dangerouslySetInnerHTML: { __html: g } })
+			}))
+		] });
+		return L && (I || U || H || _) ? /* @__PURE__ */ w(Te, {
+			extraCSSRules: f,
+			ref: (e) => {
+				let t = ne.findDOMNode(e);
+				this.root = t || this.root;
+			},
+			children: /* @__PURE__ */ w(Ee, {
+				interactive: !0,
+				enterTouchDelay: 0,
+				placement: "bottom-start",
+				slotProps: {
+					tooltip: { sx: (e) => ({
+						background: `${d.primaryLight()} !important`,
+						color: d.text(),
+						padding: e.spacing(2),
+						border: `1px solid ${d.secondary()}`,
+						fontSize: "16px",
+						"& :not(.MathJax) > table tr": { "&:nth-child(2n)": { backgroundColor: "unset !important" } }
+					}) },
+					popper: {
+						sx: { opacity: 1 },
+						modifiers: [{
+							name: "offset",
+							options: { offset: [0, 2] }
+						}]
+					}
+				},
+				title: /* @__PURE__ */ T("div", { children: [
+					/* @__PURE__ */ w(Oe, { children: I && /* @__PURE__ */ w(Fe, {
+						language: x,
+						show: !0,
+						toggled: i,
+						onToggle: this.toggleShowCorrect
+					}) }),
+					U && /* @__PURE__ */ w($, {
+						labels: {
+							hidden: "Show Teacher Instructions",
+							visible: "Hide Teacher Instructions"
+						},
+						children: /* @__PURE__ */ w(J, { prompt: h })
+					}, "collapsible-teacher-instructions"),
+					P && r(C) && /* @__PURE__ */ w($, {
+						labels: {
+							hidden: Z.t("common:showNote", { lng: x }),
+							visible: Z.t("common:hideNote", { lng: x })
+						},
+						children: /* @__PURE__ */ w(J, { prompt: C })
+					}, "collapsible-note"),
+					H && /* @__PURE__ */ w($, {
+						labels: {
+							hidden: "Show Rationale",
+							visible: "Hide Rationale"
+						},
+						children: /* @__PURE__ */ w(J, { prompt: g })
+					}, "collapsible-rationale"),
+					_ && /* @__PURE__ */ w(fe, {
+						correctness: l.correctness,
+						feedback: _
+					})
+				] }),
+				children: G
+			})
+		}) : /* @__PURE__ */ w(Te, {
+			id: j,
+			extraCSSRules: f,
+			ref: (e) => {
+				let t = ne.findDOMNode(e);
+				this.root = t || this.root;
+			},
+			children: G
+		});
+	}
+}, we = () => ({
+	blockContainer: "block-container",
+	blockResponse: "block-response",
+	blockMath: "block-math"
+});
+if (typeof document < "u") {
+	let e = "math-inline-block-styles";
+	if (!document.getElementById(e)) {
+		let t = document.createElement("style");
+		t.id = e, t.textContent = `
+      .block-container {
+        margin: 8px !important;
+        display: inline-flex;
+        border: 2px solid grey !important;
+      }
+      .block-response {
+        color: grey;
+        background: #f5f5f5;
+        font-size: 0.8rem !important;
+        padding: 4px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-right: 2px solid #bdbdbd !important;
+        flex-shrink: 0;
+        flex-grow: 0;
+        flex-basis: auto;
+      }
+      .block-math {
+        color: ${d.text()};
+        background-color: ${d.background()};
+        padding: 4px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-grow: 1;
+      }
+      .block-math > .mq-math-mode > .mq-hasCursor > .mq-cursor {
+        display: none;
+      }
+      .sr-only {
+        position: absolute;
+        left: -10000px;
+        top: auto;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+      }
+      .static-math > .mq-root-block > .mq-editable-field {
+        border-color: ${d.text()};
+      }
+    `, document.head.appendChild(t);
+	}
+}
+var Te = h(le)(() => ({
+	color: d.text(),
+	backgroundColor: d.background(),
+	display: "inline-block"
+})), Ee = h(te)({}), De = h("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), Oe = h("div")({
+	width: "100%",
+	position: "relative",
+	backgroundColor: d.background(),
+	color: d.text()
+}), ke = h("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), $ = h(de)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), Ae = h("div")(({ theme: e }) => ({
+	zIndex: 10,
+	minWidth: "400px",
+	marginTop: e.spacing(2)
+})), je = h("div", { shouldForwardProp: (e) => ![
+	"isIncorrect",
+	"isCorrect",
+	"showCorrectness",
+	"correctAnswerShown",
+	"printCorrect"
+].includes(e) })(({ theme: e, isIncorrect: t, isCorrect: n, showCorrectness: r, correctAnswerShown: i, printCorrect: a }) => {
+	let o = t ? d.incorrect() : n ? d.correct() : void 0;
+	return {
+		maxWidth: "fit-content",
+		padding: e.spacing(.25),
+		...r && { border: o ? `2px solid ${o} !important` : "2px solid" },
+		...!r && o && { borderColor: `${o} !important` },
+		...i && {
+			padding: e.spacing(1),
+			letterSpacing: "0.5px"
+		},
+		...a && { border: `2px solid ${d.correct()} !important` },
+		"& .mq-math-mode": {
+			"& .mq-root-block": {
+				paddingRight: "0 !important",
+				paddingLeft: "0 !important",
+				"& .mq-editable-field": {
+					minWidth: "10px",
+					padding: e.spacing(.4)
+				}
+			},
+			"& sup": { top: 0 }
+		}
+	};
+}), Me = h("div")({
+	position: "relative",
+	"& .mq-overarrow-inner": {
+		border: "none !important",
+		padding: "0 !important"
+	},
+	"& .mq-overarrow-inner-right": { display: "none !important" },
+	"& .mq-overarrow-inner-left": { display: "none !important" },
+	"& .mq-overarrow.mq-arrow-both": {
+		minWidth: "1.23em",
+		"& *": { lineHeight: "1 !important" },
+		"&:before": {
+			top: "-0.4em",
+			left: "-1px"
+		},
+		"&:after": {
+			top: "-2.4em",
+			right: "-1px"
+		},
+		"&.mq-empty:after": { top: "-0.45em" }
+	},
+	"& .mq-overarrow.mq-arrow-right": { "&:before": {
+		top: "-0.4em",
+		right: "-1px"
+	} },
+	"& .mq-longdiv-inner": {
+		borderTop: "1px solid !important",
+		paddingTop: "1.5px !important"
+	},
+	"& .mq-parallelogram": { lineHeight: .85 }
+}), Ne = h("div")(({ theme: e }) => ({
+	marginBottom: e.spacing(1),
+	pointerEvents: "none"
+})), Pe = h("h2")({
+	position: "absolute",
+	left: "-10000px",
+	top: "auto",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden"
+}), Fe = h(ie)(({ theme: e }) => ({
+	color: d.text(),
+	marginBottom: e.spacing(2)
+}));
+//#endregion
+export { Ce as t };
+
+//# sourceMappingURL=main-CohR01RN.js.map