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

package/configure.js

@@ -0,0 +1,2 @@
+export { default } from './dist/author/index.js';
+export * from './dist/author/index.js';

package/controller.js

@@ -0,0 +1 @@
+export * from './dist/controller/index.js';

package/dist/author/choice-editor.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @synced-from pie-elements/packages/placement-ordering/configure/src/choice-editor.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';
+declare class ChoiceEditor extends React.Component {
+    static propTypes: {
+        correctResponse: PropTypes.Validator<any[]>;
+        choices: PropTypes.Validator<any[]>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        imageSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        maxImageHeight: PropTypes.Requireable<object>;
+        maxImageWidth: PropTypes.Requireable<object>;
+        toolbarOpts: PropTypes.Requireable<object>;
+        pluginProps: PropTypes.Requireable<object>;
+        placementArea: PropTypes.Requireable<boolean>;
+        singularChoiceLabel: PropTypes.Requireable<string>;
+        pluralChoiceLabel: PropTypes.Requireable<string>;
+        choicesLabel: PropTypes.Requireable<string>;
+        errors: PropTypes.Requireable<object>;
+        spellCheck: PropTypes.Requireable<boolean>;
+    };
+    state: {
+        warning: {
+            open: boolean;
+        };
+    };
+    constructor(props: any);
+    render(): React.JSX.Element;
+}
+export default ChoiceEditor;

package/dist/author/choice-editor.js

