@pie-element/match 12.1.2-next.0 → 12.1.2-next.10

package/dist/author/add-row.js

@@ -21,4 +21,4 @@ var s = i(a)({
 	}
 };
 //#endregion
-export { l as default };
+export { l as AddRowButton, l as default };

package/dist/author/answer-config-block.js

@@ -1,31 +1,32 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/set.js";
-import { getPluginProps as t } from "./utils.js";
-import n from "./add-row.js";
+import { getPluginProps as e } from "./utils.js";
+import { clsx as t } from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { AddRowButton as n } from "./add-row.js";
 import r from "./row.js";
 import * as i from "react";
 import a from "prop-types";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import c from "@mui/material/Typography";
-import { styled as l } from "@mui/material/styles";
-import u from "debug";
-import d, { DEFAULT_PLUGINS as f } from "@pie-lib/editable-html-tip-tap";
-import p from "classnames";
-import { DragProvider as m } from "@pie-lib/drag";
+import { color as o } from "@pie-lib/render-ui";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "@mui/material/Typography";
+import { styled as u } from "@mui/material/styles";
+import { set as d } from "@pie-element/shared-lodash";
+import f from "debug";
+import p, { DEFAULT_PLUGINS as m } from "@pie-lib/editable-html-tip-tap";
+import { DragProvider as h } from "@pie-lib/drag";
 //#region src/author/answer-config-block.tsx
