@pie-element/multiple-choice 13.2.2-next.5 → 13.3.0

package/dist/delivery/multiple-choice.js

@@ -1,244 +0,0 @@
-import e from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
-import t from "./choice.js";
-import n from "react";
-import r from "prop-types";
-import * as i from "@pie-lib/render-ui";
-import { Collapsible as a, PreviewPrompt as o, color as s, transformDataHeadings as c } from "@pie-lib/render-ui";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import d from "@pie-lib/correct-answer-toggle";
-import { styled as f } from "@mui/material/styles";
-import p from "@mui/material/Box";
-import m from "@pie-lib/translator";
-//#region src/delivery/multiple-choice.tsx
-function h(e) {
-	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
-}
-function g(e, t) {
-	return !e || h(e) ? e : h(e.default) ? e.default : t && h(e[t]) ? e[t] : t && h(e[t]?.default) ? e[t].default : e;
-}
-var _ = g(o, "PreviewPrompt") || g(x.PreviewPrompt, "PreviewPrompt"), v = g(a, "Collapsible") || g(x.Collapsible, "Collapsible"), y = i, b = y.default, x = b && typeof b == "object" ? b : y, { translator: S } = m, C = f(p)({
-	color: s.text(),
-	backgroundColor: s.background(),
-	"& *": { "-webkit-font-smoothing": "antialiased" },
-	position: "relative",
-	"& legend": { border: "none !important" }
-}), w = f("h2")(({ theme: e }) => ({
-	display: "block",
-	fontSize: "inherit",
-	margin: "0",
-	fontWeight: "normal",
-	paddingBottom: e.spacing(2)
-})), T = f(p)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), E = f(p)({
-	display: "flex",
-	flexDirection: "row",
-	flexWrap: "wrap"
-}), D = f(p)({ display: "grid" }), O = f("fieldset")({
-	border: "0px",
-	padding: "0.01em 0 0 0",
-	margin: "0px",
-	minWidth: "0px"
-}), k = f("h3")({
-	position: "absolute",
-	left: "-10000px",
-	top: "auto",
-	width: "1px",
-	height: "1px",
-	overflow: "hidden"
-}), A = f("div")(({ theme: e }) => ({
-	fontSize: e.typography.fontSize - 2,
-	color: e.palette.error.main,
-	paddingTop: e.spacing(1)
-})), j = class extends n.Component {
-	static propTypes = {
-		className: r.string,
-		mode: r.oneOf([
-			"gather",
-			"view",
-			"evaluate"
-		]),
-		choiceMode: r.oneOf(["radio", "checkbox"]),
-		keyMode: r.oneOf([
-			"numbers",
-			"letters",
-			"none"
-		]),
-		choices: r.array,
-		partLabel: r.string,
-		prompt: r.string,
-		teacherInstructions: r.string,
-		session: r.object,
-		disabled: r.bool,
-		onChoiceChanged: r.func,
-		responseCorrect: r.bool,
-		correctResponse: r.array,
-		choicesLayout: r.oneOf([
-			"vertical",
-			"grid",
-			"horizontal"
-		]),
-		gridColumns: r.string,
-		alwaysShowCorrect: r.bool,
-		animationsDisabled: r.bool,
-		language: r.string,
-		selectedAnswerBackgroundColor: r.string,
-		selectedAnswerStrokeColor: r.string,
-		selectedAnswerStrokeWidth: r.string,
-		hoverAnswerBackgroundColor: r.string,
-		hoverAnswerStrokeColor: r.string,
-		hoverAnswerStrokeWidth: r.string,
-		onShowCorrectToggle: r.func,
-		isSelectionButtonBelow: r.bool,
-		minSelections: r.number,
-		maxSelections: r.number,
-		autoplayAudioEnabled: r.bool,
-		customAudioButton: {
-			playImage: r.string,
-			pauseImage: r.string
-		},
-		options: r.object,
-		baseHeadingLevel: r.number,
-		includeSrHeading: r.bool
-	};
-	constructor(e) {
-		super(e), this.state = {
-			showCorrect: this.props.options && this.props.alwaysShowCorrect || !1,
-			maxSelectionsErrorState: !1
-		}, this.onToggle = this.onToggle.bind(this), this.groupName = `mc-group-${Math.random().toString(36).slice(2, 10)}`;
-	}
-	isSelected(e) {
-		let t = this.props.session && this.props.session.value;
-		return t && t.indexOf && t.indexOf(e) >= 0;
-	}
-	handleChange = (e) => {
-		let { value: t, checked: n } = e.target, { maxSelections: r, onChoiceChanged: i, session: a } = this.props;
-		a.value && a.value.length >= r && (this.setState({ maxSelectionsErrorState: n }), n) || i({
-			value: t,
-			selected: n,
-			selector: "Mouse"
-		});
-	};
-	onToggle = () => {
-		this.props.mode === "evaluate" && this.setState({ showCorrect: !this.state.showCorrect }, () => {
-			this.props.onShowCorrectToggle && this.props.onShowCorrectToggle();
-		});
-	};
-	UNSAFE_componentWillReceiveProps(e) {
-		!e.correctResponse && this.state.showCorrect !== !1 && this.setState({ showCorrect: !1 }, () => {
-			this.props.onShowCorrectToggle && this.props.onShowCorrectToggle();
-		}), e.options && e.alwaysShowCorrect && this.state.showCorrect !== !0 && this.setState({ showCorrect: !0 }, () => {
-			this.props.onShowCorrectToggle && this.props.onShowCorrectToggle();
-		});
-	}
-	indexToSymbol(e) {
-		return this.props.keyMode === "numbers" ? `${e + 1}` : this.props.keyMode === "letters" ? String.fromCharCode(97 + e).toUpperCase() : "";
-	}
-	getCorrectness = (e = {}) => {
-		let t = e.correct, n = this.isSelected(e.value);
-		if (this.state.showCorrect) return t ? "correct" : void 0;
-		if (t) return n ? "correct" : "incorrect";
-		if (n) return "incorrect";
-	};
-	getChecked(e) {
-		return this.props.options && this.props.alwaysShowCorrect || this.state.showCorrect && this.props.mode === "evaluate" ? e.correct || !1 : this.isSelected(e.value);
-	}
-	renderHeading() {
-		let { mode: e, choiceMode: t, includeSrHeading: n, baseHeadingLevel: r, partLabel: i } = this.props;
-		if (!(!i && n !== !1) || e !== "gather") return null;
-		let a = r ? Math.min(6, r) : 2;
-		return /* @__PURE__ */ l(k.withComponent(`h${a}`), { children: t === "radio" ? "Multiple Choice Question" : "Multiple Select Question" });
-	}
-	render() {
-		let { mode: n, disabled: r, className: i, choices: a = [], choiceMode: o, gridColumns: s, partLabel: f, prompt: m, responseCorrect: h, teacherInstructions: g, alwaysShowCorrect: y, animationsDisabled: b, language: x, isSelectionButtonBelow: k, minSelections: j, maxSelections: M, autoplayAudioEnabled: N, session: P, customAudioButton: F, options: I, baseHeadingLevel: L } = this.props, { showCorrect: R, maxSelectionsErrorState: z } = this.state, B = n === "evaluate", V = B && !h, H = s > 1 ? { gridTemplateColumns: `repeat(${s}, 1fr)` } : void 0, U = P.value && P.value.length || 0, W = (() => {
-			if (!L) return;
-			let e = 1;
-			return f && (e += 1), Math.min(6, L + e);
-		})(), G = (e) => e && W ? c(e, W) : e, K = /* @__PURE__ */ l(_, {
-			tagName: "div",
-			className: "prompt",
-			defaultClassName: "teacher-instructions",
-			prompt: g
-		}), q = () => j && M ? j === M ? S.t("translation:multipleChoice:minmaxSelections_equal", {
-			lng: x,
-			minSelections: j
-		}) : S.t("translation:multipleChoice:minmaxSelections_range", {
-			lng: x,
-			minSelections: j,
-			maxSelections: M
-		}) : j ? S.t("translation:multipleChoice:minSelections", {
-			lng: x,
-			minSelections: j
-		}) : "", J = this.props.choicesLayout === "grid" ? D : this.props.choicesLayout === "horizontal" ? E : p;
-		return /* @__PURE__ */ u(C, {
-			id: "main-container",
-			className: e(i, "multiple-choice"),
-			children: [
-				f && /* @__PURE__ */ l(w, {
-					as: L ? `h${Math.min(6, L + 1)}` : "h2",
-					children: f
-				}),
-				this.renderHeading(),
-				g && /* @__PURE__ */ l(T, { children: b ? K : /* @__PURE__ */ l(v, {
-					labels: {
-						hidden: "Show Teacher Instructions",
-						visible: "Hide Teacher Instructions"
-					},
-					children: K
-				}) }),
-				/* @__PURE__ */ u(O, {
-					role: o === "radio" ? "radiogroup" : "group",
-					children: [
-						/* @__PURE__ */ l(_, {
-							className: "prompt",
-							defaultClassName: "prompt",
-							prompt: G(m),
-							tagName: "legend",
-							autoplayAudioEnabled: N,
-							customAudioButton: F
-						}),
-						!(I && y) && /* @__PURE__ */ l(d, {
-							show: V,
-							toggled: R,
-							onToggle: this.onToggle.bind(this),
-							language: x
-						}),
-						/* @__PURE__ */ l(J, {
-							style: H,
-							children: a.map((e, n) => /* @__PURE__ */ l(t, {
-								choicesLayout: this.props.choicesLayout,
-								selectedAnswerBackgroundColor: this.props.selectedAnswerBackgroundColor,
-								selectedAnswerStrokeColor: this.props.selectedAnswerStrokeColor,
-								selectedAnswerStrokeWidth: this.props.selectedAnswerStrokeWidth,
-								hoverAnswerBackgroundColor: this.props.hoverAnswerBackgroundColor,
-								hoverAnswerStrokeColor: this.props.hoverAnswerStrokeColor,
-								hoverAnswerStrokeWidth: this.props.hoverAnswerStrokeWidth,
-								gridColumns: s,
-								choice: e,
-								index: n,
-								choicesLength: a.length,
-								showCorrect: R,
-								isEvaluateMode: B,
-								choiceMode: o,
-								disabled: r,
-								tagName: this.groupName,
-								onChoiceChanged: this.handleChange,
-								hideTick: e.hideTick,
-								checked: this.getChecked(e),
-								correctness: B ? this.getCorrectness(e) : void 0,
-								displayKey: this.indexToSymbol(n),
-								isSelectionButtonBelow: k
-							}, `choice-${n}`))
-						})
-					]
-				}),
-				o === "checkbox" && U < j && /* @__PURE__ */ l(A, { children: q() }),
-				o === "checkbox" && z && /* @__PURE__ */ l(A, { children: S.t(`translation:multipleChoice:maxSelections_${M === 1 ? "one" : "other"}`, {
-					lng: x,
-					maxSelections: M
-				}) })
-			]
-		});
-	}
-};
-j.defaultProps = { session: { value: [] } };
-//#endregion
-export { j as default };