@@ -0,0 +1,156 @@
+import e from "./choice-tile.js";
+import t from "react";
+import { isEqual as n, shuffle as r } from "@pie-element/shared-lodash";
+import i from "debug";
+import a from "prop-types";
+import { styled as o } from "@mui/material/styles";
+import * as s from "@pie-lib/render-ui";
+import { InputContainer as c } from "@pie-lib/render-ui";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { AlertDialog as d } from "@pie-lib/config-ui";
+import f from "@mui/material/Button";
+//#region src/author/choice-editor.tsx
+function p(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function m(e, t) {
+	return !e || p(e) ? e : p(e.default) ? e.default : t && p(e[t]) ? e[t] : t && p(e[t]?.default) ? e[t].default : e;
+}
+var h = m(c, "InputContainer") || m(v.InputContainer, "InputContainer"), g = s, _ = g.default, v = _ && typeof _ == "object" ? _ : g;
+function y(e) {
+	let t = 1, n = e.map((e) => e.id);
+	for (; n.includes(`c${t}`);) t++;
+	return t;
+}
+i("@pie-element:placement-ordering:configure:choice-editor");
+var b = o("div")({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+}), x = o(f)(({ theme: e }) => ({
+	marginTop: e.spacing(2.5),
+	paddingLeft: e.spacing(1.5),
+	paddingRight: e.spacing(1.5),
+	"& .MuiButton-label": {
+		transition: "opacity 200ms linear",
+		"&:hover": { opacity: .3 }
+	}
+})), S = o("div")({
+	gridAutoFlow: "column",
+	display: "grid",
+	gridGap: "10px",
+	alignItems: "center"
+}), C = o(h)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(2)
+})), w = o("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), T = class extends t.Component {
+	static propTypes = {
+		correctResponse: a.array.isRequired,
+		choices: a.array.isRequired,
+		onChange: a.func.isRequired,
+		imageSupport: a.shape({
+			add: a.func.isRequired,
+			delete: a.func.isRequired
+		}),
+		maxImageHeight: a.object,
+		maxImageWidth: a.object,
+		toolbarOpts: a.object,
+		pluginProps: a.object,
+		placementArea: a.bool,
+		singularChoiceLabel: a.string,
+		pluralChoiceLabel: a.string,
+		choicesLabel: a.string,
+		errors: a.object,
+		spellCheck: a.bool
+	};
+	state = { warning: { open: !1 } };
+	constructor(e) {
+		super(e), this.onChoiceChange = (e) => {
+			let { choices: t, onChange: n, correctResponse: r } = this.props, i = t.findIndex((t) => t.id === e.id);
+			t.splice(i, 1, {
+				...t[i],
+				label: e.label
+			}), n(t, r);
+		}, this.onDelete = (e) => {
+			let { choices: t, onChange: n, correctResponse: r, choicesLabel: i } = this.props;
+			t && t.length === 3 ? this.setState({ warning: {
+				open: !0,
+				text: `There have to be at least 3 ${i}.`
+			} }) : n(t.filter((t) => t.id !== e.id), r.filter((t) => t.id !== e.id));
+		}, this.addChoice = () => {
+			let { choices: e, correctResponse: t, onChange: n, choicesLabel: r } = this.props;
+			if (e && e.length === 10) this.setState({ warning: {
+				open: !0,
+				text: `There can be maximum 10 ${r}.`
+			} });
+			else {
+				let r = `c${y(e)}`, i = {
+					id: r,
+					label: ""
+				}, a = {
+					id: r,
+					weight: 0
+				};
+				n(e.concat([i]), t.concat([a]));
+			}
+		}, this.shuffleChoices = () => {
+			let { onChange: e, choices: t, correctResponse: i, placementArea: a } = this.props, o = r(t);
+			!a && n(o.map((e) => e.id), i.map((e) => e.id)) ? e(r(o), i) : e(o, i);
+		};
+	}
+	render() {
+		let { correctResponse: t, choices: n, imageSupport: r, toolbarOpts: i, pluginProps: a, singularChoiceLabel: o, pluralChoiceLabel: s, choicesLabel: c, spellCheck: f, maxImageWidth: p, maxImageHeight: m, errors: h, mathMlOptions: g = {}, ordering: _ } = this.props, { warning: v } = this.state, { choicesErrors: y, orderError: T } = h || {}, E = {
+			gridTemplateColumns: "repeat(2, 1fr)",
+			gridTemplateRows: `repeat(${n.length}, 1fr)`
+		};
+		return /* @__PURE__ */ u("div", { children: [
+			/* @__PURE__ */ u(S, {
+				style: { gridTemplateColumns: "repeat(2, 1fr)" },
+				children: [/* @__PURE__ */ l(C, { label: `Student ${c || "Choices"}` }), /* @__PURE__ */ l(C, { label: "Correct Order" })]
+			}),
+			/* @__PURE__ */ l(S, {
+				style: E,
+				children: _.tiles.map((t, o) => /* @__PURE__ */ l(e, {
+					choice: t,
+					index: o,
+					imageSupport: r,
+					onDelete: this.onDelete.bind(this, t),
+					onChoiceChange: this.onChoiceChange,
+					toolbarOpts: i,
+					pluginProps: a,
+					choices: n,
+					choicesLabel: c,
+					spellCheck: f,
+					maxImageWidth: p,
+					maxImageHeight: m,
+					error: y?.[t.id] || T && " " || null,
+					mathMlOptions: g
+				}, `${t.type}-${t.id}`))
+			}),
+			T && /* @__PURE__ */ l(w, { children: T }),
+			/* @__PURE__ */ u(b, { children: [/* @__PURE__ */ l(x, {
+				onClick: this.shuffleChoices,
+				size: "small",
+				variant: "contained",
+				children: `SHUFFLE ${s}`.toUpperCase()
+			}), /* @__PURE__ */ l(x, {
+				onClick: this.addChoice,
+				size: "small",
+				variant: "contained",
+				children: `ADD ${o}`.toUpperCase()
+			})] }),
+			/* @__PURE__ */ l(d, {
+				open: v.open,
+				title: "Warning",
+				text: v.text,
+				onConfirm: () => this.setState({ warning: { open: !1 } })
+			})
+		] });
+	}
+};
+//#endregion
+export { T as default };

package/dist/author/choice-tile.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @synced-from pie-elements/packages/placement-ordering/configure/src/choice-tile.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 const ChoiceTile: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        id: PropTypes.Requireable<any>;
+        maxImageHeight: PropTypes.Requireable<object>;
+        maxImageWidth: PropTypes.Requireable<object>;
+        label: PropTypes.Requireable<string>;
+        isOver: PropTypes.Requireable<boolean>;
+        type: PropTypes.Requireable<string>;
+        empty: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        outcome: PropTypes.Requireable<object>;
+        index: PropTypes.Requireable<number>;
+        imageSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        choice: PropTypes.Requireable<object>;
+        choices: PropTypes.Validator<any[]>;
+        onChoiceChange: PropTypes.Validator<(...args: any[]) => any>;
+        onDelete: PropTypes.Validator<(...args: any[]) => any>;
+        toolbarOpts: PropTypes.Requireable<object>;
+        pluginProps: PropTypes.Requireable<object>;
+        choicesLabel: PropTypes.Requireable<string>;
+        error: PropTypes.Requireable<string>;
+        spellCheck: PropTypes.Requireable<boolean>;
+        mathMlOptions: PropTypes.Requireable<object>;
+    };
+};
+export default ChoiceTile;

