@pie-element/categorize 13.1.11 → 13.2.0-next.9

package/dist/author/design/index.js

@@ -0,0 +1,427 @@
+import { getPluginProps as e } from "./utils.js";
+import { ChoicePreview as t } from "./categories/choice-preview.js";
+import { Header as n } from "./header.js";
+import { getMaxCategoryChoices as r, multiplePlacements as i } from "../utils.js";
+import { Categories as a } from "./categories/index.js";
+import { AlternateResponses as o } from "./categories/alternateResponses.js";
+import s from "./choices/choice.js";
+import { Choices as c } from "./choices/index.js";
+import { buildAlternateResponses as l, buildCategories as u } from "./builder.js";
+import d from "react";
+import { renderMath as f } from "@pie-element/shared-math-rendering-mathjax";
+import p from "prop-types";
+import { styled as m } from "@mui/material/styles";
+import { DragOverlay as ee } from "@dnd-kit/core";
+import { countInAnswer as h, ensureNoExtraChoicesInAlternate as g, ensureNoExtraChoicesInAnswer as _, moveChoiceToAlternate as v, moveChoiceToCategory as y, removeChoiceFromAlternate as b, removeChoiceFromCategory as x, verifyAllowMultiplePlacements as S } from "@pie-lib/categorize";
+import { DragProvider as te, uid as C } from "@pie-lib/drag";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import E from "@pie-lib/translator";
+import { AlertDialog as ne, FeedbackConfig as re, InputContainer as D, layout as ie, settings as O } from "@pie-lib/config-ui";
+import k from "@pie-lib/editable-html-tip-tap";
+//#region src/author/design/index.tsx
+var { translator: ae } = E, { dropdown: A, Panel: oe, toggle: j, radio: M, numberField: N } = O, { Provider: se } = C, ce = class extends d.Component {
+	containerRef = d.createRef();
+	componentDidMount() {
+		this.containerRef.current && setTimeout(() => f(this.containerRef.current), 0);
+	}
+	render() {
+		return /* @__PURE__ */ w("div", {
+			ref: this.containerRef,
+			children: this.props.children
+		});
+	}
+}, le = m(n)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), P = m(D)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(1),
+	marginTop: e.spacing(1),
+	marginBottom: e.spacing(2)
+})), F = m("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), I = class extends d.Component {
+	static propTypes = {
+		configuration: p.object,
+		className: p.string,
+		onConfigurationChanged: p.func,
+		model: p.object.isRequired,
+		onChange: p.func.isRequired,
+		uid: p.string,
+		imageSupport: p.shape({
+			add: p.func.isRequired,
+			delete: p.func.isRequired
+		}),
+		uploadSoundSupport: p.shape({
+			add: p.func.isRequired,
+			delete: p.func.isRequired
+		})
+	};
+	constructor(e) {
+		super(e), this.uid = e.uid || C.generateId(), this.state = { activeDragItem: null };
+	}
+	updateModel = (e) => {
+		let { model: t, onChange: n } = this.props, r = {
+			...t,
+			...e
+		};
+		r.choices = r.choices.map((e) => ({
+			...e,
+			categoryCount: this.checkAllowMultiplePlacements(r.allowMultiplePlacementsEnabled, e)
+		})), r.correctResponse = _(r.correctResponse || [], r.choices), r.correctResponse = g(r.correctResponse || [], r.choices), r.categories = r.categories.map((e) => ({
+			id: e.id,
+			label: e.label
+		})), r.choices = r.choices.map((e) => ({
+			id: e.id,
+			content: e.content,
+			categoryCount: e.categoryCount
+		})), r.maxChoicesPerCategory = r.allowMaxChoicesPerCategory ? r.maxChoicesPerCategory : 0, n(r);
+	};
+	changeRationale = (e) => {
+		let { model: t, onChange: n } = this.props;
+		n({
+			...t,
+			rationale: e
+		});
+	};
+	changeTeacherInstructions = (e) => {
+		let { model: t, onChange: n } = this.props;
+		n({
+			...t,
+			teacherInstructions: e
+		});
+	};
+	changeFeedback = (e) => {
+		this.updateModel({ feedback: e });
+	};
+	onAddAlternateResponse = () => {
+		let { model: { correctResponse: e } } = this.props;
+		this.updateModel({ correctResponse: (e || []).map((e) => ({
+			...e,
+			alternateResponses: [...e.alternateResponses || [], []]
+		})) });
+	};
+	onPromptChanged = (e) => this.updateModel({ prompt: e });
+	onRemoveAlternateResponse = (e) => {
+		let { model: { correctResponse: t } } = this.props;
+		this.updateModel({ correctResponse: (t || []).map((t) => ({
+			...t,
+			alternateResponses: (t.alternateResponses || []).filter((t, n) => n !== e)
+		})) });
+	};
+	countChoiceInCorrectResponse = (e) => {
+		let { model: t } = this.props;
+		return h(e.id, t.correctResponse);
+	};
+	checkAllowMultiplePlacements = (e, t) => e === i.enabled ? 0 : e === i.disabled ? 1 : t.categoryCount || 0;
+	isAlertModalOpened = () => {
+		let { model: e } = this.props, { maxChoicesPerCategory: t = 0 } = e || {}, n = r(e);
+		return t !== 0 && n > t;
+	};
+	onAlertModalCancel = () => {
+		let { model: e } = this.props, t = r(e);
+		this.updateModel({ maxChoicesPerCategory: t });
+	};
+	onDragStart = (e) => {
+		let { active: t } = e, n = t.data.current;
+		this.setState({ activeDragItem: n });
+	};
+	onDragEnd = ({ active: e, over: t }) => {
+		let n = window.scrollX, r = window.scrollY;
+		if (this.setState({ activeDragItem: null }), !e) return;
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				window.scrollTo(n, r);
+			});
+		});
+		let { model: i } = this.props, { allowAlternateEnabled: a, categories: o = [], choices: s = [] } = i, c = e?.data?.current, l = t?.data?.current;
+		if (!c) return;
+		let u = c.choiceIndex || 0, d = l?.type, f = c.type === "choice-preview", p = c.type === "choice", m = c.choice?.id || (typeof c.id == "string" ? c.id.split("-")[0] : c.id);
+		if (f && (!l || d === "choice")) {
+			this.removeChoiceFromSource(c, u, {
+				allowAlternateEnabled: a,
+				categories: o,
+				choices: s
+			});
+			return;
+		}
+		if (f && d === "category") return this.moveChoice(m, c.categoryId, l.id, u);
+		if (p && d === "category") return this.addChoiceToCategory({ id: c.id }, l.id);
+		if (f && d === "category-alternate") return this.moveChoiceInAlternate(m, c.categoryId, l.id, u, l.alternateResponseIndex);
+		if (a && p && d === "category-alternate") return this.addChoiceToAlternateCategory({ id: c.id }, l.id, l.alternateResponseIndex);
+	};
+	removeChoiceFromSource = (e, t, { allowAlternateEnabled: n, categories: r, choices: i }) => {
+		if (e.alternateResponseIndex === void 0) {
+			this.deleteChoiceFromCategory(e.categoryId, e.choiceId, t);
+			return;
+		}
+		if (!n) return;
+		let a = r?.find((t) => t.id === e.categoryId), o = i?.find((t) => t.id === e.choiceId);
+		a && o && this.deleteChoiceFromAlternateCategory(a, o, t, e.alternateResponseIndex);
+	};
+	addChoiceToCategory = (e, t) => {
+		let { model: n } = this.props, { choices: i = [], correctResponse: a = [], maxChoicesPerCategory: o = 0 } = n || {}, s = (i || []).find((t) => t.id === e.id), c = y(e.id, void 0, t, 0, a);
+		s.categoryCount !== 0 && (c = S(e, t, c));
+		let l = r(n);
+		this.updateModel({
+			correctResponse: c,
+			maxChoicesPerCategory: o !== 0 && o < l ? o + 1 : o
+		});
+	};
+	deleteChoiceFromCategory = (e, t, n) => {
+		let { model: r } = this.props, i = x(t, e, n, r.correctResponse);
+		this.updateModel({ correctResponse: i });
+	};
+	moveChoice = (e, t, n, i) => {
+		let { model: a } = this.props, { choices: o, correctResponse: s = [], maxChoicesPerCategory: c = 0 } = a || {}, l = (o || []).find((t) => t.id === e);
+		if (n === t || !l) return;
+		l.categoryCount === 0 ? l.categoryCount === 0 && (s = y(l.id, void 0, n, 0, s)) : (s = y(l.id, t, n, i, s), s = S(l, n, s));
+		let u = r(a);
+		this.updateModel({
+			correctResponse: s,
+			maxChoicesPerCategory: c !== 0 && c < u ? c + 1 : c
+		});
+	};
+	addChoiceToAlternateCategory = (e, t, n) => {
+		let { model: i } = this.props, { correctResponse: a, choices: o, maxChoicesPerCategory: s = 0 } = i, c = o.find((t) => t.id === e.id);
+		a.forEach((r) => r.category === t ? (r.alternateResponses = r.alternateResponses || [], r.alternateResponses[n] === void 0 && (r.alternateResponses[n] = []), r.alternateResponses[n].push(e.id), c.categoryCount && c.categoryCount !== 0 && (r.alternateResponses[n] = r.alternateResponses[n].reduce((e, t) => (t === c.id ? e.findIndex((e) => e === c.id) === -1 && e.push(t) : e.push(t), e), [])), r) : (r.alternateResponses[n] && c.categoryCount !== 0 && (r.alternateResponses[n] = r.alternateResponses[n].filter((t) => t !== e.id)), r));
+		let l = r(i);
+		this.updateModel({
+			correctResponse: a,
+			maxChoicesPerCategory: s !== 0 && s < l ? s + 1 : s
+		});
+	};
+	moveChoiceInAlternate = (e, t, n, i, a) => {
+		let { model: o } = this.props, { choices: s, correctResponse: c = [], maxChoicesPerCategory: l = 0 } = o || {}, u = (s || []).find((t) => t.id === e);
+		c = v(e, t, n, i, c, a, u?.categoryCount);
+		let d = r(o);
+		this.updateModel({
+			correctResponse: c,
+			maxChoicesPerCategory: l !== 0 && l < d ? l + 1 : l
+		});
+	};
+	deleteChoiceFromAlternateCategory = (e, t, n, r) => {
+		let { model: i } = this.props, a = b(t.id, e.id, n, r, i.correctResponse);
+		this.updateModel({ correctResponse: a });
+	};
+	renderDragOverlay = () => {
+		let { activeDragItem: e } = this.state, { model: n, configuration: r } = this.props;
+		if (!e) return null;
+		if (e.type === "choice") {
+			let t = n.choices?.find((t) => t.id === e.id);
+			return t ? /* @__PURE__ */ w(s, {
+				choice: t,
+				configuration: r
+			}) : null;
+		} else if (e.type === "choice-preview" && e.alternateResponseIndex === void 0) {
+			let r = n.choices?.find((t) => t.id === e.id);
+			return r ? /* @__PURE__ */ w(t, { choice: r }) : null;
+		} else if (e.type === "choice-preview" && e.alternateResponseIndex !== void 0) {
+			let r = n.choices?.find((t) => t.id === e.id);
+			return r ? /* @__PURE__ */ w(t, {
+				choice: r,
+				alternateResponseIndex: e.alternateResponseIndex
+			}) : null;
+		}
+		return null;
+	};
+	render() {
+		let { configuration: t, imageSupport: n, model: r, uploadSoundSupport: s, onConfigurationChanged: f } = this.props, { allowAlternate: p = {}, allowMultiplePlacements: m = {}, baseInputConfiguration: h = {}, categoriesPerRow: g = {}, choicesPosition: _ = {}, contentDimensions: v = {}, feedback: y = {}, lockChoiceOrder: b = {}, maxImageHeight: x = {}, maxImageWidth: S = {}, maxPlacements: C = {}, minCategoriesPerRow: E = 1, partialScoring: D = {}, prompt: O = {}, rationale: I = {}, scoringType: L = {}, settingsPanelDisabled: ue, spellCheck: R = {}, studentInstructions: z = {}, teacherInstructions: B = {}, withRubric: V = {}, mathMlOptions: H = {}, language: U = {}, languageChoices: W = {}, allowMaxAnswerChoices: de = {} } = t || {}, { allowAlternateEnabled: fe, allowMaxChoicesPerCategory: pe, errors: me, feedbackEnabled: he, maxChoicesPerCategory: ge, promptEnabled: _e, rationaleEnabled: ve, spellCheckEnabled: G, teacherInstructionsEnabled: ye, toolbarEditorPosition: be, extraCSSRules: xe } = r || {}, { prompt: K, rationale: q, teacherInstructions: J } = me || {}, Y = { position: be === "top" ? "top" : "bottom" }, Se = r.config || {};
+		Se.choices = Se.choices || {
+			label: "",
+			columns: 2
+		};
+		let Ce = u(r.categories || [], r.choices || [], r.correctResponse || []), we = l(r.categories || [], r.choices || [], r.correctResponse || []), X = (() => {
+			if (r.allowMultiplePlacementsEnabled != null) return r.allowMultiplePlacementsEnabled;
+			let e = (r.correctResponse || []).flatMap((e) => e.choices || []);
+			return e.length === new Set(e).size ? i.disabled : i.enabled;
+		})(), Z = r.choices.map((e) => (e.correctResponseCount = this.countChoiceInCorrectResponse(e), e.categoryCount = this.checkAllowMultiplePlacements(X, e), e)), Q = S && S.prompt, $ = x && x.prompt, Te = {
+			partialScoring: D.settings && j(D.label),
+			lockChoiceOrder: b.settings && j(b.label),
+			categoriesPerRow: g.settings && N(g.label, {
+				label: g.label,
+				min: E,
+				max: 6
+			}),
+			choicesPosition: _.settings && M(_.label, [
+				"below",
+				"above",
+				"left",
+				"right"
+			]),
+			allowMultiplePlacementsEnabled: m.settings && A(m.label, [
+				i.enabled,
+				i.disabled,
+				i.perChoice
+			]),
+			maxAnswerChoices: de.settings && N(de.label, {
+				label: "",
+				min: Z?.length || 0,
+				max: 30
+			}),
+			allowMaxChoicesPerCategory: C.settings && j(C.label),
+			maxChoicesPerCategory: pe === !0 && N(C.label, {
+				label: "",
+				min: 0,
+				max: 30
+			}),
+			promptEnabled: O.settings && j(O.label),
+			feedbackEnabled: y.settings && j(y.label),
+			allowAlternateEnabled: p.settings && j(p.label),
+			"language.enabled": U.settings && j(U.label, !0),
+			language: U.settings && U.enabled && A(W.label, W.options)
+		}, Ee = {
+			teacherInstructionsEnabled: B.settings && j(B.label),
+			studentInstructionsEnabled: z.settings && j(z.label),
+			rationaleEnabled: I.settings && j(I.label),
+			spellCheckEnabled: R.settings && j(R.label),
+			scoringType: L.settings && M(L.label, ["auto", "rubric"]),
+			rubricEnabled: V?.settings && j(V?.label)
+		}, De = this.isAlertModalOpened(), Oe = ae.t("translation:categorize:maxChoicesPerCategoryRestriction", {
+			lng: r.language,
+			maxChoicesPerCategory: ge
+		});
+		return /* @__PURE__ */ w(te, {
+			onDragStart: this.onDragStart,
+			onDragEnd: this.onDragEnd,
+			children: /* @__PURE__ */ T(se, {
+				value: this.uid,
+				children: [/* @__PURE__ */ T(ie.ConfigLayout, {
+					extraCSSRules: xe,
+					dimensions: v,
+					hideSettings: ue,
+					settings: /* @__PURE__ */ w(oe, {
+						model: {
+							...r,
+							allowMultiplePlacementsEnabled: X
+						},
+						onChangeModel: this.updateModel,
+						configuration: t,
+						onChangeConfiguration: f,
+						groups: {
+							Settings: Te,
+							Properties: Ee
+						},
+						modal: /* @__PURE__ */ w(ne, {
+							title: "Warning",
+							text: Oe,
+							open: De,
+							onClose: this.onAlertModalCancel
+						})
+					}),
+					children: [
+						ye && /* @__PURE__ */ T(P, {
+							label: B.label,
+							children: [/* @__PURE__ */ w(k, {
+								markup: r.teacherInstructions || "",
+								onChange: this.changeTeacherInstructions,
+								imageSupport: n,
+								error: J,
+								nonEmpty: !1,
+								toolbarOpts: Y,
+								pluginProps: e(B?.inputConfiguration, h),
+								spellCheck: G,
+								maxImageWidth: S && S.teacherInstructions || Q,
+								maxImageHeight: x && x.teacherInstructions || $,
+								uploadSoundSupport: s,
+								languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+								mathMlOptions: H
+							}), J && /* @__PURE__ */ w(F, { children: J })]
+						}),
+						_e && /* @__PURE__ */ T(P, {
+							label: O.label,
+							children: [/* @__PURE__ */ w(k, {
+								markup: r.prompt || "",
+								onChange: this.onPromptChanged,
+								imageSupport: n,
+								error: K,
+								nonEmpty: !1,
+								disableUnderline: !0,
+								toolbarOpts: Y,
+								pluginProps: e(O?.inputConfiguration, h),
+								spellCheck: G,
+								maxImageWidth: S && S.prompt,
+								maxImageHeight: x && x.prompt,
+								uploadSoundSupport: s,
+								languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+								mathMlOptions: H
+							}), K && /* @__PURE__ */ w(F, { children: K })]
+						}),
+						/* @__PURE__ */ w(a, {
+							imageSupport: n,
+							uploadSoundSupport: s,
+							model: r,
+							categories: Ce || [],
+							onModelChanged: this.updateModel,
+							toolbarOpts: Y,
+							spellCheck: G,
+							configuration: t,
+							defaultImageMaxWidth: Q,
+							defaultImageMaxHeight: $,
+							mathMlOptions: H
+						}),
+						/* @__PURE__ */ w(c, {
+							imageSupport: n,
+							uploadSoundSupport: s,
+							choices: Z,
+							model: {
+								...r,
+								allowMultiplePlacementsEnabled: X
+							},
+							onModelChanged: this.updateModel,
+							toolbarOpts: Y,
+							spellCheck: G,
+							configuration: t,
+							defaultImageMaxWidth: Q,
+							defaultImageMaxHeight: $
+						}),
+						fe && /* @__PURE__ */ w(le, {
+							label: "Alternate Responses",
+							buttonLabel: "ADD AN ALTERNATE RESPONSE",
+							onAdd: this.onAddAlternateResponse
+						}),
+						fe && we.map((e, i) => /* @__PURE__ */ T(d.Fragment, { children: [/* @__PURE__ */ w(le, {
+							variant: "subtitle1",
+							label: "Alternate Response",
+							buttonLabel: "REMOVE ALTERNATE RESPONSE",
+							onAdd: () => this.onRemoveAlternateResponse(i)
+						}), /* @__PURE__ */ w(o, {
+							altIndex: i,
+							imageSupport: n,
+							model: r,
+							configuration: t,
+							categories: e,
+							onModelChanged: this.updateModel,
+							uploadSoundSupport: s,
+							mathMlOptions: H
+						})] }, i)),
+						ve && /* @__PURE__ */ T(P, {
+							label: I.label,
+							children: [/* @__PURE__ */ w(k, {
+								markup: r.rationale || "",
+								onChange: this.changeRationale,
+								imageSupport: n,
+								error: q,
+								nonEmpty: !1,
+								toolbarOpts: Y,
+								pluginProps: e(O?.inputConfiguration, h),
+								spellCheck: G,
+								maxImageWidth: S && S.rationale || Q,
+								maxImageHeight: x && x.rationale || $,
+								uploadSoundSupport: s,
+								languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+								mathMlOptions: H
+							}), q && /* @__PURE__ */ w(F, { children: q })]
+						}),
+						he && /* @__PURE__ */ w(re, {
+							feedback: r.feedback,
+							onChange: this.changeFeedback,
+							toolbarOpts: Y
+						})
+					]
+				}), /* @__PURE__ */ w(ee, { children: /* @__PURE__ */ w(ce, { children: this.renderDragOverlay() }) })]
+			})
+		});
+	}
+};
+//#endregion
+export { I as Design, I as default };

