@pie-element/math-templated 7.1.1-next.11 → 7.1.1-next.13

package/dist/delivery/main.js

@@ -0,0 +1,492 @@
+import e from "react";
+import t from "prop-types";
+import { isEmpty as n, isEqual as r } from "@pie-element/shared-lodash";
+import { styled as i } from "@mui/material/styles";
+import a from "@mui/material/Tooltip";
+import { HorizontalKeypad as o, applyStaticMath as s, mq as c, registerEmbed as l, updateSpans as u } from "@pie-lib/math-input";
+import * as d from "@pie-lib/render-ui";
+import { Collapsible as f, PreviewPrompt as p, Readable as m, UiLayout as h, color as g, hasMedia as _, hasText as v } from "@pie-lib/render-ui";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { renderMath as x } from "@pie-element/shared-math-rendering-mathjax";
+import { Customizable as S } from "@pie-lib/mask-markup";
+import C from "@pie-lib/correct-answer-toggle";
+import w from "react-dom";
+//#region src/delivery/main.tsx
+function T(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function E(e, t) {
+	return !e || T(e) ? e : T(e.default) ? e.default : t && T(e[t]) ? e[t] : t && T(e[t]?.default) ? e[t].default : e;
+}
+var D = E(h, "UiLayout") || E(N.UiLayout, "UiLayout"), O = E(p, "PreviewPrompt") || E(N.PreviewPrompt, "PreviewPrompt"), k = E(m, "Readable") || E(N.Readable, "Readable"), A = E(f, "Collapsible") || E(N.Collapsible, "Collapsible"), j = d, M = j.default, N = M && typeof M == "object" ? M : j, P = i(D)({
+	color: g.text(),
+	backgroundColor: g.background(),
+	display: "inline-block"
+}), F = i("div")({
+	width: "100%",
+	position: "relative",
+	backgroundColor: g.background(),
+	color: g.text()
+}), I = i("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), L = i("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), R = i("div")({
+	position: "relative",
+	"& > div > div": {
+		display: "flex",
+		alignItems: "baseline",
+		flexWrap: "wrap"
+	},
+	"& .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 }
+}), z = i("div")(({ theme: e, $incorrect: t, $correct: n, $showCorrectness: r, $correctAnswerShown: i }) => ({
+	maxWidth: "fit-content",
+	...t && { borderColor: `${g.incorrect()} !important` },
+	...n && { borderColor: `${g.correct()} !important` },
+	...r && { border: "2px solid" },
+	...i && {
+		padding: e.spacing(1),
+		letterSpacing: "0.5px"
+	},
+	"& > .mq-math-mode": {
+		"& > .mq-root-block": { "& > .mq-editable-field": {
+			minWidth: "10px",
+			padding: e.spacing(.25)
+		} },
+		"& sup": { top: 0 }
+	}
+})), B = i(c.Static)({ "& > .mq-root-block": { "& > .mq-editable-field": { borderColor: g.text() } } }), V = i("div")(({ theme: e }) => ({
+	zIndex: 10,
+	minWidth: "400px",
+	marginTop: e.spacing(2)
+})), H = i("div")(({ theme: e }) => ({
+	marginBottom: e.spacing(1),
+	pointerEvents: "none"
+})), U = i("h2")({
+	position: "absolute",
+	left: "-10000px",
+	top: "auto",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden"
+}), W = i("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), G = i(C)(({ theme: e }) => ({
+	color: g.text(),
+	marginBottom: e.spacing(2)
+}));
+if (typeof document < "u") {
+	let e = "math-templated-main-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 {
+        flex: 2;
+        color: grey;
+        background: rgba(0, 0, 0, 0.04);
+        font-size: 0.8rem !important;
+        padding: 4px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-right: 2px solid #bdbdbd !important;
+      }
+      .block-math {
+        color: ${g.text()};
+        background-color: ${g.background()};
+        padding: 4px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 8;
+      }
+      .block-math > .mq-math-mode > .mq-hasCursor > .mq-cursor {
+        display: none;
+      }
+      .correct {
+        border-color: ${g.correct()} !important;
+      }
+      .incorrect {
+        border-color: ${g.incorrect()} !important;
+      }
+    `, document.head.appendChild(t);
+	}
+}
+var K = !1, q = /(\{\{\d+\}\})/gm, J = 6, Y = 8, X = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+function Z(e = []) {
+	return e.map((e) => ({
+		name: e,
+		latex: e,
+		write: e,
+		label: e
+	}));
+}
+function Q(e = [], t) {
+	return Math.floor(e.length / 5) * 30 + (t === "miscellaneous" ? 600 : 500);
+}
+function ee(e) {
+	return e.split(q).filter((e) => e);
+}
+function te(e, t) {
+	let { responses: n, disabled: r, markup: i, printMode: a, alwaysShowCorrect: o } = e || {};
+	if (i) return t.showCorrect ? Object.keys(n || {}).reduce((e, t) => (e[t] = n?.[t]?.answer, e), {}) : ee(i).reduce((e, n) => {
+		if (n.match(q)) {
+			let i = $.getResponseKey(n), s = t.session.answers[`r${i}`];
+			if (a && !o) {
+				let t = "\\ \\ ".repeat(30) + "\\embed{newLine}[] ";
+				return {
+					...e,
+					[i]: `\\MathQuillMathField[r${i}]{${t.repeat(3)}}`
+				};
+			}
+			return r ? {
+				...e,
+				[i]: `\\embed{answerBlock}[r${i}]`
+			} : {
+				...e,
+				[i]: `\\MathQuillMathField[r${i}]{${s && s.value || ""}}`
+			};
+		}
+		return e;
+	}, {});
+}
+var ne = {
+	name: "smartHorizontalPlacement",
+	enabled: !0,
+	phase: "main",
+	requires: ["popperOffsets"],
+	fn: ({ state: e }) => {
+		let t = e.modifiersData.popperOffsets;
+		if (!t) return;
+		let n = window.innerWidth || document.documentElement.clientWidth, r = e.rects.popper.width, i = e.elements.reference.getBoundingClientRect().left, a = e.elements.popper?.offsetParent, o = a?.getBoundingClientRect?.() || { left: 0 }, s = a?.scrollLeft || 0, c = i - o.left + s, l = c - i, u = l + Y, d = l + n - r - Y;
+		i + r <= n ? t.x = c : t.x = c - r, d < u ? t.x = u : t.x = Math.min(Math.max(t.x, u), d);
+	}
+}, $ = class i extends e.Component {
+	static getResponseKey = (e) => (e || "").replaceAll("{{", "").replaceAll("}}", "");
+	static propTypes = {
+		session: t.object.isRequired,
+		onSessionChange: t.func,
+		model: t.object.isRequired
+	};
+	constructor(t) {
+		super(t);
+		let n = {}, { model: r, session: a } = t || {}, { markup: o, alwaysShowCorrect: s } = r || {}, { answers: c } = a || {};
+		o && (o || "").replace(q, (e) => {
+			let t = i.getResponseKey(e), r = c && c[`r${t}`];
+			n[`r${t}`] = { value: r?.value || "" };
+		}), this.state = {
+			session: {
+				...t.session,
+				answers: n
+			},
+			activeAnswerBlock: "",
+			showCorrect: s || !1,
+			tooltipContainerRef: e.createRef()
+		};
+	}
+	UNSAFE_componentWillMount() {
+		typeof window < "u" && (K ||= (l("answerBlock", (e) => ({
+			htmlString: `<div class="block-container">
+              <div class="block-response" id="${e}Index">R</div>
+              <div class="block-math">
+                <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];
+				s(n, a && a.value || ""), e.view && (n.parentElement.parentElement.classList.remove("correct"), n.parentElement.parentElement.classList.remove("incorrect")), i.textContent = "R";
+			}
+		}), x(this.root);
+	};
+	UNSAFE_componentWillReceiveProps(e) {
+		let { model: t } = this.props, { model: n = {} } = e || {}, { markup: a = "", env: o = {} } = t || {}, { markup: s = "", env: c = {}, alwaysShowCorrect: l = !1 } = n, u = (e) => e && e.mode === "evaluate";
+		(!u(o) || !u(c)) && this.setState((e) => ({
+			...e.session,
+			showCorrect: !1
+		})), l && this.setState({ showCorrect: !0 });
+		let d = a.match(q), f = s.match(q);
+		if (!r(d, f)) {
+			let e = {}, t = this.state.session.answers;
+			(f || []).forEach((n) => {
+				let r = i.getResponseKey(n), a = t && t[`r${r}`];
+				e[`r${r}`] = { value: a?.value || "" };
+			}), this.setState((t) => ({ session: {
+				...t.session,
+				answers: e
+			} }), () => {
+				this.props.onSessionChange(this.state.session), this.handleAnswerBlockDomUpdate();
+			});
+		}
+	}
+	shouldComponentUpdate(e, t) {
+		let n = r(this.props.model, e.model), i = r(this.state, t);
+		return !n || !i;
+	}
+	componentDidMount() {
+		this.handleAnswerBlockDomUpdate(), setTimeout(() => x(this.root), 100);
+	}
+	componentDidUpdate() {
+		this.handleAnswerBlockDomUpdate();
+	}
+	onSubFieldFocus = (e) => {
+		let t = Array.from(this.root?.querySelectorAll(".mq-editable-field") || []).map((e) => ({
+			el: e,
+			left: e.scrollLeft,
+			top: e.scrollTop
+		})), n = () => {
+			t.forEach(({ el: e, left: t, top: n }) => {
+				e.scrollLeft = t, e.scrollTop = n;
+			});
+		};
+		this.setState({ activeAnswerBlock: e }, () => {
+			n(), requestAnimationFrame(n), setTimeout(n, 0);
+		});
+	};
+	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 = this.toNodeData(e);
+		t.type === "clear" ? this.input.clear() : t.type === "command" ? Array.isArray(t.value) ? t.value.forEach((e) => {
+			this.input.cmd(e);
+		}) : this.input.cmd(t.value) : t.type === "cursor" ? this.input.keystroke(t.value) : this.input.write(t.value);
+		let n = this.input?.el?.() || this.root, r = [], i = n;
+		for (; i && i !== document.body && i !== document.documentElement;) (i.scrollWidth > i.clientWidth || i.scrollHeight > i.clientHeight) && r.push(i), i = i.parentElement;
+		document.scrollingElement && r.push(document.scrollingElement);
+		let a = r.map((e) => ({
+			el: e,
+			left: e.scrollLeft,
+			top: e.scrollTop
+		})), o = {
+			x: window.scrollX,
+			y: window.scrollY
+		}, s = () => {
+			a.forEach(({ el: e, left: t, top: n }) => {
+				e.scrollLeft = t, e.scrollTop = n;
+			}), window.scrollTo(o.x, o.y);
+		};
+		this.input.focus(), s(), requestAnimationFrame(s), setTimeout(s, 0);
+	};
+	callOnSessionChange = () => {
+		let { onSessionChange: e } = this.props;
+		e && e(this.state.session);
+	};
+	toggleShowCorrect = (e) => {
+		this.setState({ showCorrect: e }, this.handleAnswerBlockDomUpdate);
+	};
+	subFieldChanged = (e, t) => {
+		u(), e && this.setState((n) => ({ session: {
+			...n.session,
+			answers: {
+				...n.session.answers,
+				[e]: { value: t }
+			}
+		} }), this.callOnSessionChange);
+	};
+	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 || {};
+		function r(e, t = 0) {
+			if (!e || t >= 16) return null;
+			let n = e.offsetParent;
+			return n ? n.getAttribute("role") === "tooltip" ? n : r(n, t + 1) : null;
+		}
+		function i(e, t = 0) {
+			if (!e || t >= 4) return null;
+			let n = e?.children?.[0];
+			return n ? n.attributes && n.attributes["data-keypad"] ? n : i(n, t + 1) : null;
+		}
+		let a = r(t), o = a ? i(a) : null;
+		(!t || !n || !o?.attributes["data-keypad"]) && this.setState({ activeAnswerBlock: "" });
+	};
+	setTooltipRef(e) {
+		setTimeout(() => {
+			if (e && X) {
+				let e = document.querySelector("[role='tooltip']");
+				e && e.firstChild.setAttribute("tabindex", "-1");
+			}
+		}, 1);
+	}
+	renderTeacherInstructions = () => {
+		let { model: e } = this.props, { teacherInstructions: t, animationsDisabled: n } = e || {}, r = t && (v(t) || _(t)), i = /* @__PURE__ */ y(O, {
+			defaultClassName: "teacher-instructions",
+			prompt: t
+		});
+		return r && /* @__PURE__ */ y(L, { children: n ? i : /* @__PURE__ */ y(A, {
+			labels: {
+				hidden: "Show Teacher Instructions",
+				visible: "Hide Teacher Instructions"
+			},
+			children: i
+		}) });
+	};
+	renderRationale = () => {
+		let { model: e } = this.props, { rationale: t, animationsDisabled: n } = e || {}, r = /* @__PURE__ */ y(O, { prompt: t });
+		return t && (v(t) || _(t)) && /* @__PURE__ */ y(L, { children: n ? r : /* @__PURE__ */ y(A, {
+			labels: {
+				hidden: "Show Rationale",
+				visible: "Hide Rationale"
+			},
+			children: r
+		}) });
+	};
+	renderPlayerContent = () => {
+		let { model: e } = this.props, { activeAnswerBlock: t, showCorrect: r, session: i, tooltipContainerRef: s } = this.state, { correctness: c, disabled: l, view: u, responses: d, equationEditor: f, customKeys: p, feedback: m, env: { mode: h } = {}, printMode: g, alwaysShowCorrect: _ } = e || {}, v = n(d), b = Z(p), x = te(e, this.state) || "", C = g && !_;
+		return /* @__PURE__ */ y(R, { children: /* @__PURE__ */ y(S, {
+			disabled: l,
+			markup: e.markup,
+			value: {},
+			customMarkMarkupComponent: (e) => {
+				let n = h === "evaluate" && m && m[e], d = /* @__PURE__ */ y(B, {
+					ref: (e) => {
+						this.mqStatic = e || this.mqStatic;
+					},
+					latex: x[e],
+					onSubFieldChange: this.subFieldChanged,
+					getFieldName: this.getFieldName,
+					setInput: this.setInput,
+					onSubFieldFocus: this.onSubFieldFocus,
+					onBlur: this.onBlur
+				});
+				return /* @__PURE__ */ y(z, {
+					ref: s,
+					$incorrect: !v && !n && !r,
+					$correct: !v && (n || r),
+					$showCorrectness: !v && l && c && !u,
+					$correctAnswerShown: r,
+					children: /* @__PURE__ */ y(a, {
+						ref: (e) => this.setTooltipRef(e),
+						enterTouchDelay: 0,
+						interactive: !0,
+						open: t === `r${e}`,
+						slotProps: {
+							popper: {
+								container: s?.current || void 0,
+								placement: "bottom-start",
+								sx: {
+									backgroundColor: "transparent",
+									width: "auto",
+									opacity: 1,
+									"& .MuiTooltip-arrow": { display: "none" }
+								},
+								modifiers: [
+									{
+										name: "preventOverflow",
+										enabled: !1
+									},
+									{
+										name: "flip",
+										enabled: !1
+									},
+									ne
+								]
+							},
+							tooltip: { sx: {
+								fontSize: "initial",
+								backgroundColor: "transparent",
+								width: "auto",
+								maxWidth: "none",
+								marginTop: 0,
+								paddingTop: 0,
+								boxShadow: "none"
+							} }
+						},
+						title: Object.keys(i.answers).map((e) => e === t && !(r || l) && /* @__PURE__ */ y(V, {
+							"data-keypad": !0,
+							style: { width: Q(b, f) },
+							children: /* @__PURE__ */ y(o, {
+								additionalKeys: b,
+								mode: f || J,
+								onClick: this.onClick
+							})
+						}, e) || null),
+						children: y(C ? H : "div", { children: d })
+					})
+				});
+			}
+		}) });
+	};
+	render() {
+		let { model: e } = this.props, { showCorrect: t } = this.state, { prompt: r, env: { mode: i, role: a } = {}, extraCSSRules: o, correctness: s, responses: c, language: l, showNote: u, note: d } = e || {}, f = !n(c) && s && s.correctness !== "correct", p = (t || i === "view" && a === "instructor") && u && d;
+		return /* @__PURE__ */ y(P, {
+			extraCSSRules: o,
+			ref: (e) => {
+				let t = w.findDOMNode(e);
+				this.root = t || this.root;
+			},
+			children: /* @__PURE__ */ b(F, { children: [
+				i === "gather" && /* @__PURE__ */ y(U, { children: "Math Equation Response Question" }),
+				/* @__PURE__ */ y(F, { children: f && /* @__PURE__ */ y(G, {
+					language: l,
+					show: !0,
+					toggled: t,
+					onToggle: this.toggleShowCorrect
+				}) }),
+				this.renderTeacherInstructions(),
+				r && /* @__PURE__ */ y(I, { children: /* @__PURE__ */ y(O, { prompt: r }) }),
+				/* @__PURE__ */ y(k, {
+					false: !0,
+					children: this.renderPlayerContent()
+				}),
+				p && /* @__PURE__ */ y(W, {
+					className: "note",
+					dangerouslySetInnerHTML: { __html: d }
+				}),
+				this.renderRationale()
+			] })
+		});
+	}
+};
+//#endregion
+export { $ as default };

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 math-templated 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;