@pie-element/match-list 7.1.1 → 7.1.2-next.0

package/dist/delivery/index.js

@@ -0,0 +1,49 @@
+import e from "./main.js";
+import t from "react";
+import { createRoot as n } from "react-dom/client";
+import r from "debug";
+import { 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 = r("pie-ui:graph-lines"), s = (e, t) => {
+	if (!e) return !1;
+	let n = e.value, r = !0;
+	return n && (t.config.prompts || []).forEach((e) => {
+		Number.isFinite(n[e.id]) || (r = !1);
+	}), r;
+}, c = class extends HTMLElement {
+	constructor() {
+		super(), this._root = null;
+	}
+	set model(e) {
+		this._model = e, this._render();
+	}
+	set session(e) {
+		this._session = e, this._render();
+	}
+	get session() {
+		return this._session;
+	}
+	sessionChanged(e) {
+		this._session.value = e.value, this.dispatchEvent(new i(this.tagName.toLowerCase(), s(this._session, this._model))), o("session: ", this._session), this._render();
+	}
+	connectedCallback() {
+		this._render();
+	}
+	_render() {
+		if (!this._model || !this._session) return;
+		let r = t.createElement(e, {
+			model: this._model,
+			session: this._session,
+			onSessionChange: this.sessionChanged.bind(this)
+		});
+		this._root ||= n(this), this._root.render(r), queueMicrotask(() => {
+			a(this);
+		});
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { e as Component, c as default, s as isComplete };

package/dist/delivery/main.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @synced-from pie-elements/packages/match-list/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: {
+        session: PropTypes.Validator<object>;
+        onSessionChange: PropTypes.Requireable<(...args: any[]) => any>;
+        model: PropTypes.Validator<object>;
+        prompt: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    onRemoveAnswer(id: any): void;
+    onDragStart: any;
+    onPlaceAnswer: any;
+    toggleShowCorrect: any;
+    renderDragOverlay: any;
+    render(): React.JSX.Element;
+}
+export default Main;

package/dist/delivery/main.js

@@ -0,0 +1,149 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/findKey.js";
+import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isUndefined.js";
+import n from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/uniqueId.js";
+import { Answer as r } from "./answer.js";
+import i from "./answer-area.js";
+import a from "./choices-list.js";
+import o from "react";
+import s from "prop-types";
+import { swap as c } from "@pie-lib/drag";
+import { DndContext as l, DragOverlay as u } from "@dnd-kit/core";
+import { restrictToFirstScrollableAncestor as d } from "@dnd-kit/modifiers";
+import f from "@pie-lib/correct-answer-toggle";
+import * as p from "@pie-lib/render-ui";
+import { Feedback as m, PreviewPrompt as h, color as g } from "@pie-lib/render-ui";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { styled as y } from "@mui/material/styles";
+//#region src/delivery/main.tsx
+function b(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function x(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 S = x(h, "PreviewPrompt") || x(E.PreviewPrompt, "PreviewPrompt"), C = x(m, "Feedback") || x(E.Feedback, "Feedback"), w = p, T = w.default, E = T && typeof T == "object" ? T : w, D = y("div")({
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "center",
+	color: g.text(),
+	backgroundColor: g.background()
+}), O = class extends o.Component {
+	static propTypes = {
+		session: s.object.isRequired,
+		onSessionChange: s.func,
+		model: s.object.isRequired,
+		prompt: s.string
+	};
+	constructor(e) {
+		super(e), this.instanceId = n(), this.state = {
+			showCorrectAnswer: !1,
+			draggingElement: null
+		};
+	}
+	onRemoveAnswer(e) {
+		let { session: t, onSessionChange: n } = this.props;
+		t.value[e] = void 0, n(t);
+	}
+	onDragStart = (e) => {
+		let { active: t } = e;
+		if (t?.data?.current) {
+			let e = null, n = t.node?.current;
+			if (n) {
+				let { width: t, height: r } = n.getBoundingClientRect();
+				e = {
+					width: t,
+					height: r
+				};
+			}
+			this.setState({ draggingElement: {
+				...t.data.current,
+				rect: e
+			} });
+		}
+	};
+	onPlaceAnswer = (n) => {
+		this.setState({ draggingElement: null });
+		let { active: r, over: i } = n;
+		if (!r) return;
+		let a = r.data.current, o = i?.data.current;
+		if (!a) return;
+		let { session: s, onSessionChange: l, model: u } = this.props, { config: { duplicates: d } } = u;
+		if (t(s.value) && (s.value = {}), o.type === "choices-pool" && a.promptId !== void 0) {
+			s.value[a.promptId] = void 0, l(s);
+			return;
+		}
+		let f = a.id, p = a.promptId;
+		if (o && o.type === "drop-zone" && o.promptId != null) {
+			let t = o.promptId;
+			if (a.type === "choice" && o.type === "drop-zone" && t !== void 0) {
+				let n = e(s.value, (e) => e === f);
+				n && !d ? s.value = c(s.value, n, t) : s.value[t] = f;
+			} else if (a.type === "target" && p != null && p !== t) {
+				let e = s.value[t] != null;
+				if (e && !d) {
+					let e = s.value[t];
+					s.value[t] = f, s.value[p] = e;
+				} else e || (s.value[t] = f, delete s.value[p]);
+			}
+			l(s);
+		}
+	};
+	toggleShowCorrect = () => {
+		this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });
+	};
+	renderDragOverlay = () => {
+		let { draggingElement: e } = this.state;
+		return e ? /* @__PURE__ */ _(r, {
+			id: e.id,
+			title: e.value,
+			disabled: !1,
+			isDragging: !1,
+			style: e.rect ? {
+				width: e.rect.width,
+				height: e.rect.height,
+				boxSizing: "border-box"
+			} : {}
+		}) : null;
+	};
+	render() {
+		let { showCorrectAnswer: e } = this.state, { model: t, session: n } = this.props, { config: r, mode: o } = t, { prompt: s, language: c } = r;
+		return /* @__PURE__ */ v(l, {
+			onDragStart: this.onDragStart,
+			onDragEnd: this.onPlaceAnswer,
+			modifiers: [d],
+			children: [/* @__PURE__ */ v(D, { children: [
+				/* @__PURE__ */ _(S, {
+					className: "prompt",
+					prompt: s
+				}),
+				/* @__PURE__ */ _(f, {
+					show: o === "evaluate",
+					toggled: e,
+					onToggle: this.toggleShowCorrect,
+					language: c
+				}),
+				/* @__PURE__ */ _(i, {
+					instanceId: this.instanceId,
+					model: t,
+					session: n,
+					onRemoveAnswer: (e) => this.onRemoveAnswer(e),
+					disabled: o !== "gather",
+					showCorrect: e
+				}),
+				/* @__PURE__ */ _(a, {
+					instanceId: this.instanceId,
+					model: t,
+					session: n,
+					disabled: o !== "gather",
+					onRemoveAnswer: (e) => this.onRemoveAnswer(e)
+				}),
+				t.correctness && t.feedback && !e && /* @__PURE__ */ _(C, {
+					correctness: t.correctness.correctness,
+					feedback: t.feedback
+				})
+			] }), /* @__PURE__ */ _(u, { children: this.renderDragOverlay() })]
+		});
+	}
+};
+//#endregion
+export { O as default };

package/dist/index.d.ts

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

package/dist/index.iife.d.ts

@@ -0,0 +1,8 @@
+/**
+ * IIFE entry point for match-list 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;