@pie-element/explicit-constructed-response 11.1.1 → 11.1.2-next.1

package/dist/delivery/main.js

@@ -0,0 +1,115 @@
+import e from "react";
+import t from "prop-types";
+import { debounce as n, isEmpty as r, isEqual as i } from "@pie-element/shared-lodash";
+import a from "@pie-lib/correct-answer-toggle";
+import { ConstructedResponse as o } from "@pie-lib/mask-markup";
+import * as s from "@pie-lib/render-ui";
+import { Collapsible as c, PreviewPrompt as l, UiLayout as u, color as d, hasMedia as f, hasText as p } from "@pie-lib/render-ui";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { styled as g } from "@mui/material/styles";
+import _ from "@pie-lib/translator";
+//#region src/delivery/main.tsx
+function v(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function y(e, t) {
+	return !e || v(e) ? e : v(e.default) ? e.default : t && v(e[t]) ? e[t] : t && v(e[t]?.default) ? e[t].default : e;
+}
+var b = y(u, "UiLayout") || y(T.UiLayout, "UiLayout"), x = y(l, "PreviewPrompt") || y(T.PreviewPrompt, "PreviewPrompt"), S = y(c, "Collapsible") || y(T.Collapsible, "Collapsible"), C = s, w = C.default, T = w && typeof w == "object" ? w : C, { translator: E } = _, D = g(b)(({ alwaysShowCorrect: e }) => ({
+	color: d.text(),
+	backgroundColor: d.background(),
+	...e && { "& *": { borderColor: `${d.text()} !important` } }
+})), O = g("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), k = g("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), A = g("h2")({
+	position: "absolute",
+	left: "-10000px",
+	top: "auto",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden"
+}), j = class extends e.Component {
+	static propTypes = {
+		alwaysShowCorrect: t.bool,
+		animationsDisabled: t.bool,
+		disabled: t.bool,
+		displayType: t.string,
+		feedback: t.object,
+		language: t.string,
+		markup: t.string,
+		maxLengthPerChoice: t.array,
+		maxLengthPerChoiceEnabled: t.bool,
+		mode: t.string,
+		note: t.string,
+		onChange: t.func,
+		playerSpellCheckEnabled: t.bool,
+		prompt: t.string,
+		rationale: t.string,
+		role: t.string,
+		showNote: t.bool,
+		teacherInstructions: t.string,
+		value: t.object,
+		responseAreaInputConfiguration: t.object,
+		model: t.object.isRequired
+	};
+	static defaultProps = { value: {} };
+	state = { showCorrectAnswer: this.props.alwaysShowCorrect || !1 };
+	getChangeSession = (e) => e && e.every((e, t, n) => e === n[0] && e === 1) ? this.props.onChange : n(this.props.onChange, 200, { maxWait: 200 });
+	UNSAFE_componentWillReceiveProps(e) {
+		let { maxLengthPerChoice: t, language: n } = this.props, { note: a } = this.props;
+		r(e.feedback) && this.setState({ showCorrectAnswer: !1 }), e.alwaysShowCorrect && this.setState({ showCorrectAnswer: !0 }), t && !i(t, e.maxLengthPerChoice) && (this.changeSession = this.getChangeSession(e.maxLengthPerChoice)), a && n && n !== e.language && a === E.t("common:commonCorrectAnswerWithAlternates", { lng: n }) && (a = E.t("common:commonCorrectAnswerWithAlternates", { lng: e.language }));
+	}
+	toggleShowCorrect = () => {
+		this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });
+	};
+	changeSession = this.getChangeSession(this.props.maxLengthPerChoice);
+	onChange = (e) => {
+		this.changeSession(e);
+	};
+	render() {
+		let { showCorrectAnswer: e } = this.state, { alwaysShowCorrect: t, animationsDisabled: n, mode: r, displayType: i, role: s, language: c, maxLengthPerChoice: l, maxLengthPerChoiceEnabled: u, note: d, playerSpellCheckEnabled: g, prompt: _, rationale: v, showNote: y, teacherInstructions: b, responseAreaInputConfiguration: C, model: w, value: T } = this.props, { extraCSSRules: E } = w || {}, j = (e || r === "view" && s === "instructor") && y && d, M = /* @__PURE__ */ m(x, {
+			defaultClassName: "teacher-instructions",
+			prompt: b
+		}), N = /* @__PURE__ */ m(x, { prompt: v }), P = v && (p(v) || f(v)), F = b && (p(b) || f(b));
+		return /* @__PURE__ */ h(D, {
+			extraCSSRules: E,
+			alwaysShowCorrect: t,
+			style: { display: `${i}` },
+			children: [
+				r === "gather" && /* @__PURE__ */ m(A, { children: "Fill in the Blank Question" }),
+				F && /* @__PURE__ */ m(k, { children: n ? M : /* @__PURE__ */ m(S, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: M
+				}) }),
+				_ && /* @__PURE__ */ m(x, { prompt: _ }),
+				!t && r === "evaluate" && /* @__PURE__ */ m(a, {
+					show: !0,
+					toggled: e,
+					onToggle: this.toggleShowCorrect,
+					language: c
+				}),
+				/* @__PURE__ */ m(o, {
+					...this.props,
+					onChange: this.onChange,
+					showCorrectAnswer: e,
+					value: T,
+					maxLength: l,
+					adjustedLimit: u,
+					spellCheck: g,
+					pluginProps: C
+				}),
+				j && /* @__PURE__ */ m(O, { dangerouslySetInnerHTML: { __html: d } }),
+				P && /* @__PURE__ */ m(k, { children: n ? N : /* @__PURE__ */ m(S, {
+					labels: {
+						hidden: "Show Rationale",
+						visible: "Hide Rationale"
+					},
+					children: N
+				}) })
+			]
+		});
+	}
+};
+//#endregion
+export { j as default };