@pie-element/charting 12.1.1 → 12.1.2-next.1

package/dist/browser/author/index.js

@@ -0,0 +1,1242 @@
+import { S as e, f as t, t as n, v as r } from "../dist-CA-Ok7CW.js";
+import { D as i, O as a, S as o, T as s, a as c, c as l, d as u, f as d, i as f, k as p, l as m, m as h, o as g, p as _, r as v, s as y, t as b, x } from "../chart-AvFvbpGV.js";
+import * as S from "react";
+import C, { useEffect as ee, useState as w } from "react";
+import { createRoot as T } from "react-dom/client";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+//#region ../../lib-react/charting/dist/chart-type.js
+var O = /* @__PURE__ */ e(p(), 1), k = a("div")(() => ({ width: "160px" })), A = a(x)(() => ({ width: "160px" })), j = a(o)(() => ({ backgroundColor: "transparent" })), M = ({ onChange: e, value: t, availableChartTypes: n, chartTypeLabel: r }) => /* @__PURE__ */ E(k, { children: /* @__PURE__ */ D(A, {
+	variant: "outlined",
+	children: [/* @__PURE__ */ E(j, {
+		id: "type-helper-label",
+		children: r
+	}), /* @__PURE__ */ D(_, {
+		labelId: "type-helper-label",
+		id: "type-helper-label-select",
+		name: "chartType",
+		value: t,
+		onChange: e,
+		label: r,
+		MenuProps: { transitionDuration: {
+			enter: 225,
+			exit: 195
+		} },
+		children: [
+			n?.histogram && /* @__PURE__ */ E(d, {
+				value: "histogram",
+				children: n.histogram
+			}),
+			n?.bar && /* @__PURE__ */ E(d, {
+				value: "bar",
+				children: n.bar
+			}),
+			n?.lineDot && /* @__PURE__ */ E(d, {
+				value: "lineDot",
+				children: n.lineDot
+			}),
+			n?.lineCross && /* @__PURE__ */ E(d, {
+				value: "lineCross",
+				children: n.lineCross
+			}),
+			n?.dotPlot && /* @__PURE__ */ E(d, {
+				value: "dotPlot",
+				children: n.dotPlot
+			}),
+			n?.linePlot && /* @__PURE__ */ E(d, {
+				value: "linePlot",
+				children: n.linePlot
+			})
+		]
+	})]
+}) });
+M.propTypes = {
+	onChange: O.default.func.isRequired,
+	value: O.default.string.isRequired,
+	availableChartTypes: O.default.shape({
+		histogram: O.default.string,
+		bar: O.default.string,
+		lineDot: O.default.string,
+		lineCross: O.default.string,
+		dotPlot: O.default.string,
+		linePlot: O.default.string
+	}),
+	chartTypeLabel: O.default.string
+};
+//#endregion
+//#region ../../lib-react/charting/dist/chart-setup.js
+var N = (e, t, n, r, i) => {
+	(e || []).forEach((e) => {
+		let t = Math.round(e.value * 10) % Math.round(n.step * 10) / 10;
+		(e.value > n.max || t !== 0) && (e.value = 0);
+	}), t && r({
+		...i,
+		data: e
+	});
+}, te = a("div")(() => ({ width: "450px" })), ne = a("div")(({ theme: e }) => ({
+	display: "flex",
+	flexDirection: "column",
+	width: "100%",
+	marginTop: e.spacing(3)
+})), P = a("div")(() => ({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center"
+})), re = a("div")(() => ({
+	display: "flex",
+	justifyContent: "space-around",
+	alignItems: "center"
+})), F = a(g)(({ theme: e }) => ({
+	width: "130px",
+	margin: `${e.spacing(1)} ${e.spacing(.5)}`
+})), I = a(g)(({ theme: e }) => ({
+	width: "160px",
+	margin: `${e.spacing(1)} ${e.spacing(.5)}`
+})), L = a("div")(({ theme: e }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	margin: `${e.spacing(3)} 0`
+})), ie = a(h)(() => ({ color: i.disabled() })), R = (e) => {
+	let { model: t, onChange: n, chartDimensions: r, gridValues: i = {}, labelValues: a = {}, studentNewCategoryDefaultLabel: o = {}, availableChartTypes: s = {}, chartTypeLabel: c } = e, [l, u] = w({
+		open: !1,
+		title: "",
+		text: "",
+		onClose: null,
+		onConfirm: null
+	}), [d, f] = w(!1), [p, m] = w(""), [g, _] = w(0), { range: v = {}, correctAnswer: b, changeInteractiveEnabled: x, changeEditableEnabled: S } = t, C = t.graph, { showInConfigPanel: T, width: O, height: k } = r || {}, A = {
+		min: O?.min ? Math.max(50, O.min) : 50,
+		max: O?.max ? Math.min(700, O.max) : 700,
+		step: O?.step >= 1 ? Math.min(200, O.step) : 20
+	}, j = {
+		min: k?.min ? Math.max(400, k.min) : 400,
+		max: k?.max ? Math.min(700, k.max) : 700,
+		step: k?.step >= 1 ? Math.min(200, k.step) : 20
+	}, R = i && i.range ? { customValues: i.range } : {
+		min: 0,
+		max: 1e4
+	}, z = a && a.range ? { customValues: a.range } : {
+		min: 0,
+		max: 1e4
+	}, B = /* @__PURE__ */ D(re, { children: [/* @__PURE__ */ E(I, {
+		label: "Grid Interval",
+		value: v.step,
+		variant: "outlined",
+		onChange: (e, t) => J("step", t, e),
+		...R
+	}), /* @__PURE__ */ E(I, {
+		label: "Label Interval",
+		value: v.labelStep,
+		variant: "outlined",
+		onChange: (e, t) => J("labelStep", t, e),
+		...z
+	})] }), V = (e) => {
+		u((t) => ({
+			...t,
+			open: e
+		})), f(e);
+	}, H = (e, t) => e.map((e) => (Object.prototype.hasOwnProperty.call(e, t) && (e[t] = t == "interactive"), e)), U = (e) => {
+		let { correctAnswer: r, data: i } = t;
+		x === !1 && H(i, "interactive"), S === !1 && H(i, "editable"), N(i, e, v, n, t), N(r.data, !1, v, n, t);
+	}, W = () => {
+		let e = o?.label;
+		n({
+			...t,
+			studentCategoryDefaultLabel: e
+		});
+	}, G = (e) => e.includes("Plot") ? {
+		min: 3,
+		max: 10
+	} : {
+		min: .05,
+		max: 1e4
+	}, K = (e, r) => {
+		let i = {
+			...C,
+			[e]: r
+		};
+		n({
+			...t,
+			graph: i
+		});
+	}, q = (e, t) => (e || []).find((e) => e.value > t.max || e.value - t.step * Math.floor(e.value / t.step) !== 0), J = (e, r, i) => {
+		_(v[e]), m(e), v[e] = r, (e === "max" || e === "step") && (q(t.data, v) || q(t.correctAnswer.data, v)) && i?.target ? f(!0) : n({
+			...t,
+			range: v
+		});
+	};
+	ee(() => {
+		U(!0), W();
+	}, []), ee(() => {
+		d && u({
+			open: !0,
+			title: "Warning",
+			text: "This change will remove values defined for one or more categories",
+			onConfirm: () => {
+				U(), V(!1), n({
+					...t,
+					range: v,
+					correctAnswer: b
+				});
+			},
+			onClose: () => {
+				v[p] = g, V(!1);
+			}
+		});
+	}, [d]);
+	let Y = v.step === 1 && v.labelStep === 1 && 3 <= v.max && v.max <= 10, ae = () => {
+		G.min = 3, G.max = 10, v.max = 10, v.step = 1, v.labelStep = 1, n({
+			...t,
+			range: v
+		});
+	}, X = (e) => {
+		if (e.includes("Plot")) {
+			if (!Y) {
+				u({
+					open: !0,
+					title: "Warning",
+					text: "The selected chart type does not support the current chart configuration. Reset chart configuration?",
+					onConfirm: () => {
+						ae(), U(), V(!1), n({
+							...t,
+							range: v,
+							chartType: e
+						});
+					},
+					onClose: () => {
+						V(!1);
+					}
+				});
+				return;
+			}
+			G.min = 3, G.max = 10, n({
+				...t,
+				chartType: e
+			});
+			return;
+		}
+		n({
+			...t,
+			chartType: e
+		});
+	};
+	return /* @__PURE__ */ D(te, { children: [
+		/* @__PURE__ */ E(h, {
+			variant: "subtitle1",
+			children: "Configure Chart"
+		}),
+		/* @__PURE__ */ D(ne, { children: [
+			/* @__PURE__ */ D(re, { children: [/* @__PURE__ */ E(M, {
+				value: t.chartType,
+				onChange: (e) => X(e.target.value),
+				availableChartTypes: s,
+				chartTypeLabel: c
+			}), /* @__PURE__ */ E(I, {
+				label: "Max Value",
+				value: v.max,
+				min: G(t.chartType).min,
+				max: G(t.chartType).max,
+				variant: "outlined",
+				onChange: (e, t) => J("max", t, e)
+			})] }),
+			!t.chartType.includes("Plot") && B,
+			T && /* @__PURE__ */ D(L, { children: [
+				/* @__PURE__ */ E("div", { children: /* @__PURE__ */ E(h, { children: "Dimensions(px)" }) }),
+				/* @__PURE__ */ D(P, { children: [/* @__PURE__ */ E(F, {
+					label: "Width",
+					value: C.width,
+					min: A.min,
+					max: A.max,
+					step: A.step,
+					variant: "outlined",
+					onChange: (e, t) => K("width", t)
+				}), /* @__PURE__ */ E(ie, { children: "Min 50, Max 700" })] }),
+				/* @__PURE__ */ D(P, { children: [/* @__PURE__ */ E(F, {
+					label: "Height",
+					value: C.height,
+					min: j.min,
+					max: j.max,
+					step: j.step,
+					variant: "outlined",
+					onChange: (e, t) => K("height", t)
+				}), /* @__PURE__ */ E(ie, { children: "Min 400, Max 700" })] })
+			] })
+		] }),
+		/* @__PURE__ */ E(y, {
+			open: l.open,
+			title: l.title,
+			text: l.text,
+			onClose: l.onClose,
+			onConfirm: l.onConfirm
+		})
+	] });
+};
+R.propTypes = {
+	chartDimensions: O.default.object,
+	domain: O.default.object,
+	gridValues: O.default.object,
+	labelValues: O.default.object,
+	model: O.default.object,
+	onChange: O.default.func,
+	range: O.default.object,
+	chartDimension: O.default.object,
+	size: O.default.object,
+	studentNewCategoryDefaultLabel: O.default.object,
+	availableChartTypes: O.default.object,
+	chartTypeLabel: O.default.string
+};
+//#endregion
+//#region ../../shared/configure-events/dist/index.js
+var z = class e extends CustomEvent {
+	static {
+		this.TYPE = "model.updated";
+	}
+	constructor(t, n = !1) {
+		super(e.TYPE, {
+			bubbles: !0,
+			detail: {
+				update: t,
+				reset: n
+			}
+		}), this.update = t, this.reset = n;
+	}
+}, B = class e extends CustomEvent {
+	static {
+		this.TYPE = "delete.image";
+	}
+	constructor(t, n) {
+		super(e.TYPE, {
+			bubbles: !0,
+			detail: {
+				src: t,
+				done: n
+			}
+		}), this.src = t, this.done = n;
+	}
+}, V = class e extends CustomEvent {
+	static {
+		this.TYPE = "insert.image";
+	}
+	constructor(t) {
+		super(e.TYPE, {
+			bubbles: !0,
+			detail: t
+		}), this.handler = t;
+	}
+}, H = class e extends CustomEvent {
+	static {
+		this.TYPE = "delete.sound";
+	}
+	constructor(t, n) {
+		super(e.TYPE, {
+			bubbles: !0,
+			detail: {
+				src: t,
+				done: n
+			}
+		}), this.src = t, this.done = n;
+	}
+}, U = class e extends CustomEvent {
+	static {
+		this.TYPE = "insert.sound";
+	}
+	constructor(t) {
+		super(e.TYPE, {
+			bubbles: !0,
+			detail: t
+		}), this.handler = t;
+	}
+}, W = /* @__PURE__ */ e(r(), 1), G = a("div")(({ theme: e }) => ({
+	marginBottom: e.spacing(2.5),
+	display: "flex",
+	flex: 1
+})), K = a("div")(({ theme: e }) => ({ marginBottom: e.spacing(1) })), q = a("div")({ flex: 1 }), J = a(l)({ color: `${i.tertiary()} !important` }), Y = (e, t) => {
+	if (!e) return t;
+	let n = [];
+	return (t || []).forEach((t, r) => {
+		let { editable: i, interactive: a } = t;
+		n[r] = {
+			label: i && e[r]?.label ? e[r].label : t.label,
+			value: a && e[r]?.value ? e[r].value : t.value,
+			editable: t.editable,
+			interactive: t.interactive
+		};
+	}), n;
+}, ae = class extends S.Component {
+	static propTypes = {
+		model: O.default.object.isRequired,
+		onChange: O.default.func.isRequired,
+		charts: O.default.array,
+		labelsPlaceholders: O.default.object,
+		titlePlaceholder: O.default.object,
+		showPixelGuides: O.default.bool,
+		authorNewCategoryDefaults: O.default.object,
+		chartingOptions: O.default.object
+	};
+	constructor(e) {
+		super(e), this.state = { dialog: { open: !1 } };
+	}
+	handleAlertDialog = (e, t) => this.setState({ dialog: { open: e } }, t);
+	changeData = (e) => this.props.onChange({
+		...this.props.model,
+		data: e
+	});
+	changeAddRemoveEnabled = (e) => {
+		let { model: t } = this.props, n = Y(t.correctAnswer.data, t.data);
+		e ? this.props.onChange({
+			...this.props.model,
+			addCategoryEnabled: e
+		}) : this.setState({ dialog: {
+			open: !0,
+			title: "Warning",
+			text: "This change will remove any correct answer categories that are not part of the initial item configuration.",
+			onConfirm: () => this.handleAlertDialog(!1, this.props.onChange({
+				...this.props.model,
+				addCategoryEnabled: e,
+				correctAnswer: { data: n }
+			})),
+			onClose: () => this.handleAlertDialog(!1)
+		} });
+	};
+	changeTitle = (e) => this.props.onChange({
+		...this.props.model,
+		title: e
+	});
+	changeLabel = (e, t) => this.props.onChange({
+		...this.props.model,
+		[e]: {
+			...this.props.model[e],
+			label: t
+		}
+	});
+	render() {
+		let { model: e, charts: t, labelsPlaceholders: n, titlePlaceholder: r, showPixelGuides: i, authorNewCategoryDefaults: a, chartingOptions: o, mathMlOptions: s = {}, labelsCharactersLimit: c } = this.props, { dialog: l } = this.state, { domain: u = {}, range: d = {} } = e || {};
+		return /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E(K, { children: "Define Initial Chart Attributes" }), /* @__PURE__ */ E(G, { children: /* @__PURE__ */ D(q, { children: [
+			/* @__PURE__ */ E(h, {
+				component: "div",
+				type: "body1",
+				children: /* @__PURE__ */ E("span", { children: "Use the tools below to set up the chart as it will initially appear to students." })
+			}),
+			/* @__PURE__ */ E(b, {
+				defineChart: !0,
+				chartingOptions: o,
+				showPixelGuides: i,
+				chartType: e.chartType,
+				size: e.graph,
+				domain: u,
+				range: d,
+				charts: t,
+				data: e.data.map((e, t) => ({
+					...e,
+					index: t
+				})),
+				title: e.title,
+				onDataChange: this.changeData,
+				onChangeTitle: this.changeTitle,
+				onChangeLabels: this.changeLabel,
+				addCategoryEnabled: !0,
+				changeInteractiveEnabled: e.changeInteractiveEnabled,
+				changeEditableEnabled: e.changeEditableEnabled,
+				categoryDefaultLabel: a?.label,
+				categoryDefaults: a,
+				labelsPlaceholders: n,
+				titlePlaceholder: r?.label,
+				mathMlOptions: s,
+				labelsCharactersLimit: c
+			}),
+			e.changeAddCategoryEnabled && /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E(J, {
+				checked: e.addCategoryEnabled,
+				onChange: (e) => {
+					this.changeAddRemoveEnabled(e.target.checked);
+				}
+			}), o?.addCategory?.authoringLabel] }),
+			/* @__PURE__ */ E(y, {
+				open: l.open,
+				title: l.title,
+				text: l.text,
+				onClose: l.onClose,
+				onConfirm: l.onConfirm
+			})
+		] }, "graph") })] });
+	}
+}, X = a("div")(({ theme: e }) => ({
+	marginBottom: e.spacing(2.5),
+	display: "flex",
+	flex: 1
+})), oe = a("div")({ flex: 1 }), se = a("div")(({ theme: e }) => ({ border: `2px solid ${e.palette.error.main}` })), ce = a(h)(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), le = a("div")(({ theme: e }) => ({ marginBottom: e.spacing(1) })), Z = (e, t) => e.map((e, n) => ({
+	...e,
+	editable: n < t.length ? t[n].editable : !0,
+	interactive: n < t.length ? t[n].interactive : !0,
+	deletable: n >= t.length
+})), ue = (e, t) => {
+	if (!e) return t;
+	let n = [...e], r = [];
+	if ((t || []).forEach((t, n) => {
+		let i = t.editable, a = t.interactive;
+		r[n] = {
+			label: i && e[n]?.label ? e[n].label : t.label,
+			value: a && e[n]?.value || a && e[n]?.value == 0 ? e[n].value : t.value,
+			editable: t.editable,
+			interactive: t.interactive
+		};
+	}), r.length < e.length) {
+		let i = (n || []).slice(r.length, e.length);
+		return Z((r || []).concat(i), t);
+	}
+	return r;
+}, de = (e, t) => {
+	let n = t.length - 1, { editable: r, interactive: i, deletable: a, ...o } = t[t.length - 1];
+	return (e || []).splice(n, 0, o), Z([...e], t);
+}, fe = (e, t, n) => ((e || []).splice(n, 1), Z([...e], t)), pe = (e, n, r) => {
+	let i = e && e.model && e.model.data || [], a = n && n.model && n.model.data || [], o = t(e && e.model && e.model.correctAnswer && e.model.correctAnswer.data || []), s = t(r ? r.categories : []), c = [];
+	if (i.length > a.length) return c = de(o, i), c;
+	if (i.length < a.length) {
+		let e = i.length;
+		for (let t = 0; t < i.length; t++) if (i[t].index !== t) {
+			e = t;
+			break;
+		}
+		return c = fe(s, i, e), c;
+	}
+	return c = ue(o, i), c;
+}, me = class extends S.Component {
+	static propTypes = {
+		correctAnswerErrors: O.default.object,
+		studentNewCategoryDefaultLabel: O.default.string,
+		model: O.default.object.isRequired,
+		onChange: O.default.func.isRequired,
+		charts: O.default.array,
+		error: O.default.string
+	};
+	constructor(e) {
+		super(e), this.state = { categories: [] };
+	}
+	changeData = (e) => {
+		let { model: t, onChange: n } = this.props, { correctAnswer: r } = t || {};
+		n({
+			...t,
+			correctAnswer: {
+				...r,
+				data: e.map(({ interactive: e, editable: t, index: n, ...r }) => r)
+			}
+		});
+	};
+	componentDidMount() {
+		let e = pe(this.props, this.props, null);
+		this.setState({ categories: e || ue(this.props.model.correctAnswer.data, this.props.model.data) });
+	}
+	componentDidUpdate(e, t) {
+		let r = pe(this.props, e, t);
+		r && !n(r, this.state.categories) && (this.changeData(r), this.setState({ categories: r }));
+	}
+	render() {
+		let { model: e, charts: t, error: n, studentNewCategoryDefaultLabel: r, correctAnswerErrors: i, mathMlOptions: a = {}, labelsPlaceholders: o = {} } = this.props, { categories: s } = this.state, { domain: c = {}, range: l = {} } = e || {}, { identicalError: u, categoriesError: d } = i || {};
+		return /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E(le, { children: "Define Correct Response" }), /* @__PURE__ */ E(X, { children: /* @__PURE__ */ D(oe, { children: [
+			/* @__PURE__ */ E(h, {
+				component: "div",
+				type: "body1",
+				children: /* @__PURE__ */ E("span", { children: "Use the tools below to define the correct answer." })
+			}),
+			E(u || d ? se : "div", { children: /* @__PURE__ */ E(b, {
+				chartType: e.chartType,
+				size: e.graph,
+				domain: c,
+				range: l,
+				charts: t,
+				data: s,
+				title: e.title,
+				onDataChange: this.changeData,
+				addCategoryEnabled: e.addCategoryEnabled,
+				categoryDefaultLabel: r,
+				error: n,
+				mathMlOptions: a,
+				labelsPlaceholders: o
+			}) }, `correct-response-graph-${e.correctAnswer.name}`),
+			(u || d) && /* @__PURE__ */ E(ce, {
+				component: "div",
+				type: "body1",
+				children: /* @__PURE__ */ E("span", { children: u || d })
+			})
+		] }, "graph") })] });
+	}
+}, he = [
+	.01,
+	.02,
+	.04,
+	.05,
+	.0625,
+	.1,
+	.125,
+	.2,
+	.25,
+	.5,
+	1,
+	2,
+	3,
+	4,
+	5,
+	8,
+	10,
+	12,
+	15,
+	20,
+	40,
+	50,
+	64,
+	100,
+	500,
+	1e3
+], ge = [
+	.01,
+	.02,
+	.05,
+	.1,
+	.2,
+	.25,
+	.5,
+	1,
+	2,
+	5,
+	10,
+	20,
+	50,
+	100,
+	500,
+	1e3
+], _e = {
+	.01: [
+		0,
+		.01,
+		.02,
+		.04,
+		.05,
+		.1
+	],
+	.02: [
+		0,
+		.02,
+		.04,
+		.1
+	],
+	.04: [
+		0,
+		.04,
+		.08,
+		.16,
+		.2
+	],
+	.05: [
+		0,
+		.05,
+		.1,
+		.2,
+		.25
+	],
+	.0625: [
+		0,
+		.0625,
+		.125,
+		.25,
+		.5
+	],
+	.1: [
+		0,
+		.1,
+		.2,
+		.4,
+		.5,
+		1
+	],
+	.125: [
+		0,
+		.125,
+		.25,
+		.5,
+		1
+	],
+	.2: [
+		0,
+		.2,
+		.5,
+		.1
+	],
+	.25: [
+		0,
+		.25,
+		.5,
+		1,
+		2
+	],
+	.5: [
+		0,
+		.5,
+		1,
+		2
+	],
+	1: [
+		0,
+		1,
+		2,
+		4,
+		5,
+		10
+	],
+	2: [
+		0,
+		2,
+		4,
+		8,
+		10
+	],
+	3: [
+		0,
+		3,
+		6,
+		12,
+		15
+	],
+	4: [
+		0,
+		4,
+		8,
+		16,
+		20
+	],
+	5: [
+		0,
+		5,
+		10,
+		20,
+		25
+	],
+	8: [
+		0,
+		8,
+		16,
+		32,
+		40,
+		64
+	],
+	10: [
+		0,
+		10,
+		20,
+		40,
+		50,
+		100
+	],
+	12: [
+		0,
+		12,
+		24
+	],
+	15: [
+		0,
+		15,
+		30,
+		60
+	],
+	20: [
+		0,
+		20,
+		40,
+		80,
+		100
+	],
+	40: [
+		0,
+		40,
+		80,
+		160,
+		200
+	],
+	50: [
+		0,
+		50,
+		100,
+		200,
+		250
+	],
+	64: [
+		0,
+		64,
+		128
+	],
+	100: [
+		0,
+		100,
+		200,
+		400,
+		500
+	],
+	500: [
+		0,
+		500,
+		1e3,
+		2500
+	],
+	1e3: [
+		0,
+		1e3,
+		2e3,
+		4e3,
+		5e3
+	]
+}, ve = (e, t, n = !1) => {
+	let r = 10 * (e.max - e.min) / t, i = r * 10, a = n && !ge.includes(e.step) && he.includes(e.step);
+	return (!n || a ? he : ge).filter((e) => e >= r && e <= i);
+}, ye = (e) => _e[e] || [], be = (e, t, r, i) => {
+	let a = ve(e, t), o = ye(e.step || 1);
+	if (!n(r, a) && !a.includes(e.step)) {
+		let n = ve(e, t, !0)[0] || 1;
+		return e.step = n, o = ye(n), o.includes(e.labelStep) || (e.labelStep = n), {
+			gridValues: a,
+			labelValues: o
+		};
+	}
+	return !n(i, o) && !o.includes(e.labelStep) && (e.labelStep = e.step), {
+		gridValues: a,
+		labelValues: o
+	};
+}, xe = (0, W.default)("@pie-element:graphing:configure"), { Panel: Se, toggle: Q, radio: Ce, dropdown: we, textField: Te } = f, Ee = a(v)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2)
+})), De = a(h)(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), $ = a("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), Oe = [
+	m.Bar(),
+	m.Histogram(),
+	m.LineDot(),
+	m.LineCross(),
+	m.DotPlot(),
+	m.LinePlot()
+], ke = class extends C.Component {
+	static propTypes = {
+		onModelChanged: O.default.func,
+		onConfigurationChanged: O.default.func,
+		imageSupport: O.default.object,
+		uploadSoundSupport: O.default.object,
+		model: O.default.object.isRequired,
+		configuration: O.default.object.isRequired,
+		chartingOptions: O.default.object
+	};
+	constructor(e) {
+		super(e);
+		let { range: t = {}, graph: n } = e.model || {}, r = { range: ve(t, n.height, !0) }, i = { range: ye(t.step || 1) };
+		this.state = {
+			gridValues: r,
+			labelValues: i
+		};
+	}
+	onRationaleChange = (e) => this.props.onModelChanged({
+		...this.props.model,
+		rationale: e
+	});
+	onPromptChange = (e) => this.props.onModelChanged({
+		...this.props.model,
+		prompt: e
+	});
+	onTeacherInstructionsChange = (e) => this.props.onModelChanged({
+		...this.props.model,
+		teacherInstructions: e
+	});
+	onChartTypeChange = (e) => this.props.onModelChanged({
+		...this.props.model,
+		chartType: e
+	});
+	onConfigChange = (e) => {
+		let { model: t, onModelChanged: n } = this.props, { gridValues: r, labelValues: i } = this.state, a = {
+			...t,
+			...e
+		}, { graph: o, range: s } = a, c = {}, l = {}, u = be(s, o.height, r.range, i.range);
+		c.range = u.gridValues, l.range = u.labelValues, this.setState({
+			gridValues: c,
+			labelValues: l
+		}), n(a);
+	};
+	render() {
+		let { configuration: e, imageSupport: t, model: n, onConfigurationChanged: r, onModelChanged: i, uploadSoundSupport: a } = this.props;
+		xe("[render] model", n);
+		let { graph: o } = n, { baseInputConfiguration: s = {}, contentDimensions: l = {}, chartDimensions: d = {}, authorNewCategoryDefaults: f = {}, labelsPlaceholders: p = {}, instruction: m = {}, maxImageWidth: h = {}, maxImageHeight: g = {}, prompt: _ = {}, rationale: v = {}, scoringType: y = {}, settingsPanelDisabled: b, spellCheck: x = {}, studentInstructions: S = {}, teacherInstructions: C = {}, titlePlaceholder: ee = {}, withRubric: w = {}, chartingOptions: T = {}, availableChartTypes: O = {}, mathMlOptions: k = {}, chartTypeLabel: A, language: j = {}, languageChoices: M = {}, labelsCharactersLimit: N } = e || {}, { errors: te, extraCSSRules: ne, promptEnabled: P, rationaleEnabled: re, spellCheckEnabled: F, teacherInstructionsEnabled: I, studentNewCategoryDefaultLabel: L } = n || {}, { categoryErrors: ie, correctAnswerErrors: z, prompt: B, rationale: V, teacherInstructions: H } = te || {}, { gridValues: U, labelValues: W } = this.state, G = d.showInConfigPanel || !0, K = h && h.prompt, q = g && g.prompt, J = {
+			changeInteractiveEnabled: T.changeInteractive?.settings && Q(T.changeInteractive.settingsLabel),
+			changeEditableEnabled: T.changeEditable?.settings && Q(T.changeEditable.settingsLabel),
+			changeAddCategoryEnabled: T.addCategory?.settings && Q(T.addCategory.settingsLabel)
+		}, Y = {
+			teacherInstructionsEnabled: C.settings && Q(C.label),
+			studentInstructionsEnabled: S.settings && Q(S.label),
+			rationaleEnabled: v.settings && Q(v.label),
+			spellCheckEnabled: x.settings && Q(x.label),
+			promptEnabled: _.settings && Q(_.label),
+			scoringType: y.settings && Ce(y.label, ["all or nothing", "partial scoring"]),
+			rubricEnabled: w?.settings && Q(w?.label),
+			"language.enabled": j.settings && Q(j.label, !0),
+			language: j.settings && j.enabled && we(M.label, M.options),
+			instruction: m.settings && Te(m.label)
+		}, X = (e = {}) => ({
+			...s,
+			...e
+		});
+		return /* @__PURE__ */ D(c.ConfigLayout, {
+			extraCSSRules: ne,
+			dimensions: l,
+			hideSettings: b,
+			settings: /* @__PURE__ */ E(Se, {
+				model: n,
+				configuration: e,
+				onChangeModel: i,
+				onChangeConfiguration: r,
+				groups: {
+					Settings: J,
+					Properties: Y
+				}
+			}),
+			children: [
+				/* @__PURE__ */ E(De, {
+					component: "div",
+					type: "body1",
+					children: m?.label || ""
+				}),
+				I && /* @__PURE__ */ D(Ee, {
+					label: C.label,
+					children: [/* @__PURE__ */ E(u, {
+						markup: n.teacherInstructions || "",
+						onChange: this.onTeacherInstructionsChange,
+						imageSupport: t,
+						nonEmpty: !1,
+						error: H,
+						spellCheck: F,
+						pluginProps: X(C?.inputConfiguration),
+						maxImageWidth: h && h.teacherInstructions || K,
+						maxImageHeight: g && g.teacherInstructions || q,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: k
+					}), H && /* @__PURE__ */ E($, { children: H })]
+				}),
+				P && /* @__PURE__ */ D(Ee, {
+					label: _.label,
+					children: [/* @__PURE__ */ E(u, {
+						markup: n.prompt,
+						onChange: this.onPromptChange,
+						imageSupport: t,
+						nonEmpty: !1,
+						error: B,
+						spellCheck: F,
+						disableUnderline: !0,
+						pluginProps: X(_?.inputConfiguration),
+						maxImageWidth: K,
+						maxImageHeight: q,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: k
+					}), B && /* @__PURE__ */ E($, { children: B })]
+				}),
+				/* @__PURE__ */ E(R, {
+					model: n,
+					onChange: this.onConfigChange,
+					gridValues: U,
+					labelValues: W,
+					chartDimensions: d,
+					charts: Oe,
+					studentNewCategoryDefaultLabel: L,
+					availableChartTypes: O,
+					chartTypeLabel: A
+				}),
+				/* @__PURE__ */ E(ae, {
+					model: n,
+					onChange: i,
+					charts: Oe,
+					labelsPlaceholders: p,
+					titlePlaceholder: ee,
+					showPixelGuides: G,
+					authorNewCategoryDefaults: f,
+					chartingOptions: T,
+					mathMlOptions: k,
+					labelsCharactersLimit: N
+				}),
+				/* @__PURE__ */ E(me, {
+					config: o,
+					model: n,
+					onChange: i,
+					charts: Oe,
+					error: ie,
+					correctAnswerErrors: z,
+					studentNewCategoryDefaultLabel: L,
+					mathMlOptions: k,
+					labelsPlaceholders: p
+				}),
+				re && /* @__PURE__ */ D(Ee, {
+					label: v.label || "Rationale",
+					children: [/* @__PURE__ */ E(u, {
+						markup: n.rationale || "",
+						onChange: this.onRationaleChange,
+						imageSupport: t,
+						error: V,
+						spellCheck: F,
+						pluginProps: X(v?.inputConfiguration),
+						maxImageWidth: h && h.rationale || K,
+						maxImageHeight: g && g.rationale || q,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: k
+					}), V && /* @__PURE__ */ E($, { children: V })]
+				})
+			]
+		});
+	}
+}, Ae = {
+	model: {
+		addCategoryEnabled: !0,
+		changeAddCategoryEnabled: !1,
+		changeEditableEnabled: !1,
+		changeInteractiveEnabled: !1,
+		chartType: "lineCross",
+		correctAnswer: {},
+		data: [],
+		domain: {},
+		graph: {
+			width: 480,
+			height: 480
+		},
+		prompt: "",
+		promptEnabled: !0,
+		range: {
+			label: "",
+			max: 1,
+			min: 0,
+			labelStep: 1
+		},
+		rationale: "",
+		rationaleEnabled: !0,
+		scoringType: "all or nothing",
+		studentInstructionsEnabled: !0,
+		studentNewCategoryDefaultLabel: "New Category",
+		teacherInstructions: "",
+		teacherInstructionsEnabled: !0,
+		title: ""
+	},
+	configuration: {
+		baseInputConfiguration: {
+			h3: { disabled: !0 },
+			audio: { disabled: !1 },
+			video: { disabled: !1 },
+			image: { disabled: !1 },
+			textAlign: { disabled: !0 },
+			showParagraphs: { disabled: !1 },
+			separateParagraphs: { disabled: !0 }
+		},
+		spellCheck: {
+			label: "Spellcheck",
+			settings: !1,
+			enabled: !0
+		},
+		chartDimensions: {
+			settings: !1,
+			label: "Chart Dimensions",
+			showInConfigPanel: !0,
+			width: {
+				min: 50,
+				max: 700,
+				step: 20
+			},
+			height: {
+				min: 400,
+				max: 700,
+				step: 20
+			}
+		},
+		authorNewCategoryDefaults: {
+			settings: !1,
+			label: "Category",
+			interactive: !0,
+			editable: !1
+		},
+		availableChartTypes: {
+			bar: "Bar Chart",
+			histogram: "Histogram",
+			lineDot: "Line Chart ●",
+			lineCross: "Line Chart x",
+			dotPlot: "Dot/Line Plot ⬤",
+			linePlot: "Dot/Line Plot X"
+		},
+		chartTypeLabel: "ChartType",
+		studentNewCategoryDefaultLabel: {
+			settings: !1,
+			label: "Category"
+		},
+		prompt: {
+			settings: !0,
+			label: "Item Stem",
+			required: !1,
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			}
+		},
+		rationale: {
+			settings: !0,
+			label: "Rationale",
+			required: !1,
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			}
+		},
+		scoringType: {
+			settings: !1,
+			label: "Scoring Type"
+		},
+		settingsPanelDisabled: !1,
+		studentInstructions: {
+			settings: !1,
+			label: "Student Instructions"
+		},
+		teacherInstructions: {
+			settings: !0,
+			label: "Teacher Instructions",
+			required: !1,
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			}
+		},
+		title: {
+			settings: !1,
+			label: "Chart Title"
+		},
+		instruction: {
+			settings: !1,
+			label: "This item type provides various types of interactive charts. Depending upon how an item is configured,\n          students can change the heights of bars (or other similar chart elements) created by the author; relabel bars\n          created by the author; and/or add new bars, label them, and set their heights."
+		},
+		titlePlaceholder: {
+			settings: !1,
+			label: "Click here to add a title"
+		},
+		labelsPlaceholders: {
+			left: "Click here to add a label for this axis",
+			right: "",
+			top: "",
+			bottom: "Click here to add a label for this axis"
+		},
+		maxImageWidth: {
+			teacherInstructions: 300,
+			prompt: 300,
+			rationale: 300
+		},
+		maxImageHeight: {
+			teacherInstructions: 300,
+			prompt: 300,
+			rationale: 300
+		},
+		withRubric: {
+			settings: !1,
+			label: "Add Rubric"
+		},
+		language: {
+			settings: !1,
+			label: "Specify Language",
+			enabled: !1
+		},
+		languageChoices: {
+			label: "Language Choices",
+			options: []
+		},
+		chartingOptions: {
+			changeInteractive: {
+				settings: !1,
+				authoringLabel: "Student can set value",
+				settingsLabel: "Allow non-interactive categories"
+			},
+			changeEditable: {
+				settings: !1,
+				authoringLabel: "Student can edit name",
+				settingsLabel: "Allow editable category names"
+			},
+			addCategory: {
+				settings: !1,
+				authoringLabel: "Student can add categories",
+				settingsLabel: "Allow changes to whether students can add categories"
+			},
+			mathMlOptions: {
+				mmlOutput: !1,
+				mmlEditing: !1
+			}
+		}
+	}
+}, je = (0, W.default)("pie-elements:graphing:configure"), Me = class e extends HTMLElement {
+	static createDefaultModel = (e = {}) => ({
+		...Ae.model,
+		...e
+	});
+	constructor() {
+		super(), this._root = null, this._model = e.createDefaultModel(), this._configuration = Ae.configuration;
+	}
+	set model(t) {
+		this._model = e.createDefaultModel(t), this._render();
+	}
+	set configuration(e) {
+		let t = {
+			...Ae.configuration,
+			...e
+		};
+		this._configuration = t, t?.language?.enabled ? t?.languageChoices?.options?.length && (this._model.language = t?.languageChoices.options[0].value) : t.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(), je("[onModelChanged]: ", this._model), this.dispatchEvent(new z(this._model));
+	}
+	onConfigurationChanged(e) {
+		this._configuration = e, this._render();
+	}
+	insertImage(e) {
+		this.dispatchEvent(new V(e));
+	}
+	onDeleteImage(e, t) {
+		this.dispatchEvent(new B(e, t));
+	}
+	insertSound(e) {
+		this.dispatchEvent(new U(e));
+	}
+	onDeleteSound(e, t) {
+		this.dispatchEvent(new H(e, t));
+	}
+	_render() {
+		if (this._model) {
+			let e = C.createElement(ke, {
+				onModelChanged: this.onModelChanged.bind(this),
+				onConfigurationChanged: this.onConfigurationChanged.bind(this),
+				model: this._model,
+				configuration: this._configuration,
+				imageSupport: {
+					add: this.insertImage.bind(this),
+					delete: this.onDeleteImage.bind(this)
+				},
+				uploadSoundSupport: {
+					add: this.insertSound.bind(this),
+					delete: this.onDeleteSound.bind(this)
+				}
+			});
+			this._root ||= T(this), this._root.render(e), queueMicrotask(() => {
+				s(this);
+			});
+		}
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { Me as default };
+
+//# sourceMappingURL=index.js.map