-var h = u("pie-elements:match:configure"), g = l("div")(({ theme: e }) => ({
+var g = f("pie-elements:match:configure"), _ = u("div")(({ theme: e }) => ({
 	marginBottom: e.spacing(2.5),
 	display: "flex",
 	flexDirection: "column"
-})), _ = l("div")(({ theme: e }) => ({
+})), v = u("div")(({ theme: e }) => ({
 	display: "flex",
 	alignItems: "center",
 	flex: 1,
 	width: "100%",
-	borderBottom: `2px solid ${e.palette.grey.A100}`,
+	borderBottom: `2px solid ${o.border()}`,
 	paddingBottom: e.spacing(2),
 	marginTop: e.spacing(2),
 	marginBottom: e.spacing(1)
-})), v = l("div")(({ theme: e }) => ({
+})), y = u("div")(({ theme: e }) => ({
 	flex: 1,
 	display: "flex",
 	justifyContent: "center",
@@ -36,26 +37,26 @@ var h = u("pie-elements:match:configure"), g = l("div")(({ theme: e }) => ({
 		padding: `0 ${e.spacing(1)}`,
 		textAlign: "center"
 	}
-})), y = l("div")(({ theme: e }) => ({
+})), b = u("div")(({ theme: e }) => ({
 	flex: .5,
 	minWidth: "45px",
 	padding: `0 ${e.spacing(1)}`
-})), b = l("div")({
+})), x = u("div")({
 	display: "flex",
 	flexDirection: "column"
-}), x = l("div")(({ theme: e }) => ({
+}), S = u("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: `${e.spacing(1)} !important`,
 	width: "fit-content !important"
-})), S = l("div")(({ theme: e }) => ({
+})), C = u("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingBottom: e.spacing(1)
-})), C = l("div")(({ theme: e }) => ({
+})), w = u("div")(({ theme: e }) => ({
 	"& .marginBottom": { marginBottom: e.typography.fontSize - 2 + e.spacing(1) },
 	"& .headerInput": { "& > div": { fontWeight: "bold" } }
-})), w = class extends i.Component {
+})), T = class extends i.Component {
 	static propTypes = {
 		model: a.object.isRequired,
 		configuration: a.object.isRequired,
@@ -79,7 +80,7 @@ var h = u("pie-elements:match:configure"), g = l("div")(({ theme: e }) => ({
 		let r = t.data.current, i = n.data.current;
 		if (r?.type === "row" && i?.type === "row") {
 			let e = r.index, t = i.index, { model: n, onChange: a } = this.props, o = { ...n }, s = o.rows || [];
-			h("[moveRow]: ", e, t);
+			g("[moveRow]: ", e, t);
 			let { movedRow: c, remainingRows: l } = s.reduce((t, n, r) => (r === e ? t.movedRow = n : t.remainingRows.push(n), t), {
 				movedRow: null,
 				remainingRows: []
@@ -88,12 +89,12 @@ var h = u("pie-elements:match:configure"), g = l("div")(({ theme: e }) => ({
 				c,
 				...l.slice(t)
 			];
-			h("update: ", u), o.rows = u, a(o);
+			g("update: ", u), o.rows = u, a(o);
 		}
 	};
-	onChange = (t, n) => ({ target: r }) => {
-		let { model: i, onChange: a } = this.props, o;
-		o = n ? r.checked : r.value, e(i, t, o), a(i, t);
+	onChange = (e, t) => ({ target: n }) => {
+		let { model: r, onChange: i } = this.props, a;
+		a = t ? n.checked : n.value, d(r, e, a), i(r, e);
 	};
 	onHeaderChange = (e) => (t) => {
 		let { model: n, onChange: r } = this.props, i = { ...n };
@@ -104,22 +105,22 @@ var h = u("pie-elements:match:configure"), g = l("div")(({ theme: e }) => ({
 		i.headers[e] = t, r(i);
 	};
 	render() {
-		let { model: e, onAddRow: i, imageSupport: a, configuration: l, toolbarOpts: u, spellCheck: h, uploadSoundSupport: w } = this.props, { baseInputConfiguration: T = {}, headers: E = {}, rows: D = {}, maxImageWidth: O = {}, maxImageHeight: k = {}, mathMlOptions: A = {}, minQuestions: j } = l || {}, { errors: M } = e || {}, { correctResponseError: N, rowsErrors: P, columnsErrors: F, noOfRowsError: I, columnsLengthError: L } = M || {}, R = (f || []).filter((e) => e !== "table" && e !== "bulleted-list" && e !== "numbered-list"), z = O && O.prompt, B = k && k.prompt;
-		return /* @__PURE__ */ o(C, { children: /* @__PURE__ */ o(m, {
+		let { model: i, onAddRow: a, imageSupport: o, configuration: u, toolbarOpts: d, spellCheck: f, uploadSoundSupport: g } = this.props, { baseInputConfiguration: T = {}, headers: E = {}, rows: D = {}, maxImageWidth: O = {}, maxImageHeight: k = {}, mathMlOptions: A = {}, minQuestions: j } = u || {}, { errors: M } = i || {}, { correctResponseError: N, rowsErrors: P, columnsErrors: F, noOfRowsError: I, columnsLengthError: L } = M || {}, R = (m || []).filter((e) => e !== "table" && e !== "bulleted-list" && e !== "numbered-list"), z = O && O.prompt, B = k && k.prompt;
+		return /* @__PURE__ */ s(w, { children: /* @__PURE__ */ s(h, {
 			onDragEnd: this.moveRow,
-			children: /* @__PURE__ */ s(g, { children: [/* @__PURE__ */ o(c, {
+			children: /* @__PURE__ */ c(_, { children: [/* @__PURE__ */ s(l, {
 				type: "body1",
 				component: "div",
 				children: "Click on the labels to edit or remove. Set the correct answers by clicking each correct answer per row."
-			}), /* @__PURE__ */ s(b, {
-				style: l.width ? {
-					width: l.width,
+			}), /* @__PURE__ */ c(x, {
+				style: u.width ? {
+					width: u.width,
 					overflow: "scroll"
 				} : {},
 				children: [
-					/* @__PURE__ */ s(_, { children: [E.settings && (e.headers || []).map((e, n) => /* @__PURE__ */ s(v, {
-						className: p({ questionText: n === 0 }),
-						sx: n === 0 ? {
+					/* @__PURE__ */ c(v, { children: [E.settings && (i.headers || []).map((n, r) => /* @__PURE__ */ c(y, {
+						className: t({ questionText: r === 0 }),
+						sx: r === 0 ? {
 							flex: 2,
 							display: "flex",
 							justifyContent: "flex-start",
@@ -132,45 +133,45 @@ var h = u("pie-elements:match:configure"), g = l("div")(({ theme: e }) => ({
 								minWidth: "200px"
 							}
 						} : {},
-						children: [/* @__PURE__ */ o(d, {
-							onChange: this.onHeaderChange(n),
-							markup: e,
-							className: F && !F[n] ? "marginBottom" : "headerInput",
+						children: [/* @__PURE__ */ s(p, {
+							onChange: this.onHeaderChange(r),
+							markup: n,
+							className: F && !F[r] ? "marginBottom" : "headerInput",
 							label: "column label",
 							activePlugins: R,
-							pluginProps: t(E?.inputConfiguration, T),
+							pluginProps: e(E?.inputConfiguration, T),
 							autoWidthToolbar: !0,
-							spellCheck: h,
-							uploadSoundSupport: w,
+							spellCheck: f,
+							uploadSoundSupport: g,
 							languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-							error: F && F[n]
-						}), F && F[n] && /* @__PURE__ */ o(x, { children: F[n] })]
-					}, n)), /* @__PURE__ */ o(y, {})] }),
-					e.rows.map((n, i) => /* @__PURE__ */ o(r, {
-						model: e,
-						row: n,
-						idx: i,
+							error: F && F[r]
+						}), F && F[r] && /* @__PURE__ */ s(S, { children: F[r] })]
+					}, r)), /* @__PURE__ */ s(b, {})] }),
+					i.rows.map((t, n) => /* @__PURE__ */ s(r, {
+						model: i,
+						row: t,
+						idx: n,
 						onDeleteRow: this.props.onDeleteRow,
 						onChange: this.props.onChange,
-						imageSupport: a,
-						toolbarOpts: u,
-						spellCheck: h,
-						error: P?.[n.id],
+						imageSupport: o,
+						toolbarOpts: d,
+						spellCheck: f,
+						error: P?.[t.id],
 						maxImageWidth: O && O.rowTitles || z,
 						maxImageHeight: k && k.rowTitles || B,
-						uploadSoundSupport: w,
+						uploadSoundSupport: g,
 						mathMlOptions: A,
 						minQuestions: j,
-						inputConfiguration: t(D?.inputConfiguration, T)
-					}, i)),
-					N && /* @__PURE__ */ o(S, { children: N }),
-					I && /* @__PURE__ */ o(S, { children: I }),
-					L && /* @__PURE__ */ o(S, { children: L }),
-					/* @__PURE__ */ o(n, { onAddClick: i })
+						inputConfiguration: e(D?.inputConfiguration, T)
+					}, n)),
+					N && /* @__PURE__ */ s(C, { children: N }),
+					I && /* @__PURE__ */ s(C, { children: I }),
+					L && /* @__PURE__ */ s(C, { children: L }),
+					/* @__PURE__ */ s(n, { onAddClick: a })
 				]
 			})] })
 		}) });
 	}
 };
 //#endregion
-export { w as default };
+export { T as default };

package/dist/author/index.d.ts

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

package/dist/author/index.js

@@ -1,37 +1,35 @@
-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 "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/set.js";
-import r from "./configure.js";
-import i from "./defaults.js";
-import a from "react";
-import { createRoot as o } from "react-dom/client";
+import e from "./configure.js";
+import t from "./defaults.js";
+import n from "react";
+import { createRoot as r } from "react-dom/client";
+import { cloneDeep as i, isEmpty as a, set as o } from "@pie-element/shared-lodash";
 import s from "debug";
 import { DeleteImageEvent as c, DeleteSoundEvent as l, InsertImageEvent as u, InsertSoundEvent as d, ModelUpdatedEvent as f } from "@pie-element/shared-configure-events";
 //#region src/author/index.ts
 var p = s("pie-elements:match:configure"), m = class s extends HTMLElement {
 	static createDefaultModel = (e = {}) => ({
-		...i.model,
+		...t.model,
 		...e
 	});
 	constructor() {
-		super(), this._root = null, this._model = s.createDefaultModel(), this._configuration = i.configuration;
+		super(), this._root = null, this._model = s.createDefaultModel(), this._configuration = t.configuration;
 	}
-	set model(t) {
-		this._model = s.createDefaultModel(t), this._modelCopy = e(this._model), this._render();
+	set model(e) {
+		this._model = s.createDefaultModel(e), this._modelCopy = i(this._model), this._render();
 	}
 	resetModelAfterConfigurationIsSet = () => {
 		let e = document.querySelectorAll("pie-author");
 		this.hasPlayerAsParent = Array.from(e).some((e) => e.contains(this)), this.hasPlayerAsParent && (this._modelCopy ? this._model = this._modelCopy : delete this._modelCopy);
 	};
 	set configuration(e) {
-		let r = {
-			...i.configuration,
+		let n = {
+			...t.configuration,
 			...e
 		};
-		this._configuration = r, this.resetModelAfterConfigurationIsSet(), 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({
+		this._configuration = n, this.resetModelAfterConfigurationIsSet(), n?.language?.enabled ? n?.languageChoices?.options?.length && (this._model.language = n?.languageChoices.options[0].value) : n.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,
 			label: this._model.language
-		})) : delete this._model.language, t(e?.rows?.inputConfiguration) && (n(this._configuration.rows, "inputConfiguration.image.disabled", !this._model?.enableImages), n(this._configuration.rows, "inputConfiguration.video.disabled", !0), n(this._configuration.rows, "inputConfiguration.audio.disabled", !0)), this._render();
+		})) : delete this._model.language, a(e?.rows?.inputConfiguration) && (o(this._configuration.rows, "inputConfiguration.image.disabled", !this._model?.enableImages), o(this._configuration.rows, "inputConfiguration.video.disabled", !0), o(this._configuration.rows, "inputConfiguration.audio.disabled", !0)), this._render();
 	}
 	onModelChanged(e) {
 		this._model = e, p("[onModelChanged]: ", this._model), this._render(), this.dispatchEvent(new f(this._model));
@@ -53,7 +51,7 @@ var p = s("pie-elements:match:configure"), m = class s extends HTMLElement {
 	}
 	_render() {
 		if (this._model) {
-			let e = a.createElement(r, {
+			let t = n.createElement(e, {
 				onModelChanged: this.onModelChanged.bind(this),
 				onConfigurationChanged: this.onConfigurationChanged.bind(this),
 				model: this._model,
@@ -67,11 +65,14 @@ var p = s("pie-elements:match:configure"), m = class s extends HTMLElement {
 					delete: this.onDeleteSound.bind(this)
 				}
 			});
-			this._root ||= o(this), this._root.render(e);
+			this._root ||= r(this), this._root.render(t);
 		}
 	}
+	connectedCallback() {
+		this._render();
+	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

package/dist/author/row.js

@@ -13,28 +13,28 @@ import m from "@mui/icons-material/Delete";
 import { useDraggable as h, useDroppable as g } from "@dnd-kit/core";
 //#region src/author/row.tsx
 s("@pie-element:categorize:configure:choice");
-var _ = o("span")({ cursor: "move" }), v = o("div")(({ theme: e }) => ({
+var _ = !1, v = o("span")({ cursor: "move" }), y = o("div")(({ theme: e }) => ({
 	marginTop: e.spacing(2),
 	display: "flex",
 	alignItems: "center",
 	flex: 1
-})), y = o("div")(({ theme: e }) => ({
+})), b = o("div")(({ theme: e }) => ({
 	flex: 1,
 	display: "flex",
 	justifyContent: "center",
 	alignItems: "center",
 	minWidth: "120px",
 	padding: `0 ${e.spacing(1)}`
-})), b = o(a)(({ theme: e, error: t }) => ({
+})), x = o(a)(({ theme: e, error: t }) => ({
 	"& input": { width: "100% !important" },
 	"&.MuiRadio-root": { color: `${t ? e.palette.error.main : n.tertiary()} !important` }
-})), x = o("div")(({ theme: e }) => ({
+})), S = o("div")(({ theme: e }) => ({
 	flex: .5,
 	display: "flex",
 	justifyContent: "center",
 	minWidth: "45px",
 	padding: `0 ${e.spacing(1)}`
-})), S = o(y)(({ theme: e }) => ({
+})), C = o(b)(({ theme: e }) => ({
 	flex: 2,
 	display: "flex",
 	justifyContent: "flex-start",
@@ -44,16 +44,16 @@ var _ = o("span")({ cursor: "move" }), v = o("div")(({ theme: e }) => ({
 	minWidth: "200px",
 	marginRight: e.spacing(1),
 	"&> div": { width: "100%" }
-})), C = o("hr")(({ theme: e }) => ({
+})), w = o("hr")(({ theme: e }) => ({
 	marginTop: e.spacing(2),
 	border: 0,
-	borderTop: `2px solid ${e.palette.grey.A100}`,
+	borderTop: `2px solid ${n.border()}`,
 	width: "100%"
-})), w = o("div")(({ theme: e }) => ({
+})), T = o("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), T = class extends e.Component {
+})), E = class extends e.Component {
 	static propTypes = {
 		model: t.object.isRequired,
 		row: t.object.isRequired,
@@ -100,20 +100,24 @@ var _ = o("span")({ cursor: "move" }), v = o("div")(({ theme: e }) => ({
 			text: `There should be at least ${r} question row` + (r > 1 ? "s" : "") + "."
 		} }) : n(e);
 	};
-	onMouseDownOnHandle = () => {};
-	onMouseUpOnHandle = () => {};
+	onMouseDownOnHandle = () => {
+		_ = !0;
+	};
+	onMouseUpOnHandle = () => {
+		_ = !1;
+	};
 	render() {
-		let { imageSupport: e, model: t, row: n, idx: a, inputConfiguration: o = {}, toolbarOpts: s, spellCheck: h, error: g, maxImageWidth: T, maxImageHeight: E, uploadSoundSupport: D, mathMlOptions: O = {} } = this.props, { dialog: k } = this.state, A = (d || []).filter((e) => e !== "bulleted-list" && e !== "numbered-list");
+		let { imageSupport: e, model: t, row: n, idx: a, inputConfiguration: o = {}, toolbarOpts: s, spellCheck: h, error: g, maxImageWidth: _, maxImageHeight: E, uploadSoundSupport: D, mathMlOptions: O = {} } = this.props, { dialog: k } = this.state, A = (d || []).filter((e) => e !== "bulleted-list" && e !== "numbered-list");
 		return /* @__PURE__ */ i("div", {
 			style: { width: "100%" },
 			children: [
-				/* @__PURE__ */ r(_, {
+				/* @__PURE__ */ r(v, {
 					itemID: "handle",
 					onMouseDown: this.onMouseDownOnHandle,
 					children: /* @__PURE__ */ r(f, { color: "primary" })
 				}),
-				/* @__PURE__ */ i(v, { children: [
-					/* @__PURE__ */ r(S, { children: /* @__PURE__ */ r(u, {
+				/* @__PURE__ */ i(y, { children: [
+					/* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(u, {
 						imageSupport: e,
 						autoWidthToolbar: !0,
 						disableUnderline: !0,
@@ -124,14 +128,14 @@ var _ = o("span")({ cursor: "move" }), v = o("div")(({ theme: e }) => ({
 						toolbarOpts: s,
 						activePlugins: A,
 						spellCheck: h,
-						maxImageWidth: T,
+						maxImageWidth: _,
 						maxImageHeight: E,
 						uploadSoundSupport: D,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						error: g && g !== "No correct response defined.",
 						mathMlOptions: O
 					}) }),
-					n.values.map((e, n) => /* @__PURE__ */ r(y, { children: t.choiceMode === "radio" ? /* @__PURE__ */ r(b, {
+					n.values.map((e, n) => /* @__PURE__ */ r(b, { children: t.choiceMode === "radio" ? /* @__PURE__ */ r(x, {
 						error: g?.includes("No correct response defined."),
 						onChange: this.onRowValueChange(a, n),
 						checked: e === !0
@@ -141,15 +145,15 @@ var _ = o("span")({ cursor: "move" }), v = o("div")(({ theme: e }) => ({
 						label: "",
 						error: g?.includes("No correct response defined.")
 					}) }, n)),
-					/* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(p, {
+					/* @__PURE__ */ r(S, { children: /* @__PURE__ */ r(p, {
 						onClick: this.onDeleteRow(a),
 						"aria-label": "Delete",
 						size: "large",
 						children: /* @__PURE__ */ r(m, {})
 					}) })
 				] }),
-				g && /* @__PURE__ */ r(w, { children: g }),
-				/* @__PURE__ */ r(C, {}),
+				g && /* @__PURE__ */ r(T, { children: g }),
+				/* @__PURE__ */ r(w, {}),
 				/* @__PURE__ */ r(c, {
 					open: k.open,
 					title: "Warning",
@@ -160,7 +164,7 @@ var _ = o("span")({ cursor: "move" }), v = o("div")(({ theme: e }) => ({
 		});
 	}
 };
-function E(e) {
+function D(e) {
 	let { attributes: t, listeners: n, setNodeRef: i, transform: a, transition: o, isDragging: s } = h({
 		id: `row-${e.row.id}`,
 		data: {
@@ -196,9 +200,9 @@ function E(e) {
 				t.closest("[contenteditable]") || t.closest("input") || t.closest("textarea") || t.isContentEditable || n?.onPointerDown?.(e);
 			},
 			...t,
-			children: /* @__PURE__ */ r(T, { ...e })
+			children: /* @__PURE__ */ r(E, { ...e })
 		})
 	});
 }
 //#endregion
-export { E as default };
+export { E as Row, _ as canDrag, D as default };