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

package/dist/author/choice-editor.js

@@ -1,7 +1,6 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
-import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/shuffle.js";
-import n from "./choice-tile.js";
-import r from "react";
+import { ChoiceTile as 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";
@@ -48,7 +47,7 @@ var b = o("div")({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), T = class extends r.Component {
+})), T = class extends t.Component {
 	static propTypes = {
 		correctResponse: a.array.isRequired,
 		choices: a.array.isRequired,
@@ -69,8 +68,8 @@ var b = o("div")({
 		spellCheck: a.bool
 	};
 	state = { warning: { open: !1 } };
-	constructor(n) {
-		super(n), this.onChoiceChange = (e) => {
+	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],
@@ -99,14 +98,14 @@ var b = o("div")({
 				n(e.concat([i]), t.concat([a]));
 			}
 		}, this.shuffleChoices = () => {
-			let { onChange: n, choices: r, correctResponse: i, placementArea: a } = this.props, o = t(r);
-			!a && e(o.map((e) => e.id), i.map((e) => e.id)) ? n(t(o), i) : n(o, i);
+			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: e, choices: t, 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 = {
+		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(${t.length}, 1fr)`
+			gridTemplateRows: `repeat(${n.length}, auto)`
 		};
 		return /* @__PURE__ */ u("div", { children: [
 			/* @__PURE__ */ u(S, {
@@ -115,22 +114,22 @@ var b = o("div")({
 			}),
 			/* @__PURE__ */ l(S, {
 				style: E,
-				children: _.tiles.map((e, o) => /* @__PURE__ */ l(n, {
-					choice: e,
+				children: _.tiles.map((t, o) => /* @__PURE__ */ l(e, {
+					choice: t,
 					index: o,
 					imageSupport: r,
-					onDelete: this.onDelete.bind(this, e),
+					onDelete: this.onDelete.bind(this, t),
 					onChoiceChange: this.onChoiceChange,
 					toolbarOpts: i,
 					pluginProps: a,
-					choices: t,
+					choices: n,
 					choicesLabel: c,
 					spellCheck: f,
 					maxImageWidth: p,
 					maxImageHeight: m,
-					error: y?.[e.id] || T && " " || null,
+					error: y?.[t.id] || T && " " || null,
 					mathMlOptions: g
-				}, `${e.type}-${e.id}`))
+				}, `${t.type}-${t.id}`))
 			}),
 			T && /* @__PURE__ */ l(w, { children: T }),
 			/* @__PURE__ */ u(b, { children: [/* @__PURE__ */ l(x, {

package/dist/author/choice-tile.js

@@ -70,7 +70,8 @@ var m = n("div")(({ theme: e }) => ({
 				children: [/* @__PURE__ */ s("div", {
 					style: {
 						width: "100%",
-						display: "flex"
+						display: "flex",
+						alignItems: "center"
 					},
 					children: [
 						/* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(_, {}) }),
@@ -129,4 +130,4 @@ x.propTypes = {
 	mathMlOptions: t.object
 };
 //#endregion
-export { x as default };
+export { x as ChoiceTile, x as default };

package/dist/author/design.js

@@ -1,8 +1,7 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
-import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
-import n from "./choice-editor.js";
-import { buildTiles as r, generateValidationMessage as i, normalizeIndex as a, updateResponseOrChoices as o } from "./utils.js";
-import s from "react";
+import e from "./choice-editor.js";
+import { buildTiles as t, generateValidationMessage as n, normalizeIndex as r, updateResponseOrChoices as i } from "./utils.js";
+import a from "react";
+import { cloneDeep as o, isEmpty as s } from "@pie-element/shared-lodash";
 import c from "debug";
 import l from "prop-types";
 import { styled as u } from "@mui/material/styles";
@@ -40,47 +39,47 @@ var x = c("@pie-element:placement-ordering:design"), { Panel: ie, toggle: S, rad
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), w = class extends s.Component {
+})), w = class extends a.Component {
 	static propTypes = { uploadSoundSupport: l.object };
 	static defaultProps = {};
-	constructor(t) {
-		super(t), this.applyUpdate = (t) => {
-			let { model: n, onModelChanged: r } = this.props;
-			r(t(e(n)));
+	constructor(e) {
+		super(e), this.applyUpdate = (e) => {
+			let { model: t, onModelChanged: n } = this.props;
+			n(e(o(t)));
 		}, this.changeHandler = (e, t) => (n) => {
 			x("[changeHandler] value: ", n);
 			let r = t ? m(n, t) : n;
 			this.applyUpdate((t) => (h(t, e, r), t));
-		}, this.onPromptChange = this.changeHandler("prompt"), this.onTeacherInstructionsChange = this.changeHandler("teacherInstructions"), this.onRationaleChange = this.changeHandler("rationale"), this.onChoiceAreaLabelChange = this.changeHandler("choiceLabel", "target.value"), this.onAnswerAreaLabelChange = this.changeHandler("targetLabel", "target.value"), this.onFeedbackChange = this.changeHandler("feedback"), this.onChoiceEditorChange = (t, n) => {
-			let { model: r, onModelChanged: i } = this.props, a = e(r);
-			a.choices = t, a.correctResponse = n, i(a);
+		}, this.onPromptChange = this.changeHandler("prompt"), this.onTeacherInstructionsChange = this.changeHandler("teacherInstructions"), this.onRationaleChange = this.changeHandler("rationale"), this.onChoiceAreaLabelChange = this.changeHandler("choiceLabel", "target.value"), this.onAnswerAreaLabelChange = this.changeHandler("targetLabel", "target.value"), this.onFeedbackChange = this.changeHandler("feedback"), this.onChoiceEditorChange = (e, t) => {
+			let { model: n, onModelChanged: r } = this.props, i = o(n);
+			i.choices = e, i.correctResponse = t, r(i);
 		};
 	}
 	componentDidMount() {
-		let { model: t, onModelChanged: n } = this.props || {}, { feedback: r } = t || {}, i = e(t);
-		r || (i.feedbackEnabled = !1, n(i));
+		let { model: e, onModelChanged: t } = this.props || {}, { feedback: n } = e || {}, r = o(e);
+		n || (r.feedbackEnabled = !1, t(r));
 	}
 	onDragEnd = (e, t) => {
-		let { active: n, over: r } = e;
-		if (!r || !n) return;
-		let i = r.data.current, s = n.data.current, c = t.tiles.find((e) => e.id === s.id && e.type === s.type), l = i, u = {
+		let { active: n, over: a } = e;
+		if (!a || !n) return;
+		let o = a.data.current, s = n.data.current, c = t.tiles.find((e) => e.id === s.id && e.type === s.type), l = o, u = {
 			...c,
-			index: a(c, t)
+			index: r(c, t)
 		}, d = {
 			...l,
-			index: a(l, t)
-		}, { response: f, choices: p } = o(t.response, t.choices, u, d);
+			index: r(l, t)
+		}, { response: f, choices: p } = i(t.response, t.choices, u, d);
 		this.onChoiceEditorChange(p, f);
 	};
 	render() {
-		let { model: e, imageSupport: a, uploadSoundSupport: o, onModelChanged: s, configuration: c, onConfigurationChanged: l } = this.props, { baseInputConfiguration: u = {}, choiceLabel: m = {}, choices: h = {}, contentDimensions: g = {}, feedback: _ = {}, prompt: v = {}, placementArea: y = {}, maxImageWidth: x = {}, maxImageHeight: w = {}, numberedGuides: T = {}, orientation: E = {}, partialScoring: D = {}, rationale: O = {}, removeTilesAfterPlacing: k = {}, settingsPanelDisabled: fe, studentInstructions: A = {}, spellCheck: j = {}, scoringType: M = {}, targetLabel: N = {}, teacherInstructions: P = {}, withRubric: F = {}, mathMlOptions: I = {}, language: L = {}, languageChoices: R = {} } = c || {}, { choiceLabelEnabled: pe, errors: z, extraCSSRules: me, feedbackEnabled: he, promptEnabled: ge, rationaleEnabled: _e, spellCheckEnabled: B, teacherInstructionsEnabled: ve, toolbarEditorPosition: ye, correctResponse: V } = e || {}, { prompt: H, rationale: U, teacherInstructions: W } = z || {}, G = {
-			choices: e.choices,
-			response: !V || t(V) ? Array(e.choices.length) : V,
-			tiles: r(e.choices, V)
-		}, be = i(), { singularLabel: K = "", pluralLabel: q = "" } = h?.label && se(h.label) || {}, J = x && x.prompt, Y = w && w.prompt, X = x && e.placementArea ? x.choicesWithPlacementArea : x.choicesWithoutPlacementArea || J, Z = w && w.choices || Y, Q = { position: ye === "top" ? "top" : "bottom" }, xe = {
+		let { model: r, imageSupport: i, uploadSoundSupport: a, onModelChanged: o, configuration: c, onConfigurationChanged: l } = this.props, { baseInputConfiguration: u = {}, choiceLabel: m = {}, choices: h = {}, contentDimensions: g = {}, feedback: _ = {}, prompt: v = {}, placementArea: y = {}, maxImageWidth: x = {}, maxImageHeight: w = {}, numberedGuides: T = {}, orientation: E = {}, partialScoring: D = {}, rationale: O = {}, removeTilesAfterPlacing: k = {}, settingsPanelDisabled: fe, studentInstructions: A = {}, spellCheck: j = {}, scoringType: M = {}, targetLabel: N = {}, teacherInstructions: P = {}, withRubric: F = {}, mathMlOptions: I = {}, language: L = {}, languageChoices: R = {} } = c || {}, { choiceLabelEnabled: pe, errors: z, extraCSSRules: me, feedbackEnabled: he, promptEnabled: ge, rationaleEnabled: _e, spellCheckEnabled: B, teacherInstructionsEnabled: ve, toolbarEditorPosition: ye, correctResponse: V } = r || {}, { prompt: H, rationale: U, teacherInstructions: W } = z || {}, G = {
+			choices: r.choices,
+			response: !V || s(V) ? Array(r.choices.length) : V,
+			tiles: t(r.choices, V)
+		}, be = n(), { singularLabel: K = "", pluralLabel: q = "" } = h?.label && se(h.label) || {}, J = x && x.prompt, Y = w && w.prompt, X = x && r.placementArea ? x.choicesWithPlacementArea : x.choicesWithoutPlacementArea || J, Z = w && w.choices || Y, Q = { position: ye === "top" ? "top" : "bottom" }, xe = {
 			choiceLabelEnabled: m.settings && S(m.label),
 			placementArea: y.settings && S(y.label),
-			numberedGuides: T.settings && e.placementArea && S(T.label),
+			numberedGuides: T.settings && r.placementArea && S(T.label),
 			orientation: E.settings && ae(E.label, ["vertical", "horizontal"]),
 			removeTilesAfterPlacing: k.settings && S(k.label),
 			partialScoring: D.settings && S(D.label),
@@ -106,9 +105,9 @@ var x = c("@pie-element:placement-ordering:design"), { Panel: ie, toggle: S, rad
 				dimensions: g,
 				hideSettings: fe,
 				settings: /* @__PURE__ */ d(ie, {
-					model: e,
+					model: r,
 					configuration: c,
-					onChangeModel: (e) => s(e),
+					onChangeModel: (e) => o(e),
 					onChangeConfiguration: (e) => l(e, !0),
 					groups: {
 						Settings: xe,
@@ -120,9 +119,9 @@ var x = c("@pie-element:placement-ordering:design"), { Panel: ie, toggle: S, rad
 						label: P.label,
 						children: [/* @__PURE__ */ d(b, {
 							className: "prompt",
-							markup: e.teacherInstructions || "",
+							markup: r.teacherInstructions || "",
 							onChange: this.onTeacherInstructionsChange,
-							imageSupport: a,
+							imageSupport: i,
 							nonEmpty: !1,
 							error: W,
 							toolbarOpts: Q,
@@ -130,7 +129,7 @@ var x = c("@pie-element:placement-ordering:design"), { Panel: ie, toggle: S, rad
 							spellCheck: B,
 							maxImageWidth: x && x.teacherInstructions || J,
 							maxImageHeight: w && w.teacherInstructions || Y,
-							uploadSoundSupport: o,
+							uploadSoundSupport: a,
 							languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 							mathMlOptions: I
 						}), W && /* @__PURE__ */ d("div", {
@@ -142,16 +141,16 @@ var x = c("@pie-element:placement-ordering:design"), { Panel: ie, toggle: S, rad
 						label: v && v.label,
 						children: [/* @__PURE__ */ d(b, {
 							className: "prompt",
-							markup: e.prompt,
+							markup: r.prompt,
 							onChange: this.onPromptChange,
-							imageSupport: a,
+							imageSupport: i,
 							error: H,
 							toolbarOpts: Q,
 							pluginProps: $(v?.inputConfiguration),
 							spellCheck: B,
 							maxImageWidth: x && x.prompt,
 							maxImageHeight: w && w.prompt,
-							uploadSoundSupport: o,
+							uploadSoundSupport: a,
 							languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 							mathMlOptions: I
 						}), H && /* @__PURE__ */ d("div", {
@@ -182,44 +181,44 @@ var x = c("@pie-element:placement-ordering:design"), { Panel: ie, toggle: S, rad
 							/* @__PURE__ */ f(ce, { children: [pe && /* @__PURE__ */ d(C, {
 								label: m && m.label && `${K} label`,
 								children: /* @__PURE__ */ d(b, {
-									...e.placementArea && { autoWidthToolbar: !0 },
+									...r.placementArea && { autoWidthToolbar: !0 },
 									className: "prompt",
-									markup: e.choiceLabel,
+									markup: r.choiceLabel,
 									onChange: this.onChoiceAreaLabelChange,
 									toolbarOpts: Q,
 									pluginProps: $(m?.inputConfiguration),
 									spellCheck: B,
 									maxImageWidth: X,
 									maxImageHeight: Z,
-									uploadSoundSupport: o,
+									uploadSoundSupport: a,
 									languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 									mathMlOptions: I
 								})
-							}), N.settings && e.placementArea && /* @__PURE__ */ d(C, {
+							}), N.settings && r.placementArea && /* @__PURE__ */ d(C, {
 								label: N && N.label && N.label,
 								children: /* @__PURE__ */ d(b, {
 									autoWidthToolbar: !0,
 									className: "prompt",
-									markup: e.targetLabel,
+									markup: r.targetLabel,
 									onChange: this.onAnswerAreaLabelChange,
 									toolbarOpts: Q,
 									spellCheck: B,
 									maxImageWidth: x && x.choicesWithPlacementArea || J,
 									maxImageHeight: Z,
-									uploadSoundSupport: o,
+									uploadSoundSupport: a,
 									languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 									mathMlOptions: I
 								})
 							})] }),
-							h.settings && /* @__PURE__ */ d(n, {
+							h.settings && /* @__PURE__ */ d(e, {
 								correctResponse: V,
-								choices: e.choices,
+								choices: r.choices,
 								onChange: this.onChoiceEditorChange,
-								imageSupport: a,
+								imageSupport: i,
 								toolbarOpts: Q,
 								pluginProps: $(h?.inputConfiguration),
 								choicesLabel: h.label,
-								placementArea: e.placementArea,
+								placementArea: r.placementArea,
 								singularChoiceLabel: K,
 								pluralChoiceLabel: q,
 								spellCheck: B,
@@ -235,24 +234,24 @@ var x = c("@pie-element:placement-ordering:design"), { Panel: ie, toggle: S, rad
 						label: O.label,
 						children: [/* @__PURE__ */ d(b, {
 							className: "prompt",
-							markup: e.rationale || "",
+							markup: r.rationale || "",
 							onChange: this.onRationaleChange,
-							imageSupport: a,
+							imageSupport: i,
 							error: U,
 							toolbarOpts: Q,
 							pluginProps: $(O?.inputConfiguration),
 							spellCheck: B,
 							maxImageWidth: x && x.rationale || J,
 							maxImageHeight: w && w.rationale || Y,
-							uploadSoundSupport: o,
+							uploadSoundSupport: a,
 							languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 							mathMlOptions: I
 						}), U && /* @__PURE__ */ d(de, { children: U })]
 					}),
 					he && /* @__PURE__ */ d(ne, {
-						feedback: e.feedback,
+						feedback: r.feedback,
 						onChange: this.onFeedbackChange,
-						imageSupport: a,
+						imageSupport: i,
 						toolbarOpts: Q
 					})
 				]
@@ -271,4 +270,4 @@ w.defaultProps = {
 	imageSupport: l.object
 };
 //#endregion
-export { w as default };
+export { w as Design, w as default };

package/dist/author/index.d.ts

@@ -41,5 +41,6 @@ export default class PlacementOrdering extends HTMLElement {
     insertSound(handler: any): void;
     onDeleteSound(src: any, done: any): void;
     _rerender(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/dist/author/index.js

@@ -1,32 +1,32 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/defaults.js";
-import t from "./design.js";
-import n from "./defaults.js";
-import r from "react";
-import { createRoot as i } from "react-dom/client";
+import { Design as e } from "./design.js";
+import t from "./defaults.js";
+import n from "react";
+import { createRoot as r } from "react-dom/client";
+import { defaults as i } from "@pie-element/shared-lodash";
 import { DeleteImageEvent as a, DeleteSoundEvent as o, InsertImageEvent as s, InsertSoundEvent as c, ModelUpdatedEvent as l } from "@pie-element/shared-configure-events";
 //#region src/author/index.ts
-var u = (t, r) => ({
-	configuration: e(t, n.configuration),
-	model: r
+var u = (e, n) => ({
+	configuration: i(e, t.configuration),
+	model: n
 }), d = (e) => e && e.map((e) => e.weight === void 0 ? {
 	id: e.id || e,
 	weight: 0
 } : {
 	id: e.id,
 	weight: e.weight
-}), f = class e extends HTMLElement {
+}), f = class i extends HTMLElement {
 	static createDefaultModel = (e = {}) => {
-		let t = d(e.correctResponse) || ((e) => e && e.map((e) => ({
+		let n = d(e.correctResponse) || ((e) => e && e.map((e) => ({
 			id: e.id,
 			weight: 0
 		})))(e.choices), r = {
-			...n.model,
+			...t.model,
 			...e
 		};
-		return t && (r.correctResponse = t), r;
+		return n && (r.correctResponse = n), r;
 	};
 	constructor() {
-		super(), this._root = null, this._model = e.createDefaultModel(), this._configuration = n.configuration, this.onModelChanged = (e, t) => {
+		super(), this._root = null, this._model = i.createDefaultModel(), this._configuration = t.configuration, this.onModelChanged = (e, t) => {
 			this._model = e, this._rerender(), this.dispatchUpdate(t);
 		}, this.onConfigurationChanged = (e) => {
 			this._configuration = u(e).configuration, this.onModelChanged(this._model), this._rerender();
@@ -39,15 +39,15 @@ var u = (t, r) => ({
 	dispatchUpdate(e) {
 		this.dispatchEvent(new l(this._model, e));
 	}
-	set model(t) {
-		this._model = e.createDefaultModel(t), this._rerender();
+	set model(e) {
+		this._model = i.createDefaultModel(e), this._rerender();
 	}
 	set configuration(e) {
-		let t = u(e, this._model);
-		this.onModelChanged(t.model);
+		let n = u(e, this._model);
+		this.onModelChanged(n.model);
 		let r = {
-			...n.configuration,
-			...t.configuration
+			...t.configuration,
+			...n.configuration
 		};
 		this._configuration = r, r?.language?.enabled ? r?.languageChoices?.options?.length && (this._model.language = r?.languageChoices.options[0].value) : r.language.settings && this._model.language ? (this._configuration.language.enabled = !0, (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) && (this._configuration.languageChoices.options = []), this._configuration.languageChoices.options.find((e) => e.value === this._model.language) || this._configuration.languageChoices.options.push({
 			value: this._model.language,
@@ -61,7 +61,7 @@ var u = (t, r) => ({
 		this.dispatchEvent(new o(e, t));
 	}
 	_rerender() {
-		let e = r.createElement(t, {
+		let t = n.createElement(e, {
 			model: this._model,
 			configuration: this._configuration,
 			onModelChanged: this.onModelChanged,
@@ -75,10 +75,13 @@ var u = (t, r) => ({
 				delete: this.onDeleteSound.bind(this)
 			}
 		});
-		this._root ||= i(this), this._root.render(e);
+		this._root ||= r(this), this._root.render(t);
+	}
+	connectedCallback() {
+		this._rerender();
 	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

package/dist/author/utils.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
+import { cloneDeep as e } from "@pie-element/shared-lodash";
 //#region src/author/utils.ts
 var t = () => "Validation requirements:\nThere should be at least 3 tokens.\nThe tokens should not be empty and should be unique.\nThe correct ordering should not be identical to the initial ordering.";
 function n(e, t) {