package/dist/author/design/input-header.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/input-header.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 InputHeader extends React.Component {
+    static propTypes: {
+        configuration: PropTypes.Validator<object>;
+        deleteFocusedEl: PropTypes.Requireable<(...args: any[]) => any>;
+        disabled: PropTypes.Requireable<boolean>;
+        focusedEl: PropTypes.Requireable<number>;
+        index: PropTypes.Requireable<number>;
+        label: PropTypes.Requireable<string>;
+        maxImageWidth: PropTypes.Requireable<object>;
+        maxImageHeight: PropTypes.Requireable<object>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onDelete: PropTypes.Requireable<(...args: any[]) => any>;
+        imageSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        uploadSoundSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        toolbarOpts: PropTypes.Requireable<object>;
+        error: PropTypes.Requireable<string>;
+        spellCheck: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {};
+    constructor(props: any);
+    render(): React.JSX.Element;
+}
+export default InputHeader;

package/dist/author/design/input-header.js

@@ -0,0 +1,69 @@
+import { getPluginProps as e } from "./utils.js";
+import t from "react";
+import n from "prop-types";
+import { styled as r } from "@mui/material/styles";
+import { jsx as i } from "react/jsx-runtime";
+import a from "@pie-lib/editable-html-tip-tap";
+//#region src/author/design/input-header.tsx
+var o = r(a)({
+	flex: "1",
+	maxWidth: "100%"
+}), s = r("div")(({ theme: e }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	paddingBottom: e.spacing(1)
+})), c = class extends t.Component {
+	static propTypes = {
+		configuration: n.object.isRequired,
+		deleteFocusedEl: n.func,
+		disabled: n.bool,
+		focusedEl: n.number,
+		index: n.number,
+		label: n.string,
+		maxImageWidth: n.object,
+		maxImageHeight: n.object,
+		onChange: n.func,
+		onDelete: n.func,
+		imageSupport: n.shape({
+			add: n.func.isRequired,
+			delete: n.func.isRequired
+		}),
+		uploadSoundSupport: n.shape({
+			add: n.func.isRequired,
+			delete: n.func.isRequired
+		}),
+		toolbarOpts: n.object,
+		error: n.string,
+		spellCheck: n.bool
+	};
+	static defaultProps = {};
+	constructor(e) {
+		super(e);
+	}
+	render() {
+		let { onChange: t, configuration: n, label: r, deleteFocusedEl: a, disabled: c, imageSupport: l, toolbarOpts: u, spellCheck: d, error: f, maxImageWidth: p, maxImageHeight: m, uploadSoundSupport: h, mathMlOptions: g = {}, focusedEl: _, index: v } = this.props, { headers: y, baseInputConfiguration: b } = n;
+		return /* @__PURE__ */ i(s, { children: /* @__PURE__ */ i(o, {
+			imageSupport: l,
+			disabled: c,
+			autoFocus: _ != null && _ === v,
+			autoWidthToolbar: !0,
+			label: "label",
+			markup: r,
+			onChange: t,
+			pluginProps: e(y?.inputConfiguration, b),
+			toolbarOpts: u,
+			spellCheck: d,
+			error: f,
+			maxImageWidth: p,
+			maxImageHeight: m,
+			uploadSoundSupport: h,
+			languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+			onDone: () => {
+				a && a();
+			},
+			mathMlOptions: g
+		}) });
+	}
+};
+//#endregion
+export { c as InputHeader, c as default };

