@pie-element/math-templated 7.1.1-next.15 → 7.1.1-next.16

package/dist/author/design.js

@@ -1,4 +1,4 @@
-import e from "./response.js";
+import { Response as e } from "./response.js";
 import { createSlateMarkup as t, processMarkup as n } from "./markupUtils.js";
 import { generateValidationMessage as r } from "./utils.js";
 import i from "react";
@@ -10,46 +10,46 @@ import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import p from "@mui/material/Typography";
 import m from "@mui/material/Select";
 import h from "@mui/material/MenuItem";
-import ee from "@mui/icons-material/Info";
-import { InputContainer as g, layout as te, settings as _ } from "@pie-lib/config-ui";
-import v, { ALL_PLUGINS as ne } from "@pie-lib/editable-html-tip-tap";
+import g from "@mui/icons-material/Info";
+import { InputContainer as _, layout as ee, settings as v } from "@pie-lib/config-ui";
+import y, { ALL_PLUGINS as b } from "@pie-lib/editable-html-tip-tap";
 //#region src/author/design.tsx
-var { dropdown: y } = _, { Panel: re, toggle: b } = _, x = l(g)(({ theme: e }) => ({
+var { dropdown: te } = v, { Panel: ne, toggle: x } = v, S = l(_)(({ theme: e }) => ({
 	width: "100%",
 	paddingTop: e.spacing(2),
 	marginBottom: e.spacing(2)
-})), S = l(v)({ width: "100%" }), C = l("div")(({ theme: e }) => ({
+})), C = l(y)({ width: "100%" }), w = l("div")(({ theme: e }) => ({
 	color: e.palette.error.main,
 	fontSize: "0.75rem",
 	marginTop: e.spacing(1)
-})), ie = l("div")(({ theme: e }) => ({
+})), T = l("div")(({ theme: e }) => ({
 	color: e.palette.error.main,
 	fontSize: "0.75rem",
 	marginBottom: e.spacing(1)
-})), ae = l(v)(({ theme: e }) => ({
+})), re = l(y)(({ theme: e }) => ({
 	width: "100%",
 	marginTop: e.spacing(2),
 	marginBottom: e.spacing(3)
-})), oe = l(g)(({ theme: e }) => ({
+})), ie = l(_)(({ theme: e }) => ({
 	width: "100%",
 	marginTop: e.spacing(2),
 	"& > *:not(label)": { marginTop: e.spacing(1) },
 	marginBottom: e.spacing(2)
-})), se = l(m)({ width: "100%" }), w = l(p)(({ theme: e }) => ({
+})), ae = l(m)({ width: "100%" }), E = l(p)(({ theme: e }) => ({
 	fontSize: e.typography.fontSize * 1.25,
 	fontWeight: "bold"
-})), T = l("div")({
+})), D = l("div")({
 	display: "flex",
 	alignItems: "center",
 	gap: "8px"
-}), E = l(u)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+}), oe = l(u)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
 	fontSize: e.typography.fontSize - 2,
 	whiteSpace: "pre",
 	maxWidth: "500px"
