@pie-element/image-cloze-association 0.1.0

package/dist/delivery/possible-responses.js

@@ -0,0 +1,41 @@
+import e from "./possible-response.js";
+import "react";
+import { color as t } from "@pie-lib/render-ui";
+import n from "prop-types";
+import { ICADroppablePlaceholder as r } from "@pie-lib/drag";
+import { jsx as i } from "react/jsx-runtime";
+import { styled as a } from "@mui/material/styles";
+//#region src/delivery/possible-responses.tsx
+var o = a("div")(({ theme: e }) => ({
+	backgroundColor: t.background(),
+	padding: e.spacing(2),
+	display: "flex",
+	alignItems: "center",
+	width: "fit-content"
+})), s = ({ canDrag: t, data: n, onDragBegin: a, answerChoiceTransparency: s, customStyle: c, isVertical: l, minHeight: u }) => /* @__PURE__ */ i(o, {
+	style: c,
+	children: /* @__PURE__ */ i(r, {
+		id: "ica-board",
+		disabled: !t,
+		isVerticalPool: l,
+		minHeight: u,
+		children: (n || []).map((n) => /* @__PURE__ */ i(e, {
+			canDrag: t,
+			data: n,
+			onDragBegin: a,
+			answerChoiceTransparency: s,
+			containerStyle: { margin: "4px" }
+		}, n.id))
+	})
+});
+s.propTypes = {
+	canDrag: n.bool.isRequired,
+	data: n.array.isRequired,
+	onDragBegin: n.func.isRequired,
+	answerChoiceTransparency: n.bool,
+	customStyle: n.object,
+	isVertical: n.bool,
+	minHeight: n.number
+};
+//#endregion
+export { s as default };

package/dist/delivery/root.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/root.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';
+export declare class ImageClozeAssociationComponent extends React.Component {
+    constructor(props: any);
+    onDragStart: any;
+    onDragEnd: any;
+    renderDragOverlay: any;
+    filterPossibleAnswers: (possibleResponses: any, answer: any) => any;
+    handleOnAnswerSelect: any;
+    handleOnAnswerRemove: any;
+    toggleCorrect: (showCorrect: any) => void;
+    render(): React.JSX.Element;
+}
+export default ImageClozeAssociationComponent;
+//# sourceMappingURL=root.d.ts.map

package/dist/delivery/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/delivery/root.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAqE1B,qBAAa,8BAA+B,SAAQ,KAAK,CAAC,SAAS;gBACrD,KAAK,KAAA;IAyCjB,WAAW,EAAE,GAAG,CASd;IAEF,SAAS,EAAE,GAAG,CAsCZ;IAEF,iBAAiB,EAAE,GAAG,CAuBpB;IAEF,qBAAqB,GAAI,sBAAiB,EAAE,WAAM,SACwB;IAE1E,oBAAoB,EAAE,GAAG,CAgFvB;IAEF,oBAAoB,EAAE,GAAG,CAyBvB;IAEF,aAAa,GAAI,gBAAW,UAAoC;IAEhE,MAAM;CA2KP;AA+CD,eAAe,8BAA8B,CAAC"}

package/dist/delivery/root.js

