@pie-element/graphing 10.1.2-next.4 → 10.1.2-next.6

package/dist/author/configure.js

@@ -1,5 +1,5 @@
-import e from "./graphing-config.js";
-import t from "./correct-response.js";
+import { GraphingConfig as e } from "./graphing-config.js";
+import { CorrectResponse as t } from "./correct-response.js";
 import n from "react";
 import r from "prop-types";
 import { styled as i } from "@mui/material/styles";
@@ -205,4 +205,4 @@ var { Panel: ee, toggle: m, radio: h, checkboxes: te, textField: ne, dropdown: r
 	}
 };
 //#endregion
-export { v as default };
+export { v as Configure, v as default };

package/dist/author/correct-response.js

@@ -3,95 +3,96 @@ import { renderMath as t } from "@pie-element/shared-math-rendering-mathjax";
 import n from "prop-types";
 import { styled as r } from "@mui/material/styles";
 import { GraphContainer as i } from "@pie-lib/graphing";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { isEqual as s, set as c } from "@pie-element/shared-lodash";
-import { AlertDialog as l } from "@pie-lib/config-ui";
-import { MenuItem as u, Select as d, Tooltip as f, Typography as p } from "@mui/material";
-import m from "react-dom";
-import h from "@mui/icons-material/Delete";
-import g from "@mui/icons-material/Info";
+import { color as a } from "@pie-lib/render-ui";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { isEqual as c, set as l } from "@pie-element/shared-lodash";
+import { AlertDialog as u } from "@pie-lib/config-ui";
+import { MenuItem as d, Select as f, Tooltip as p, Typography as m } from "@mui/material";
+import h from "react-dom";
+import g from "@mui/icons-material/Delete";
+import _ from "@mui/icons-material/Info";
 //#region src/author/correct-response.tsx