package/dist/author/choice-tile.js

@@ -0,0 +1,132 @@
+import "react";
+import e from "debug";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { useDraggable as r, useDroppable as i } from "@dnd-kit/core";
+import { color as a } from "@pie-lib/render-ui";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c, { DEFAULT_PLUGINS as l } from "@pie-lib/editable-html-tip-tap";
+import u from "@mui/material/CardActions";
+import d from "@mui/icons-material/DragHandle";
+import f from "@mui/material/IconButton";
+import p from "@mui/icons-material/RemoveCircle";
+//#region src/author/choice-tile.tsx
+e("@pie-element:placement-ordering:configure:choice-tile");
+var m = n("div")(({ theme: e }) => ({
+	margin: `${e.spacing(1)} 0`,
+	backgroundColor: e.palette.background.paper,
+	display: "flex",
+	flexDirection: "column",
+	cursor: "move",
+	touchAction: "none"
+})), h = n(c)(({ theme: e, isTargetPrompt: t }) => ({
+	width: "80%",
+	borderRadius: "4px",
+	...t && { backgroundColor: e.palette.error.light }
+})), g = n("div")(() => ({
+	display: "flex",
+	justifyContent: "flex-end"
+})), _ = n(d)(({ theme: e }) => ({ color: e.palette.error[400] })), v = n("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	marginLeft: e.spacing(5),
+	marginTop: e.spacing(1)
+})), y = n(p)(({ theme: e }) => ({ fill: e.palette.error[500] })), b = n(f)({ color: `${a.tertiary()} !important` }), x = (e) => {
+	let { choice: t, index: n, onChoiceChange: a, onDelete: c, imageSupport: d, spellCheck: f, toolbarOpts: p, pluginProps: x, maxImageWidth: S, maxImageHeight: C, error: w, mathMlOptions: T = {} } = e, { label: E, editable: D, type: O } = t, k = `${O}-${t.id}`, A = `${O}-drop-${t.id}`, { attributes: j, listeners: M, setNodeRef: N, transform: P, isDragging: F } = r({
+		id: k,
+		data: {
+			id: t.id,
+			index: n,
+			type: O
+		}
+	}), { setNodeRef: I } = i({
+		id: A,
+		data: {
+			id: t.id,
+			index: n,
+			type: O
+		}
+	}), L = (e) => {
+		t.label = e, a(t);
+	}, R = {
+		transform: P ? `translate3d(${P.x}px, ${P.y}px, 0)` : void 0,
+		opacity: F ? .5 : 1,
+		width: "100%"
+	}, z = (l || []).filter((e) => e !== "bulleted-list" && e !== "numbered-list"), B = (e) => e.closest("[contenteditable]") || e.closest("input") || e.closest("textarea") || e.isContentEditable;
+	return /* @__PURE__ */ o("div", {
+		ref: I,
+		children: /* @__PURE__ */ o("div", {
+			ref: N,
+			...M,
+			onKeyDown: (e) => {
+				B(e.target) || M?.onKeyDown?.(e);
+			},
+			onPointerDown: (e) => {
+				B(e.target) || M?.onPointerDown?.(e);
+			},
+			...j,
+			children: /* @__PURE__ */ s(m, {
+				style: R,
+				children: [/* @__PURE__ */ s("div", {
+					style: {
+						width: "100%",
+						display: "flex"
+					},
+					children: [
+						/* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(_, {}) }),
+						/* @__PURE__ */ o(h, {
+							disabled: !D,
+							placeholder: O !== "target" && !E.includes("data-latex") ? "Enter a choice" : "",
+							markup: E,
+							imageSupport: d || void 0,
+							onChange: L,
+							pluginProps: x,
+							toolbarOpts: p,
+							activePlugins: z,
+							spellCheck: f,
+							autoWidthToolbar: !0,
+							maxImageWidth: S,
+							maxImageHeight: C,
+							languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+							error: D && w,
+							mathMlOptions: T
+						}),
+						D && /* @__PURE__ */ o(g, { children: /* @__PURE__ */ o(b, {
+							onClick: c,
+							size: "large",
+							children: /* @__PURE__ */ o(y, {})
+						}) })
+					]
+				}), D && w && /* @__PURE__ */ o(v, { children: w })]
+			})
+		})
+	});
+};
+x.propTypes = {
+	id: t.any,
+	maxImageHeight: t.object,
+	maxImageWidth: t.object,
+	label: t.string,
+	isOver: t.bool,
+	type: t.string,
+	empty: t.bool,
+	disabled: t.bool,
+	outcome: t.object,
+	index: t.number,
+	imageSupport: t.shape({
+		add: t.func.isRequired,
+		delete: t.func.isRequired
+	}),
+	choice: t.object,
+	choices: t.array.isRequired,
+	onChoiceChange: t.func.isRequired,
+	onDelete: t.func.isRequired,
+	toolbarOpts: t.object,
+	pluginProps: t.object,
+	choicesLabel: t.string,
+	error: t.string,
+	spellCheck: t.bool,
+	mathMlOptions: t.object
+};
+//#endregion
+export { x as default };

