@pie-element/match-list 8.0.2-next.20261007003844 → 8.0.2

package/dist/delivery/answer-area.js

@@ -6,14 +6,15 @@ import { color as i } from "@pie-lib/render-ui";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { styled as s } from "@mui/material/styles";
 import { isEmpty as c, isUndefined as l, reduce as u } from "@pie-element/shared-lodash";
+import { sanitizeModelHtml as d } from "@pie-element/shared-utils";
 //#region src/delivery/answer-area.tsx
-var d = 200, f = s("div")({
+var f = 200, p = s("div")({
 	alignItems: "normal",
 	display: "flex",
 	flexShrink: 0,
 	height: 40,
 	margin: "10px 20px"
-}), p = s("div")(({ theme: e }) => ({
+}), m = s("div")(({ theme: e }) => ({
 	alignItems: "flex-start",
 	display: "flex",
 	flex: 1,
@@ -21,24 +22,24 @@ var d = 200, f = s("div")({
 	justifyContent: "space-between",
 	marginTop: e.spacing(2),
 	marginBottom: e.spacing(2)
-})), m = s("div")(() => ({
+})), h = s("div")(() => ({
 	border: `1px solid ${i.border()}`,
 	boxSizing: "border-box",
 	flex: 1,
 	margin: "10px 0",
 	minHeight: 40,
-	minWidth: d,
+	minWidth: f,
 	overflow: "hidden",
 	padding: 10,
 	textAlign: "center",
 	width: "100%",
 	wordBreak: "break-word"
-})), h = s("div")({
+})), g = s("div")({
 	alignItems: "center",
 	display: "flex",
 	justifyContent: "space-between",
 	width: "100%"
-}), g = class extends n.Component {
+}), _ = class extends n.Component {
 	static propTypes = {
 		session: r.object.isRequired,
 		showCorrect: r.bool.isRequired,
@@ -74,35 +75,35 @@ var d = 200, f = s("div")({
 		});
 	};
 	render() {
-		let { disabled: n, instanceId: r, onRemoveAnswer: i, selectedAnswer: s, onChoiceClick: l, onPlacementClick: u } = this.props, d = this.buildRows(), g = this.getCorrectOrIncorrectMap();
-		return /* @__PURE__ */ a(p, { children: d.map(({ sessionAnswer: d, title: p, id: _ }, v) => {
-			let y = `${r}-prompt-label-${_}`;
-			return /* @__PURE__ */ o(h, { children: [
-				/* @__PURE__ */ a(m, {
-					id: y,
-					dangerouslySetInnerHTML: { __html: p }
+		let { disabled: n, instanceId: r, onRemoveAnswer: i, selectedAnswer: s, onChoiceClick: l, onPlacementClick: u } = this.props, f = this.buildRows(), _ = this.getCorrectOrIncorrectMap();
+		return /* @__PURE__ */ a(m, { children: f.map(({ sessionAnswer: f, title: m, id: v }, y) => {
+			let b = `${r}-prompt-label-${v}`;
+			return /* @__PURE__ */ o(g, { children: [
+				/* @__PURE__ */ a(h, {
+					id: b,
+					dangerouslySetInnerHTML: { __html: d(m) }
 				}),
-				/* @__PURE__ */ o(f, { children: [/* @__PURE__ */ a(e, { direction: "left" }), /* @__PURE__ */ a(e, {})] }),
+				/* @__PURE__ */ o(p, { children: [/* @__PURE__ */ a(e, { direction: "left" }), /* @__PURE__ */ a(e, {})] }),
 				/* @__PURE__ */ a(t, {
 					className: "answer",
-					index: v,
-					promptId: _,
-					labelId: y,
-					correct: g[_],
-					draggable: !c(d),
+					index: y,
+					promptId: v,
+					labelId: b,
+					correct: _[v],
+					draggable: !c(f),
 					disabled: n,
 					instanceId: r,
-					id: d.id,
-					title: d.title,
+					id: f.id,
+					title: f.title,
 					type: "target",
-					onRemoveChoice: () => i(_),
+					onRemoveChoice: () => i(v),
 					selectedAnswer: s,
 					onSelectClick: l,
 					onPlacementClick: u
 				})
-			] }, _);
+			] }, v);
 		}) });
 	}
 };
 //#endregion
-export { g as AnswerArea, g as default };
+export { _ as AnswerArea, _ as default };

package/dist/delivery/answer.js

@@ -7,13 +7,14 @@ import { color as s } from "@pie-lib/render-ui";
 import { jsx as c } from "react/jsx-runtime";
 import { styled as l } from "@mui/material/styles";
 import { isEmpty as u } from "@pie-element/shared-lodash";
+import { sanitizeModelHtml as d } from "@pie-element/shared-utils";
 //#region src/delivery/answer.tsx
-var d = n("pie-elements:match-title:answer"), f = s.v("pie"), p = l("div")(() => ({
+var f = n("pie-elements:match-title:answer"), p = s.v("pie"), m = l("div")(() => ({
 	width: "100%",
 	fontSize: "18px",
 	textAlign: "center",
 	color: "inherit"
-})), m = ({ index: e, isOver: t, disabled: n, type: r }) => /* @__PURE__ */ c(i, {
+})), h = ({ index: e, isOver: t, disabled: n, type: r }) => /* @__PURE__ */ c(i, {
 	extraStyles: {
 		display: "flex",
 		padding: "0",
@@ -24,17 +25,17 @@ var d = n("pie-elements:match-title:answer"), f = s.v("pie"), p = l("div")(() =>
 	disabled: n,
 	isOver: t,
 	type: r,
-	children: e !== void 0 && /* @__PURE__ */ c(p, { children: e })
+	children: e !== void 0 && /* @__PURE__ */ c(m, { children: e })
 });
-m.propTypes = {
+h.propTypes = {
 	index: r.number,
 	isOver: r.bool,
 	disabled: r.bool,
 	type: r.string
 };
-var h = l("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcome: i }) => ({
+var g = l("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcome: i }) => ({
 	color: s.text(),
-	backgroundColor: f("background", s.defaults.WHITE),
+	backgroundColor: p("background", s.defaults.WHITE),
 	border: `1px solid ${i === "correct" ? s.correct() : i === "incorrect" ? s.incorrect() : s.border()}`,
 	cursor: r ? "not-allowed" : "pointer",
 	width: "100%",
@@ -45,22 +46,22 @@ var h = l("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcom
 	wordBreak: "break-word",
 	opacity: (e || t) && !r ? .5 : n && !r ? .2 : 1,
 	touchAction: "none"
-})), g = (e) => {
+})), _ = (e) => {
 	let { isDragging: t, isSelected: n, isOver: r, title: i, disabled: a, empty: o, outcome: s, guideIndex: l, type: u } = e;
-	return o ? /* @__PURE__ */ c(m, {
+	return o ? /* @__PURE__ */ c(h, {
 		index: l,
 		isOver: r,
 		disabled: a,
 		type: u
-	}) : /* @__PURE__ */ c(h, {
+	}) : /* @__PURE__ */ c(g, {
 		isDragging: t,
 		isSelected: n,
 		isOver: r,
 		disabled: a,
 		outcome: s,
-		dangerouslySetInnerHTML: { __html: i }
+		dangerouslySetInnerHTML: { __html: d(i) }
 	});
-}, _ = l("div")(({ correct: e, isSelected: t, isDragging: n, theme: r }) => ({
+}, v = l("div")(({ correct: e, isSelected: t, isDragging: n, theme: r }) => ({
 	boxSizing: "border-box",
 	minHeight: 40,
 	minWidth: "200px",
@@ -70,7 +71,7 @@ var h = l("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcom
 	textAlign: "center",
 	height: "initial",
 	border: e === !0 ? `1px solid ${s.correct()}` : e === !1 ? `1px solid ${s.incorrect()}` : t && !n ? `2px solid ${s.buttonFocusOutline()}` : "none"
-})), v = class extends e.Component {
+})), y = class extends e.Component {
 	static propTypes = {
 		className: r.string,
 		isDragging: r.bool,
@@ -92,13 +93,13 @@ var h = l("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcom
 	handleTouchStart = (e) => {};
 	render() {
 		let { id: e, title: t, isDragging: n = !1, isSelected: r = !1, className: i, disabled: a, isOver: o = !1, type: s, correct: l } = this.props;
-		return d("[render], props: ", this.props), /* @__PURE__ */ c(_, {
+		return f("[render], props: ", this.props), /* @__PURE__ */ c(v, {
 			correct: l,
 			isSelected: r,
 			isDragging: n,
 			className: i,
 			ref: (e) => this.ref = e,
-			children: /* @__PURE__ */ c(g, {
+			children: /* @__PURE__ */ c(_, {
 				title: t,
 				id: e,
 				isOver: o,
@@ -110,9 +111,9 @@ var h = l("div")(({ isDragging: e, isSelected: t, isOver: n, disabled: r, outcom
 			})
 		});
 	}
-}, y = ({ type: e, id: t, promptId: n }) => n == null ? `${e || "answer"}-${t}` : `${e || "answer"}-prompt-${n}`;
-function b(e) {
-	let { id: n, instanceId: r, promptId: i, labelId: s, draggable: l = !0, disabled: u = !1, type: d, selectedAnswer: f, onSelectClick: p, onPlacementClick: m } = e, h = y({
+}, b = ({ type: e, id: t, promptId: n }) => n == null ? `${e || "answer"}-${t}` : `${e || "answer"}-prompt-${n}`;
+function x(e) {
+	let { id: n, instanceId: r, promptId: i, labelId: s, draggable: l = !0, disabled: u = !1, type: d, selectedAnswer: f, onSelectClick: p, onPlacementClick: m } = e, h = b({
 		type: d,
 		id: n,
 		promptId: i
@@ -122,7 +123,7 @@ function b(e) {
 		instanceId: r,
 		value: e.title,
 		promptId: i
-	}, b = g ? {
+	}, v = g ? {
 		type: "drop-zone",
 		promptId: i,
 		instanceId: r
@@ -133,12 +134,12 @@ function b(e) {
 		attributes: { tabIndex: l && !u ? 0 : -1 }
 	}), D = o({
 		id: g,
-		data: b,
+		data: v,
 		disabled: u || !g
 	}), O = D.setNodeRef, k = D.isOver, [A, j] = t(!1), M = !!f, N = k || M && A && !u, P = !!f && f.type === _.type && f.id === _.id && f.promptId === _.promptId, F = w ? `translate3d(${w.x}px, ${w.y}px, 0)` : void 0;
 	if (g) {
 		let t = () => {
-			u || (P ? p?.(_) : f ? m?.(b) : l && p?.(_));
+			u || (P ? p?.(_) : f ? m?.(v) : l && p?.(_));
 		}, n = !l && !u && M;
 		return /* @__PURE__ */ c("div", {
 			ref: O,
@@ -166,7 +167,7 @@ function b(e) {
 					transform: F,
 					transition: T
 				},
-				children: /* @__PURE__ */ c(v, {
+				children: /* @__PURE__ */ c(y, {
 					...e,
 					isDragging: E,
 					isSelected: P,
@@ -191,7 +192,7 @@ function b(e) {
 			opacity: E ? .5 : 1,
 			touchAction: l && !u ? "none" : "auto"
 		},
-		children: /* @__PURE__ */ c(v, {
+		children: /* @__PURE__ */ c(y, {
 			...e,
 			isDragging: E,
 			isSelected: P,
@@ -199,7 +200,7 @@ function b(e) {
 		})
 	});
 }
-b.propTypes = {
+x.propTypes = {
 	id: r.any,
 	instanceId: r.string,
 	promptId: r.any,
@@ -213,4 +214,4 @@ b.propTypes = {
 	onPlacementClick: r.func
 };
 //#endregion
-export { v as Answer, y as buildDragId, b as default };
+export { y as Answer, b as buildDragId, x as default };