@pie-element/number-line 0.1.0

package/dist/author/index.js

@@ -0,0 +1,89 @@
+import e from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/cloneDeep.js";
+import { configuration as t, model as n } from "./defaults.js";
+import r from "./main.js";
+import i from "react";
+import * as a from "mathjs";
+import { createRoot as o } from "react-dom/client";
+import { DeleteImageEvent as s, DeleteSoundEvent as c, InsertImageEvent as l, InsertSoundEvent as u, ModelUpdatedEvent as d } from "@pie-element/shared-configure-events";
+//#region src/author/index.ts
+var f = (e) => {
+	let { graph: { domain: t, labelStep: n, ticks: r = {} } = {} } = e, { minor: i, major: o } = r;
+	if (t && (t.min = Number((t.min || 0).toFixed(2)), t.max = Number((t.max || 0).toFixed(2))), n && typeof n == "string" && n.match(/^[1-9][0-9]*\/[1-9][0-9]*$/g)) {
+		e.graph.fraction = !0, r.tickIntervalType = "Fraction";
+		let t = a.evaluate(n);
+		t !== o && (r.major = t, r.minor = t / (o / i));
+	}
+	return e;
+}, p = class a extends HTMLElement {
+	static createDefaultModel = (e = {}) => {
+		let r = t, i = e.language || "";
+		return !i && r.language && r.language.enabled && r.languageChoices?.options?.length && (i = r.languageChoices.options[0].value), f({
+			...n,
+			...e,
+			language: i
+		});
+	};
+	constructor() {
+		super(), this._root = null, this._model = a.createDefaultModel(), this._configuration = t;
+	}
+	set model(t) {
+		this._model = a.createDefaultModel(t), this._modelCopy = e(this._model), this._rerender();
+	}
+	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 n = {
+			...t,
+			...e
+		};
+		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, this._rerender();
+	}
+	onChange = (e) => {
+		this._model = {
+			...this._model,
+			...e
+		}, this.dispatchEvent(new d(this._model)), this._rerender();
+	};
+	onConfigurationChanged = (e) => {
+		this._configuration = e, this._render();
+	};
+	insertImage(e) {
+		this.dispatchEvent(new l(e));
+	}
+	onDeleteImage(e, t) {
+		this.dispatchEvent(new s(e, t));
+	}
+	insertSound(e) {
+		this.dispatchEvent(new u(e));
+	}
+	onDeleteSound(e, t) {
+		this.dispatchEvent(new c(e, t));
+	}
+	_rerender() {
+		let e = i.createElement(r, {
+			model: this._model,
+			configuration: this._configuration,
+			onChange: this.onChange,
+			onConfigurationChanged: this.onConfigurationChanged,
+			imageSupport: {
+				add: this.insertImage.bind(this),
+				delete: this.onDeleteImage.bind(this)
+			},
+			uploadSoundSupport: {
+				add: this.insertSound.bind(this),
+				delete: this.onDeleteSound.bind(this)
+			}
+		});
+		this._root ||= o(this), this._root.render(e);
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { p as default };

package/dist/author/main.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/main.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 toPointType: (response: any) => string;
+export declare class Main extends React.Component {
+    static propTypes: {
+        model: PropTypes.Validator<object>;
+        configuration: PropTypes.Validator<object>;
+        onConfigurationChanged: PropTypes.Validator<(...args: any[]) => any>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        imageSupport: PropTypes.Validator<object>;
+        uploadSoundSupport: PropTypes.Validator<object>;
+    };
+    constructor(props: any);
+    componentDidMount(): void;
+    graphChange: any;
+    changeSize: ({ width, height }: {
+        width: any;
+        height: any;
+    }) => any;
+    getAdjustedHeight: any;
+    changeMaxNoOfPoints: any;
+    changeGraphTitle: (title: any) => any;
+    changeTicks: any;
+    reloadTicksData: any;
+    updateMajorValue: any;
+    changeArrows: (arrows: any) => any;
+    setDefaults: any;
+    moveCorrectResponse: any;
+    availableTypesChange: any;
+    deleteCorrectResponse: any;
+    addCorrectResponse: any;
+    clearCorrectResponse: any;
+    undoCorrectResponse: any;
+    render(): React.JSX.Element;
+}
+export default Main;
+//# sourceMappingURL=main.d.ts.map

package/dist/author/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/author/main.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAgFnC,eAAO,MAAM,WAAW,GAAI,aAAQ,WAcnC,CAAC;AAEF,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS;IACvC,MAAM,CAAC,SAAS;;;;;;;MAOd;gBAEU,KAAK,KAAA;IAqBjB,iBAAiB;IAUjB,WAAW,EAAE,GAAG,CAgCd;IAEF,UAAU,GAAI;;;KAAiB,SAAyC;IAExE,iBAAiB,EAAE,GAAG,CAWpB;IAEF,mBAAmB,EAAE,GAAG,CAmBtB;IAEF,gBAAgB,GAAI,UAAK,SAAiC;IAK1D,WAAW,EAAE,GAAG,CAUd;IASF,eAAe,EAAE,GAAG,CAmHlB;IAQF,gBAAgB,EAAE,GAAG,CAcnB;IAEF,YAAY,GAAI,WAAM,SAAkC;IAExD,WAAW,EAAE,GAAG,CAQd;IAEF,mBAAmB,EAAE,GAAG,CAStB;IAEF,oBAAoB,EAAE,GAAG,CAevB;IAEF,qBAAqB,EAAE,GAAG,CAKxB;IAEF,kBAAkB,EAAE,GAAG,CAMrB;IAEF,oBAAoB,EAAE,GAAG,CAIvB;IAEF,mBAAmB,EAAE,GAAG,CAKtB;IAEF,MAAM;CA+TP;AAED,eAAe,IAAI,CAAC"}

package/dist/author/main.js

@@ -0,0 +1,482 @@
+import { data_converter_exports as e } from "../delivery/data-converter.js";
+import t from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/cloneDeep.js";
+import { generateMajorValuesForMinor as n, generateMinorValues as r, getMinorLimits as i, snapElements as a } from "../delivery/number-line/graph/tick-utils.js";
+import o from "../delivery/number-line/index.js";
+import s from "./number-text-field.js";
+import c from "./card-bar.js";
+import ee from "./size.js";
+import l from "./domain.js";
+import te from "./arrows.js";
+import ne from "./point-config.js";
+import re from "./ticks.js";
+import { model as u } from "./defaults.js";
+import { generateValidationMessage as ie } from "./utils.js";
+import d from "react";
+import { styled as f } from "@mui/material/styles";
+import p from "prop-types";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import * as g from "mathjs";
+import { AlertDialog as _, FormSection as v, InputContainer as y, layout as ae, settings as b } from "@pie-lib/config-ui";
+import x from "@pie-lib/editable-html-tip-tap";
+import oe from "@mui/material/Tooltip";
+import S from "@mui/material/Typography";
+import se from "@mui/icons-material/Info";
+//#region src/author/main.tsx
+var C = (e) => ({
+	...e,
+	feedback: void 0,
+	prompt: void 0,
+	teacherInstructions: void 0,
+	graph: {
+		...e.graph,
+		title: void 0,
+		disabled: !0
+	},
+	correctResponse: void 0
+}), { lineIsSwitched: w, switchGraphLine: T, toGraphFormat: ce, toSessionFormat: E } = e, { Panel: le, toggle: D } = b, O = {}, k = {}, A = {}, ue = f(s)({ width: "150px" }), de = f("div")(({ theme: e }) => ({
+	display: "flex",
+	flexWrap: "wrap",
+	"& > *": { paddingRight: e.spacing(2) }
+})), fe = f("div")(({ theme: e }) => ({ margin: `${e.spacing(2.5)}px 0` })), j = f(y)(({ theme: e }) => ({
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2),
+	width: "100%"
+})), pe = f(v)(({ theme: e }) => ({ marginBottom: e.spacing(4) })), M = f("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), me = f("div")({
+	display: "flex",
+	alignItems: "center",
+	gap: "10px"
+}), he = f(v)({
+	display: "flex",
+	alignItems: "center",
+	gap: "10px"
+}), ge = f(S)(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), N = (e) => {
+	function t(e) {
+		return e.pointType ? e.direction ? `${e.pointType[0]}${e.direction[0]}` : e.pointType[0] : `${e.leftPoint[0]}${e.rightPoint[0]}`;
+	}
+	return `${e.type[0]}${t(e)}`.toUpperCase();
+}, P = class extends d.Component {
+	static propTypes = {
+		model: p.object.isRequired,
+		configuration: p.object.isRequired,
+		onConfigurationChanged: p.func.isRequired,
+		onChange: p.func.isRequired,
+		imageSupport: p.object.isRequired,
+		uploadSoundSupport: p.object.isRequired
+	};
+	constructor(e) {
+		super(e);
+		let { model: { graph: { availableTypes: t, maxNumberOfPoints: n } } } = e, r = this.getAdjustedHeight(t, n);
+		this.state = {
+			dialog: {
+				open: !1,
+				text: ""
+			},
+			correctAnswerDialog: {
+				open: !1,
+				text: ""
+			}
+		}, this.graphChange({ height: r });
+	}
+	componentDidMount() {
+		let { configuration: e, model: t, onChange: n } = this.props, { title: r } = e || {}, { titleEnabled: i } = t || {}, a = i ?? r.enabled;
+		n && n({
+			...t,
+			titleEnabled: a
+		});
+	}
+	graphChange = (e) => {
+		let { model: t, onChange: n } = this.props, r = {
+			...t.graph,
+			...e
+		}, i = [];
+		t.correctResponse.forEach((e, t) => {
+			(e.domainPosition < r.domain.min || e.domainPosition > r.domain.max || e.size && (e.domainPosition + e.size < r.domain.min || e.domainPosition + e.size > r.domain.max)) && i.push(t);
+		}), i.length > 0 && this.setState({ correctAnswerDialog: {
+			open: !0,
+			text: "This\nchange would make it impossible for students to plot one or more elements in the current\ncorrect answer. If you proceed, all such elements will be removed from the correct\nanswer.",
+			indices: i,
+			graph: t.graph
+		} }), r = this.reloadTicksData(r), n({ graph: r });
+	};
+	changeSize = ({ width: e, height: t }) => this.graphChange({
+		width: e,
+		height: t
+	});
+	getAdjustedHeight = (e, t) => {
+		let n = !0;
+		return Object.entries(e || {}).forEach(([e, t]) => {
+			if (e !== "PF" && t) {
+				n = !1;
+				return;
+			}
+		}), t && (t === 1 || n) ? 100 : 50 + (t || 20) * 25;
+	};
+	changeMaxNoOfPoints = (e, t) => {
+		if (t = Math.floor(t), this.props.model.correctResponse.length > t) {
+			this.setState({ dialog: {
+				open: !0,
+				text: "To use this value, you must first remove one or more elements from the correct answers."
+			} });
+			return;
+		}
+		let { model: { graph: { availableTypes: n } } } = this.props, r = this.getAdjustedHeight(n, t);
+		this.graphChange({
+			maxNumberOfPoints: t,
+			height: r
+		});
+	};
+	changeGraphTitle = (e) => this.graphChange({ title: e });
+	changeTicks = (e) => {
+		let { model: t, onChange: n } = this.props, { ticks: r } = e, i = a(t.graph.domain, r, t.correctResponse), o = t.graph.initialElements ? a(t.graph.domain, r, t.graph.initialElements) : [];
+		n({
+			graph: {
+				...this.updateMajorValue({
+					...t.graph,
+					ticks: r
+				}),
+				initialElements: o
+			},
+			correctResponse: i
+		});
+	};
+	reloadTicksData = (e) => {
+		let { domain: t, ticks: n, width: a } = e;
+		if (n.tickIntervalType || (n.minor > .5 ? n.tickIntervalType = "Integer" : n.tickIntervalType = "Decimal"), O = i(t, a), O.min >= 1) n.tickIntervalType = "Integer", n.minor = n.minor < 1 ? g.number(g.ceil(O.min)) : n.minor >= g.number(g.ceil(O.min)) && n.minor <= g.number(g.floor(O.max)) ? n.minor : g.number(g.ceil(O.min)), n.integerTick = n.minor, k = {
+			decimal: [],
+			fraction: []
+		}, n.fractionTick = "0", n.decimalTick = 0;
+		else if (O.min >= 0 && O.max < 1) {
+			n.tickIntervalType === "Integer" && (n.tickIntervalType = "Fraction"), k = r(O);
+			let e = g.number(g.fraction(k.fraction[0])), t = g.number(g.fraction(k.fraction[k.fraction.length - 1]));
+			if (n.minor < e || n.minor > t) switch (n.tickIntervalType) {
+				case "Fraction":
+					n.minor = g.number(g.fraction(k.fraction[k.fraction.length - 1])), n.fractionTick = k.fraction[k.fraction.length - 1], n.decimalTick = k.decimal[0];
+					break;
+				case "Decimal":
+				case "Integer": n.minor = k.decimal[k.decimal.length - 1], n.decimalTick = k.decimal[k.decimal.length - 1], n.fractionTick = k.fraction[0];
+			}
+			else switch (n.tickIntervalType) {
+				case "Fraction":
+					let e = g.fraction(g.number(n.minor));
+					n.fractionTick = e.n + "/" + e.d, n.decimalTick = n.decimalTick ? n.decimalTick : k.decimal[0];
+					break;
+				case "Decimal":
+				case "Integer": n.decimalTick = n.minor, n.fractionTick = n.fractionTick ? n.fractionTick : k.fraction[0];
+			}
+			n.integerTick = 1;
+		} else if (O.min < 1 && O.max >= 1) if (k = r(O), n.minor >= O.min && n.minor <= O.max) switch (n.tickIntervalType) {
+			case "Integer":
+				n.integerTick = n.minor, n.decimalTick = O.min > .5 ? 0 : k.decimal[0], n.fractionTick = O.min > .5 ? "0" : k.fraction[0];
+				break;
+			case "Decimal":
+				n.integerTick = 1, n.decimalTick = n.minor, n.fractionTick = k.fraction[0];
+				break;
+			case "Fraction":
+				n.integerTick = 1, n.decimalTick = k.decimal[0];
+				let e = g.fraction(g.number(n.minor));
+				n.fractionTick = e.n + "/" + e.d;
+		}
+		else switch (O.min > .5 && (n.tickIntervalType = "Integer"), n.tickIntervalType) {
+			case "Integer":
+				n.minor = g.number(g.ceil(O.min)), n.integerTick = n.minor, n.decimalTick = O.min > .5 ? 0 : k.decimal[0], n.fractionTick = O.min > .5 ? "0" : k.fraction[0];
+				break;
+			case "Decimal":
+				n.minor = k.decimal[0], n.integerTick = 1, n.decimalTick = n.minor, n.fractionTick = k.fraction[0];
+				break;
+			case "Fraction": n.minor = g.number(g.fraction(k.fraction[0])), n.integerTick = 1, n.decimalTick = k.decimal[0], n.fractionTick = k.fraction[0];
+		}
+		return this.updateMajorValue({
+			...e,
+			ticks: n
+		});
+	};
+	updateMajorValue = (e) => {
+		let { domain: t, ticks: r, width: i } = e;
+		if (A = n(r.minor, t, i), A.decimal.indexOf(r.major) === -1) {
+			let e = 0;
+			e = r.tickIntervalType === "Integer" && A.decimal.length > 4 ? 4 : A.decimal.length - 1, r.major = A.decimal[e];
+		}
+		return e.fraction = r.tickIntervalType === "Fraction" && r.major < 1, {
+			...e,
+			ticks: r
+		};
+	};
+	changeArrows = (e) => this.graphChange({ arrows: e });
+	setDefaults = () => {
+		let { graph: { availableTypes: e, maxNumberOfPoints: n } } = u, r = this.getAdjustedHeight(e, n), i = {
+			...t(u.graph),
+			height: r
+		};
+		this.props.onChange({ graph: i });
+	};
+	moveCorrectResponse = (e, t, n) => {
+		t.position = n;
+		let { onChange: r, model: i } = this.props, a = E(t.type === "line" && w(t) ? T(t) : t), o = [...i.correctResponse];
+		o[e] = a, r({ correctResponse: o });
+	};
+	availableTypesChange = (e) => {
+		let { model: t, onChange: n } = this.props, { correctResponse: r, graph: { maxNumberOfPoints: i } } = t;
+		new Set(r.map(N)).forEach((t) => {
+			e[t] = !0;
+		});
+		let a = this.getAdjustedHeight(e, i);
+		n({ graph: {
+			...t.graph,
+			availableTypes: e,
+			height: a
+		} });
+	};
+	deleteCorrectResponse = (e) => {
+		let { model: t, onChange: n } = this.props;
+		n({ correctResponse: t.correctResponse.filter((t, n) => !e.some((e) => e === n)) });
+	};
+	addCorrectResponse = (e) => {
+		let { model: t, onChange: n } = this.props, r = [...t.correctResponse];
+		r.push(E(e)), n({ correctResponse: r });
+	};
+	clearCorrectResponse = () => {
+		let { onChange: e } = this.props;
+		e({ correctResponse: [] });
+	};
+	undoCorrectResponse = () => {
+		let { model: e, onChange: t } = this.props, n = [...e.correctResponse];
+		n.pop(), t({ correctResponse: n });
+	};
+	render() {
+		let { model: e, onChange: n, configuration: r, onConfigurationChanged: i, uploadSoundSupport: a, imageSupport: s } = this.props, { baseInputConfiguration: u = {}, contentDimensions: f = {}, instruction: p = {}, teacherInstructions: g = {}, title: y = {}, prompt: b = {}, rationale: S = {}, spellCheck: w = {}, mathMlOptions: T = {}, numberLineDimensions: E = {}, maxMaxElements: N = 20, hidePointConfigButtons: P = !1, availableTools: F = ["PF"], settingsPanelDisabled: I = !1 } = r || {}, { errors: L = {}, extraCSSRules: _e, spellCheckEnabled: R, toolbarEditorPosition: z, teacherInstructionsEnabled: ve, titleEnabled: ye, promptEnabled: be, rationaleEnabled: xe } = e || {}, { graph: B } = e;
+		B = this.reloadTicksData(B);
+		let { dialog: V, correctAnswerDialog: H } = this.state, { correctResponseError: U, domainError: W, maxError: G, pointsError: K, prompt: q, rationale: J, teacherInstructions: Y, widthError: X } = L || {}, Se = ie(), Ce = t(e.correctResponse || []).map(ce), Z = t(e);
+		Z.disabled = !0;
+		let Q = { position: z === "top" ? "top" : "bottom" }, we = {
+			teacherInstructionsEnabled: g.settings && D(g.label),
+			titleEnabled: y.settings && D(y.label),
+			promptEnabled: b.settings && D(b.label),
+			rationaleEnabled: S.settings && D(S.label),
+			spellCheckEnabled: w.settings && D(w.label)
+		}, $ = (e = {}) => ({
+			...u,
+			...e
+		});
+		return /* @__PURE__ */ h(ae.ConfigLayout, {
+			extraCSSRules: _e,
+			dimensions: f,
+			hideSettings: I,
+			settings: /* @__PURE__ */ m(le, {
+				model: e,
+				configuration: r,
+				onChangeModel: n,
+				onChangeConfiguration: i,
+				groups: { Properties: we }
+			}),
+			children: [
+				/* @__PURE__ */ m(ge, {
+					component: "div",
+					type: "body1",
+					children: p.label
+				}),
+				ve && /* @__PURE__ */ h(j, {
+					label: g.label,
+					children: [/* @__PURE__ */ m(x, {
+						markup: e.teacherInstructions || "",
+						onChange: (e) => n({ teacherInstructions: e }),
+						nonEmpty: !1,
+						disableUnderline: !0,
+						error: Y,
+						toolbarOpts: Q,
+						pluginProps: $(g?.inputConfiguration),
+						spellCheck: R,
+						imageSupport: s,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: T
+					}), Y && /* @__PURE__ */ m(M, { children: Y })]
+				}),
+				be && /* @__PURE__ */ h(j, {
+					label: b.label,
+					children: [/* @__PURE__ */ m(x, {
+						markup: e.prompt || "",
+						onChange: (e) => n({ prompt: e }),
+						nonEmpty: !1,
+						disableUnderline: !0,
+						error: q,
+						toolbarOpts: Q,
+						pluginProps: $(b?.inputConfiguration),
+						spellCheck: R,
+						imageSupport: s,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: T
+					}), q && /* @__PURE__ */ m(M, { children: q })]
+				}),
+				/* @__PURE__ */ m(c, {
+					header: "Set Up Number Line",
+					info: /* @__PURE__ */ m(oe, {
+						disableFocusListener: !0,
+						disableTouchListener: !0,
+						placement: "right",
+						title: Se,
+						slotProps: { tooltip: { sx: (e) => ({
+							fontSize: e.typography.fontSize - 2,
+							whiteSpace: "pre",
+							maxWidth: "500px"
+						}) } },
+						children: /* @__PURE__ */ m(se, {
+							fontSize: "small",
+							color: "primary",
+							style: { marginLeft: "8px" }
+						})
+					}),
+					children: "Set up the number line by entering the domain and number of tick marks to display. Labels on the number line can be edited or removed by clicking on the label."
+				}),
+				/* @__PURE__ */ m(de, { children: /* @__PURE__ */ m(l, {
+					domain: B.domain,
+					errors: L,
+					onChange: (e) => this.graphChange({ domain: e })
+				}) }),
+				G && /* @__PURE__ */ m(M, { children: G }),
+				W && /* @__PURE__ */ m(M, { children: W }),
+				/* @__PURE__ */ m("div", { children: /* @__PURE__ */ m(v, { children: /* @__PURE__ */ m(re, {
+					ticks: B.ticks,
+					minorLimits: O,
+					minorValues: k,
+					majorValues: A,
+					onChange: this.changeTicks
+				}) }) }),
+				/* @__PURE__ */ h(me, { children: [
+					e.widthEnabled && /* @__PURE__ */ m(ee, {
+						size: B,
+						min: E.min,
+						max: E.max,
+						step: E.step,
+						onChange: this.changeSize
+					}),
+					/* @__PURE__ */ m("div", {}),
+					/* @__PURE__ */ m(te, {
+						arrows: B.arrows,
+						onChange: this.changeArrows
+					})
+				] }),
+				X && /* @__PURE__ */ m(M, { children: X }),
+				/* @__PURE__ */ m(o, {
+					onMoveElement: () => {},
+					onDeleteElements: () => {},
+					onAddElement: () => {},
+					onClearElements: () => {},
+					onUndoElement: () => {},
+					minWidth: E.min,
+					maxWidth: E.max,
+					maxHeight: 70,
+					model: C(Z)
+				}),
+				ye && /* @__PURE__ */ m(pe, {
+					label: y?.label || "Title",
+					children: /* @__PURE__ */ m(x, {
+						markup: B.title || "",
+						onChange: this.changeGraphTitle,
+						toolbarOpts: Q,
+						activePlugins: [
+							"bold",
+							"html",
+							"italic",
+							"underline",
+							"strikethrough",
+							"image",
+							"math",
+							"languageCharacters",
+							"responseArea"
+						],
+						pluginProps: $(y?.inputConfiguration),
+						spellCheck: R,
+						imageSupport: s,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: T
+					})
+				}),
+				!B.exhibitOnly && /* @__PURE__ */ h(d.Fragment, { children: [
+					/* @__PURE__ */ h(c, {
+						header: "Define Tool Set and Correct Response",
+						children: ["Select answer type and place it on the number line. Intersecting points, line segments and/or rays will appear above the number line. ", /* @__PURE__ */ m("i", { children: "Note: A maximum of 20 points, line segments or rays may be plotted." })]
+					}),
+					/* @__PURE__ */ m(c, {
+						header: "Available Tools",
+						mini: !0,
+						children: "Click on the input options to be displayed to the students. All inputs will display by default."
+					}),
+					/* @__PURE__ */ m(fe, { children: /* @__PURE__ */ m(ne, {
+						onSelectionChange: this.availableTypesChange,
+						selection: B.availableTypes,
+						availableTools: F,
+						hideButtons: P
+					}) }),
+					/* @__PURE__ */ h(he, { children: [
+						/* @__PURE__ */ m("label", { children: "Max No of Elements" }),
+						/* @__PURE__ */ m(ue, {
+							min: 1,
+							max: N,
+							onlyIntegersAllowed: !0,
+							value: B.maxNumberOfPoints,
+							onChange: this.changeMaxNoOfPoints
+						}),
+						K && /* @__PURE__ */ m(M, { children: K })
+					] }),
+					/* @__PURE__ */ m("label", { children: "Correct Answer" }),
+					/* @__PURE__ */ m(o, {
+						onMoveElement: this.moveCorrectResponse,
+						onDeleteElements: this.deleteCorrectResponse,
+						onAddElement: this.addCorrectResponse,
+						onClearElements: this.clearCorrectResponse,
+						onUndoElement: this.undoCorrectResponse,
+						minWidth: E.min,
+						maxWidth: E.max,
+						answer: Ce,
+						model: C(e)
+					}),
+					U && /* @__PURE__ */ m(M, { children: U })
+				] }),
+				/* @__PURE__ */ m(_, {
+					open: V.open,
+					title: "Warning",
+					text: V.text,
+					onConfirm: () => this.setState({ dialog: { open: !1 } })
+				}),
+				/* @__PURE__ */ m(_, {
+					open: H.open,
+					title: "Warning",
+					text: H.text,
+					onConfirm: () => {
+						let e = this.state.correctAnswerDialog.indices;
+						e && e.length > 0 && this.deleteCorrectResponse(e), this.setState({ correctAnswerDialog: { open: !1 } });
+					},
+					onClose: () => {
+						let e = this.state.correctAnswerDialog.graph;
+						n({ graph: e }), this.setState({ correctAnswerDialog: { open: !1 } });
+					},
+					onConfirmText: "OK",
+					onCloseText: "Cancel"
+				}),
+				xe && /* @__PURE__ */ h(j, {
+					label: S.label || "Rationale",
+					children: [/* @__PURE__ */ m(x, {
+						markup: e.rationale || "",
+						onChange: (e) => n({ rationale: e }),
+						error: J,
+						toolbarOpts: Q,
+						spellCheck: R,
+						pluginProps: $(S?.inputConfiguration),
+						imageSupport: s,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: T
+					}), J && /* @__PURE__ */ m(M, { children: J })]
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { P as default };

package/dist/author/number-text-field.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/number-text-field.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';
+declare const MiniField: any;
+declare const NumberTextField: (props: any) => React.JSX.Element;
+export { MiniField };
+export default NumberTextField;
+//# sourceMappingURL=number-text-field.d.ts.map

package/dist/author/number-text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-text-field.d.ts","sourceRoot":"","sources":["../../src/author/number-text-field.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,QAAA,MAAM,SAAS,EAAE,GAEf,CAAC;AAEH,QAAA,MAAM,eAAe,GAAI,UAAK,sBAE7B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,eAAe,eAAe,CAAC"}

package/dist/author/number-text-field.js

@@ -0,0 +1,11 @@
+import "react";
+import { styled as e } from "@mui/material/styles";
+import { jsx as t } from "react/jsx-runtime";
+import { NumberTextField as n } from "@pie-lib/config-ui";
+//#region src/author/number-text-field.tsx
+var r = e(n)(({ theme: e }) => ({ marginLeft: e.spacing(1) })), i = e(n)({ maxWidth: "100px" }), a = (e) => /* @__PURE__ */ t(r, {
+	...e,
+	variant: "outlined"
+});
+//#endregion
+export { i as MiniField, a as default };

package/dist/author/point-config.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/point-config.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';
+declare class PointConfig extends React.Component {
+    static propTypes: {
+        onSelectionChange: PropTypes.Requireable<(...args: any[]) => any>;
+        selection: PropTypes.Requireable<object>;
+        availableTools: PropTypes.Requireable<any[]>;
+        hideButtons: PropTypes.Requireable<boolean>;
+    };
+    constructor(props: any);
+    toggle(point: any): void;
+    toggleAll(value: any): void;
+    _propsUpdate(selection: any): void;
+    active(point: any): boolean;
+    render(): React.JSX.Element;
+}
+export default PointConfig;
+//# sourceMappingURL=point-config.d.ts.map

package/dist/author/point-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"point-config.d.ts","sourceRoot":"","sources":["../../src/author/point-config.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAUnC,cAAM,WAAY,SAAQ,KAAK,CAAC,SAAS;IACvC,MAAM,CAAC,SAAS;;;;;MAKd;gBACU,KAAK,KAAA;IAIjB,MAAM,CAAC,KAAK,KAAA;IAMZ,SAAS,CAAC,KAAK,KAAA;IAUf,YAAY,CAAC,SAAS,KAAA;IAItB,MAAM,CAAC,KAAK,KAAA;IAIZ,MAAM;CA6BP;AAID,eAAe,WAAW,CAAC"}