@pie-element/charting 12.1.1-next.11 → 12.1.2-next.0

package/dist/browser/author/index.js

@@ -0,0 +1,1242 @@
+import { G as e, Y as t, n } from "../_baseSet-Cse6EM9A.js";
+import { A as r, C as i, E as a, O as o, S as s, a as c, c as l, d as u, f as d, g as f, i as p, k as m, l as h, m as g, o as _, p as v, r as y, s as b, t as x } from "../chart-Dghjf6JQ.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__ */ t(r(), 1), k = m("div")(() => ({ width: "160px" })), A = m(s)(() => ({ width: "160px" })), j = m(i)(() => ({ 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(v, {
+		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 = m("div")(() => ({ width: "450px" })), ne = m("div")(({ theme: e }) => ({
+	display: "flex",
+	flexDirection: "column",
+	width: "100%",
+	marginTop: e.spacing(3)
+})), P = m("div")(() => ({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center"
+})), F = m("div")(() => ({
+	display: "flex",
+	justifyContent: "space-around",
+	alignItems: "center"
+})), I = m(_)(({ theme: e }) => ({
+	width: "130px",
+	margin: `${e.spacing(1)} ${e.spacing(.5)}`
+})), L = m(_)(({ theme: e }) => ({
+	width: "160px",
+	margin: `${e.spacing(1)} ${e.spacing(.5)}`
+})), R = m("div")(({ theme: e }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	margin: `${e.spacing(3)} 0`
+})), re = m(g)(() => ({ color: o.disabled() })), z = (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(""), [h, _] = w(0), { range: v = {}, correctAnswer: y, 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
+	}, z = i && i.range ? { customValues: i.range } : {
+		min: 0,
+		max: 1e4
+	}, B = a && a.range ? { customValues: a.range } : {
+		min: 0,
+		max: 1e4
+	}, V = /* @__PURE__ */ D(F, { children: [/* @__PURE__ */ E(L, {
+		label: "Grid Interval",
+		value: v.step,
+		variant: "outlined",
+		onChange: (e, t) => Y("step", t, e),
+		...z
+	}), /* @__PURE__ */ E(L, {
+		label: "Label Interval",
+		value: v.labelStep,
+		variant: "outlined",
+		onChange: (e, t) => Y("labelStep", t, e),
+		...B
+	})] }), H = (e) => {
+		u((t) => ({
+			...t,
+			open: e
+		})), f(e);
+	}, U = (e, t) => e.map((e) => (Object.prototype.hasOwnProperty.call(e, t) && (e[t] = t == "interactive"), e)), W = (e) => {
+		let { correctAnswer: r, data: i } = t;
+		x === !1 && U(i, "interactive"), S === !1 && U(i, "editable"), N(i, e, v, n, t), N(r.data, !1, v, n, t);
+	}, G = () => {
+		let e = o?.label;
+		n({
+			...t,
+			studentCategoryDefaultLabel: e
+		});
+	}, K = (e) => e.includes("Plot") ? {
+		min: 3,
+		max: 10
+	} : {
+		min: .05,
+		max: 1e4
+	}, q = (e, r) => {
+		let i = {
+			...C,
+			[e]: r
+		};
+		n({
+			...t,
+			graph: i
+		});
+	}, J = (e, t) => (e || []).find((e) => e.value > t.max || e.value - t.step * Math.floor(e.value / t.step) !== 0), Y = (e, r, i) => {
+		_(v[e]), m(e), v[e] = r, (e === "max" || e === "step") && (J(t.data, v) || J(t.correctAnswer.data, v)) && i?.target ? f(!0) : n({
+			...t,
+			range: v
+		});
+	};
+	ee(() => {
+		W(!0), G();
+	}, []), ee(() => {
+		d && u({
+			open: !0,
+			title: "Warning",
+			text: "This change will remove values defined for one or more categories",
+			onConfirm: () => {
+				W(), H(!1), n({
+					...t,
+					range: v,
+					correctAnswer: y
+				});
+			},
+			onClose: () => {
+				v[p] = h, H(!1);
+			}
+		});
+	}, [d]);
+	let X = v.step === 1 && v.labelStep === 1 && 3 <= v.max && v.max <= 10, ie = () => {
+		K.min = 3, K.max = 10, v.max = 10, v.step = 1, v.labelStep = 1, n({
+			...t,
+			range: v
+		});
+	}, Z = (e) => {
+		if (e.includes("Plot")) {
+			if (!X) {
+				u({
+					open: !0,
+					title: "Warning",
+					text: "The selected chart type does not support the current chart configuration. Reset chart configuration?",
+					onConfirm: () => {
+						ie(), W(), H(!1), n({
+							...t,
+							range: v,
+							chartType: e
+						});
+					},
+					onClose: () => {
+						H(!1);
+					}
+				});
+				return;
+			}
+			K.min = 3, K.max = 10, n({
+				...t,
+				chartType: e
+			});
+			return;
+		}
+		n({
+			...t,
+			chartType: e
+		});
+	};
+	return /* @__PURE__ */ D(te, { children: [
+		/* @__PURE__ */ E(g, {
+			variant: "subtitle1",
+			children: "Configure Chart"
+		}),
+		/* @__PURE__ */ D(ne, { children: [
+			/* @__PURE__ */ D(F, { children: [/* @__PURE__ */ E(M, {
+				value: t.chartType,
+				onChange: (e) => Z(e.target.value),
+				availableChartTypes: s,
+				chartTypeLabel: c
+			}), /* @__PURE__ */ E(L, {
+				label: "Max Value",
+				value: v.max,
+				min: K(t.chartType).min,
+				max: K(t.chartType).max,
+				variant: "outlined",
+				onChange: (e, t) => Y("max", t, e)
+			})] }),
+			!t.chartType.includes("Plot") && V,
+			T && /* @__PURE__ */ D(R, { children: [
+				/* @__PURE__ */ E("div", { children: /* @__PURE__ */ E(g, { children: "Dimensions(px)" }) }),
+				/* @__PURE__ */ D(P, { children: [/* @__PURE__ */ E(I, {
+					label: "Width",
+					value: C.width,
+					min: A.min,
+					max: A.max,
+					step: A.step,
+					variant: "outlined",
+					onChange: (e, t) => q("width", t)
+				}), /* @__PURE__ */ E(re, { children: "Min 50, Max 700" })] }),
+				/* @__PURE__ */ D(P, { children: [/* @__PURE__ */ E(I, {
+					label: "Height",
+					value: C.height,
+					min: j.min,
+					max: j.max,
+					step: j.step,
+					variant: "outlined",
+					onChange: (e, t) => q("height", t)
+				}), /* @__PURE__ */ E(re, { children: "Min 400, Max 700" })] })
+			] })
+		] }),
+		/* @__PURE__ */ E(b, {
+			open: l.open,
+			title: l.title,
+			text: l.text,
+			onClose: l.onClose,
+			onConfirm: l.onConfirm
+		})
+	] });
+};
+z.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 B = 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;
+	}
+}, V = 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;
+	}
+}, H = class e extends CustomEvent {
+	static {
+		this.TYPE = "insert.image";
+	}
+	constructor(t) {
+		super(e.TYPE, {
+			bubbles: !0,
+			detail: t
+		}), this.handler = t;
+	}
+}, U = 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;
+	}
+}, W = class e extends CustomEvent {
+	static {
+		this.TYPE = "insert.sound";
+	}
+	constructor(t) {
+		super(e.TYPE, {
+			bubbles: !0,
+			detail: t
+		}), this.handler = t;
+	}
+}, G = /* @__PURE__ */ t(e(), 1), K = m("div")(({ theme: e }) => ({
+	marginBottom: e.spacing(2.5),
+	display: "flex",
+	flex: 1
+})), q = m("div")(({ theme: e }) => ({ marginBottom: e.spacing(1) })), J = m("div")({ flex: 1 }), Y = m(l)({ color: `${o.tertiary()} !important` }), X = (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;
+}, ie = 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 = X(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(q, { children: "Define Initial Chart Attributes" }), /* @__PURE__ */ E(K, { children: /* @__PURE__ */ D(J, { children: [
+			/* @__PURE__ */ E(g, {
+				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(x, {
+				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(Y, {
+				checked: e.addCategoryEnabled,
+				onChange: (e) => {
+					this.changeAddRemoveEnabled(e.target.checked);
+				}
+			}), o?.addCategory?.authoringLabel] }),
+			/* @__PURE__ */ E(b, {
+				open: l.open,
+				title: l.title,
+				text: l.text,
+				onClose: l.onClose,
+				onConfirm: l.onConfirm
+			})
+		] }, "graph") })] });
+	}
+}, Z = m("div")(({ theme: e }) => ({
+	marginBottom: e.spacing(2.5),
+	display: "flex",
+	flex: 1
+})), ae = m("div")({ flex: 1 }), oe = m("div")(({ theme: e }) => ({ border: `2px solid ${e.palette.error.main}` })), se = m(g)(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), ce = m("div")(({ theme: e }) => ({ marginBottom: e.spacing(1) })), Q = (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
+})), le = (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 Q((r || []).concat(i), t);
+	}
+	return r;
+}, ue = (e, t) => {
+	let n = t.length - 1, { editable: r, interactive: i, deletable: a, ...o } = t[t.length - 1];
+	return (e || []).splice(n, 0, o), Q([...e], t);
+}, de = (e, t, n) => ((e || []).splice(n, 1), Q([...e], t)), fe = (e, t, n) => {
+	let r = e && e.model && e.model.data || [], i = t && t.model && t.model.data || [], a = f(e && e.model && e.model.correctAnswer && e.model.correctAnswer.data || []), o = f(n ? n.categories : []), s = [];
+	if (r.length > i.length) return s = ue(a, r), s;
+	if (r.length < i.length) {
+		let e = r.length;
+		for (let t = 0; t < r.length; t++) if (r[t].index !== t) {
+			e = t;
+			break;
+		}
+		return s = de(o, r, e), s;
+	}
+	return s = le(a, r), s;
+}, pe = 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 = fe(this.props, this.props, null);
+		this.setState({ categories: e || le(this.props.model.correctAnswer.data, this.props.model.data) });
+	}
+	componentDidUpdate(e, t) {
+		let r = fe(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(ce, { children: "Define Correct Response" }), /* @__PURE__ */ E(Z, { children: /* @__PURE__ */ D(ae, { children: [
+			/* @__PURE__ */ E(g, {
+				component: "div",
+				type: "body1",
+				children: /* @__PURE__ */ E("span", { children: "Use the tools below to define the correct answer." })
+			}),
+			E(u || d ? oe : "div", { children: /* @__PURE__ */ E(x, {
+				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(se, {
+				component: "div",
+				type: "body1",
+				children: /* @__PURE__ */ E("span", { children: u || d })
+			})
+		] }, "graph") })] });
+	}
+}, me = [
+	.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
+], he = [
+	.01,
+	.02,
+	.05,
+	.1,
+	.2,
+	.25,
+	.5,
+	1,
+	2,
+	5,
+	10,
+	20,
+	50,
+	100,
+	500,
+	1e3
+], ge = {
+	.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
+	]
+}, _e = (e, t, n = !1) => {
+	let r = 10 * (e.max - e.min) / t, i = r * 10, a = n && !he.includes(e.step) && me.includes(e.step);
+	return (!n || a ? me : he).filter((e) => e >= r && e <= i);
+}, ve = (e) => ge[e] || [], ye = (e, t, r, i) => {
+	let a = _e(e, t), o = ve(e.step || 1);
+	if (!n(r, a) && !a.includes(e.step)) {
+		let n = _e(e, t, !0)[0] || 1;
+		return e.step = n, o = ve(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
+	};
+}, be = (0, G.default)("@pie-element:graphing:configure"), { Panel: xe, toggle: $, radio: Se, dropdown: Ce, textField: we } = p, Te = m(y)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2)
+})), Ee = m(g)(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), De = m("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), Oe = [
+	h.Bar(),
+	h.Histogram(),
+	h.LineDot(),
+	h.LineCross(),
+	h.DotPlot(),
+	h.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: _e(t, n.height, !0) }, i = { range: ve(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 = ye(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;
+		be("[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: F, spellCheckEnabled: I, teacherInstructionsEnabled: L, studentNewCategoryDefaultLabel: R } = n || {}, { categoryErrors: re, correctAnswerErrors: B, prompt: V, rationale: H, teacherInstructions: U } = te || {}, { gridValues: W, labelValues: G } = this.state, K = d.showInConfigPanel || !0, q = h && h.prompt, J = g && g.prompt, Y = {
+			changeInteractiveEnabled: T.changeInteractive?.settings && $(T.changeInteractive.settingsLabel),
+			changeEditableEnabled: T.changeEditable?.settings && $(T.changeEditable.settingsLabel),
+			changeAddCategoryEnabled: T.addCategory?.settings && $(T.addCategory.settingsLabel)
+		}, X = {
+			teacherInstructionsEnabled: C.settings && $(C.label),
+			studentInstructionsEnabled: S.settings && $(S.label),
+			rationaleEnabled: v.settings && $(v.label),
+			spellCheckEnabled: x.settings && $(x.label),
+			promptEnabled: _.settings && $(_.label),
+			scoringType: y.settings && Se(y.label, ["all or nothing", "partial scoring"]),
+			rubricEnabled: w?.settings && $(w?.label),
+			"language.enabled": j.settings && $(j.label, !0),
+			language: j.settings && j.enabled && Ce(M.label, M.options),
+			instruction: m.settings && we(m.label)
+		}, Z = (e = {}) => ({
+			...s,
+			...e
+		});
+		return /* @__PURE__ */ D(c.ConfigLayout, {
+			extraCSSRules: ne,
+			dimensions: l,
+			hideSettings: b,
+			settings: /* @__PURE__ */ E(xe, {
+				model: n,
+				configuration: e,
+				onChangeModel: i,
+				onChangeConfiguration: r,
+				groups: {
+					Settings: Y,
+					Properties: X
+				}
+			}),
+			children: [
+				/* @__PURE__ */ E(Ee, {
+					component: "div",
+					type: "body1",
+					children: m?.label || ""
+				}),
+				L && /* @__PURE__ */ D(Te, {
+					label: C.label,
+					children: [/* @__PURE__ */ E(u, {
+						markup: n.teacherInstructions || "",
+						onChange: this.onTeacherInstructionsChange,
+						imageSupport: t,
+						nonEmpty: !1,
+						error: U,
+						spellCheck: I,
+						pluginProps: Z(C?.inputConfiguration),
+						maxImageWidth: h && h.teacherInstructions || q,
+						maxImageHeight: g && g.teacherInstructions || J,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: k
+					}), U && /* @__PURE__ */ E(De, { children: U })]
+				}),
+				P && /* @__PURE__ */ D(Te, {
+					label: _.label,
+					children: [/* @__PURE__ */ E(u, {
+						markup: n.prompt,
+						onChange: this.onPromptChange,
+						imageSupport: t,
+						nonEmpty: !1,
+						error: V,
+						spellCheck: I,
+						disableUnderline: !0,
+						pluginProps: Z(_?.inputConfiguration),
+						maxImageWidth: q,
+						maxImageHeight: J,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: k
+					}), V && /* @__PURE__ */ E(De, { children: V })]
+				}),
+				/* @__PURE__ */ E(z, {
+					model: n,
+					onChange: this.onConfigChange,
+					gridValues: W,
+					labelValues: G,
+					chartDimensions: d,
+					charts: Oe,
+					studentNewCategoryDefaultLabel: R,
+					availableChartTypes: O,
+					chartTypeLabel: A
+				}),
+				/* @__PURE__ */ E(ie, {
+					model: n,
+					onChange: i,
+					charts: Oe,
+					labelsPlaceholders: p,
+					titlePlaceholder: ee,
+					showPixelGuides: K,
+					authorNewCategoryDefaults: f,
+					chartingOptions: T,
+					mathMlOptions: k,
+					labelsCharactersLimit: N
+				}),
+				/* @__PURE__ */ E(pe, {
+					config: o,
+					model: n,
+					onChange: i,
+					charts: Oe,
+					error: re,
+					correctAnswerErrors: B,
+					studentNewCategoryDefaultLabel: R,
+					mathMlOptions: k,
+					labelsPlaceholders: p
+				}),
+				F && /* @__PURE__ */ D(Te, {
+					label: v.label || "Rationale",
+					children: [/* @__PURE__ */ E(u, {
+						markup: n.rationale || "",
+						onChange: this.onRationaleChange,
+						imageSupport: t,
+						error: H,
+						spellCheck: I,
+						pluginProps: Z(v?.inputConfiguration),
+						maxImageWidth: h && h.rationale || q,
+						maxImageHeight: g && g.rationale || J,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: k
+					}), H && /* @__PURE__ */ E(De, { children: H })]
+				})
+			]
+		});
+	}
+}, 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, G.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 B(this._model));
+	}
+	onConfigurationChanged(e) {
+		this._configuration = e, this._render();
+	}
+	insertImage(e) {
+		this.dispatchEvent(new H(e));
+	}
+	onDeleteImage(e, t) {
+		this.dispatchEvent(new V(e, t));
+	}
+	insertSound(e) {
+		this.dispatchEvent(new W(e));
+	}
+	onDeleteSound(e, t) {
+		this.dispatchEvent(new U(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(() => {
+				a(this);
+			});
+		}
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { Me as default };
+
+//# sourceMappingURL=index.js.map