package/dist/author/defaults.d.ts

@@ -0,0 +1,213 @@
+/**
+ * @synced-from pie-elements/packages/placement-ordering/configure/src/defaults.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.
+ */
+/** NOTE: teacherInstructions, studentInstructions, rationale & scoringType
+ * functionalities are not defined yet - the value for those can belong to
+ * model or to configuration
+ */
+declare const _default: {
+    model: {
+        choiceLabel: string;
+        choiceLabelEnabled: boolean;
+        choices: never[];
+        correctResponse: never[];
+        feedbackEnabled: boolean;
+        numberedGuides: boolean;
+        orientation: string;
+        partialScoring: boolean;
+        placementArea: boolean;
+        prompt: string;
+        promptEnabled: boolean;
+        rationale: string;
+        rationaleEnabled: boolean;
+        removeTilesAfterPlacing: boolean;
+        scoringType: string;
+        studentInstructionsEnabled: boolean;
+        targetLabel: string;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+    };
+    configuration: {
+        baseInputConfiguration: {
+            h3: {
+                disabled: boolean;
+            };
+            audio: {
+                disabled: boolean;
+            };
+            video: {
+                disabled: boolean;
+            };
+            image: {
+                disabled: boolean;
+            };
+            textAlign: {
+                disabled: boolean;
+            };
+            showParagraphs: {
+                disabled: boolean;
+            };
+            separateParagraphs: {
+                disabled: boolean;
+            };
+        };
+        choiceLabel: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+        };
+        choices: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+        };
+        feedback: {
+            settings: boolean;
+            label: string;
+            enabled: boolean;
+        };
+        prompt: {
+            settings: boolean;
+            label: string;
+            required: boolean;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+        };
+        numberedGuides: {
+            settings: boolean;
+            label: string;
+        };
+        orientation: {
+            settings: boolean;
+            label: string;
+        };
+        partialScoring: {
+            settings: boolean;
+            label: string;
+        };
+        placementArea: {
+            settings: boolean;
+            label: string;
+        };
+        rationale: {
+            settings: boolean;
+            label: string;
+            required: boolean;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+        };
+        removeTilesAfterPlacing: {
+            settings: boolean;
+            label: string;
+        };
+        settingsPanelDisabled: boolean;
+        scoringType: {
+            settings: boolean;
+            label: string;
+        };
+        studentInstructions: {
+            settings: boolean;
+            label: string;
+        };
+        targetLabel: {
+            settings: boolean;
+            label: string;
+        };
+        spellCheck: {
+            label: string;
+            settings: boolean;
+            enabled: boolean;
+        };
+        teacherInstructions: {
+            settings: boolean;
+            label: string;
+            required: boolean;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+        };
+        maxImageWidth: {
+            teacherInstructions: number;
+            prompt: number;
+            rationale: number;
+            choicesWithPlacementArea: number;
+            choicesWithoutPlacementArea: number;
+        };
+        maxImageHeight: {
+            teacherInstructions: number;
+            prompt: number;
+            rationale: number;
+            choices: number;
+        };
+        withRubric: {
+            settings: boolean;
+            label: string;
+        };
+        mathMlOptions: {
+            mmlOutput: boolean;
+            mmlEditing: boolean;
+        };
+        language: {
+            settings: boolean;
+            label: string;
+            enabled: boolean;
+        };
+        languageChoices: {
+            label: string;
+            options: never[];
+        };
+    };
+};
+export default _default;