@pie-element/math-templated 7.1.0-next.2 → 7.1.1-next.0

package/dist/author/index.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @synced-from pie-elements/packages/math-templated/configure/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 MathTemplateConfigure extends HTMLElement {
+    static prepareModel: (model?: {}) => {
+        slateMarkup: any;
+        markup: string;
+        responses: {};
+        allowTrailingZerosDefault: boolean;
+        equationEditor: string;
+        ignoreOrderDefault: boolean;
+        playerSpellCheckEnabled: boolean;
+        prompt: string;
+        promptEnabled: boolean;
+        rationale: string;
+        rationaleEnabled: boolean;
+        spellCheckEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+        validationDefault: string;
+    };
+    constructor();
+    set model(s: any);
+    set configuration(c: any);
+    set disableSidePanel(s: any);
+    dispatchModelUpdated(reset: any): void;
+    onModelChanged(m: any, reset: any): void;
+    onConfigurationChanged(c: any): void;
+    /** @param {done, progress, file} handler */
+    insertImage(handler: any): void;
+    onDeleteImage(src: any, done: any): void;
+    insertSound(handler: any): void;
+    onDeleteSound(src: any, done: any): void;
+    _render(): void;
+    disconnectedCallback(): void;
+}

package/dist/author/index.js

@@ -0,0 +1,97 @@
+import { createSlateMarkup as e, processMarkup as t } from "./markupUtils.js";
+import n from "./design.js";
+import r from "./defaults.js";
+import i from "react";
+import { createRoot as a } from "react-dom/client";
+import { defaults as o, isArray as s } from "@pie-element/shared-lodash";
+import c from "debug";
+import { DeleteImageEvent as l, DeleteSoundEvent as u, InsertImageEvent as d, InsertSoundEvent as f, ModelUpdatedEvent as p } from "@pie-element/shared-configure-events";
+//#region src/author/index.ts
+var m = c("math-templated:configure"), h = class c extends HTMLElement {
+	static prepareModel = (n = {}) => {
+		let { validationDefault: i, allowTrailingZerosDefault: a, ignoreOrderDefault: o, responses: c = {} } = n, l = Object.keys(c).reduce((e, t) => {
+			let n = c[t];
+			return e[t] = {
+				...n,
+				validation: n.validation || i,
+				allowTrailingZeros: n.allowTrailingZeros || a,
+				ignoreOrder: n.ignoreOrder || o
+			}, e;
+		}, {}), u = {
+			...r.model,
+			...n,
+			responses: l
+		}, d = u.slateMarkup || e(u.markup, u.responses), f = t(d);
+		return u.responses && Object.keys(u.responses).forEach((e) => {
+			s(u.responses[e]) && (u.responses[e] = (u.responses[e] || []).map((e, t) => e.answer ? e : (m("Choice does not contain \"answer\" property, which is required.", e), {
+				answer: `${t}`,
+				...e
+			})));
+		}), {
+			...u,
+			slateMarkup: d,
+			markup: f
+		};
+	};
+	constructor() {
+		super(), this._root = null, this._model = c.prepareModel(), this._configuration = r.configuration, this.onModelChanged = this.onModelChanged.bind(this), this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+	}
+	set model(e) {
+		this._model = c.prepareModel(e), this._render();
+	}
+	set configuration(e) {
+		this._configuration = o(e, r.configuration), e.language?.enabled ? e.languageChoices?.options?.length && (this._model.language = e.languageChoices.options[0].value) : e.language.settings && this._model.language ? (this._configuration.language.enabled = !0, (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) && (this._configuration.languageChoices.options = []), this._configuration.languageChoices.options.find((e) => e.value === this._model.language) || this._configuration.languageChoices.options.push({
+			value: this._model.language,
+			label: this._model.language
+		})) : delete this._model.language, this._render();
+	}
+	set disableSidePanel(e) {
+		this._disableSidePanel = e, this._render();
+	}
+	dispatchModelUpdated(e) {
+		let t = !!e;
+		this.dispatchEvent(new p(this._model, t));
+	}
+	onModelChanged(e, t) {
+		this._model = c.prepareModel(e), this._render(), this.dispatchModelUpdated(t);
+	}
+	onConfigurationChanged(e) {
+		this._configuration = e, this._render();
+	}
+	insertImage(e) {
+		this.dispatchEvent(new d(e));
+	}
+	onDeleteImage(e, t) {
+		this.dispatchEvent(new l(e, t));
+	}
+	insertSound(e) {
+		this.dispatchEvent(new f(e));
+	}
+	onDeleteSound(e, t) {
+		this.dispatchEvent(new u(e, t));
+	}
+	_render() {
+		m("_render");
+		let e = i.createElement(n, {
+			model: this._model,
+			configuration: this._configuration,
+			onModelChanged: this.onModelChanged,
+			onConfigurationChanged: this.onConfigurationChanged,
+			disableSidePanel: this._disableSidePanel,
+			imageSupport: {
+				add: this.insertImage.bind(this),
+				delete: this.onDeleteImage.bind(this)
+			},
+			uploadSoundSupport: {
+				add: this.insertSound.bind(this),
+				delete: this.onDeleteSound.bind(this)
+			}
+		});
+		this._root ||= a(this), this._root.render(e);
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { h as default };

package/dist/author/markupUtils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-elements/packages/math-templated/configure/src/markupUtils.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 removeUnwantedCharacters: (markup: any) => any;
+export declare const processMarkup: (markup: any) => string;
+export declare const createSlateMarkup: (markup: any, responses: any) => any;

package/dist/author/markupUtils.js

@@ -0,0 +1,10 @@
+//#region src/author/markupUtils.tsx
+var e = "imes|riangle|an|heta|herefore", t = "throot|parallel|cong|approx|eq|e|sim", n = RegExp(`(\\t(?!${e}))|(\\n(?!${t}))|(\\\\t(?!${e}))|(\\\\n(?!${t}))`, "g"), r = (e) => e.replace(n, "").replace(/\\"/g, "\"").replace(/\\\//g, "/"), i = (e = "") => {
+	let t = document.createElement("div");
+	return t.innerHTML = e.trim(), t;
+}, a = (e) => {
+	let t = i(r(e || "") || "");
+	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 };

package/dist/author/response.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @synced-from pie-elements/packages/math-templated/configure/src/response.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 * as React from 'react';
+import PropTypes from 'prop-types';
+export declare class Response extends React.Component {
+    static propTypes: {
+        defaultResponse: PropTypes.Requireable<boolean>;
+        error: PropTypes.Requireable<object>;
+        mode: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        onResponseChange: PropTypes.Validator<(...args: any[]) => any>;
+        onResponseDone: PropTypes.Validator<(...args: any[]) => any>;
+        response: PropTypes.Validator<object>;
+        cIgnoreOrder: PropTypes.Validator<object>;
+        cAllowTrailingZeros: PropTypes.Validator<object>;
+        responseKey: PropTypes.Validator<number>;
+    };
+    static defaultProps: {
+        defaultResponse: boolean;
+        mode: string;
+    };
+    constructor(props: any);
+    onChange: (name: any) => (evt: any) => void;
+    onConfigChanged: (name: any) => (evt: any) => void;
+    onLiteralOptionsChange: (name: any) => () => void;
+    onAnswerChange: any;
+    onAlternateAnswerChange: (alternateId: any) => (answer: any) => void;
+    onAddAlternate: any;
+    onRemoveAlternate: (alternateId: any) => () => void;
+    onDone: any;
+    onFocus: any;
+    onAlternateFocus: (alternateId: any) => () => void;
+    onAlternateDone: (alternateId: any) => () => void;
+    render(): React.JSX.Element;
+}
+export default Response;

package/dist/author/response.js

@@ -0,0 +1,238 @@
+import * as e from "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { color as r } from "@pie-lib/render-ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@mui/material/Typography";
+import s from "@mui/material/Select";
+import c from "@mui/material/MenuItem";
+import { InputContainer as l } from "@pie-lib/config-ui";
+import { MathToolbar as u } from "@pie-lib/math-toolbar";
+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/InputLabel";
+import g from "@mui/material/Checkbox";
+import _ from "@mui/material/IconButton";
+import v from "@mui/icons-material/Delete";
+//#region src/author/response.tsx
+var y = n(d)(({ theme: e }) => ({
+	marginBottom: e.spacing(2.5),
+	width: "100%",
+	minWidth: "548px",
+	border: `1px solid ${e.palette.grey[700]}`,
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "space-between"
+})), b = n(f)(({ theme: e }) => ({ paddingBottom: `${e.spacing(2)} !important` })), x = n(o)({
+	fontWeight: 700,
+	fontSize: "1.2rem",
+	flex: 3
+}), S = n(l)(({ theme: e }) => ({
+	flex: 2,
+	"& > *:not(label)": { marginTop: e.spacing(1) }
+})), C = n("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), w = n("div")({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+}), T = n("div")({ display: "flex" }), E = n(p)(({ theme: e }) => ({
+	border: `1px solid ${e.palette.grey.A400}`,
+	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,
+	display: "inline",
+	minWidth: "50px",
+	padding: "8px",
+	border: "1px solid #C0C3CF"
+})), A = n("div")({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center"
+}), j = n(g)({ color: `${r.tertiary()} !important` });
+if (typeof document < "u") {
+	let e = "math-templated-response-styles";
+	if (!document.getElementById(e)) {
+		let t = document.createElement("style");
+		t.id = e, t.textContent = "\n      .response-editor {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        min-width: 500px;\n        max-width: 900px;\n        height: auto;\n        min-height: 40px;\n      }\n      .math-toolbar {\n        width: 100%;\n      }\n    ", document.head.appendChild(t);
+	}
+}
+var M = class extends e.Component {
+	static propTypes = {
+		defaultResponse: t.bool,
+		error: t.object,
+		mode: t.oneOfType([t.string, t.number]),
+		onResponseChange: t.func.isRequired,
+		onResponseDone: t.func.isRequired,
+		response: t.object.isRequired,
+		cIgnoreOrder: t.object.isRequired,
+		cAllowTrailingZeros: t.object.isRequired,
+		responseKey: t.number.isRequired
+	};
+	static defaultProps = {
+		defaultResponse: !1,
+		mode: "8"
+	};
+	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, responseKey: i } = this.props, a = { ...n };
+		a[e] = t.target.value, r(a, i);
+	};
+	onConfigChanged = (e) => (t) => {
+		let { response: n, onResponseChange: r, responseKey: i } = this.props, a = { ...n };
+		a[e] = t.target.checked, r(a, i);
+	};
+	onLiteralOptionsChange = (e) => () => {
+		let { response: t, onResponseChange: n, responseKey: r } = this.props, i = { ...t };
+		i[e] = !t[e], n(i, r);
+	};
+	onAnswerChange = (e) => {
+		let { response: t, onResponseChange: n, responseKey: r } = this.props, i = { ...t };
+		i.answer = e, n(i, r);
+	};
+	onAlternateAnswerChange = (e) => (t) => {
+		let { response: n, onResponseChange: r, responseKey: i } = this.props, a = { ...n };
+		a.alternates[e] = t, r(a, i);
+	};
+	onAddAlternate = () => {
+		let { response: e, onResponseChange: t, responseKey: 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, responseKey: 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 = () => {
+		let { onResponseDone: e } = this.props;
+		this.setState((e) => ({ showKeypad: {
+			...e.showKeypad,
+			openCount: e.showKeypad.openCount - 1,
+			main: !1
+		} })), e();
+	};
+	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, responseKey: t, response: n, cAllowTrailingZeros: r, cIgnoreOrder: o, error: l } = this.props, { showKeypad: d } = this.state, { validation: f, answer: p, alternates: g, ignoreOrder: _, allowTrailingZeros: M } = n, N = Object.keys(g || {}).length > 0, P = {
+			editor: "response-editor",
+			mathToolbar: "math-toolbar"
+		};
+		return /* @__PURE__ */ i(y, {
+			style: { minHeight: `${d.openCount > 0 ? 430 : 230}px` },
+			children: /* @__PURE__ */ a(b, { children: [
+				/* @__PURE__ */ a(w, { children: [/* @__PURE__ */ a(x, {
+					component: "div",
+					children: ["Response for ", /* @__PURE__ */ i(k, { children: `R ${parseInt(t) + 1}` })]
+				}), /* @__PURE__ */ i(S, {
+					label: "Validation",
+					children: /* @__PURE__ */ a(s, {
+						onChange: this.onChange("validation"),
+						value: f || "literal",
+						MenuProps: { transitionDuration: {
+							enter: 225,
+							exit: 195
+						} },
+						children: [/* @__PURE__ */ i(c, {
+							value: "literal",
+							children: "Literal Validation"
+						}), /* @__PURE__ */ i(c, {
+							value: "symbolic",
+							children: "Symbolic Validation"
+						})]
+					})
+				})] }),
+				f === "literal" && /* @__PURE__ */ a(T, { children: [r.enabled && /* @__PURE__ */ i(m, {
+					label: r.label,
+					control: /* @__PURE__ */ i(j, {
+						checked: M,
+						onChange: this.onLiteralOptionsChange("allowTrailingZeros")
+					})
+				}), o.enabled && /* @__PURE__ */ i(m, {
+					label: o.label,
+					control: /* @__PURE__ */ i(j, {
+						checked: _,
+						onChange: this.onLiteralOptionsChange("ignoreOrder")
+					})
+				})] }),
+				/* @__PURE__ */ a(C, { children: [
+					/* @__PURE__ */ i(h, { children: "Correct Answer" }),
+					/* @__PURE__ */ i(u, {
+						keypadMode: e,
+						classNames: P,
+						controlledKeypad: !0,
+						showKeypad: d.main,
+						latex: p || "",
+						onChange: this.onAnswerChange,
+						onFocus: this.onFocus,
+						onDone: this.onDone,
+						error: l && l.answer
+					}),
+					l && l.answer ? /* @__PURE__ */ i(O, { children: l.answer }) : null
+				] }),
+				N && Object.keys(g).map((t, n) => /* @__PURE__ */ a(C, { children: [
+					/* @__PURE__ */ a(h, { children: ["Alternate", Object.keys(g).length > 1 ? ` ${n + 1}` : ""] }),
+					/* @__PURE__ */ a(A, { children: [/* @__PURE__ */ i(u, {
+						classNames: P,
+						controlledKeypad: !0,
+						keypadMode: e,
+						showKeypad: d[t] || !1,
+						latex: g[t] || "",
+						onChange: this.onAlternateAnswerChange(t),
+						onFocus: this.onAlternateFocus(t),
+						onDone: this.onAlternateDone(t),
+						error: l && l[t]
+					}), /* @__PURE__ */ i(D, {
+						onClick: this.onRemoveAlternate(t),
+						size: "large",
+						children: /* @__PURE__ */ i(v, {})
+					})] }),
+					l && l[t] ? /* @__PURE__ */ i(O, { children: l[t] }) : null
+				] }, t)),
+				/* @__PURE__ */ i(E, {
+					type: "primary",
+					onClick: this.onAddAlternate,
+					children: "ADD ALTERNATE"
+				})
+			] })
+		});
+	}
+};
+//#endregion
+export { M as default };

package/dist/author/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @synced-from pie-elements/packages/math-templated/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 generateValidationMessage: (config: any) => string;

package/dist/author/utils.js

@@ -0,0 +1,7 @@
+//#region src/author/utils.ts
+var e = (e) => {
+	let { maxResponseAreas: t } = e;
+	return "Validation requirements:" + ("\nCorrect answers should not be blank.\nEach answer defined for a response area should be unique.\nThere should be at least 1 " + (t ? `and at most ${t} ` : "") + "response area" + (t ? "s" : "") + " defined.");
+};
+//#endregion
+export { e as generateValidationMessage };