package/dist/delivery/session-updater.d.ts

@@ -1,10 +0,0 @@
-/**
- * @synced-from pie-elements/packages/multiple-choice/src/session-updater.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 function updateSessionValue(session: any, choiceMode: any, data: any): void;
-export declare function updateSessionMetadata(session: any, metadata: any): void;

package/dist/delivery/session-updater.js

@@ -1,9 +0,0 @@
-//#region src/delivery/session-updater.ts
-function e(e, t, n) {
-	e.value = e.value || [], t === "checkbox" && (n.selected ? e.value = Array.from(new Set([...e.value, n.value])) : e.value = e.value.filter((e) => e !== n.value)), t === "radio" && (n.selected ? e.value = [n.value] : e.value = []), e.selector = n.selector;
-}
-function t(e, t) {
-	e.audioStartTime = e.audioStartTime || t.audioStartTime, e.audioEndTime = e.audioEndTime || t.audioEndTime, !e.waitTime && e.audioStartTime && e.audioEndTime && (e.waitTime = e.audioEndTime - e.audioStartTime);
-}
-//#endregion
-export { t as updateSessionMetadata, e as updateSessionValue };

package/dist/index.d.ts

@@ -1 +0,0 @@
-export { default } from './delivery/index.js';

package/dist/index.iife.d.ts

@@ -1,8 +0,0 @@
-/**
- * IIFE entry point for multiple-choice element
- * This file is only used for IIFE builds and includes auto-registration
- *
- * @sync-generated - Auto-generated during sync from pie-elements
- */
-import Element from './index.js';
-export default Element;