@@ -0,0 +1,279 @@
+import e from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/flatMap.js";
+import t from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/groupBy.js";
+import n from "./possible-response.js";
+import r from "./image-container.js";
+import i from "./interactive-section.js";
+import a from "./possible-responses.js";
+import { getAnswersCorrectness as o, getUnansweredAnswers as s } from "./utils-correctness.js";
+import c from "react";
+import * as l from "@pie-lib/render-ui";
+import { Collapsible as u, PreviewPrompt as d, UiLayout as f, color as p, hasMedia as m, hasText as h } from "@pie-lib/render-ui";
+import g from "prop-types";
+import { DragOverlay as _ } from "@dnd-kit/core";
+import { DragProvider as v } from "@pie-lib/drag";
+import { CSSTransition as y, TransitionGroup as b } from "react-transition-group";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { styled as C } from "@mui/material/styles";
+import w from "@mui/icons-material/NotInterested";
+import T from "@pie-lib/correct-answer-toggle";
+import E from "@pie-lib/translator";
+//#region src/delivery/root.tsx
+function D(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function O(e, t) {
+	return !e || D(e) ? e : D(e.default) ? e.default : t && D(e[t]) ? e[t] : t && D(e[t]?.default) ? e[t].default : e;
+}
+var k = O(f, "UiLayout") || O(P.UiLayout, "UiLayout"), A = O(d, "PreviewPrompt") || O(P.PreviewPrompt, "PreviewPrompt"), j = O(u, "Collapsible") || O(P.Collapsible, "Collapsible"), M = l, N = M.default, P = N && typeof N == "object" ? N : M, { translator: F } = E, I = () => Math.random().toString(36).substring(2) + (/* @__PURE__ */ new Date()).getTime().toString(36), L = C(k)({
+	color: p.text(),
+	backgroundColor: p.background(),
+	position: "relative",
+	"& img": {
+		maxWidth: "100%",
+		height: "auto"
+	}
+}), R = C(j)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), z = C(j)(({ theme: e }) => ({ marginTop: e.spacing(2) })), B = class extends c.Component {
+	constructor(n) {
+		super(n);
+		let { model: { possibleResponses: r, responseContainers: i, duplicateResponses: a, maxResponsePerZone: o }, session: s } = n, { answers: c } = s || {}, l = (r || []).map((e, t) => ({
+			value: e,
+			id: `${t}`
+		}));
+		c = e(t(c || [], "containerIndex"), (e) => e.slice(-(o || 1))).map((e, t) => ({
+			...e,
+			id: `${t}`
+		})).filter((e) => e.containerIndex < i.length);
+		let u = l.filter((e) => !c.find((t) => t.value === e.value));
+		this.state = {
+			answers: c || [],
+			draggingElement: {
+				id: "",
+				value: ""
+			},
+			possibleResponses: a ? l : u,
+			responseContainers: (i || []).map((e, t) => ({
+				index: t,
+				...e,
+				id: `${t}`
+			})),
+			maxResponsePerZone: o || 1,
+			showCorrect: !1,
+			isValidDrop: !1
+		};
+	}
+	onDragStart = (e) => {
+		let { active: t } = e;
+		t?.data?.current && this.setState({
+			draggingElement: t.data.current,
+			isValidDrop: !1
+		});
+	};
+	onDragEnd = (e) => {
+		let { active: t, over: n } = e, { model: r } = this.props, { duplicateResponses: i } = r || {}, a = t?.data?.current, o = n?.data?.current, s = n && t && a && o && o.containerIndex !== void 0 && i;
+		if (this.setState({
+			draggingElement: {
+				id: "",
+				value: ""
+			},
+			isValidDrop: s
+		}), !(!n || !t) && a) {
+			if (n.id === "ica-board") {
+				this.handleOnAnswerRemove(a);
+				return;
+			}
+			o && this.handleOnAnswerSelect(a, o.containerIndex);
+		}
+	};
+	renderDragOverlay = () => {
+		let { draggingElement: e } = this.state, { model: t } = this.props;
+		if (!e.id) return null;
+		let r = /<img[^>]+src="([^">]+)"/.test(e.value);
+		return /* @__PURE__ */ x(n, {
+			canDrag: !1,
+			data: e,
+			onDragBegin: () => {},
+			isOverlay: !0,
+			containerStyle: {
+				...t.answerChoiceTransparency ? { opacity: "0.8" } : {},
+				...r ? {} : {
+					padding: "0 10px",
+					margin: "4px 6px !important"
+				}
+			}
+		}, e.id);
+	};
+	filterPossibleAnswers = (e, t) => e.filter((e) => e.value !== t.value);
+	handleOnAnswerSelect = (e, t) => {
+		let { model: { duplicateResponses: n }, updateAnswer: r } = this.props, { answers: i, maxResponsePerZone: a } = this.state, { possibleResponses: o } = this.state, s, c = [], l = [];
+		if (i.forEach((e) => {
+			e.containerIndex === t ? c.push(e) : l.push(e);
+		}), a === c.length) {
+			let r = c[0];
+			if (a === 1) c.shift();
+			else {
+				this.setState({ maxResponsePerZoneWarning: !0 });
+				return;
+			}
+			n || (o = Array.isArray(o) ? o : [], o.push({
+				...r,
+				containerIndex: void 0,
+				id: r.id || I()
+			})), s = [
+				...c,
+				...l.filter((t) => n ? !0 : t.value !== e.value),
+				{
+					...e,
+					containerIndex: t,
+					...n ? { id: I() } : {}
+				}
+			];
+		} else s = [...i.filter((t) => n ? t.id !== e.id : t.value !== e.value), {
+			...e,
+			containerIndex: t,
+			...n ? { id: I() } : {}
+		}];
+		this.setState({
+			maxResponsePerZoneWarning: !1,
+			answers: s,
+			possibleResponses: n ? o : this.filterPossibleAnswers(o, e)
+		}), r(s);
+	};
+	handleOnAnswerRemove = (e) => {
+		let { model: { duplicateResponses: t }, updateAnswer: n } = this.props, { answers: r, possibleResponses: i } = this.state, a = r.filter((t) => t.id !== e.id), o = e.containerIndex === void 0;
+		this.setState({
+			maxResponsePerZoneWarning: !1,
+			answers: a,
+			possibleResponses: t || o ? i : [...i, {
+				...e,
+				containerIndex: void 0
+			}]
+		}), n(a);
+	};
+	toggleCorrect = (e) => this.setState({ showCorrect: e });
+	render() {
+		let { model: { disabled: e, duplicateResponses: t, extraCSSRules: n, image: l, responseAreaFill: u, stimulus: d, responseCorrect: f, validation: p, teacherInstructions: g, prompt: y, autoplayAudioEnabled: b, showDashedBorder: C, mode: w, rationale: E, language: D, uiStyle: O = {}, answerChoiceTransparency: k, responseContainerPadding: j, imageDropTargetPadding: M, fontSizeFactor: N, customAudioButton: P } } = this.props, { answers: I, draggingElement: B, possibleResponses: V, responseContainers: H, maxResponsePerZone: W, maxResponsePerZoneWarning: G, showCorrect: K, isValidDrop: q } = this.state, J = w === "evaluate" && !f, { possibilityListPosition: Y = "bottom" } = O || {}, X = Y === "left" || Y === "right", { validResponse: Z } = p || {}, Q = [], ee = E && (h(E) || m(E)), te = g && (h(g) || m(g));
+		Z && (Z.value || []).forEach((e, t) => {
+			(e.images || []).forEach((e) => {
+				Q.push({
+					value: e,
+					containerIndex: t,
+					isCorrect: !0
+				});
+			});
+		});
+		let ne = F.t("imageClozeAssociation.reachedLimit_other", {
+			lng: D,
+			count: W
+		}), $ = f === void 0 ? I : o(I, p, t);
+		f === !1 && W === 1 && ($ = [...$, ...s($, p)]);
+		let re = {
+			draggingElement: B,
+			duplicateResponses: t,
+			image: l,
+			onAnswerSelect: this.handleOnAnswerSelect,
+			onDragAnswerBegin: this.onDragStart,
+			onDragAnswerEnd: this.onDragEnd,
+			responseContainers: H,
+			showDashedBorder: C,
+			responseAreaFill: u,
+			responseContainerPadding: j,
+			imageDropTargetPadding: M,
+			maxResponsePerZone: W
+		};
+		return /* @__PURE__ */ S(v, {
+			onDragStart: this.onDragStart,
+			onDragEnd: this.onDragEnd,
+			children: [/* @__PURE__ */ S(L, {
+				extraCSSRules: n,
+				id: "main-container",
+				fontSizeFactor: N,
+				children: [
+					te && /* @__PURE__ */ x(R, {
+						labels: {
+							hidden: "Show Teacher Instructions",
+							visible: "Hide Teacher Instructions"
+						},
+						children: /* @__PURE__ */ x(A, { prompt: g })
+					}),
+					/* @__PURE__ */ x(A, {
+						className: "prompt",
+						prompt: y,
+						autoplayAudioEnabled: b,
+						customAudioButton: P
+					}),
+					/* @__PURE__ */ x(A, { prompt: d }),
+					/* @__PURE__ */ x(T, {
+						show: J,
+						toggled: K,
+						onToggle: this.toggleCorrect,
+						language: D
+					}),
+					/* @__PURE__ */ S(i, {
+						responseCorrect: K && J ? !0 : f,
+						uiStyle: O,
+						children: [/* @__PURE__ */ x(r, {
+							...re,
+							canDrag: K && J ? !1 : !e,
+							answers: K && J ? Q : $,
+							answerChoiceTransparency: K && J ? void 0 : k
+						}), K && J ? null : /* @__PURE__ */ S(c.Fragment, { children: [G && /* @__PURE__ */ x(U, { message: ne }), /* @__PURE__ */ x(a, {
+							canDrag: !e,
+							data: V,
+							onAnswerRemove: this.handleOnAnswerRemove,
+							onDragBegin: this.onDragStart,
+							answerChoiceTransparency: k,
+							customStyle: { minWidth: X ? "130px" : l?.width || "fit-content" },
+							isVertical: X,
+							minHeight: X ? l?.height : void 0
+						})] })]
+					}),
+					ee && /* @__PURE__ */ x(z, {
+						labels: {
+							hidden: "Show Rationale",
+							visible: "Hide Rationale"
+						},
+						children: /* @__PURE__ */ x(A, { prompt: E })
+					})
+				]
+			}), /* @__PURE__ */ x(_, {
+				dropAnimation: q ? null : void 0,
+				children: this.renderDragOverlay()
+			})]
+		});
+	}
+}, V = C("div")(({ theme: e }) => ({
+	margin: `0 ${e.spacing(2)}`,
+	backgroundColor: "#dddddd",
+	padding: e.spacing(1),
+	display: "flex",
+	alignItems: "center",
+	"& svg": { height: "30px" },
+	"& h1": {
+		padding: "0px",
+		margin: "0px"
+	}
+})), H = C("span")(({ theme: e }) => ({
+	paddingLeft: e.spacing(.5),
+	userSelect: "none"
+})), U = ({ message: e }) => {
+	let t = c.useRef(null);
+	return /* @__PURE__ */ x(b, { children: /* @__PURE__ */ x(y, {
+		classNames: "fb",
+		timeout: 300,
+		nodeRef: t,
+		children: /* @__PURE__ */ S(V, {
+			ref: t,
+			children: [/* @__PURE__ */ x(w, {
+				color: "secondary",
+				fontSize: "small"
+			}), /* @__PURE__ */ x(H, { dangerouslySetInnerHTML: { __html: e } })]
+		}, "panel")
+	}, "fb") });
+};
+U.propTypes = { message: g.string }, B.propTypes = {
+	model: g.object.isRequired,
+	session: g.object,
+	updateAnswer: g.func.isRequired
+};
+//#endregion
+export { B as default };