package/dist/author/design/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/utils.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.
+ */
+export declare const getPluginProps: (props?: {}, baseInputConfiguration?: {}) => {};

package/dist/author/design/utils.js

@@ -0,0 +1,7 @@
+//#region src/author/design/utils.ts
+var e = (e = {}, t = {}) => ({
+	...t,
+	...e
+});
+//#endregion
+export { e as getPluginProps };

package/dist/author/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @synced-from pie-elements/packages/categorize/configure/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.
+ */
+export default class CategorizeConfigure extends HTMLElement {
+    static createDefaultModel: (model?: {}) => {
+        allowAlternateEnabled: boolean;
+        allowMaxChoicesPerCategory: boolean;
+        alternates: never[];
+        categories: never[];
+        categoriesPerRow: number;
+        choices: never[];
+        choicesLabel: string;
+        choicesPosition: string;
+        correctResponse: never[];
+        feedbackEnabled: boolean;
+        lockChoiceOrder: boolean;
+        maxAnswerChoices: number;
+        maxChoicesPerCategory: number;
+        partialScoring: boolean;
+        promptEnabled: boolean;
+        rationaleEnabled: boolean;
+        rowLabels: string[];
+        studentInstructionsEnabled: boolean;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+        minRowHeight: string;
+    };
+    static disableAlternateResponses: (m: any) => any;
+    constructor();
+    set model(m: any);
+    set configuration(c: any);
+    onModelChanged(m: any): void;
+    onConfigurationChanged(c: any): void;
+    connectedCallback(): void;
+    /**
+     *
+     * @param {done, progress, file} handler
+     */
+    insertImage(handler: any): void;
+    onDeleteImage(src: any, done: any): void;
+    insertSound(handler: any): void;
+    onDeleteSound(src: any, done: any): void;
+    render(): void;
+    disconnectedCallback(): void;
+}