-} })), D = (e) => {
+} })), O = (e) => {
 	let t = document.createElement("div");
 	return t.innerHTML = e.trim(), t;
-}, O = class extends i.Component {
+}, k = class extends i.Component {
 	static propTypes = {
 		model: a.object.isRequired,
 		configuration: a.object.isRequired,
@@ -99,7 +99,7 @@ var { dropdown: y } = _, { Panel: re, toggle: b } = _, x = l(g)(({ theme: e }) =
 		});
 	};
 	onChange = (e) => {
-		let { model: { responses: t, validationDefault: r, allowTrailingZerosDefault: i, ignoreOrderDefault: a }, onModelChanged: o } = this.props, s = {}, c = D(e);
+		let { model: { responses: t, validationDefault: r, allowTrailingZerosDefault: i, ignoreOrderDefault: a }, onModelChanged: o } = this.props, s = {}, c = O(e);
 		c.querySelectorAll("[data-type=\"math_templated\"]").forEach((e, n) => {
 			let { value: o, index: c } = e.dataset;
 			o || (e.dataset.value = ""), s[n] = t[c] || {
@@ -150,26 +150,26 @@ var { dropdown: y } = _, { Panel: re, toggle: b } = _, x = l(g)(({ theme: e }) =
 		(!t || !n || !o?.attributes["data-keypad"]) && this.setState({ activeAnswerBlock: "" });
 	};
 	render() {
-		let { configuration: t, imageSupport: n, model: i, onConfigurationChanged: a, onModelChanged: o, uploadSoundSupport: s } = this.props, { baseInputConfiguration: c = {}, contentDimensions: l = {}, prompt: u = {}, rationale: p = {}, settingsPanelDisabled: m, teacherInstructions: g = {}, language: _ = {}, languageChoices: v = {}, spellCheck: D = {}, playerSpellCheck: O = {}, maxImageWidth: k = {}, maxImageHeight: A = {}, mathMlOptions: j = {}, template: ce = {}, editSource: M = {}, ignoreOrder: le = {}, allowTrailingZeros: ue = {}, partialScoring: N = {}, maxResponseAreas: P } = t || {}, { errors: F, extraCSSRules: I, promptEnabled: L, rationaleEnabled: R, spellCheckEnabled: z, teacherInstructionsEnabled: B, toolbarEditorPosition: V, responses: H, equationEditor: U } = i || {}, { prompt: W, rationale: G, responseAreas: K, teacherInstructions: q, responses: J = {} } = F || {}, Y = r(t), de = {
-			"language.enabled": _.settings && b(_.label, !0),
-			language: _.settings && _.enabled && y(v.label, v.options)
+		let { configuration: t, imageSupport: n, model: i, onConfigurationChanged: a, onModelChanged: o, uploadSoundSupport: s } = this.props, { baseInputConfiguration: c = {}, contentDimensions: l = {}, prompt: u = {}, rationale: p = {}, settingsPanelDisabled: m, teacherInstructions: _ = {}, language: v = {}, languageChoices: y = {}, spellCheck: O = {}, playerSpellCheck: k = {}, maxImageWidth: A = {}, maxImageHeight: j = {}, mathMlOptions: M = {}, template: se = {}, editSource: N = {}, ignoreOrder: ce = {}, allowTrailingZeros: le = {}, partialScoring: P = {}, maxResponseAreas: F } = t || {}, { errors: I, extraCSSRules: L, promptEnabled: R, rationaleEnabled: z, spellCheckEnabled: B, teacherInstructionsEnabled: V, toolbarEditorPosition: H, responses: U, equationEditor: W } = i || {}, { prompt: G, rationale: K, responseAreas: q, teacherInstructions: J, responses: Y = {} } = I || {}, ue = r(t), de = {
+			"language.enabled": v.settings && x(v.label, !0),
+			language: v.settings && v.enabled && te(y.label, y.options)
 		}, fe = {
-			teacherInstructionsEnabled: g.settings && b(g.label),
-			rationaleEnabled: p.settings && b(p.label),
-			promptEnabled: u.settings && b(u.label),
-			spellCheckEnabled: D.settings && b(D.label),
-			playerSpellCheckEnabled: O.settings && b(O.label),
-			"editSource.enabled": M?.settings && b(M.label, !0),
-			partialScoring: N.settings && b(N.label)
-		}, X = k && k.prompt, Z = A && A.prompt, Q = { position: V === "top" ? "top" : "bottom" }, $ = (e = {}, t = {}) => ({
+			teacherInstructionsEnabled: _.settings && x(_.label),
+			rationaleEnabled: p.settings && x(p.label),
+			promptEnabled: u.settings && x(u.label),
+			spellCheckEnabled: O.settings && x(O.label),
+			playerSpellCheckEnabled: k.settings && x(k.label),
+			"editSource.enabled": N?.settings && x(N.label, !0),
+			partialScoring: P.settings && x(P.label)
+		}, X = A && A.prompt, Z = j && j.prompt, Q = { position: H === "top" ? "top" : "bottom" }, $ = (e = {}, t = {}) => ({
 			...t,
 			...e
 		});
-		return /* @__PURE__ */ f(te.ConfigLayout, {
-			extraCSSRules: I,
+		return /* @__PURE__ */ f(ee.ConfigLayout, {
+			extraCSSRules: L,
 			dimensions: l,
 			hideSettings: m,
-			settings: /* @__PURE__ */ d(re, {
+			settings: /* @__PURE__ */ d(ne, {
 				model: i,
 				configuration: t,
 				onChangeModel: (e) => o(e),
@@ -180,67 +180,67 @@ var { dropdown: y } = _, { Panel: re, toggle: b } = _, x = l(g)(({ theme: e }) =
 				}
 			}),
 			children: [
-				B && /* @__PURE__ */ f(x, {
-					label: g.label,
-					children: [/* @__PURE__ */ d(S, {
+				V && /* @__PURE__ */ f(S, {
+					label: _.label,
+					children: [/* @__PURE__ */ d(C, {
 						markup: i.teacherInstructions || "",
 						onChange: (e) => this.handleChange("teacherInstructions", e),
 						imageSupport: n,
 						nonEmpty: !1,
-						error: q,
+						error: J,
 						toolbarOpts: Q,
-						pluginProps: $(g?.inputConfiguration, c),
-						spellCheck: z,
-						maxImageWidth: k && k.teacherInstructions || X,
-						maxImageHeight: A && A.teacherInstructions || Z,
+						pluginProps: $(_?.inputConfiguration, c),
+						spellCheck: B,
+						maxImageWidth: A && A.teacherInstructions || X,
+						maxImageHeight: j && j.teacherInstructions || Z,
 						uploadSoundSupport: s,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-						mathMlOptions: j
-					}), q && /* @__PURE__ */ d(C, { children: q })]
+						mathMlOptions: M
+					}), J && /* @__PURE__ */ d(w, { children: J })]
 				}),
-				L && /* @__PURE__ */ f(x, {
+				R && /* @__PURE__ */ f(S, {
 					label: u.label,
-					children: [/* @__PURE__ */ d(S, {
+					children: [/* @__PURE__ */ d(C, {
 						markup: i.prompt,
 						onChange: (e) => this.handleChange("prompt", e),
 						imageSupport: n,
 						nonEmpty: !1,
 						disableUnderline: !0,
-						error: W,
+						error: G,
 						toolbarOpts: Q,
-						pluginProps: $(g?.inputConfiguration, c),
-						spellCheck: z,
+						pluginProps: $(_?.inputConfiguration, c),
+						spellCheck: B,
 						maxImageWidth: X,
 						maxImageHeight: Z,
 						uploadSoundSupport: s,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-						mathMlOptions: j
-					}), W && /* @__PURE__ */ d(C, { children: W })]
+						mathMlOptions: M
+					}), G && /* @__PURE__ */ d(w, { children: G })]
 				}),
-				/* @__PURE__ */ f(T, { children: [/* @__PURE__ */ d(w, {
+				/* @__PURE__ */ f(D, { children: [/* @__PURE__ */ d(E, {
 					component: "div",
 					children: "Response Template"
-				}), /* @__PURE__ */ d(E, {
+				}), /* @__PURE__ */ d(oe, {
 					disableFocusListener: !0,
 					disableTouchListener: !0,
 					placement: "right",
-					title: Y,
-					children: /* @__PURE__ */ d(ee, {
+					title: ue,
+					children: /* @__PURE__ */ d(g, {
 						fontSize: "small",
 						color: "primary"
 					})
 				})] }),
-				/* @__PURE__ */ d(ae, {
-					activePlugins: ne,
+				/* @__PURE__ */ d(re, {
+					activePlugins: b,
 					toolbarOpts: { position: "top" },
-					spellCheck: z,
-					pluginProps: $(ce?.inputConfiguration, c),
+					spellCheck: B,
+					pluginProps: $(se?.inputConfiguration, c),
 					responseAreaProps: {
 						type: "math-templated",
 						respAreaToolbar: null,
-						error: () => J,
+						error: () => Y,
 						onHandleAreaChange: this.onHandleAreaChange,
-						maxResponseAreas: P
+						maxResponseAreas: F
 					},
 					markup: i.slateMarkup,
 					onChange: this.onChange,
@@ -249,22 +249,22 @@ var { dropdown: y } = _, { Panel: re, toggle: b } = _, x = l(g)(({ theme: e }) =
 					onBlur: this.onBlur,
 					disabled: !1,
 					highlightShape: !1,
-					error: K,
+					error: q,
 					uploadSoundSupport: s,
 					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-					mathMlOptions: j
+					mathMlOptions: M
 				}),
-				K && /* @__PURE__ */ d(ie, { children: K }),
-				/* @__PURE__ */ d(w, { children: "Define Response" }),
-				/* @__PURE__ */ d(oe, {
+				q && /* @__PURE__ */ d(T, { children: q }),
+				/* @__PURE__ */ d(E, { children: "Define Response" }),
+				/* @__PURE__ */ d(ie, {
 					label: "Response Template Equation Editor",
-					children: /* @__PURE__ */ f(se, {
+					children: /* @__PURE__ */ f(ae, {
 						MenuProps: { transitionDuration: {
 							enter: 225,
 							exit: 195
 						} },
 						onChange: (e) => this.handleChange("equationEditor", e.target.value),
-						value: U,
+						value: W,
 						children: [
 							/* @__PURE__ */ d(h, {
 								value: "non-negative-integers",
@@ -317,44 +317,44 @@ var { dropdown: y } = _, { Panel: re, toggle: b } = _, x = l(g)(({ theme: e }) =
 						]
 					})
 				}),
-				Object.keys(H || {}).map((t, n) => {
-					let r = H[n];
+				Object.keys(U || {}).map((t, n) => {
+					let r = U[n];
 					return r ? /* @__PURE__ */ d(e, {
 						responseKey: n,
-						mode: U,
+						mode: W,
 						response: r,
 						onResponseChange: this.onResponseChange,
 						onResponseDone: this.onResponseDone,
 						index: n,
-						cIgnoreOrder: le,
-						cAllowTrailingZeros: ue,
-						error: J && J[n]
+						cIgnoreOrder: ce,
+						cAllowTrailingZeros: le,
+						error: Y && Y[n]
 					}, n) : null;
 				}),
-				R && /* @__PURE__ */ f(x, {
+				z && /* @__PURE__ */ f(S, {
 					label: p.label,
-					children: [/* @__PURE__ */ d(S, {
+					children: [/* @__PURE__ */ d(C, {
 						markup: i.rationale || "",
 						onChange: (e) => this.handleChange("rationale", e),
 						imageSupport: n,
 						nonEmpty: !1,
-						error: G,
+						error: K,
 						toolbarOpts: Q,
 						pluginProps: $(p?.inputConfiguration, {
 							...c,
 							math: { controlledKeypadMode: !1 }
 						}),
-						spellCheck: z,
-						maxImageWidth: k && k.rationale || X,
-						maxImageHeight: A && A.rationale || Z,
+						spellCheck: B,
+						maxImageWidth: A && A.rationale || X,
+						maxImageHeight: j && j.rationale || Z,
 						uploadSoundSupport: s,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-						mathMlOptions: j
-					}), G && /* @__PURE__ */ d(C, { children: G })]
+						mathMlOptions: M
+					}), K && /* @__PURE__ */ d(w, { children: K })]
 				})
 			]
 		});
 	}
 };
 //#endregion
-export { O as default };
+export { k as Design, k as default };

package/dist/author/index.d.ts

@@ -38,5 +38,6 @@ export default class MathTemplateConfigure extends HTMLElement {
     insertSound(handler: any): void;
     onDeleteSound(src: any, done: any): void;
     _render(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/dist/author/index.js

@@ -1,5 +1,5 @@
 import { createSlateMarkup as e, processMarkup as t } from "./markupUtils.js";
-import n from "./design.js";
+import { Design as n } from "./design.js";
 import r from "./defaults.js";
 import i from "react";
 import { createRoot as a } from "react-dom/client";
@@ -89,8 +89,11 @@ var m = c("math-templated:configure"), h = class c extends HTMLElement {
 		});
 		this._root ||= a(this), this._root.render(e);
 	}
+	connectedCallback() {
+		this._render();
+	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

package/dist/author/markupUtils.js

@@ -7,4 +7,4 @@ var e = "imes|riangle|an|heta|herefore", t = "throot|parallel|cong|approx|eq|e|s
 	return t.querySelectorAll("[data-type=\"math_templated\"]").forEach((e) => e.replaceWith(`{{${e.dataset.index}}}`)), t.innerHTML;
 }, o = /\{\{(\d+)\}\}/g, s = (e, t) => e ? r(e).replace(o, (e, n) => `<span data-type="math_templated" data-index="${n}" data-value="${t[n]?.answer || ""}"></span>`) : "";
 //#endregion
-export { s as createSlateMarkup, a as processMarkup };
+export { s as createSlateMarkup, a as processMarkup, r as removeUnwantedCharacters };

package/dist/author/response.js

@@ -21,7 +21,7 @@ var y = n(d)(({ theme: e }) => ({
 	marginBottom: e.spacing(2.5),
 	width: "100%",
 	minWidth: "548px",
-	border: `1px solid ${e.palette.grey[700]}`,
+	border: `1px solid ${r.borderDark()}`,
 	display: "flex",
 	flexDirection: "column",
 	justifyContent: "space-between"
@@ -36,20 +36,20 @@ var y = n(d)(({ theme: e }) => ({
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "space-between"
-}), T = n("div")({ display: "flex" }), E = n(p)(({ theme: e }) => ({
-	border: `1px solid ${e.palette.grey.A400}`,
+}), T = n("div")({ display: "flex" }), E = n(p)(() => ({
+	border: `1px solid ${r.border()}`,
 	color: r.text()
 })), D = n(_)(({ theme: e }) => ({ marginLeft: e.spacing(1) })), O = n("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), k = n("div")(({ theme: e }) => ({
-	background: e.palette.grey.A100,
-	color: e.palette.grey.A700,
+})), k = n("div")(() => ({
+	background: r.backgroundDark(),
+	color: r.text(),
 	display: "inline",
 	minWidth: "50px",
 	padding: "8px",
-	border: "1px solid #C0C3CF"
+	border: `1px solid ${r.border()}`
 })), A = n("div")({
 	display: "flex",
 	justifyContent: "space-between",
@@ -235,4 +235,4 @@ var M = class extends e.Component {
 	}
 };
 //#endregion
-export { M as default };
+export { M as Response, M as default };