@pie-element/match-list 7.1.2-next.5 → 7.1.3

package/dist/delivery/answer.d.ts

@@ -1,40 +0,0 @@
-/**
- * @synced-from pie-elements/packages/match-list/src/answer.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 PropTypes from 'prop-types';
-import React from 'react';
-export declare class Answer extends React.Component {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        isDragging: PropTypes.Requireable<boolean>;
-        id: PropTypes.Requireable<any>;
-        title: PropTypes.Requireable<string>;
-        isOver: PropTypes.Requireable<boolean>;
-        empty: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
-        correct: PropTypes.Requireable<boolean>;
-    };
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleTouchStart: any;
-    render(): React.JSX.Element;
-}
-declare function DragAndDropAnswer(props: any): React.JSX.Element;
-declare namespace DragAndDropAnswer {
-    var propTypes: {
-        id: PropTypes.Requireable<any>;
-        instanceId: PropTypes.Requireable<string>;
-        promptId: PropTypes.Requireable<any>;
-        title: PropTypes.Requireable<string>;
-        draggable: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<string>;
-    };
-}
-export default DragAndDropAnswer;

package/dist/delivery/answer.js

@@ -1,176 +0,0 @@
-import e from "react";
-import t from "debug";
-import n from "prop-types";
-import { PlaceHolder as r } from "@pie-lib/drag";
-import { useDraggable as i, useDroppable as a } from "@dnd-kit/core";
-import { color as o } from "@pie-lib/render-ui";
-import { jsx as s } from "react/jsx-runtime";
-import { styled as c } from "@mui/material/styles";
-import { isEmpty as l } from "@pie-element/shared-lodash";
-//#region src/delivery/answer.tsx
-var u = t("pie-elements:match-title:answer"), d = c("div")(({ theme: e }) => ({
-	width: "100%",
-	fontSize: "18px",
-	textAlign: "center",
-	color: `rgba(${e.palette.common.black}, 0.6)`
-})), f = ({ index: e, isOver: t, disabled: n, type: i }) => /* @__PURE__ */ s(r, {
-	extraStyles: {
-		display: "flex",
-		padding: "0",
-		alignItems: "center",
-		justifyContent: "center",
-		height: "40px"
-	},
-	disabled: n,
-	isOver: t,
-	type: i,
-	children: e !== void 0 && /* @__PURE__ */ s(d, { children: e })
-});
-f.propTypes = {
-	index: n.number,
-	isOver: n.bool,
-	disabled: n.bool,
-	type: n.string
-};
-var p = c("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i }) => ({
-	color: o.text(),
-	backgroundColor: o.white(),
-	border: `1px solid ${i === "correct" ? o.correct() : i === "incorrect" ? o.incorrect() : e.palette.grey[400]}`,
-	cursor: r ? "not-allowed" : "pointer",
-	width: "100%",
-	padding: "10px",
-	boxSizing: "border-box",
-	overflow: "hidden",
-	transition: "opacity 200ms linear",
-	wordBreak: "break-word",
-	opacity: t && !r ? .5 : n && !r ? .2 : 1,
-	touchAction: "none"
-})), m = (e) => {
-	let { isDragging: t, isOver: n, title: r, disabled: i, empty: a, outcome: o, guideIndex: c, type: l } = e;
-	return a ? /* @__PURE__ */ s(f, {
-		index: c,
-		isOver: n,
-		disabled: i,
-		type: l
-	}) : /* @__PURE__ */ s(p, {
-		isDragging: t,
-		isOver: n,
-		disabled: i,
-		outcome: o,
-		dangerouslySetInnerHTML: { __html: r }
-	});
-}, h = c("div")(({ correct: e, theme: t }) => ({
-	boxSizing: "border-box",
-	minHeight: 40,
-	minWidth: "200px",
-	overflow: "hidden",
-	margin: t.spacing(.5),
-	padding: "0px",
-	textAlign: "center",
-	height: "initial",
-	border: e === !0 ? `1px solid var(--feedback-correct-bg-color, ${o.correct()})` : e === !1 ? `1px solid var(--feedback-incorrect-bg-color, ${o.incorrect()})` : "none"
-})), g = class extends e.Component {
-	static propTypes = {
-		className: n.string,
-		isDragging: n.bool,
-		id: n.any,
-		title: n.string,
-		isOver: n.bool,
-		empty: n.bool,
-		type: n.string,
-		disabled: n.bool,
-		correct: n.bool
-	};
-	componentDidMount() {
-		this.ref && this.ref.addEventListener("touchstart", this.handleTouchStart, { passive: !0 });
-	}
-	componentWillUnmount() {
-		this.ref && this.ref.removeEventListener("touchstart", this.handleTouchStart);
-	}
-	handleTouchStart = (e) => {};
-	render() {
-		let { id: e, title: t, isDragging: n = !1, className: r, disabled: i, isOver: a = !1, type: o, correct: c } = this.props;
-		return u("[render], props: ", this.props), /* @__PURE__ */ s(h, {
-			correct: c,
-			className: r,
-			ref: (e) => this.ref = e,
-			children: /* @__PURE__ */ s(m, {
-				title: t,
-				id: e,
-				isOver: a,
-				empty: l(t),
-				isDragging: n,
-				disabled: i,
-				type: o
-			})
-		});
-	}
-};
-function _(e) {
-	let { id: t, instanceId: n, promptId: r, draggable: o = !0, disabled: c = !1, type: l } = e, u = `${l || "answer"}-${t}`, d = r == null ? void 0 : `drop-${r}`, { attributes: f, listeners: p, setNodeRef: m, transform: h, transition: _, isDragging: v } = i({
-		id: u,
-		data: {
-			type: l || "answer",
-			id: t,
-			instanceId: n,
-			value: e.title,
-			promptId: r
-		},
-		disabled: !o || c
-	}), y = a({
-		id: d,
-		data: d ? {
-			type: "drop-zone",
-			promptId: r,
-			instanceId: n
-		} : void 0,
-		disabled: c || !d
-	}), b = y.setNodeRef, x = y.isOver, S = h ? `translate3d(${h.x}px, ${h.y}px, 0)` : void 0;
-	return d ? /* @__PURE__ */ s("div", {
-		ref: b,
-		style: {
-			flex: 1,
-			transform: S,
-			transition: _,
-			opacity: v ? .5 : 1,
-			backgroundColor: x ? "rgba(0,0,0,0.05)" : "transparent"
-		},
-		children: /* @__PURE__ */ s("div", {
-			ref: m,
-			...p,
-			...f,
-			children: /* @__PURE__ */ s(g, {
-				...e,
-				isDragging: v,
-				isOver: x
-			})
-		})
-	}) : /* @__PURE__ */ s("div", {
-		ref: m,
-		...p,
-		...f,
-		style: {
-			transform: S,
-			transition: _,
-			cursor: c ? "not-allowed" : "grab",
-			opacity: v ? .5 : 1,
-			touchAction: o && !c ? "none" : "auto"
-		},
-		children: /* @__PURE__ */ s(g, {
-			...e,
-			isDragging: v,
-			isOver: !1
-		})
-	});
-}
-_.propTypes = {
-	id: n.any,
-	instanceId: n.string,
-	promptId: n.any,
-	title: n.string,
-	draggable: n.bool,
-	disabled: n.bool,
-	type: n.string
-};
-//#endregion
-export { g as Answer, _ as default };