package/dist/author/index.js

@@ -0,0 +1,87 @@
+import { Main as e } from "./main.js";
+import t from "./defaults.js";
+import n from "react";
+import { createRoot as r } from "react-dom/client";
+import { renderMath as i } from "@pie-element/shared-math-rendering-mathjax";
+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 = class u extends HTMLElement {
+	static createDefaultModel = (e = {}) => ({
+		...t.model,
+		...e
+	});
+	static disableAlternateResponses = (e) => {
+		let { correctResponse: t } = e || {};
+		t ||= [];
+		let n = t.map((e) => {
+			let { alternateResponses: t, ...n } = e;
+			return n;
+		});
+		return {
+			...e,
+			correctResponse: n,
+			allowAlternateEnabled: !1
+		};
+	};
+	constructor() {
+		super(), this._root = null, this._model = u.createDefaultModel(), this._configuration = t.configuration;
+	}
+	set model(e) {
+		this._model = u.createDefaultModel(e), e.choices && e.choices.length >= e.maxAnswerChoices && (this._model.maxAnswerChoices = e.choices.length, console.warn("Max Answer Choices can't be less than choices length!")), this.render();
+	}
+	set configuration(e) {
+		let n = {
+			...t.configuration,
+			...e
+		};
+		this._configuration = n, 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, this.render();
+	}
+	onModelChanged(e) {
+		this._model = e, this.render(), this.dispatchEvent(new l(this._model, !1));
+	}
+	onConfigurationChanged(e) {
+		this._configuration = e, this.render();
+	}
+	connectedCallback() {
+		this.render();
+	}
+	insertImage(e) {
+		this.dispatchEvent(new s(e));
+	}
+	onDeleteImage(e, t) {
+		this.dispatchEvent(new a(e, t));
+	}
+	insertSound(e) {
+		this.dispatchEvent(new c(e));
+	}
+	onDeleteSound(e, t) {
+		this.dispatchEvent(new o(e, t));
+	}
+	render() {
+		let t = n.createElement(e, {
+			model: this._model,
+			configuration: this._configuration,
+			onModelChanged: this.onModelChanged.bind(this),
+			onConfigurationChanged: this.onConfigurationChanged.bind(this),
+			imageSupport: {
+				add: this.insertImage.bind(this),
+				delete: this.onDeleteImage.bind(this)
+			},
+			uploadSoundSupport: {
+				add: this.insertSound.bind(this),
+				delete: this.onDeleteSound.bind(this)
+			}
+		});
+		this._root ||= r(this), this._root.render(t), setTimeout(() => {
+			i(this);
+		}, 0);
+	}
+	disconnectedCallback() {
+		this._root &&= (this._root.unmount(), null);
+	}
+};
+//#endregion
+export { u as default };