@pie-element/match 12.1.2-next.5 → 12.1.2-next.6

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 { getPluginProps as e } from "./utils.js";
-import t from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
-import n from "./add-row.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 { set as u } from "@pie-element/shared-lodash";
-import d from "debug";
-import f, { DEFAULT_PLUGINS as p } from "@pie-lib/editable-html-tip-tap";
-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 = d("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 = d("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 = d("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 = d("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 = (e, t) => ({ target: n }) => {
 		let { model: r, onChange: i } = this.props, a;
-		a = t ? n.checked : n.value, u(r, e, a), i(r, e);
+		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,20 +105,20 @@ var h = d("pie-elements:match:configure"), g = l("div")(({ theme: e }) => ({
 		i.headers[e] = t, r(i);
 	};
 	render() {
-		let { model: i, onAddRow: a, imageSupport: l, configuration: u, toolbarOpts: d, spellCheck: h, uploadSoundSupport: w } = 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 = (p || []).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, {
+			}), /* @__PURE__ */ c(x, {
 				style: u.width ? {
 					width: u.width,
 					overflow: "scroll"
 				} : {},
 				children: [
-					/* @__PURE__ */ s(_, { children: [E.settings && (i.headers || []).map((n, r) => /* @__PURE__ */ s(v, {
+					/* @__PURE__ */ c(v, { children: [E.settings && (i.headers || []).map((n, r) => /* @__PURE__ */ c(y, {
 						className: t({ questionText: r === 0 }),
 						sx: r === 0 ? {
 							flex: 2,
@@ -132,7 +133,7 @@ var h = d("pie-elements:match:configure"), g = l("div")(({ theme: e }) => ({
 								minWidth: "200px"
 							}
 						} : {},
-						children: [/* @__PURE__ */ o(f, {
+						children: [/* @__PURE__ */ s(p, {
 							onChange: this.onHeaderChange(r),
 							markup: n,
 							className: F && !F[r] ? "marginBottom" : "headerInput",
@@ -140,37 +141,37 @@ var h = d("pie-elements:match:configure"), g = l("div")(({ theme: e }) => ({
 							activePlugins: R,
 							pluginProps: e(E?.inputConfiguration, T),
 							autoWidthToolbar: !0,
-							spellCheck: h,
-							uploadSoundSupport: w,
+							spellCheck: f,
+							uploadSoundSupport: g,
 							languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 							error: F && F[r]
-						}), F && F[r] && /* @__PURE__ */ o(x, { children: F[r] })]
-					}, r)), /* @__PURE__ */ o(y, {})] }),
-					i.rows.map((t, n) => /* @__PURE__ */ o(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: l,
+						imageSupport: o,
 						toolbarOpts: d,
-						spellCheck: h,
+						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: e(D?.inputConfiguration, T)
 					}, n)),
-					N && /* @__PURE__ */ o(S, { children: N }),
-					I && /* @__PURE__ */ o(S, { children: I }),
-					L && /* @__PURE__ */ o(S, { children: L }),
-					/* @__PURE__ */ o(n, { onAddClick: a })
+					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

@@ -68,8 +68,11 @@ var p = s("pie-elements:match:configure"), m = class s extends HTMLElement {
 			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 };