@pie-element/math-inline 12.1.1-next.147 → 12.1.1-next.16

package/dist/author/response.js

@@ -0,0 +1,238 @@
+import * as e from "react";
+import t from "prop-types";
+import { color as n } from "@pie-lib/render-ui";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { styled as a } from "@mui/material/styles";
+import { MathToolbar as o } from "@pie-lib/math-toolbar";
+import { InputContainer as s } from "@pie-lib/config-ui";
+import c from "@mui/material/InputLabel";
+import l from "@mui/material/Select";
+import u from "@mui/material/MenuItem";
+import d from "@mui/material/Card";
+import f from "@mui/material/CardContent";
+import p from "@mui/material/Button";
+import m from "@mui/material/FormControlLabel";
+import h from "@mui/material/Typography";
+import g from "@mui/material/Checkbox";
+//#region src/author/response.tsx
+var _ = a(d)(({ theme: e }) => ({
+	marginBottom: e.spacing(2.5),
+	width: "100%",
+	minWidth: "548px",
+	border: `1px solid ${n.borderDark()}`,
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "space-between",
+	".response-editor": {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "100%",
+		minWidth: "500px",
+		maxWidth: "900px",
+		height: "auto",
+		minHeight: "40px !important"
+	},
+	".math-toolbar": {
+		width: "100%",
+		maxWidth: "900px"
+	}
+})), v = a(f)(({ theme: e }) => ({ paddingBottom: `${e.spacing(2)} !important` })), y = a(h)({
+	fontWeight: 700,
+	fontSize: "1.2rem",
+	flex: 3
+}), b = a(s)(({ theme: e }) => ({
+	flex: 2,
+	"& > *:not(label)": { marginTop: e.spacing(1) }
+})), x = a("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), S = a("div")({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+}), C = a("div")({ display: "flex" }), w = a("div")({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "flex-start"
+}), T = a("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), E = a(g)({ color: `${n.tertiary()} !important` }), D = a(p)(() => ({
+	border: `1px solid ${n.border()}`,
+	color: n.text()
+})), O = a(p)(({ theme: e }) => ({
+	marginLeft: e.spacing(2),
+	border: `1px solid ${n.border()}`,
+	color: n.disabled(),
+	fontSize: "0.8rem"
+})), k = class extends e.Component {
+	static propTypes = {
+		defaultResponse: t.bool,
+		error: t.object,
+		mode: t.oneOfType([t.string, t.number]),
+		index: t.number,
+		onResponseChange: t.func.isRequired,
+		response: t.object.isRequired,
+		cIgnoreOrder: t.object.isRequired,
+		cAllowTrailingZeros: t.object.isRequired
+	};
+	static defaultProps = {
+		defaultResponse: !1,
+		mode: "miscellaneous"
+	};
+	constructor(e) {
+		super(e);
+		let { response: { alternates: t } = {} } = e || {}, n = Object.keys(t || {}).length;
+		this.state = {
+			alternateIdCounter: n + 1,
+			showKeypad: {
+				openCount: 0,
+				main: !1
+			}
+		};
+	}
+	onChange = (e) => (t) => {
+		let { response: n, onResponseChange: r, index: i } = this.props, a = { ...n };
+		a[e] = t.target.value, r(a, i);
+	};
+	onConfigChanged = (e) => (t) => {
+		let { response: n, onResponseChange: r, index: i } = this.props, a = { ...n };
+		a[e] = t.target.checked, r(a, i);
+	};
+	onLiteralOptionsChange = (e) => () => {
+		let { response: t, onResponseChange: n, index: r } = this.props, i = { ...t };
+		i[e] = !t[e], n(i, r);
+	};
+	onAnswerChange = (e) => {
+		let { response: t, onResponseChange: n, index: r } = this.props, i = { ...t };
+		i.answer = e, n(i, r);
+	};
+	onAlternateAnswerChange = (e) => (t) => {
+		let { response: n, onResponseChange: r, index: i } = this.props, a = { ...n };
+		a.alternates[e] = t, r(a, i);
+	};
+	onAddAlternate = () => {
+		let { response: e, onResponseChange: t, index: n } = this.props, { alternateIdCounter: r } = this.state, i = { ...e };
+		i.alternates ||= {}, i.alternates[r] = "", t(i, n), this.setState({ alternateIdCounter: r + 1 });
+	};
+	onRemoveAlternate = (e) => () => {
+		let { response: t, onResponseChange: n, index: r } = this.props, i = { ...t };
+		delete i.alternates[e], n(i, r), this.setState((t) => ({ showKeypad: {
+			...t.showKeypad,
+			openCount: t.showKeypad[e] ? t.showKeypad.openCount - 1 : t.showKeypad.openCount
+		} }));
+	};
+	onDone = () => {
+		this.setState((e) => ({ showKeypad: {
+			...e.showKeypad,
+			openCount: e.showKeypad.openCount - 1,
+			main: !1
+		} }));
+	};
+	onFocus = () => {
+		this.setState((e) => ({ showKeypad: {
+			...e.showKeypad,
+			openCount: e.showKeypad.main ? e.showKeypad.openCount : e.showKeypad.openCount + 1,
+			main: !0
+		} }));
+	};
+	onAlternateFocus = (e) => () => {
+		this.setState((t) => ({ showKeypad: {
+			...t.showKeypad,
+			openCount: t.showKeypad[e] ? t.showKeypad.openCount : t.showKeypad.openCount + 1,
+			[e]: !0
+		} }));
+	};
+	onAlternateDone = (e) => () => {
+		this.setState((t) => ({ showKeypad: {
+			...t.showKeypad,
+			openCount: t.showKeypad.openCount - 1,
+			[e]: !1
+		} }));
+	};
+	render() {
+		let { mode: e, defaultResponse: t, index: n, response: a, cAllowTrailingZeros: s, cIgnoreOrder: d, error: f } = this.props, { showKeypad: p } = this.state, { validation: h, answer: g, alternates: k, ignoreOrder: A, allowTrailingZeros: j } = a, M = Object.keys(k || {}).length > 0, N = {
+			editor: "response-editor",
+			mathToolbar: "math-toolbar"
+		};
+		return /* @__PURE__ */ r(_, {
+			style: { minHeight: `${p.openCount > 0 ? 430 : 230}px` },
+			children: /* @__PURE__ */ i(v, { children: [
+				/* @__PURE__ */ i(S, { children: [/* @__PURE__ */ i(y, {
+					component: "div",
+					children: ["Response ", ""]
+				}), /* @__PURE__ */ r(b, {
+					label: "Validation",
+					children: /* @__PURE__ */ i(l, {
+						onChange: this.onChange("validation"),
+						value: h || "literal",
+						MenuProps: { transitionDuration: {
+							enter: 225,
+							exit: 195
+						} },
+						children: [/* @__PURE__ */ r(u, {
+							value: "literal",
+							children: "Literal Validation"
+						}), /* @__PURE__ */ r(u, {
+							value: "symbolic",
+							children: "Symbolic Validation"
+						})]
+					})
+				})] }),
+				h === "literal" && /* @__PURE__ */ i(C, { children: [s.enabled && /* @__PURE__ */ r(m, {
+					label: s.label,
+					control: /* @__PURE__ */ r(E, {
+						checked: j,
+						onChange: this.onLiteralOptionsChange("allowTrailingZeros")
+					})
+				}), d.enabled && /* @__PURE__ */ r(m, {
+					label: d.label,
+					control: /* @__PURE__ */ r(E, {
+						checked: A,
+						onChange: this.onLiteralOptionsChange("ignoreOrder")
+					})
+				})] }),
+				/* @__PURE__ */ i(x, { children: [
+					/* @__PURE__ */ r(c, { children: "Correct Answer" }),
+					/* @__PURE__ */ r(o, {
+						keypadMode: e,
+						classNames: N,
+						controlledKeypad: !0,
+						showKeypad: p.main,
+						latex: g || "",
+						onChange: this.onAnswerChange,
+						onFocus: this.onFocus,
+						onDone: this.onDone,
+						error: f && f.answer
+					}),
+					f && f.answer ? /* @__PURE__ */ r(T, { children: f.answer }) : null
+				] }),
+				M && Object.keys(k).map((t, n) => /* @__PURE__ */ i(x, { children: [
+					/* @__PURE__ */ i(w, { children: [/* @__PURE__ */ i(c, { children: ["Alternate", Object.keys(k).length > 1 ? ` ${n + 1}` : ""] }), /* @__PURE__ */ r(O, {
+						type: "secondary",
+						onClick: this.onRemoveAlternate(t),
+						children: "Remove"
+					})] }),
+					/* @__PURE__ */ r(o, {
+						classNames: N,
+						controlledKeypad: !0,
+						keypadMode: e,
+						showKeypad: p[t] || !1,
+						latex: k[t] || "",
+						onChange: this.onAlternateAnswerChange(t),
+						onFocus: this.onAlternateFocus(t),
+						onDone: this.onAlternateDone(t),
+						error: f && f[t]
+					}),
+					f && f[t] ? /* @__PURE__ */ r(T, { children: f[t] }) : null
+				] }, t)),
+				/* @__PURE__ */ r(D, {
+					type: "primary",
+					onClick: this.onAddAlternate,
+					children: "ADD ALTERNATE"
+				})
+			] })
+		});
+	}
+};
+//#endregion
+export { k as default };

package/dist/author/utils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @synced-from pie-elements/packages/math-inline/configure/src/utils.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 const ResponseTypes: {
+    advanced: string;
+    simple: string;
+};
+export declare const generateValidationMessage: (model?: {}, config?: {}) => string;
+export declare const getPluginProps: (props?: {}, baseInputConfiguration?: {}) => {};

package/dist/author/utils.js

@@ -0,0 +1,13 @@
+//#region src/author/utils.ts
+var e = {
+	advanced: "Advanced Multi",
+	simple: "Simple"
+}, t = (e = {}, t = {}) => {
+	let { maxResponseAreas: n } = t, { responseType: r } = e, i = "";
+	return r === "Advanced Multi" && (i = "\nThere should be at least 1 " + (n ? `and at most ${n} ` : "") + "response area" + (n ? "s" : "") + " defined."), "Validation requirements:\nAll correct answers (the primary and any alternates) should not be empty and should be unique." + i;
+}, n = (e = {}, t = {}) => ({
+	...t,
+	...e
+});
+//#endregion
+export { e as ResponseTypes, t as generateValidationMessage, n as getPluginProps };