-var _ = "#D5D5D5", v = "#AAAAAA", y = r("div")({ color: v }), b = r("div")(({ theme: e }) => ({
+var v = r("div")({ color: a.text() }), y = r("div")(({ theme: e }) => ({
 	margin: `${e.spacing(2.5)} 0`,
 	cursor: "pointer",
-	background: e.palette.grey[200],
+	background: a.backgroundDark(),
 	padding: e.spacing(1.5),
 	width: "fit-content",
 	borderRadius: "4px",
-	"&:hover": { background: _ }
-})), x = r("div")(({ theme: e }) => ({
+	"&:hover": { background: a.dropdownBackground() }
+})), b = r("div")(({ theme: e }) => ({
 	marginTop: e.spacing(1),
 	display: "flex",
 	flexWrap: "wrap"
-})), S = r("div")(({ theme: e }) => ({
+})), x = r("div")(({ theme: e }) => ({
 	cursor: "pointer",
 	margin: e.spacing(1),
 	padding: e.spacing(1),
-	border: `2px solid ${e.palette.common.white}`,
+	border: `2px solid ${a.background()}`,
 	textTransform: "capitalize",
-	"&:hover": { color: e.palette.grey[800] }
-})), C = r(S)({
-	background: _,
-	border: `2px solid ${v}`
-}), w = r("div")(({ theme: e }) => ({
+	"&:hover": { color: a.text() }
+})), S = r(x)({
+	background: a.dropdownBackground(),
+	border: `2px solid ${a.border()}`
+}), C = r("div")(({ theme: e }) => ({
 	display: "flex",
 	alignItems: "center",
 	marginTop: e.spacing(2.5)
-})), T = r("div")(({ theme: e }) => ({
+})), w = r("div")(() => ({
 	marginLeft: "6px",
-	color: e.palette.grey[600],
+	color: a.borderGray(),
 	"&:hover": {
 		cursor: "pointer",
-		color: e.palette.common.black
+		color: a.text()
 	}
-})), E = r("div")(({ theme: e }) => ({ marginBottom: e.spacing(.5) })), D = r(({ className: e, ...t }) => /* @__PURE__ */ a(f, {
+})), T = r("div")(({ theme: e }) => ({ marginBottom: e.spacing(.5) })), E = r(({ className: e, ...t }) => /* @__PURE__ */ o(p, {
 	...t,
 	classes: { tooltip: e }
 }))(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
 	fontSize: e.typography.fontSize - 2,
 	whiteSpace: "pre",
 	maxWidth: "500px"
-} })), O = r(p)(({ theme: e }) => ({
+} })), D = r(m)(({ theme: e }) => ({
 	marginTop: e.spacing(1.5),
 	marginBottom: e.spacing(1)
-})), k = r("div")({
+})), O = r("div")({
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "space-between"
-}), A = r("div")({
+}), k = r("div")({
 	display: "flex",
 	alignItems: "center",
 	width: "300px"
-}), j = r(d)(({ theme: e }) => ({
+}), A = r(f)(({ theme: e }) => ({
 	marginLeft: e.spacing(1),
 	textTransform: "uppercase",
-	color: e.palette.grey[800]
-})), M = r(u)({ textTransform: "uppercase" }), N = r("div")(({ theme: e }) => ({
+	color: a.text()
+})), j = r(d)({ textTransform: "uppercase" }), M = r("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	marginTop: e.spacing(1)
-})), P = ({ availableTools: e, defaultTool: t, hasErrors: n, toolbarTools: r, toggleToolBarTool: i, onDefaultToolChange: s }) => {
+})), N = ({ availableTools: e, defaultTool: t, hasErrors: n, toolbarTools: r, toggleToolBarTool: i, onDefaultToolChange: a }) => {
 	let c = e || [], l = c.includes("label"), u = (r || []).filter((e) => e !== "label");
-	return l && (c = [...c.filter((e) => e !== "label"), "label"]), /* @__PURE__ */ o(y, { children: [/* @__PURE__ */ o(k, { children: [/* @__PURE__ */ a("span", { children: "GRAPHING TOOLS" }), u.length > 0 && /* @__PURE__ */ o(A, { children: [/* @__PURE__ */ a("span", { children: "Default graphing tool:" }), /* @__PURE__ */ a(j, {
+	return l && (c = [...c.filter((e) => e !== "label"), "label"]), /* @__PURE__ */ s(v, { children: [/* @__PURE__ */ s(O, { children: [/* @__PURE__ */ o("span", { children: "GRAPHING TOOLS" }), u.length > 0 && /* @__PURE__ */ s(k, { children: [/* @__PURE__ */ o("span", { children: "Default graphing tool:" }), /* @__PURE__ */ o(A, {
 		variant: "standard",
-		onChange: s,
+		onChange: a,
 		value: t,
 		disableUnderline: !0,
 		MenuProps: { transitionDuration: {
 			enter: 225,
 			exit: 195
 		} },
-		children: u.map((e, t) => /* @__PURE__ */ a(M, {
+		children: u.map((e, t) => /* @__PURE__ */ o(j, {
 			value: e,
 			children: e
 		}, t))
-	})] })] }), /* @__PURE__ */ a(x, { children: c.map((e) => /* @__PURE__ */ a(r.find((t) => t === e) ? C : S, {
+	})] })] }), /* @__PURE__ */ o(b, { children: c.map((e) => /* @__PURE__ */ o(r.find((t) => t === e) ? S : x, {
 		style: { ...n && e !== "label" && { color: "red" } },
 		onClick: () => i(e),
 		children: e.toUpperCase()
 	}, e)) })] });
 };
-P.propTypes = {
+N.propTypes = {
 	toolbarTools: n.arrayOf(n.string),
 	toggleToolBarTool: n.func,
 	availableTools: n.array,
@@ -99,7 +100,7 @@ P.propTypes = {
 	hasErrors: n.number,
 	onDefaultToolChange: n.func
 };
-var F = class extends e.Component {
+var P = class extends e.Component {
 	static propTypes = {
 		availableTools: n.array,
 		errors: n.object,
@@ -110,7 +111,7 @@ var F = class extends e.Component {
 	state = { dialog: { open: !1 } };
 	componentDidMount() {
 		try {
-			t(m.findDOMNode(this));
+			t(h.findDOMNode(this));
 		} catch {
 			console.error("DOM not mounted");
 		}
@@ -118,7 +119,7 @@ var F = class extends e.Component {
 	handleAlertDialog = (e, t) => this.setState({ dialog: { open: e } }, t);
 	changeMarks = (e, t) => {
 		let { model: n, onChange: r } = this.props;
-		c(n, `answers.${e}.marks`, t), r(n);
+		l(n, `answers.${e}.marks`, t), r(n);
 	};
 	filterMarks = (e) => {
 		let { model: { answers: t } } = this.props;
@@ -146,7 +147,7 @@ var F = class extends e.Component {
 				let e = (i || []).filter((e) => e !== "label");
 				a = e.length && e[0] || "";
 			}
-			if (!s(r, n)) {
+			if (!c(r, n)) {
 				this.setState({ dialog: {
 					open: !0,
 					title: "Warning",
@@ -172,7 +173,7 @@ var F = class extends e.Component {
 	};
 	addAlternateResponse = () => {
 		let { model: e, onChange: t } = this.props, { answers: n } = e || {}, r = Object.keys(n || {});
-		c(e, `answers.${`alternate${r.length}`}`, {
+		l(e, `answers.${`alternate${r.length}`}`, {
 			name: `Alternate ${r.length}`,
 			marks: []
 		}), t(e);
@@ -211,38 +212,38 @@ var F = class extends e.Component {
 		s();
 	};
 	render() {
-		let { availableTools: t, errors: n, model: r, mathMlOptions: s = {}, removeIncompleteTool: c } = this.props, { dialog: u } = this.state, { answers: d = {}, arrows: f, backgroundMarks: m, coordinatesOnHover: _, defaultTool: v, domain: y, graph: x = {}, labels: S, labelsEnabled: C, range: k, title: A, titleEnabled: j, toolbarTools: M } = r || {}, { correctAnswerErrors: F = {}, toolbarToolsError: I } = n || {};
-		return /* @__PURE__ */ o("div", { children: [
-			/* @__PURE__ */ a(p, {
+		let { availableTools: t, errors: n, model: r, mathMlOptions: a = {}, removeIncompleteTool: c } = this.props, { dialog: l } = this.state, { answers: d = {}, arrows: f, backgroundMarks: p, coordinatesOnHover: h, defaultTool: v, domain: b, graph: x = {}, labels: S, labelsEnabled: O, range: k, title: A, titleEnabled: j, toolbarTools: P } = r || {}, { correctAnswerErrors: F = {}, toolbarToolsError: I } = n || {};
+		return /* @__PURE__ */ s("div", { children: [
+			/* @__PURE__ */ o(m, {
 				component: "div",
 				variant: "h6",
 				children: "Define Tool Set and Correct Response"
 			}),
-			/* @__PURE__ */ a(O, {
+			/* @__PURE__ */ o(D, {
 				component: "div",
 				variant: "body1",
 				children: "Use this interface to choose which graphing tools students will be able to use, and to define the correct answer"
 			}),
-			/* @__PURE__ */ a(P, {
+			/* @__PURE__ */ o(N, {
 				availableTools: t,
 				defaultTool: v,
 				hasErrors: !!I,
 				onDefaultToolChange: this.onDefaultToolChange,
 				toggleToolBarTool: this.toggleToolBarTool,
-				toolbarTools: M
+				toolbarTools: P
 			}),
-			I && /* @__PURE__ */ a(N, { children: I }),
+			I && /* @__PURE__ */ o(M, { children: I }),
 			Object.entries(d || {}).map(([t, n]) => {
 				let { marks: r = [], name: l } = n || {};
-				return /* @__PURE__ */ o(e.Fragment, { children: [
-					/* @__PURE__ */ o(w, { children: [
-						/* @__PURE__ */ a(E, { children: l }),
-						t === "correctAnswer" && /* @__PURE__ */ a(D, {
+				return /* @__PURE__ */ s(e.Fragment, { children: [
+					/* @__PURE__ */ s(C, { children: [
+						/* @__PURE__ */ o(T, { children: l }),
+						t === "correctAnswer" && /* @__PURE__ */ o(E, {
 							disableFocusListener: !0,
 							disableTouchListener: !0,
 							placement: "right",
 							title: "At least 1 graph object should be defined.",
-							children: /* @__PURE__ */ a(g, {
+							children: /* @__PURE__ */ o(_, {
 								fontSize: "small",
 								color: "primary",
 								style: {
@@ -251,53 +252,53 @@ var F = class extends e.Component {
 								}
 							})
 						}),
-						t !== "correctAnswer" && /* @__PURE__ */ a(T, {
+						t !== "correctAnswer" && /* @__PURE__ */ o(w, {
 							onClick: () => this.deleteAlternateResponse(t, n),
-							children: /* @__PURE__ */ a(h, {})
+							children: /* @__PURE__ */ o(g, {})
 						})
 					] }),
-					/* @__PURE__ */ a(i, {
+					/* @__PURE__ */ o(i, {
 						style: F[t] && { border: "2px solid red" },
 						axesSettings: { includeArrows: f },
-						backgroundMarks: m.filter((e) => !e.building),
-						coordinatesOnHover: _,
+						backgroundMarks: p.filter((e) => !e.building),
+						coordinatesOnHover: h,
 						disabledLabels: !0,
 						disabledTitle: !0,
-						domain: y,
+						domain: b,
 						draggableTools: t === "correctAnswer",
 						labels: S,
 						marks: r,
 						onChangeMarks: (e) => this.changeMarks(t, e),
 						range: k,
-						showLabels: C,
+						showLabels: O,
 						showTitle: j,
 						size: {
 							width: x.width,
 							height: x.height
 						},
 						title: A,
-						toolbarTools: M,
+						toolbarTools: P,
 						onChangeTools: (e) => this.updateModel({ toolbarTools: e }),
-						mathMlOptions: s,
+						mathMlOptions: a,
 						removeIncompleteTool: c,
 						limitLabeling: !0
 					}),
-					F[t] && /* @__PURE__ */ a(N, { children: F[t] })
+					F[t] && /* @__PURE__ */ o(M, { children: F[t] })
 				] }, `correct-response-graph-${l}`);
 			}),
-			/* @__PURE__ */ a(b, {
+			/* @__PURE__ */ o(y, {
 				onClick: this.addAlternateResponse,
 				children: "ADD ALTERNATE"
 			}),
-			/* @__PURE__ */ a(l, {
-				open: u.open,
-				title: u.title,
-				text: u.text,
-				onClose: u.onClose,
-				onConfirm: u.onConfirm
+			/* @__PURE__ */ o(u, {
+				open: l.open,
+				title: l.title,
+				text: l.text,
+				onClose: l.onClose,
+				onConfirm: l.onConfirm
 			})
 		] });
 	}
 };
 //#endregion
-export { F as default };
+export { P as CorrectResponse, P as default, N as Tools };

package/dist/author/graphing-config.js

@@ -241,4 +241,4 @@ var _ = o("div")(({ theme: e }) => ({
 	}
 };
 //#endregion
-export { w as default };
+export { w as GraphingConfig, w as default };

package/dist/author/index.d.ts

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

package/dist/author/index.js

@@ -1,4 +1,4 @@
-import e from "./configure.js";
+import { Configure as e } from "./configure.js";
 import t from "./defaults.js";
 import n from "react";
 import { createRoot as r } from "react-dom/client";
@@ -88,8 +88,11 @@ var f = a("pie-elements:graphing:configure"), p = (e) => Object.keys(e || {}).so
 			});
 		}
 	}
+	connectedCallback() {
+		this._render();
+	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

package/dist/author/utils.js

@@ -257,4 +257,4 @@ var t = [
 	}, e), {});
 };
 //#endregion
-export { o as applyConstraints, c as filterPlotableMarks, i as getGridValues, a as getLabelValues };
+export { r as VALID_LABEL_VALUES, o as applyConstraints, c as filterPlotableMarks, i as getGridValues, a as getLabelValues };