package/dist/delivery/static-html-span.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/static-html-span.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';
+declare class StaticHTMLSpan extends React.PureComponent {
+    shouldComponentUpdate(): boolean;
+    render(): React.JSX.Element;
+}
+export default StaticHTMLSpan;
+//# sourceMappingURL=static-html-span.d.ts.map

package/dist/delivery/static-html-span.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-html-span.d.ts","sourceRoot":"","sources":["../../src/delivery/static-html-span.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,cAAM,cAAe,SAAQ,KAAK,CAAC,aAAa;IAC9C,qBAAqB;IAIrB,MAAM;CAUP;AAWD,eAAe,cAAc,CAAC"}

package/dist/delivery/static-html-span.js

@@ -0,0 +1,22 @@
+import e from "react";
+import t from "prop-types";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/delivery/static-html-span.tsx
+var r = class extends e.PureComponent {
+	shouldComponentUpdate() {
+		return !1;
+	}
+	render() {
+		let { html: e, className: t } = this.props;
+		return /* @__PURE__ */ n("span", {
+			className: t,
+			dangerouslySetInnerHTML: { __html: e }
+		});
+	}
+};
+r.propTypes = {
+	html: t.string.isRequired,
+	className: t.string
+}, r.defaultProps = { className: "" };
+//#endregion
+export { r as default };

