@pie-element/placement-ordering 14.1.1 → 14.1.2-next.0

package/dist/browser/delivery/index.js

@@ -0,0 +1,1032 @@
+import { E as e, L as t, O as n, V as r, b as i, i as a, n as o, ot as s, r as c, t as l, z as u } from "../browser-CvJkn_Ec.js";
+import { E as d, Gt as f, It as p, Kt as m, Lt as h, Nt as g, Pt as _, bt as v, c as y, ct as b, d as x, dt as ee, ft as S, ht as C, l as te, lt as w, n as T, pt as E, qt as ne, r as D, t as re, u as ie, ut as O, y as ae } from "../drag-provider-DaPxkh4j.js";
+import { n as oe, r as se, t as ce } from "../dist-BTHiIs74.js";
+import k, { createElement as le, useRef as ue } from "react";
+import { createRoot as de } from "react-dom/client";
+import fe from "react-dom";
+import { jsx as A, jsxs as j } from "react/jsx-runtime";
+//#region ../../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/assign.js
+var pe = Object.prototype.hasOwnProperty, me = f(function(e, r) {
+	if (t(r) || u(r)) {
+		m(r, n(r), e);
+		return;
+	}
+	for (var i in r) pe.call(r, i) && ne(e, i, r[i]);
+}), M = r(function(e, t) {
+	return a(e) ? se(e, i(t, 1, a, !0)) : [];
+}), he = 0;
+function ge(t) {
+	var n = ++he;
+	return e(t) + n;
+}
+//#endregion
+//#region ../../shared/player-events/dist/index.js
+var N = /* @__PURE__ */ s(l(), 1);
+(class e extends CustomEvent {
+	static {
+		this.TYPE = "model-set";
+	}
+	constructor(t, n, r) {
+		super(e.TYPE, {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				complete: n,
+				component: t,
+				hasModel: r
+			}
+		}), this.component = t, this.complete = n;
+	}
+});
+var _e = class e extends CustomEvent {
+	static {
+		this.TYPE = "session-changed";
+	}
+	constructor(t, n) {
+		super(e.TYPE, {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				complete: n,
+				component: t
+			}
+		}), this.component = t, this.complete = n;
+	}
+}, P = /* @__PURE__ */ s(g(), 1), F = ({ bgFill: e, fgFill: t }) => /* @__PURE__ */ j("svg", {
+	preserveAspectRatio: "xMinYMin meet",
+	version: "1.1",
+	viewBox: "-283 359 34 35",
+	style: { enableBackground: "new -283 359 34 35" },
+	children: [
+		/* @__PURE__ */ A("circle", {
+			cx: "-266",
+			cy: "375.9",
+			r: "14",
+			fill: e
+		}),
+		/* @__PURE__ */ A("path", {
+			d: "M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z\n         M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z",
+			fill: e
+		}),
+		/* @__PURE__ */ A("polygon", {
+			points: "-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6",
+			fill: t
+		})
+	]
+});
+F.propTypes = {
+	bgFill: P.default.string.isRequired,
+	fgFill: P.default.string.isRequired
+};
+var I = ({ bgFill: e, fgFill: t, borderFill: n }) => /* @__PURE__ */ j("svg", {
+	preserveAspectRatio: "xMinYMin meet",
+	version: "1.1",
+	viewBox: "-129.5 127 34 35",
+	style: { enableBackground: "new -129.5 127 34 35" },
+	children: [
+		/* @__PURE__ */ A("path", {
+			style: {
+				fill: "#D0CAC5",
+				stroke: "#E6E3E0",
+				strokeWidth: .75,
+				strokeMiterlimit: 10
+			},
+			d: "M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5\n         C-97.4,153.5-104.3,160.4-112.9,160.4z"
+		}),
+		/* @__PURE__ */ A("path", {
+			style: {
+				fill: "#B3ABA4",
+				stroke: "#CDC7C2",
+				strokeWidth: .5,
+				strokeMiterlimit: 10
+			},
+			d: "M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z"
+		}),
+		/* @__PURE__ */ A("circle", {
+			cx: "-114.2",
+			cy: "143.5",
+			r: "14",
+			fill: e
+		}),
+		/* @__PURE__ */ A("path", {
+			d: "M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z\n         M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z",
+			fill: n
+		}),
+		/* @__PURE__ */ A("polygon", {
+			points: "-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2",
+			fill: t
+		})
+	]
+});
+I.propTypes = {
+	bgFill: P.default.string.isRequired,
+	fgFill: P.default.string.isRequired,
+	borderFill: P.default.string.isRequired
+};
+var ve = C("div")(({ size: e }) => ({
+	width: e || "25px",
+	height: e || "25px"
+})), L = ({ open: e, size: t }) => /* @__PURE__ */ A(ve, {
+	size: t,
+	children: e ? /* @__PURE__ */ A(F, {
+		bgFill: "#bce2ff",
+		fgFill: "#1a9cff"
+	}) : /* @__PURE__ */ A(I, {
+		bgFill: "white",
+		fgFill: "#1a9cff",
+		borderFill: "#bce2ff"
+	})
+});
+L.propTypes = {
+	open: P.default.bool,
+	size: P.default.string
+}, L.defaultProps = { open: !1 };
+//#endregion
+//#region ../../lib-react/correct-answer-toggle/dist/expander.js
+var R = "height ease-in 300ms, opacity ease-in 300ms", ye = C("div")(() => ({
+	position: "relative",
+	height: 0,
+	overflow: "hidden",
+	display: "flex",
+	visibility: "hidden",
+	width: 0,
+	"&.enter": {
+		transition: R,
+		opacity: 1,
+		height: "auto",
+		width: "auto",
+		visibility: "visible",
+		minHeight: "25px"
+	},
+	"&.enter-done": {
+		height: "auto",
+		visibility: "visible",
+		width: "auto",
+		minHeight: "25px"
+	},
+	"&.exit": {
+		transition: R,
+		opacity: 0,
+		height: 0,
+		visibility: "visible",
+		width: 0
+	},
+	"&.exit-done": {
+		opacity: 0,
+		visibility: "hidden",
+		height: 0,
+		width: 0
+	}
+})), z = (e) => {
+	let { show: t, children: n, className: r } = e, i = ue(null);
+	return /* @__PURE__ */ A(w, {
+		nodeRef: i,
+		in: t,
+		appear: !0,
+		mountOnEnter: !1,
+		timeout: 300,
+		classNames: {
+			enter: "enter",
+			enterDone: "enter-done",
+			exit: "exit",
+			exitDone: "exit-done"
+		},
+		children: /* @__PURE__ */ A(ye, {
+			ref: i,
+			className: r,
+			children: n
+		})
+	});
+};
+z.propTypes = {
+	show: P.default.bool.isRequired,
+	className: P.default.string,
+	children: P.default.oneOfType([P.default.arrayOf(P.default.node), P.default.node]).isRequired
+};
+//#endregion
+//#region ../../lib-react/correct-answer-toggle/dist/index.js
+function B(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function be(e, t) {
+	return !e || B(e) ? e : B(e.default) ? e.default : t && B(e[t]) ? e[t] : t && B(e[t]?.default) ? e[t].default : e;
+}
+var xe = be(ie, "Readable") || be(Ce.Readable, "Readable"), Se = D, V = Se.default, Ce = V && typeof V == "object" ? V : Se, { translator: H } = ce, we = {
+	WebkitTouchCallout: "none",
+	WebkitUserSelect: "none",
+	KhtmlUserSelect: "none",
+	MozUserSelect: "none",
+	msUserSelect: "none",
+	userSelect: "none"
+}, Te = C("div")(() => ({
+	width: "100%",
+	cursor: "pointer"
+})), Ee = C("div")(() => ({
+	margin: "0 auto",
+	textAlign: "center",
+	display: "flex"
+})), De = C("div")(() => ({
+	width: "fit-content",
+	minWidth: "140px",
+	alignSelf: "center",
+	verticalAlign: "middle",
+	color: `var(--correct-answer-toggle-label-color, ${O.text()})`,
+	fontWeight: "normal",
+	...we
+})), Oe = C("div")(() => ({
+	position: "absolute",
+	width: "25px",
+	"&.enter": { opacity: "0" },
+	"&.enter-active": {
+		opacity: "1",
+		transition: "opacity 0.3s ease-in"
+	},
+	"&.exit": { opacity: "1" },
+	"&.exit-active": {
+		opacity: "0",
+		transition: "opacity 0.3s ease-in"
+	}
+})), ke = C("div")(() => ({
+	width: "25px",
+	marginRight: "5px",
+	display: "flex",
+	alignItems: "center"
+})), Ae = class e extends k.Component {
+	static propTypes = {
+		onToggle: P.default.func,
+		toggled: P.default.bool,
+		show: P.default.bool,
+		hideMessage: P.default.string,
+		showMessage: P.default.string,
+		className: P.default.string,
+		language: P.default.string
+	};
+	static defaultProps = {
+		showMessage: "Show correct answer",
+		hideMessage: "Hide correct answer",
+		show: !1,
+		toggled: !1
+	};
+	constructor(t) {
+		super(t), this.state = { show: t.show }, this.openIconRef = k.createRef(), this.closedIconRef = k.createRef(), e.defaultProps = {
+			...e.defaultProps,
+			showMessage: H.t("common:showCorrectAnswer", { lng: t.language }),
+			hideMessage: H.t("common:hideCorrectAnswer", { lng: t.language })
+		};
+	}
+	onClick() {
+		this.props.onToggle(!this.props.toggled);
+	}
+	onTouch(e) {
+		e.preventDefault(), this.props.onToggle(!this.props.toggled);
+	}
+	UNSAFE_componentWillReceiveProps(t) {
+		this.setState({ show: t.show }), t.language !== this.props?.language && (e.defaultProps = {
+			...e.defaultProps,
+			showMessage: H.t("common:showCorrectAnswer", { lng: t.language }),
+			hideMessage: H.t("common:hideCorrectAnswer", { lng: t.language })
+		});
+	}
+	render() {
+		let { className: e, toggled: t, hideMessage: n, showMessage: r } = this.props;
+		return /* @__PURE__ */ A(Te, {
+			className: e,
+			children: /* @__PURE__ */ A(z, {
+				show: this.state.show,
+				children: /* @__PURE__ */ j(Ee, {
+					onClick: this.onClick.bind(this),
+					onTouchEnd: this.onTouch.bind(this),
+					children: [/* @__PURE__ */ j(ke, { children: [/* @__PURE__ */ A(w, {
+						nodeRef: this.openIconRef,
+						timeout: 400,
+						in: t,
+						exit: !t,
+						classNames: {
+							enter: "enter",
+							enterActive: "enter-active",
+							exit: "exit",
+							exitActive: "exit-active"
+						},
+						children: /* @__PURE__ */ A(Oe, {
+							ref: this.openIconRef,
+							children: /* @__PURE__ */ A(L, { open: t }, "correct-open")
+						})
+					}), /* @__PURE__ */ A(w, {
+						nodeRef: this.closedIconRef,
+						timeout: 5e3,
+						in: !t,
+						exit: t,
+						classNames: {
+							enter: "enter",
+							enterActive: "enter-active",
+							exit: "exit",
+							exitActive: "exit-active"
+						},
+						children: /* @__PURE__ */ A(Oe, {
+							ref: this.closedIconRef,
+							children: /* @__PURE__ */ A(L, { open: t }, "correct-closed")
+						})
+					})] }), /* @__PURE__ */ A(xe, {
+						false: !0,
+						children: /* @__PURE__ */ A(De, {
+							"aria-hidden": !this.state.show,
+							children: t ? n : r
+						})
+					})]
+				})
+			})
+		});
+	}
+}, je = /* @__PURE__ */ s(T(), 1), Me = C("div")(({ theme: e }) => ({
+	"&.placeholder": {
+		WebkitTouchCallout: "none",
+		WebkitUserSelect: "none",
+		KhtmlUserSelect: "none",
+		MozUserSelect: "none",
+		MsUserSelect: "none",
+		userSelect: "none",
+		width: "100%",
+		height: "100%",
+		background: O.white(),
+		transition: "background-color 200ms linear, border-color 200ms linear",
+		boxSizing: "border-box",
+		display: "grid",
+		gridRowGap: e.spacing(1),
+		gridColumnGap: e.spacing(1),
+		padding: e.spacing(1),
+		border: `2px dashed ${O.black()}`
+	},
+	"&.disabled": {
+		boxShadow: "none",
+		background: e.palette.background.paper
+	},
+	"&.over": {
+		border: `1px solid ${v[500]}`,
+		backgroundColor: `${v[300]}`
+	},
+	"&.board": {
+		padding: e.spacing(1),
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		minHeight: "100px",
+		justifyContent: "center",
+		overflow: "hidden",
+		touchAction: "none",
+		backgroundColor: O.backgroundDark()
+	},
+	"&.categorizeBoard": {
+		padding: e.spacing(.5),
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		minHeight: "100px",
+		justifyContent: "center",
+		overflow: "hidden",
+		touchAction: "none",
+		backgroundColor: O.backgroundDark()
+	},
+	"&.verticalPool": {
+		display: "flex",
+		flexFlow: "column wrap"
+	}
+})), Ne = (e) => {
+	let { children: t, className: n, isOver: r, type: i, grid: a, disabled: o, choiceBoard: s, isCategorize: c, isVerticalPool: l, minHeight: u, extraStyles: d } = e, f = (0, je.default)("placeholder", o && "disabled", r && "over", i, n), p = {};
+	if (a && a.columns && (p.gridTemplateColumns = `repeat(${a.columns}, 1fr)`), a && a.rows) {
+		let e = a.rowsRepeatValue || "1fr";
+		p.gridTemplateRows = `repeat(${a.rows}, ${e})`;
+	}
+	i === "choice" && (p.border = `1px solid ${O.borderLight()}`, p.background = O.backgroundDark());
+	let m = c ? "categorizeBoard" : "board";
+	return /* @__PURE__ */ A(Me, {
+		style: {
+			...p,
+			minHeight: u,
+			...d
+		},
+		className: (0, je.default)(s ? m : f, l && "verticalPool"),
+		children: t
+	});
+};
+Ne.propTypes = {
+	choiceBoard: P.default.bool,
+	grid: P.default.shape({
+		columns: P.default.number,
+		rows: P.default.number,
+		rowsRepeatValue: P.default.string
+	}),
+	children: P.default.oneOfType([P.default.arrayOf(P.default.node), P.default.node]).isRequired,
+	className: P.default.string,
+	isOver: P.default.bool,
+	index: P.default.number,
+	type: P.default.string,
+	disabled: P.default.bool,
+	isCategorize: P.default.bool,
+	isVerticalPool: P.default.bool,
+	minHeight: P.default.number
+};
+//#endregion
+//#region src/delivery/tile.tsx
+var Pe = (0, N.default)("pie-elements:placement-ordering:tile"), Fe = C("div")(({ theme: e }) => ({
+	width: "100%",
+	fontSize: e.typography.fontSize + 4,
+	textAlign: "center",
+	color: `rgba(${e.palette.common.black}, 0.6)`
+})), U = ({ type: e, index: t, isOver: n, disabled: r }) => /* @__PURE__ */ A(Ne, {
+	type: e,
+	isOver: n,
+	disabled: r,
+	children: e === "target" && t !== void 0 && /* @__PURE__ */ A(Fe, { children: t })
+});
+U.propTypes = {
+	type: P.default.string,
+	index: P.default.number,
+	isOver: P.default.bool,
+	disabled: P.default.bool
+};
+var Ie = C("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i, label: a, type: o }) => ({
+	cursor: r ? "not-allowed" : "grab",
+	width: "100%",
+	height: "100%",
+	padding: "10px",
+	boxSizing: "border-box",
+	overflow: "hidden",
+	border: o === "choice" || o === "target" ? `1px solid ${e.palette.grey[400]}` : "1px solid transparent",
+	backgroundColor: o === "choice" || o === "target" ? O.background() : "transparent",
+	transition: o === "choice" || o === "target" ? "background-color 150ms ease, border-color 150ms ease, opacity 150ms ease" : "none",
+	pointerEvents: "none",
+	userSelect: "none",
+	...(o === "choice" || o === "target") && { "&:hover": {
+		backgroundColor: r ? O.background() : O.secondary(),
+		borderColor: r ? e.palette.grey[400] : e.palette.primary.main,
+		transform: r ? "none" : "scale(1.02)"
+	} },
+	...(o === "choice" || o === "target") && n && !r && {
+		opacity: .4,
+		backgroundColor: O.primaryLight(),
+		borderColor: e.palette.primary.main,
+		borderStyle: "dashed",
+		transform: "scale(1.05)"
+	},
+	...(o === "choice" || o === "target") && t && !r && {
+		opacity: .6,
+		backgroundColor: O.secondaryLight(),
+		transform: "scale(1.05) rotate(2deg)",
+		boxShadow: "0 8px 16px rgba(0,0,0,0.2)",
+		cursor: "grabbing"
+	},
+	...(o === "choice" || o === "target") && r && {
+		cursor: "not-allowed",
+		"&:hover": {
+			backgroundColor: O.background(),
+			transform: "none"
+		}
+	},
+	...(o === "choice" || o === "target") && i === "incorrect" && { border: `1px solid ${O.incorrect()}` },
+	...(o === "choice" || o === "target") && i === "correct" && { border: `1px solid ${O.correct()}` },
+	...!a && {
+		border: "none",
+		"&:hover": { backgroundColor: "unset" }
+	}
+})), Le = (e) => {
+	let { type: t, isDragging: n, empty: r, isOver: i, label: a, disabled: o, outcome: s, guideIndex: c } = e;
+	return r ? /* @__PURE__ */ A(U, {
+		type: t,
+		index: c,
+		isOver: i,
+		disabled: o
+	}) : /* @__PURE__ */ A(Ie, {
+		type: t,
+		isDragging: n,
+		isOver: i,
+		disabled: o,
+		outcome: s,
+		label: a,
+		dangerouslySetInnerHTML: { __html: a }
+	});
+}, W = (e) => {
+	let { label: t, type: n, id: r, empty: i, disabled: a, outcome: o, index: s, guideIndex: c, instanceId: l, draggable: u, tileIndex: d } = e, f = `tile-${n}-${r ?? "empty"}-${d}-${l}`, p = `drop-${n}-${r ?? "empty"}-${d}-${l}`, { attributes: m, listeners: h, setNodeRef: g, transform: _, isDragging: v } = S({
+		id: f,
+		data: {
+			id: r,
+			type: n,
+			instanceId: l,
+			value: t,
+			index: s
+		},
+		disabled: !u || a
+	}), { setNodeRef: y, isOver: b } = E({
+		id: p,
+		data: {
+			id: r,
+			type: n,
+			instanceId: l,
+			value: t,
+			index: s
+		},
+		disabled: v
+	}), x = k.useRef(null);
+	return k.useEffect(() => {
+		let e = x.current, t = (e) => {
+			e.preventDefault();
+		};
+		return e && e.addEventListener("touchstart", t, { passive: !1 }), () => {
+			e && e.removeEventListener("touchstart", t);
+		};
+	}, []), Pe("[render], props: ", e), /* @__PURE__ */ A("div", {
+		ref: (e) => {
+			x.current = e, g(e), y(e);
+		},
+		style: {
+			transform: _ ? `translate3d(${_.x}px, ${_.y}px, 0)` : void 0,
+			boxSizing: "border-box",
+			overflow: "visible",
+			padding: 0,
+			margin: 0,
+			textAlign: "center",
+			pointerEvents: "auto",
+			cursor: a ? "not-allowed" : v ? "grabbing" : "grab",
+			zIndex: v ? 1e3 : "auto",
+			willChange: v ? "transform" : "auto"
+		},
+		...u && !a ? {
+			...h,
+			...m
+		} : {},
+		children: /* @__PURE__ */ A(Le, {
+			label: t,
+			id: r,
+			empty: i,
+			index: s,
+			guideIndex: c,
+			isOver: b,
+			isDragging: v,
+			disabled: a,
+			outcome: o,
+			type: n
+		})
+	});
+};
+W.propTypes = {
+	id: P.default.any,
+	label: P.default.string,
+	isOver: P.default.bool,
+	type: P.default.string,
+	empty: P.default.bool,
+	disabled: P.default.bool,
+	outcome: P.default.string,
+	index: P.default.number,
+	guideIndex: P.default.number,
+	instanceId: P.default.any,
+	draggable: P.default.bool,
+	tileIndex: P.default.number
+};
+//#endregion
+//#region src/delivery/tiler.tsx
+var G = {
+	choiceLabel: P.default.string,
+	targetLabel: P.default.string,
+	disabled: P.default.bool,
+	tiles: P.default.array.isRequired,
+	tileSize: P.default.string,
+	addGuide: P.default.bool
+}, Re = {
+	tileSize: "1fr",
+	disabled: !1,
+	addGuide: !1
+}, ze = (e) => {
+	let t = (t, n) => (t.instanceId = e.instanceId, t.disabled = e.disabled, t.guideIndex = e.addGuide ? t.index + 1 : void 0, t.tileIndex = n, e.includeTargets || t.type === "choice" ? /* @__PURE__ */ le(W, {
+		...t,
+		key: n
+	}) : /* @__PURE__ */ le(W, {
+		...t,
+		label: "",
+		key: n
+	}));
+	return t.propTypes = { ...G }, t;
+}, Be = C("div")(({ theme: e, includeTargets: t }) => ({
+	display: "grid",
+	paddingBottom: e.spacing(2),
+	...t && { gridGap: "10px" }
+})), Ve = C("div")({ textAlign: "center" }), He = C("div")({
+	textAlign: "center",
+	gridRow: "3/4"
+}), Ue = C("div")(({ includeTargets: e }) => ({
+	gridAutoFlow: "column",
+	display: "grid",
+	...e && { gridGap: "10px" }
+})), We = C("div")({
+	gridColumn: "1/2",
+	textAlign: "center"
+}), Ge = C("div")({
+	gridColumn: "2/3",
+	textAlign: "center"
+}), Ke = class extends k.Component {
+	static propTypes = { ...G };
+	static defaultProps = { ...Re };
+	render() {
+		let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: a } = this.props, o = e ? `auto ${a} auto ${a}` : `auto ${a} auto`, s = e ? i.length / 2 : i.length, c = {
+			gridTemplateColumns: e ? `repeat(${s}, ${a})` : `auto repeat(${Math.floor(s / 2) - 1}, ${a} 10px) ${a} auto`,
+			gridTemplateRows: o
+		}, l = { gridColumn: `1/${s + 1}` };
+		return /* @__PURE__ */ j(Be, {
+			includeTargets: e,
+			style: c,
+			children: [
+				/* @__PURE__ */ A(Ve, {
+					style: l,
+					dangerouslySetInnerHTML: { __html: t ? n : "" }
+				}),
+				e && /* @__PURE__ */ A(He, {
+					style: l,
+					dangerouslySetInnerHTML: { __html: r }
+				}),
+				i.map(ze(this.props))
+			]
+		});
+	}
+}, qe = class extends k.Component {
+	static propTypes = { ...G };
+	static defaultProps = { ...Re };
+	render() {
+		let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: a } = this.props, o = e ? 2 : 1, s = e ? i.length / 2 : i.length;
+		return /* @__PURE__ */ j(Ue, {
+			includeTargets: e,
+			style: {
+				gridTemplateColumns: `repeat(${o}, ${a})`,
+				gridTemplateRows: e ? `auto repeat(${s}, ${a})` : `auto auto repeat(${Math.floor(s / 2) - 1}, ${a} 10px) ${a} auto`
+			},
+			children: [
+				/* @__PURE__ */ A(We, { dangerouslySetInnerHTML: { __html: t ? n : "" } }),
+				e && /* @__PURE__ */ A(Ge, { dangerouslySetInnerHTML: { __html: r } }),
+				i.map(ze(this.props))
+			]
+		});
+	}
+}, K = (0, N.default)("pie-elements:placement-ordering:ordering"), Je = (e, t, n) => {
+	let r = e.find((e, n) => n === t), i = e.filter((e, n) => n !== t);
+	return [
+		...i.slice(0, n),
+		r,
+		...i.slice(n)
+	];
+}, Ye = (e, t, n) => {
+	if (K("[swap]", e, t, n), !e || e.length <= 1 || t === void 0 || n === void 0) throw Error(`swap requires a non-empty array, fromIndex, toIndex: ${e}, ${t} ${n}`);
+	let r = h(e), i = e[n];
+	return r[n] = r[t], r[t] = i, r;
+};
+function Xe(e, t) {
+	let n = h(e.response);
+	if (n[t.index] === t.id) n[t.index] = void 0;
+	else throw Error(`Tried to remove from index: ${t.index}, but the id doesn't match: array: ${n}, target: ${t.id}`);
+	return n;
+}
+function Ze(e, t, n) {
+	let { response: r, opts: i } = e, a = h(r);
+	if (i.includeTargets) return t.type === "choice" && n.type === "target" ? (a[n.index] = t.id, a) : t.type === "target" && n.type === "choice" ? (a[t.index] = void 0, a) : t.type === "target" && n.type === "target" ? Ye(r, t.index, n.index) : (K("do nothing to the response"), r);
+	{
+		let r = e.response.findIndex((e) => e !== void 0 && e === t.id), i = e.response.findIndex((e) => e !== void 0 && e === n.id);
+		return K("fromIndex: ", r, "toIndex:", i), Je(e.response, r, i);
+	}
+}
+function q(e, t, n, r) {
+	if (r.includeTargets) {
+		let i = [];
+		for (let r = 0; r < t.length; r++) {
+			let a = t[r], o = e.find((e) => a != null && e.id === a), s = n[r], c = Object.assign({
+				type: "target",
+				index: r,
+				empty: o === void 0
+			}, o, s, { draggable: o !== void 0 });
+			i.push(c);
+		}
+		return e.map((e) => t.indexOf(e.id) !== -1 && !r.allowSameChoiceInTargets ? {
+			type: "choice",
+			empty: !0,
+			droppable: !0,
+			draggable: !1
+		} : Object.assign({}, e, {
+			type: "choice",
+			droppable: !1,
+			draggable: !0
+		})).concat(i);
+	} else return t.reduce((t, r, i) => {
+		let a = Object.assign({
+			type: "empty",
+			draggable: !1,
+			droppable: !0
+		}, e.find((e) => e.id === r), n[i]), o = Object.assign({
+			type: "choice",
+			draggable: !0,
+			droppable: !0
+		}, e.find((e) => e.id === r), n[i]);
+		return i === 0 && t.push(a), t.push(o, a), t;
+	}, []);
+}
+function Qe(e, t, n, r) {
+	return r = me({ includeTargets: !0 }, r), n ||= [], t = !t || c(t) ? r.includeTargets ? Array(e.length) : oe(e, (e) => e.id) : t, {
+		choices: e,
+		response: t,
+		opts: r,
+		outcomes: n,
+		tiles: q(e, t, n, r)
+	};
+}
+function $e(e, t) {
+	switch (e.type) {
+		case "move": {
+			let { from: n, to: r } = e, i = Ze(t, n, r), a = q(t.choices, i, t.outcomes, t.opts);
+			return Object.assign({}, t, {
+				response: i,
+				tiles: a
+			});
+		}
+		case "remove": {
+			let { target: n } = e, r = Xe(t, n), i = q(t.choices, r, t.outcomes, t.opts);
+			return Object.assign({}, t, {
+				response: r,
+				tiles: i
+			});
+		}
+	}
+	return t;
+}
+//#endregion
+//#region src/delivery/utils.ts
+var et = (e, t) => {
+	if (!Array.isArray(e) || !Array.isArray(t) || e.length !== t.length) return !1;
+	let n = (e) => e.map((e) => JSON.stringify(e)).sort(), r = n(e), i = n(t), a = r.every((e, t) => e === i[t]), o = e.every((e, n) => JSON.stringify(e) === JSON.stringify(t[n]));
+	return a && !o;
+};
+//#endregion
+//#region src/delivery/placement-ordering.tsx
+function J(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function Y(e, t) {
+	return !e || J(e) ? e : J(e.default) ? e.default : t && J(e[t]) ? e[t] : t && J(e[t]?.default) ? e[t].default : e;
+}
+var tt = Y(ae, "UiLayout") || Y(Q.UiLayout, "UiLayout"), X = Y(x, "PreviewPrompt") || Y(Q.PreviewPrompt, "PreviewPrompt"), nt = Y(b, "Feedback") || Y(Q.Feedback, "Feedback"), rt = Y(d, "Collapsible") || Y(Q.Collapsible, "Collapsible"), it = D, Z = it.default, Q = Z && typeof Z == "object" ? Z : it, { translator: at } = ce, ot = (0, N.default)("pie-elements:placement-ordering"), st = C("div")({
+	color: O.text(),
+	backgroundColor: O.background(),
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	boxSizing: "border-box"
+}), ct = C("div")(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), lt = C("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), ut = C(Ae)(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), dt = C(rt)(({ theme: e }) => ({
+	marginBottom: e.spacing(2),
+	alignSelf: "flex-start"
+})), ft = (e) => {
+	let { tiler: t, ordering: n, onDropChoice: r, onRemoveChoice: i, ...a } = e;
+	return /* @__PURE__ */ A(t, {
+		...a,
+		tiles: n.tiles,
+		onDropChoice: (e, t) => r(e, t, n),
+		onRemoveChoice: (e) => i(e, n)
+	});
+};
+ft.propTypes = {
+	tiler: P.default.func,
+	ordering: P.default.any,
+	onDropChoice: P.default.func,
+	onRemoveChoice: P.default.func
+};
+var pt = class extends k.Component {
+	static propTypes = {
+		onSessionChange: P.default.func.isRequired,
+		model: P.default.object.isRequired,
+		session: P.default.oneOfType([P.default.array.isRequired, P.default.object.isRequired])
+	};
+	constructor(e) {
+		super(e), this.instanceId = ge();
+		let { value: t, needsReset: n } = this.validateSession(e);
+		this.state = { showingCorrect: !1 };
+		let { model: r } = e || {}, { env: i } = r || {}, { mode: a } = i || {};
+		n && a === "gather" && this.props.onSessionChange({
+			...e.session,
+			value: t
+		});
+	}
+	toggleCorrect = (e) => this.setState({ showingCorrect: e });
+	componentDidUpdate() {
+		_(fe.findDOMNode(this));
+	}
+	validateSession = ({ model: e, session: t }, n = !1) => {
+		let { config: r, choices: i } = e || {}, { includeTargets: a } = r || {}, s = i.map((e) => e.id), { value: c } = t || {}, l;
+		if (a) c && c.length !== s.length && (l = !0, c = c.length < s.length ? c.concat(Array(s.length - c.length)) : c.filter((e) => s.includes(e)));
+		else {
+			if (!c || !c.length || n) c = s;
+			else {
+				let e = M(s, c), t = M(c, s);
+				(e.length || t.length) && (c = s);
+			}
+			l = !o(t.value, c);
+		}
+		return l && console.warn("This session is not valid anymore. It will be reset."), {
+			value: c,
+			needsReset: l
+		};
+	};
+	UNSAFE_componentWillReceiveProps(e) {
+		let { model: t = {} } = e || {}, { model: n = {} } = this.props || {}, { correctResponse: r, config: i, choices: a = [], env: o } = t, { includeTargets: s } = i || {}, c = {}, l = n.language && n.language !== t.language, u = n.note && n.note === at.t("common:commonCorrectAnswerWithAlternates", { lng: n.language });
+		l && u && (n.note = at.t("common:commonCorrectAnswerWithAlternates", { lng: t.language })), r || (c.showingCorrect = !1);
+		let d = et(a, n.choices), { value: f, needsReset: p } = this.validateSession(e, d), m = {
+			...e.session,
+			value: f
+		}, h = n.config?.includeTargets !== s;
+		s && h && (p = !0, delete m.value), this.setState(c, () => {
+			let { mode: e } = o || {};
+			p && e === "gather" && this.props.onSessionChange(m);
+		});
+	}
+	onDropChoice = (e, t, n) => {
+		let { onSessionChange: r, session: i } = this.props, a = n.tiles.find((e) => e.id === t.id && e.type === t.type && e.index === t.index), o = e;
+		ot("[onDropChoice] ", a, o);
+		let s = $e({
+			type: "move",
+			from: a,
+			to: o
+		}, n);
+		r(Object.assign({}, i, { value: s.response }));
+	};
+	onRemoveChoice = (e, t) => {
+		let { onSessionChange: n, session: r } = this.props;
+		ot("[onRemoveChoice]", e);
+		let i = $e({
+			type: "remove",
+			target: e
+		}, t);
+		n(Object.assign({}, r, { value: i.response }));
+	};
+	createOrdering = () => {
+		let { model: e, session: t } = this.props, { showingCorrect: n } = this.state, { includeTargets: r } = e.config || {
+			orientation: "vertical",
+			includeTargets: !0
+		};
+		return n ? Qe(e.choices, e.correctResponse, e.correctResponse.map((e) => ({
+			id: e,
+			outcome: "correct"
+		})), {
+			includeTargets: r,
+			allowSameChoiceInTargets: e.config.allowSameChoiceInTargets
+		}) : Qe(e.choices, t.value, e.outcomes, {
+			includeTargets: r,
+			allowSameChoiceInTargets: e.config.allowSameChoiceInTargets
+		});
+	};
+	onDragEnd = (e) => {
+		let { over: t, active: n } = e, r = this.createOrdering();
+		if (t && n) {
+			let e = n.data.current, i = t.data.current;
+			if (e && i && i.type === "target") {
+				this.onDropChoice(i, e, r);
+				return;
+			}
+			e && i && this.onDropChoice(i, e, r);
+		} else if (!t && n) {
+			let e = n.data.current;
+			e && e.type === "target" && this.onRemoveChoice(e, r);
+		}
+	};
+	render() {
+		let { model: e } = this.props, { correctResponse: t, correctness: n, extraCSSRules: r, prompt: i, rationale: a, feedback: o, config: s, note: c, showNote: l, env: u, disabled: d, teacherInstructions: f, language: p } = e, m = t && t.length > 0, { showingCorrect: h } = this.state, g = s || {
+			orientation: "vertical",
+			includeTargets: !0
+		}, { orientation: _, includeTargets: v } = g, b = _ === "vertical", x = this.createOrdering(), { mode: S, role: C } = u || {}, w = b ? qe : Ke, T = (h || S === "view" && C === "instructor") && l && c, E = a && (te(a) || y(a)), ne = f && (te(f) || y(f)), D = {
+			color: O.text(),
+			backgroundColor: O.background(),
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			boxSizing: "border-box"
+		};
+		return /* @__PURE__ */ A(re, {
+			onDragStart: () => {},
+			onDragEnd: this.onDragEnd,
+			collisionDetection: ee,
+			children: /* @__PURE__ */ A(st, { children: /* @__PURE__ */ j(tt, {
+				extraCSSRules: r,
+				style: D,
+				children: [
+					ne && /* @__PURE__ */ A(dt, {
+						labels: {
+							hidden: "Show Teacher Instructions",
+							visible: "Hide Teacher Instructions"
+						},
+						className: "collapsible",
+						children: /* @__PURE__ */ A(X, { prompt: f })
+					}),
+					/* @__PURE__ */ A(ct, { children: /* @__PURE__ */ A(X, { prompt: i }) }),
+					/* @__PURE__ */ A(ut, {
+						show: m,
+						toggled: h,
+						onToggle: this.toggleCorrect,
+						language: p
+					}),
+					/* @__PURE__ */ A(ft, {
+						instanceId: this.instanceId,
+						choiceLabel: g.choiceLabel,
+						targetLabel: g.targetLabel,
+						ordering: x,
+						tiler: w,
+						disabled: d,
+						addGuide: g.showOrdering,
+						tileSize: g.tileSize,
+						includeTargets: v,
+						choiceLabelEnabled: e.config && e.config.choiceLabelEnabled
+					}),
+					T && /* @__PURE__ */ A(lt, { dangerouslySetInnerHTML: { __html: c } }),
+					E && /* @__PURE__ */ A(dt, {
+						labels: {
+							hidden: "Show Rationale",
+							visible: "Hide Rationale"
+						},
+						className: "collapsible",
+						children: /* @__PURE__ */ A(X, { prompt: a })
+					}),
+					!h && /* @__PURE__ */ A(nt, {
+						correctness: n,
+						feedback: o
+					})
+				]
+			}) })
+		});
+	}
+}, mt = class extends k.Component {
+	static propTypes = {
+		model: P.default.object.isRequired,
+		session: P.default.oneOfType([P.default.array.isRequired, P.default.object.isRequired]),
+		onSessionChange: P.default.func.isRequired
+	};
+	render() {
+		let { model: e, session: t, onSessionChange: n } = this.props;
+		return /* @__PURE__ */ A(pt, {
+			model: e,
+			session: t,
+			onSessionChange: n
+		});
+	}
+}, $ = (0, N.default)("pie-elements:placement-ordering"), ht = ({ model: e, session: t }) => {
+	let { config: n } = e, r = (t && p(t.value) || []).length === e.choices.length;
+	return n.includeTargets || r;
+}, gt = class extends HTMLElement {
+	constructor() {
+		super(), this._root = null, this._mathObserver = null, this._mathRenderPending = !1;
+	}
+	_scheduleMathRender = () => {
+		this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
+			this._mathObserver && this._mathObserver.disconnect(), _(this), this._mathRenderPending = !1, setTimeout(() => {
+				this._mathObserver && this._mathObserver.observe(this, {
+					childList: !0,
+					subtree: !0
+				});
+			}, 50);
+		}));
+	};
+	_initMathObserver() {
+		this._mathObserver || (this._mathObserver = new MutationObserver(this._scheduleMathRender), this._mathObserver.observe(this, {
+			childList: !0,
+			subtree: !0
+		}));
+	}
+	_disconnectMathObserver() {
+		this._mathObserver &&= (this._mathObserver.disconnect(), null);
+	}
+	isComplete = (e) => e && p(e).length === this._model.completeLength;
+	sessionChange = (e) => {
+		this._session.value = e.value, this.render(), this.dispatchEvent(new _e(this.tagName.toLowerCase(), this._session && this.isComplete(this._session.value)));
+	};
+	set model(e) {
+		this._model = e, this.render(), this.dispatchEvent(new CustomEvent("model-set", {
+			bubbles: !0,
+			detail: { complete: !1 }
+		}));
+	}
+	set session(e) {
+		this._session = e, this.render();
+	}
+	get session() {
+		return this._session;
+	}
+	render() {
+		if (this._model && this._session) {
+			$("[render] session: ", this._session.value), $("[render] model: ", this._model), this._initMathObserver();
+			let e = k.createElement(mt, {
+				model: this._model,
+				session: this._session,
+				onSessionChange: this.sessionChange
+			});
+			this._root ||= de(this), this._root.render(e);
+		}
+	}
+	connectedCallback() {
+		this._initMathObserver();
+	}
+	disconnectedCallback() {
+		this._disconnectMathObserver(), this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { gt as default, ht as isValidSession };
+
+//# sourceMappingURL=index.js.map