package/dist/delivery/arrow.d.ts

@@ -1,17 +0,0 @@
-/**
- * @synced-from pie-elements/packages/match-list/src/arrow.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 Arrow extends React.Component {
-    static propTypes: {
-        direction: PropTypes.Requireable<string>;
-    };
-    render(): React.JSX.Element;
-}
-export default Arrow;

package/dist/delivery/arrow.js

@@ -1,35 +0,0 @@
-import e from "react";
-import t from "prop-types";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { styled as i } from "@mui/material/styles";
-import a from "@mui/icons-material/ArrowDropDown";
-//#region src/delivery/arrow.tsx
-var o = i("div")({
-	display: "inline-block",
-	position: "relative",
-	width: "100%"
-}), s = i("span")(({ theme: e, isRight: t }) => ({
-	backgroundColor: e.palette.grey[500],
-	bottom: t ? 20 : 19,
-	content: "\"\"",
-	display: "block",
-	height: 1,
-	left: 20,
-	position: "absolute",
-	width: "100%"
-})), c = class extends e.Component {
-	static propTypes = { direction: t.string };
-	render() {
-		let { direction: e } = this.props;
-		return /* @__PURE__ */ r(o, {
-			style: e === "left" ? {} : { transform: "rotate(180deg)" },
-			children: [/* @__PURE__ */ n(a, { style: {
-				transform: "rotate(90deg)",
-				color: "#979797",
-				fontSize: 40
-			} }), /* @__PURE__ */ n(s, { isRight: e !== "left" })]
-		});
-	}
-};
-//#endregion
-export { c as default };

package/dist/delivery/choices-list.d.ts

