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

package/dist/delivery/index.js

@@ -0,0 +1,66 @@
+import e from "./main.js";
+import t from "react";
+import { createRoot as n } from "react-dom/client";
+import { ModelSetEvent as r, SessionChangedEvent as i } from "@pie-element/shared-player-events";
+import { renderMath as a } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/delivery/index.ts
+var o = class extends HTMLElement {
+	constructor() {
+		super(), this._model = null, this._session = null, this._root = null;
+	}
+	setLangAttribute() {
+		let e = this._model && typeof this._model.language ? this._model.language : "", t = e ? e.slice(0, 2) : "en";
+		this.setAttribute("lang", t);
+	}
+	set model(e) {
+		this._model = e, this.dispatchEvent(new r(this.tagName.toLowerCase(), this.session && !!this.session.value, !!this._model)), this.setLangAttribute(), this._render();
+	}
+	set session(e) {
+		this._session = e, this._render();
+	}
+	get session() {
+		return this._session;
+	}
+	_render = () => {
+		if (this._model && this._session) {
+			let r = t.createElement(e, {
+				choices: this._model.choices,
+				disabled: this._model.disabled,
+				displayType: this._model.displayType,
+				feedback: this._model.feedback,
+				language: this._model.language,
+				markup: this._model.markup,
+				maxLengthPerChoice: this._model.maxLengthPerChoice,
+				maxLengthPerChoiceEnabled: this._model.maxLengthPerChoiceEnabled,
+				mode: this._model.mode,
+				note: this._model.note,
+				onChange: this.changeSession,
+				playerSpellCheckEnabled: this._model.playerSpellCheckEnabled,
+				prompt: this._model.prompt,
+				rationale: this._model.rationale,
+				role: this._model.role,
+				showNote: this._model.showNote,
+				teacherInstructions: this._model.teacherInstructions,
+				value: this._session.value,
+				responseAreaInputConfiguration: this._model.responseAreaInputConfiguration
+			});
+			this._root ||= n(this), this._root.render(r), queueMicrotask(() => {
+				a(this);
+			});
+		}
+	};
+	dispatchChangedEvent = () => {
+		this.dispatchEvent(new i(this.tagName.toLowerCase(), this.session && !!this.session.value));
+	};
+	changeSession = (e) => {
+		this.session.value = e, this.dispatchChangedEvent(), this._render();
+	};
+	connectedCallback() {
+		this.setAttribute("aria-label", "Fill in the Blank Question"), this.setAttribute("role", "region"), this._render();
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { o as default };

package/dist/delivery/main.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @synced-from pie-elements/packages/explicit-constructed-response/src/main.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 React from 'react';
+import PropTypes from 'prop-types';
+export declare class Main extends React.Component {
+    static propTypes: {
+        alwaysShowCorrect: PropTypes.Requireable<boolean>;
+        animationsDisabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        displayType: PropTypes.Requireable<string>;
+        feedback: PropTypes.Requireable<object>;
+        language: PropTypes.Requireable<string>;
+        markup: PropTypes.Requireable<string>;
+        maxLengthPerChoice: PropTypes.Requireable<any[]>;
+        maxLengthPerChoiceEnabled: PropTypes.Requireable<boolean>;
+        mode: PropTypes.Requireable<string>;
+        note: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        playerSpellCheckEnabled: PropTypes.Requireable<boolean>;
+        prompt: PropTypes.Requireable<string>;
+        rationale: PropTypes.Requireable<string>;
+        role: PropTypes.Requireable<string>;
+        showNote: PropTypes.Requireable<boolean>;
+        teacherInstructions: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<object>;
+        responseAreaInputConfiguration: PropTypes.Requireable<object>;
+        model: PropTypes.Validator<object>;
+    };
+    static defaultProps: {
+        value: {};
+    };
+    state: {
+        showCorrectAnswer: any;
+    };
+    getChangeSession: (maxLengthPerChoice: any) => any;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    toggleShowCorrect: any;
+    changeSession: any;
+    onChange: any;
+    render(): React.JSX.Element;
+}
+export default Main;

package/dist/delivery/main.js

@@ -0,0 +1,117 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/debounce.js";
+import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import n from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
+import r from "react";
+import i from "prop-types";
+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 r.Component {
+	static propTypes = {
+		alwaysShowCorrect: i.bool,
+		animationsDisabled: i.bool,
+		disabled: i.bool,
+		displayType: i.string,
+		feedback: i.object,
+		language: i.string,
+		markup: i.string,
+		maxLengthPerChoice: i.array,
+		maxLengthPerChoiceEnabled: i.bool,
+		mode: i.string,
+		note: i.string,
+		onChange: i.func,
+		playerSpellCheckEnabled: i.bool,
+		prompt: i.string,
+		rationale: i.string,
+		role: i.string,
+		showNote: i.bool,
+		teacherInstructions: i.string,
+		value: i.object,
+		responseAreaInputConfiguration: i.object,
+		model: i.object.isRequired
+	};
+	static defaultProps = { value: {} };
+	state = { showCorrectAnswer: this.props.alwaysShowCorrect || !1 };
+	getChangeSession = (t) => t && t.every((e, t, n) => e === n[0] && e === 1) ? this.props.onChange : e(this.props.onChange, 200, { maxWait: 200 });
+	UNSAFE_componentWillReceiveProps(e) {
+		let { maxLengthPerChoice: r, language: i } = this.props, { note: a } = this.props;
+		t(e.feedback) && this.setState({ showCorrectAnswer: !1 }), e.alwaysShowCorrect && this.setState({ showCorrectAnswer: !0 }), r && !n(r, e.maxLengthPerChoice) && (this.changeSession = this.getChangeSession(e.maxLengthPerChoice)), a && i && i !== e.language && a === E.t("common:commonCorrectAnswerWithAlternates", { lng: i }) && (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 };