package/dist/delivery/utils-correctness.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/utils-correctness.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 getUnansweredAnswers: (answers: any, validation: any) => any;
+export declare const getAnswersCorrectness: (answers: any, validation: any) => any;
+//# sourceMappingURL=utils-correctness.d.ts.map

package/dist/delivery/utils-correctness.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-correctness.d.ts","sourceRoot":"","sources":["../../src/delivery/utils-correctness.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAgDH,eAAO,MAAM,oBAAoB,GAAI,YAAO,EAAE,eAAU,QAuBvD,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,YAAO,EAAE,eAAU,QAuBxD,CAAC"}

package/dist/delivery/utils-correctness.js

@@ -0,0 +1,43 @@
+import { camelizeKeys as e } from "humps";
+//#region src/delivery/utils-correctness.ts
+var t = (e, t) => (e || []).map((e) => ({
+	...e,
+	isCorrect: (t[e.containerIndex] && t[e.containerIndex].images || []).includes(e.value)
+})), n = (e, t) => (t[e.containerIndex].images || []).filter((t) => t === e.value), r = (e, t) => {
+	let r = e;
+	return e.forEach((i) => {
+		let a = e.filter((e) => e.value === i.value && e.containerIndex === i.containerIndex);
+		a.length > 1 && (a.shift(), a.forEach((e, i) => {
+			r = (r || []).map((r) => {
+				if (r.id === e.id) {
+					let e = n(r, t);
+					return {
+						...r,
+						isCorrect: e.length > i + 1
+					};
+				}
+				return r;
+			});
+		}));
+	}), r;
+}, i = (t, n) => {
+	let { validResponse: { value: r } = {} } = e(n);
+	return (r || []).reduce((e, n, r) => {
+		let i = !!t.find((e) => e.containerIndex === r);
+		return n.images = n.images || [], i ? e : [...e, {
+			id: `unanswered-${r}`,
+			value: n.images[0] || "",
+			containerIndex: r,
+			isCorrect: n.images.length ? !1 : void 0,
+			hidden: !0
+		}];
+	}, []);
+}, a = (n, i) => {
+	let { validResponse: { value: a }, altResponses: o } = e(i), s = r(t(n, a), a);
+	return s.filter((e) => e.isCorrect).length < s.length && o && o.length ? (o || []).map((e) => {
+		let i = e.value;
+		return r(t(n, i), i);
+	}).sort((e, t) => t.filter((e) => e.isCorrect).length - e.filter((e) => e.isCorrect).length)[0] : s;
+};
+//#endregion
+export { a as getAnswersCorrectness, i as getUnansweredAnswers };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './delivery/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.iife.d.ts

@@ -0,0 +1,9 @@
+/**
+ * IIFE entry point for image-cloze-association 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;
+//# sourceMappingURL=index.iife.d.ts.map

package/dist/index.iife.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.iife.d.ts","sourceRoot":"","sources":["../src/index.iife.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,OAAO,MAAM,YAAY,CAAC;AAQjC,eAAe,OAAO,CAAC"}