@@ -1,21 +0,0 @@
-/**
- * @synced-from pie-elements/packages/match-list/src/choices-list.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 ChoicesList extends React.Component {
-    static propTypes: {
-        session: PropTypes.Validator<object>;
-        instanceId: PropTypes.Validator<string>;
-        model: PropTypes.Validator<object>;
-        disabled: PropTypes.Validator<boolean>;
-        onRemoveAnswer: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    render(): React.JSX.Element;
-}
-export default ChoicesList;

package/dist/delivery/choices-list.js

@@ -1,35 +0,0 @@
-import e from "./answer.js";
-import t from "./droppable-placeholder.js";
-import n from "react";
-import r from "prop-types";
-import { jsx as i } from "react/jsx-runtime";
-import { styled as a } from "@mui/material/styles";
-import { find as o, isEmpty as s, isUndefined as c } from "@pie-element/shared-lodash";
-//#region src/delivery/choices-list.tsx
-var l = a("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), u = class extends n.Component {
-	static propTypes = {
-		session: r.object.isRequired,
-		instanceId: r.string.isRequired,
-		model: r.object.isRequired,
-		disabled: r.bool.isRequired,
-		onRemoveAnswer: r.func
-	};
-	render() {
-		let { model: n, disabled: r, session: a, instanceId: u, onRemoveAnswer: d } = this.props, { config: f } = n, { duplicates: p } = f;
-		return /* @__PURE__ */ i(l, { children: /* @__PURE__ */ i(t, {
-			id: "choices-pool",
-			disabled: r,
-			onRemoveAnswer: d,
-			children: f.answers.filter((e) => p || s(a) || !a.value || c(o(a.value, (t) => t === e.id))).map((t) => /* @__PURE__ */ i(e, {
-				instanceId: u,
-				draggable: !0,
-				disabled: r,
-				session: a,
-				type: "choice",
-				...t
-			}, t.id))
-		}) });
-	}
-};
-//#endregion
-export { u as default };

package/dist/delivery/droppable-placeholder.d.ts

@@ -1,24 +0,0 @@
-/**
- * @synced-from pie-elements/packages/match-list/src/droppable-placeholder.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 function DroppablePlaceholder({ id, disabled, children, ...rest }: {
-    [x: string]: any;
-    id: any;
-    disabled: any;
-    children: any;
-}): React.JSX.Element;
-export declare namespace DroppablePlaceholder {
-    var propTypes: {
-        id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        disabled: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-}
-export default DroppablePlaceholder;

package/dist/delivery/droppable-placeholder.js

@@ -1,42 +0,0 @@
-import "react";
-import e from "prop-types";
-import { MatchDroppablePlaceholder as t } from "@pie-lib/drag";
-import { useDroppable as n } from "@dnd-kit/core";
-import { jsx as r } from "react/jsx-runtime";
-import { styled as i } from "@mui/material/styles";
-//#region src/delivery/droppable-placeholder.tsx
-var a = i("div")(({ theme: e }) => ({
-	alignItems: "center",
-	display: "flex",
-	flexDirection: "row",
-	flexWrap: "wrap",
-	justifyContent: "space-between",
-	marginTop: e.spacing(1),
-	marginBottom: e.spacing(1),
-	minHeight: 50,
-	transition: "background-color 200ms ease"
-}));
-function o({ id: e, disabled: i, children: o, ...s }) {
-	let { setNodeRef: c, isOver: l } = n({
-		id: e || "choices-pool",
-		data: { type: "choices-pool" },
-		disabled: i
-	});
-	return /* @__PURE__ */ r(a, {
-		ref: c,
-		style: { backgroundColor: l ? "rgba(0,0,0,0.05)" : "transparent" },
-		...s,
-		children: /* @__PURE__ */ r(t, {
-			id: e,
-			disabled: i,
-			children: o
-		})
-	});
-}
-o.propTypes = {
-	id: e.oneOfType([e.string, e.number]),
-	disabled: e.bool,
-	children: e.node
-};
-//#endregion
-export { o as default };

package/dist/delivery/index.d.ts

@@ -1,21 +0,0 @@
-/**
- * @synced-from pie-elements/packages/match-list/src/index.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.
- */
-import Main from './main.js';
-export { Main as Component };
-export declare const isComplete: (session: any, model: any) => boolean;
-export default class MatchList extends HTMLElement {
-    constructor();
-    set model(m: any);
-    set session(s: any);
-    get session(): any;
-    sessionChanged(s: any): void;
-    connectedCallback(): void;
-    _render(): void;
-    disconnectedCallback(): void;
-}

package/dist/delivery/index.js

@@ -1,49 +0,0 @@
-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

@@ -1,26 +0,0 @@
-/**
- * @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

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

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 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;