@pie-element/multiple-choice 13.2.1 → 13.2.2-next.1

package/dist/author/main.js

@@ -0,0 +1,287 @@
+import { generateValidationMessage as e } from "./utils.js";
+import t from "react";
+import n from "prop-types";
+import { color as r } from "@pie-lib/render-ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { styled as o } from "@mui/material/styles";
+import s from "@mui/material/Box";
+import { merge as c } from "@pie-element/shared-lodash";
+import l from "@pie-lib/editable-html-tip-tap";
+import { AlertDialog as u, ChoiceConfiguration as ee, InputContainer as d, choiceUtils as f, layout as te, settings as p } from "@pie-lib/config-ui";
+import m from "@mui/material/Button";
+import h from "@mui/material/Tooltip";
+import g from "@mui/material/Typography";
+import ne from "@mui/icons-material/Info";
+//#region src/author/main.tsx
+var { Panel: re, toggle: _, radio: v, dropdown: y } = p, ie = 9, b = o(d)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2)
+})), ae = o(d)(({ theme: e }) => ({
+	flex: 1,
+	marginTop: e.spacing(1.5),
+	paddingTop: e.spacing(2),
+	marginLeft: e.spacing(3.5)
+})), oe = o(d)(({ theme: e }) => ({
+	display: "flex",
+	flexDirection: "column",
+	marginBottom: e.spacing(1),
+	width: "100%"
+})), x = o(m)(({ theme: e }) => ({
+	marginTop: e.spacing(1),
+	float: "right"
+})), se = o(x)({
+	cursor: "not-allowed",
+	pointerEvents: "all",
+	backgroundColor: r.disabled(),
+	"&:hover": { backgroundColor: r.disabled() },
+	"&:focus": { backgroundColor: r.disabled() }
+}), ce = o(s)({
+	display: "flex",
+	alignItems: "center"
+}), le = o(g)(({ theme: e }) => ({
+	fontSize: e.typography.fontSize + 2,
+	marginRight: e.spacing(1)
+})), S = o(h)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+	fontSize: e.typography.fontSize - 2,
+	whiteSpace: "pre",
+	maxWidth: "500px"
+} })), C = o("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), ue = (t) => {
+	let { model: n, configuration: r, onPromptChanged: o, onChoiceChanged: s, onRemoveChoice: c, onAddChoice: u, imageSupport: d, uploadSoundSupport: f, onChangeModel: p, onConfigurationChanged: m, onTeacherInstructionsChanged: h } = t, { addChoiceButton: g = {}, contentDimensions: ue = {}, feedback: w = {}, deleteChoice: de = {}, choiceMode: T = {}, choicePrefix: fe = {}, partialScoring: E = {}, lockChoiceOrder: D = {}, teacherInstructions: O = {}, studentInstructions: k = {}, rationale: A = {}, scoringType: j = {}, sequentialChoiceLabels: M = {}, settingsPanelDisabled: pe, choicesLayout: N, spellCheck: P = {}, gridColumns: me, maxImageWidth: F = {}, maxImageHeight: I = {}, prompt: L = {}, withRubric: R = {}, mathMlOptions: z = {}, language: B = {}, languageChoices: V = {} } = r || {}, { maxAnswerChoices: H } = r || {}, { limitChoicesNumber: he, teacherInstructionsEnabled: ge, rationaleEnabled: _e, feedbackEnabled: ve, promptEnabled: ye, spellCheckEnabled: U, choices: W, errors: be, toolbarEditorPosition: xe, extraCSSRules: Se } = n || {}, { answerChoices: G, choices: Ce, correctResponse: K, prompt: q, rationale: J, teacherInstructions: Y } = be || {}, we = W?.length ? Array.from({ length: W.length }, (e, t) => `${t + 1}`) : [], { baseInputConfiguration: Te = {} } = r, X = { position: xe === "top" ? "top" : "bottom" };
+	he && (H = ie);
+	let Z = (e = {}) => ({
+		...Te,
+		...e
+	}), Ee = e(r), Q = F && F.prompt, $ = I && I.prompt, De = H && W?.length >= H ? `Only ${H} allowed maximum` : "", Oe = {
+		choiceMode: T.settings && v(T.label, ["checkbox", "radio"]),
+		"sequentialChoiceLabels.enabled": M.settings && _(M.label, !0),
+		choicePrefix: fe.settings && v(fe.label, ["numbers", "letters"]),
+		partialScoring: E.settings && _(E.label),
+		lockChoiceOrder: D.settings && _(D.label),
+		feedbackEnabled: w.settings && _(w.label),
+		choicesLayout: N.settings && y(N.label, [
+			"vertical",
+			"grid",
+			"horizontal"
+		]),
+		gridColumns: N.settings && n.choicesLayout === "grid" && we.length > 0 && y(me.label, we),
+		"language.enabled": B.settings && _(B.label, !0),
+		language: B.settings && B.enabled && y(V.label, V.options)
+	}, ke = {
+		teacherInstructionsEnabled: O.settings && _(O.label),
+		studentInstructionsEnabled: k.settings && _(k.label),
+		promptEnabled: L.settings && _(L.label),
+		rationaleEnabled: A.settings && _(A.label),
+		spellCheckEnabled: P.settings && _(P.label),
+		scoringType: j.settings && v(j.label, ["auto", "rubric"]),
+		rubricEnabled: R?.settings && _(R?.label)
+	};
+	return /* @__PURE__ */ a(te.ConfigLayout, {
+		dimensions: ue,
+		hideSettings: pe,
+		extraCSSRules: Se,
+		classes: {},
+		settings: /* @__PURE__ */ i(re, {
+			model: n,
+			onChangeModel: p,
+			configuration: r,
+			onChangeConfiguration: m,
+			groups: {
+				Settings: Oe,
+				Properties: ke
+			}
+		}),
+		children: [
+			ge && /* @__PURE__ */ a(b, {
+				label: O.label,
+				children: [/* @__PURE__ */ i(l, {
+					markup: n.teacherInstructions || "",
+					onChange: h,
+					imageSupport: d,
+					nonEmpty: !1,
+					disableUnderline: !0,
+					error: Y,
+					toolbarOpts: X,
+					pluginProps: Z(r?.teacherInstructions?.inputConfiguration),
+					spellCheck: U,
+					maxImageWidth: F && F.teacherInstructions || Q,
+					maxImageHeight: I && I.teacherInstructions || $,
+					uploadSoundSupport: f,
+					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+					mathMlOptions: z
+				}), Y && /* @__PURE__ */ i(C, { children: Y })]
+			}),
+			ye && /* @__PURE__ */ a(b, {
+				label: L.label,
+				children: [/* @__PURE__ */ i(l, {
+					markup: n.prompt,
+					onChange: o,
+					imageSupport: d,
+					nonEmpty: !1,
+					disableUnderline: !0,
+					error: q,
+					toolbarOpts: X,
+					pluginProps: Z(r?.prompt?.inputConfiguration),
+					spellCheck: U,
+					maxImageWidth: F && F.prompt,
+					maxImageHeight: I && I.prompt,
+					uploadSoundSupport: f,
+					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+					mathMlOptions: z
+				}), q && /* @__PURE__ */ i(C, { children: q })]
+			}),
+			/* @__PURE__ */ a(ce, { children: [/* @__PURE__ */ i(le, {
+				component: "div",
+				children: "Choices"
+			}), /* @__PURE__ */ i(S, {
+				disableFocusListener: !0,
+				disableTouchListener: !0,
+				placement: "right",
+				title: Ee,
+				children: /* @__PURE__ */ i(ne, {
+					fontSize: "small",
+					color: "primary"
+				})
+			})] }),
+			W.map((e, t) => /* @__PURE__ */ a(oe, { children: [/* @__PURE__ */ i(ee, {
+				index: t + 1,
+				useLetterOrdering: n.choicePrefix === "letters",
+				mode: n.choiceMode,
+				data: e,
+				defaultFeedback: {},
+				imageSupport: d,
+				disableImageAlignmentButtons: !0,
+				onDelete: () => c(t),
+				onChange: (e) => s(t, e),
+				allowFeedBack: ve,
+				allowDelete: de.settings,
+				noLabels: !0,
+				pluginOpts: Z(r?.choices?.inputConfiguration),
+				toolbarOpts: X,
+				spellCheck: U,
+				error: Ce?.[e.value] || null,
+				noCorrectAnswerError: K,
+				maxImageWidth: F && F.choices || Q,
+				maxImageHeight: I && I.choices || $,
+				uploadSoundSupport: f,
+				mathMlOptions: z
+			}, t), _e && /* @__PURE__ */ a(ae, {
+				label: A.label,
+				children: [/* @__PURE__ */ i(l, {
+					markup: e.rationale || "",
+					onChange: (n) => s(t, {
+						...e,
+						rationale: n
+					}),
+					imageSupport: d,
+					error: J?.[e.value] || null,
+					toolbarOpts: X,
+					pluginProps: Z(r?.rationale?.inputConfiguration),
+					spellCheck: U,
+					maxImageWidth: F && F.rationale || Q,
+					maxImageHeight: I && I.rationale || $,
+					uploadSoundSupport: f,
+					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+					mathMlOptions: z
+				}), J?.[e.value] && /* @__PURE__ */ i(C, { children: J?.[e.value] })]
+			}, `rationale-${t}`)] }, `choice-${t}`)),
+			K && /* @__PURE__ */ i(C, { children: K }),
+			G && /* @__PURE__ */ i(C, { children: G }),
+			g.settings && /* @__PURE__ */ i(S, {
+				title: De,
+				children: H && W?.length >= H ? /* @__PURE__ */ i(se, {
+					variant: "contained",
+					color: "primary",
+					onClick: u,
+					disabled: !0,
+					children: g.label
+				}) : /* @__PURE__ */ i(x, {
+					variant: "contained",
+					color: "primary",
+					onClick: u,
+					children: g.label
+				})
+			})
+		]
+	});
+}, w = class extends t.Component {
+	static propTypes = {
+		model: n.object.isRequired,
+		configuration: n.object.isRequired,
+		disableSidePanel: n.bool,
+		onModelChanged: n.func.isRequired,
+		onConfigurationChanged: n.func.isRequired,
+		imageSupport: n.shape({
+			add: n.func.isRequired,
+			delete: n.func.isRequired
+		})
+	};
+	state = { showWarning: !1 };
+	onRemoveChoice = (e) => {
+		let { model: t, configuration: n, onModelChanged: r } = this.props, { minAnswerChoices: i } = n || {};
+		if (i && t.choices.length === i) {
+			this.setState({ showWarning: !0 });
+			return;
+		}
+		t.choices.splice(e, 1), r({ choices: t.choices });
+	};
+	onAddChoice = () => {
+		let { model: e, configuration: t, onModelChanged: n } = this.props, { maxAnswerChoices: r } = t || {}, { limitChoicesNumber: i } = e || {};
+		i && (r = ie), !(r && e.choices.length >= r) && (e.choices.push({
+			label: "",
+			value: f.firstAvailableIndex(e.choices.map((e) => e.value), 0),
+			feedback: { type: "none" }
+		}), n({ choices: e.choices }));
+	};
+	onChoiceChanged = (e, t) => {
+		let { model: n, onModelChanged: r } = this.props;
+		t.correct && n.choiceMode === "radio" && (n.choices = n.choices.map((e) => c({}, e, { correct: !1 }))), n.choices.splice(e, 1, t), r({ choices: n.choices });
+	};
+	onPromptChanged = (e) => {
+		this.props.onModelChanged({ prompt: e });
+	};
+	onTeacherInstructionsChanged = (e) => {
+		this.props.onModelChanged({ teacherInstructions: e });
+	};
+	onModelChanged = (e, t) => {
+		let { onModelChanged: n } = this.props;
+		switch (t) {
+			case "choiceMode":
+				if (e.choiceMode === "radio") {
+					let t = !1;
+					e.choices = e.choices.map((e) => t ? (e.correct = !1, e) : (e.correct && (t = !0), e));
+				}
+				n({
+					choiceMode: e.choiceMode,
+					choices: e.choices
+				}, !0);
+				break;
+			default:
+				n(e);
+				break;
+		}
+	};
+	render() {
+		let { configuration: { minAnswerChoices: e } = {} } = this.props, { showWarning: n } = this.state;
+		return /* @__PURE__ */ a(t.Fragment, { children: [/* @__PURE__ */ i(u, {
+			open: n,
+			title: "Warning",
+			text: `There can't be less than ${e || 0} choices.`,
+			onConfirm: () => this.setState({ showWarning: !1 })
+		}), /* @__PURE__ */ i(ue, {
+			...this.props,
+			onChangeModel: this.onModelChanged,
+			onRemoveChoice: this.onRemoveChoice,
+			onChoiceChanged: this.onChoiceChanged,
+			onAddChoice: this.onAddChoice,
+			onPromptChanged: this.onPromptChanged,
+			onTeacherInstructionsChanged: this.onTeacherInstructionsChanged
+		})] });
+	}
+};
+//#endregion
+export { w as default };

package/dist/author/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/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 { minAnswerChoices: t, maxAnswerChoices: n } = e;
+	return "Validation requirements:" + (`\nThere should be at least ${t} ` + (n ? `and at most ${n} ` : "") + "answer choices defined.\nEvery answer choice should be non-blank and unique.") + "\nA correct answer must be defined.";
+};
+//#endregion
+export { e as generateValidationMessage };