@pie-element/graphing 10.1.2-next.2 → 10.1.2-next.20

package/dist/browser/author/index.js

@@ -1,5 +1,5 @@
-import { D as e, N as t, R as n, _ as r, h as i, p as a, u as o, v as s } from "../dist-BrN2xZtM.js";
-import { $ as c, A as l, B as u, C as d, F as f, G as p, H as m, I as h, J as g, K as _, L as v, M as y, N as b, Q as x, R as S, S as C, U as w, V as T, W as E, X as D, Y as O, Z as k, _ as A, a as ee, at as j, b as M, c as te, ct as N, d as ne, dt as P, et as F, f as re, ft as I, g as ie, gt as L, h as ae, ht as oe, i as R, it as z, j as se, k as ce, l as le, lt as B, m as ue, mt as de, n as fe, nt as V, ot as pe, p as me, pt as he, q as H, r as ge, rt as U, s as _e, st as ve, t as ye, u as be, ut as xe, v as Se, w as Ce, x as W, y as we } from "../container-DwOO2mgz.js";
+import { D as e, N as t, R as n, _ as r, h as i, p as a, u as o, v as s } from "../dist-BWfnGHRk.js";
+import { $ as c, A as l, B as u, C as d, F as f, G as p, H as m, I as h, J as g, K as _, L as v, M as y, N as b, Q as x, R as S, S as C, U as w, V as T, W as E, X as D, Y as O, Z as k, _ as A, a as ee, at as j, b as M, c as te, ct as N, d as ne, dt as P, et as F, f as re, ft as I, g as ie, gt as L, h as ae, ht as oe, i as R, it as z, j as se, k as ce, l as le, lt as B, m as ue, mt as de, n as fe, nt as V, ot as pe, p as me, pt as he, q as H, r as ge, rt as U, s as _e, st as ve, t as ye, u as be, ut as xe, v as Se, w as Ce, x as W, y as we } from "../container-DK35BR--.js";
 import * as G from "react";
 import K, { Component as Te, createElement as Ee } from "react";
 import { createRoot as De } from "react-dom/client";
@@ -2270,9 +2270,9 @@ var dr = ur()(function(e) {
 dr.displayName = "Measure", dr.propTypes.children = Q.default.func;
 //#endregion
 //#region ../../lib-react/config-ui/dist/layout/settings-box.js
-var fr = z("div")(({ theme: e }) => ({
-	backgroundColor: e.palette.background.paper,
-	border: `2px solid ${e.palette.grey[200]}`,
+var fr = z("div")(() => ({
+	backgroundColor: V.white(),
+	border: `2px solid ${V.border()}`,
 	display: "flex",
 	flexDirection: "column",
 	justifyContent: "flex-start",
@@ -2792,17 +2792,17 @@ var Di = (e) => {
 				step: 1,
 				labelStep: 0
 			};
+		}, r = {
+			...c,
+			...e ? { labelStep: 1 } : n("range")
+		}, i = {
+			...t,
+			...e ? { labelStep: 1 } : n("domain")
 		};
 		o({
 			includeAxes: e,
-			range: {
-				...c,
-				...e ? { labelStep: 1 } : n("range")
-			},
-			domain: {
-				...t,
-				...e ? { labelStep: 1 } : n("domain")
-			}
+			range: r,
+			domain: i
 		});
 	}, T = (e) => {
 		o({
@@ -3439,68 +3439,68 @@ var Oi = [
 			})
 		] });
 	}
-}, Wi = E(/*#__PURE__*/ q("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z" }), "Info"), Gi = "#D5D5D5", Ki = "#AAAAAA", qi = z("div")({ color: Ki }), Ji = z("div")(({ theme: e }) => ({
+}, Wi = E(/*#__PURE__*/ q("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z" }), "Info"), Gi = z("div")({ color: V.text() }), Ki = z("div")(({ theme: e }) => ({
 	margin: `${e.spacing(2.5)} 0`,
 	cursor: "pointer",
-	background: e.palette.grey[200],
+	background: V.backgroundDark(),
 	padding: e.spacing(1.5),
 	width: "fit-content",
 	borderRadius: "4px",
-	"&:hover": { background: Gi }
-})), Yi = z("div")(({ theme: e }) => ({
+	"&:hover": { background: V.dropdownBackground() }
+})), qi = z("div")(({ theme: e }) => ({
 	marginTop: e.spacing(1),
 	display: "flex",
 	flexWrap: "wrap"
-})), Xi = z("div")(({ theme: e }) => ({
+})), Ji = z("div")(({ theme: e }) => ({
 	cursor: "pointer",
 	margin: e.spacing(1),
 	padding: e.spacing(1),
-	border: `2px solid ${e.palette.common.white}`,
+	border: `2px solid ${V.background()}`,
 	textTransform: "capitalize",
-	"&:hover": { color: e.palette.grey[800] }
-})), Zi = z(Xi)({
-	background: Gi,
-	border: `2px solid ${Ki}`
-}), Qi = z("div")(({ theme: e }) => ({
+	"&:hover": { color: V.text() }
+})), Yi = z(Ji)({
+	background: V.dropdownBackground(),
+	border: `2px solid ${V.border()}`
+}), Xi = z("div")(({ theme: e }) => ({
 	display: "flex",
 	alignItems: "center",
 	marginTop: e.spacing(2.5)
-})), $i = z("div")(({ theme: e }) => ({
+})), Zi = z("div")(() => ({
 	marginLeft: "6px",
-	color: e.palette.grey[600],
+	color: V.borderGray(),
 	"&:hover": {
 		cursor: "pointer",
-		color: e.palette.common.black
+		color: V.text()
 	}
-})), ea = z("div")(({ theme: e }) => ({ marginBottom: e.spacing(.5) })), ta = z(({ className: e, ...t }) => /* @__PURE__ */ q(jt, {
+})), Qi = z("div")(({ theme: e }) => ({ marginBottom: e.spacing(.5) })), $i = z(({ className: e, ...t }) => /* @__PURE__ */ q(jt, {
 	...t,
 	classes: { tooltip: e }
 }))(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
 	fontSize: e.typography.fontSize - 2,
 	whiteSpace: "pre",
 	maxWidth: "500px"
-} })), na = z(W)(({ theme: e }) => ({
+} })), ea = z(W)(({ theme: e }) => ({
 	marginTop: e.spacing(1.5),
 	marginBottom: e.spacing(1)
-})), ra = z("div")({
+})), ta = z("div")({
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "space-between"
-}), ia = z("div")({
+}), na = z("div")({
 	display: "flex",
 	alignItems: "center",
 	width: "300px"
-}), aa = z(Se)(({ theme: e }) => ({
+}), ra = z(Se)(({ theme: e }) => ({
 	marginLeft: e.spacing(1),
 	textTransform: "uppercase",
-	color: e.palette.grey[800]
-})), oa = z(A)({ textTransform: "uppercase" }), sa = z("div")(({ theme: e }) => ({
+	color: V.text()
+})), ia = z(A)({ textTransform: "uppercase" }), aa = z("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	marginTop: e.spacing(1)
-})), ca = ({ availableTools: e, defaultTool: t, hasErrors: n, toolbarTools: r, toggleToolBarTool: i, onDefaultToolChange: a }) => {
+})), oa = ({ availableTools: e, defaultTool: t, hasErrors: n, toolbarTools: r, toggleToolBarTool: i, onDefaultToolChange: a }) => {
 	let o = e || [], s = o.includes("label"), c = (r || []).filter((e) => e !== "label");
-	return s && (o = [...o.filter((e) => e !== "label"), "label"]), /* @__PURE__ */ J(qi, { children: [/* @__PURE__ */ J(ra, { children: [/* @__PURE__ */ q("span", { children: "GRAPHING TOOLS" }), c.length > 0 && /* @__PURE__ */ J(ia, { children: [/* @__PURE__ */ q("span", { children: "Default graphing tool:" }), /* @__PURE__ */ q(aa, {
+	return s && (o = [...o.filter((e) => e !== "label"), "label"]), /* @__PURE__ */ J(Gi, { children: [/* @__PURE__ */ J(ta, { children: [/* @__PURE__ */ q("span", { children: "GRAPHING TOOLS" }), c.length > 0 && /* @__PURE__ */ J(na, { children: [/* @__PURE__ */ q("span", { children: "Default graphing tool:" }), /* @__PURE__ */ q(ra, {
 		variant: "standard",
 		onChange: a,
 		value: t,
@@ -3509,17 +3509,17 @@ var Oi = [
 			enter: 225,
 			exit: 195
 		} },
-		children: c.map((e, t) => /* @__PURE__ */ q(oa, {
+		children: c.map((e, t) => /* @__PURE__ */ q(ia, {
 			value: e,
 			children: e
 		}, t))
-	})] })] }), /* @__PURE__ */ q(Yi, { children: o.map((e) => /* @__PURE__ */ q(r.find((t) => t === e) ? Zi : Xi, {
+	})] })] }), /* @__PURE__ */ q(qi, { children: o.map((e) => /* @__PURE__ */ q(r.find((t) => t === e) ? Yi : Ji, {
 		style: { ...n && e !== "label" && { color: "red" } },
 		onClick: () => i(e),
 		children: e.toUpperCase()
 	}, e)) })] });
 };
-ca.propTypes = {
+oa.propTypes = {
 	toolbarTools: Q.default.arrayOf(Q.default.string),
 	toggleToolBarTool: Q.default.func,
 	availableTools: Q.default.array,
@@ -3527,7 +3527,7 @@ ca.propTypes = {
 	hasErrors: Q.default.number,
 	onDefaultToolChange: Q.default.func
 };
-var la = class extends G.Component {
+var sa = class extends G.Component {
 	static propTypes = {
 		availableTools: Q.default.array,
 		errors: Q.default.object,
@@ -3646,12 +3646,12 @@ var la = class extends G.Component {
 				variant: "h6",
 				children: "Define Tool Set and Correct Response"
 			}),
-			/* @__PURE__ */ q(na, {
+			/* @__PURE__ */ q(ea, {
 				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__ */ q(ca, {
+			/* @__PURE__ */ q(oa, {
 				availableTools: e,
 				defaultTool: u,
 				hasErrors: !!b,
@@ -3659,13 +3659,13 @@ var la = class extends G.Component {
 				toggleToolBarTool: this.toggleToolBarTool,
 				toolbarTools: v
 			}),
-			b && /* @__PURE__ */ q(sa, { children: b }),
+			b && /* @__PURE__ */ q(aa, { children: b }),
 			Object.entries(o || {}).map(([e, t]) => {
 				let { marks: n = [], name: a } = t || {};
 				return /* @__PURE__ */ J(G.Fragment, { children: [
-					/* @__PURE__ */ J(Qi, { children: [
-						/* @__PURE__ */ q(ea, { children: a }),
-						e === "correctAnswer" && /* @__PURE__ */ q(ta, {
+					/* @__PURE__ */ J(Xi, { children: [
+						/* @__PURE__ */ q(Qi, { children: a }),
+						e === "correctAnswer" && /* @__PURE__ */ q($i, {
 							disableFocusListener: !0,
 							disableTouchListener: !0,
 							placement: "right",
@@ -3679,7 +3679,7 @@ var la = class extends G.Component {
 								}
 							})
 						}),
-						e !== "correctAnswer" && /* @__PURE__ */ q($i, {
+						e !== "correctAnswer" && /* @__PURE__ */ q(Zi, {
 							onClick: () => this.deleteAlternateResponse(e, t),
 							children: /* @__PURE__ */ q(C, {})
 						})
@@ -3710,10 +3710,10 @@ var la = class extends G.Component {
 						removeIncompleteTool: i,
 						limitLabeling: !0
 					}),
-					y[e] && /* @__PURE__ */ q(sa, { children: y[e] })
+					y[e] && /* @__PURE__ */ q(aa, { children: y[e] })
 				] }, `correct-response-graph-${a}`);
 			}),
-			/* @__PURE__ */ q(Ji, {
+			/* @__PURE__ */ q(Ki, {
 				onClick: this.addAlternateResponse,
 				children: "ADD ALTERNATE"
 			}),
@@ -3726,15 +3726,15 @@ var la = class extends G.Component {
 			})
 		] });
 	}
-}, { Panel: ua, toggle: $, radio: da, checkboxes: fa, textField: pa, dropdown: ma } = Kr, ha = (0, zt.default)("@pie-element:graphing:configure"), ga = z(ii)(({ theme: e }) => ({
+}, { Panel: ca, toggle: $, radio: la, checkboxes: ua, textField: da, dropdown: fa } = Kr, pa = (0, zt.default)("@pie-element:graphing:configure"), ma = z(ii)(({ theme: e }) => ({
 	width: "100%",
 	paddingTop: e.spacing(2),
 	marginBottom: e.spacing(2)
-})), _a = z(W)(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), va = z("div")(({ theme: e }) => ({
+})), ha = z(W)(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), ga = z("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), ya = class extends K.Component {
+})), _a = class extends K.Component {
 	static propTypes = {
 		onModelChanged: Q.default.func,
 		onConfigurationChanged: Q.default.func,
@@ -3788,14 +3788,14 @@ var la = class extends G.Component {
 	};
 	render() {
 		let { model: e, configuration: t, onConfigurationChanged: n, onModelChanged: r, imageSupport: i, uploadSoundSupport: a } = this.props, { arrows: o = {}, authoring: s = {}, availableTools: c = [], baseInputConfiguration: l = {}, coordinatesOnHover: u = {}, contentDimensions: d = {}, gridConfigurations: f = [], graphDimensions: p = {}, instruction: m = {}, labels: h = {}, padding: g = {}, prompt: _ = {}, rationale: v = {}, scoringType: y = {}, settingsPanelDisabled: b, spellCheck: x = {}, studentInstructions: S = {}, teacherInstructions: C = {}, title: w = {}, maxImageWidth: T = {}, maxImageHeight: E = {}, withRubric: D = {}, language: O = {}, languageChoices: k = {}, mathMlOptions: A = {}, removeIncompleteTool: ee = !1 } = t || {}, { errors: j = {}, extraCSSRules: M, labelsEnabled: te, dimensionsEnabled: N, promptEnabled: ne, rationaleEnabled: P, spellCheckEnabled: F, teacherInstructionsEnabled: re, titleEnabled: I } = e || {}, { prompt: ie, rationale: L, teacherInstructions: ae } = j || {};
-		ha("[render] model", e);
+		pa("[render] model", e);
 		let oe = T && T.prompt, R = E && E.prompt, z = {
 			top: h.top,
 			right: h.right,
 			bottom: h.bottom,
 			left: h.left
 		}, se = {
-			arrows: o.settings && fa(o.label, {
+			arrows: o.settings && ua(o.label, {
 				left: o.left,
 				right: o.right,
 				up: o.up,
@@ -3805,7 +3805,7 @@ var la = class extends G.Component {
 			padding: g.settings && $(g.label),
 			labelsEnabled: h.settings && $(h.label),
 			"language.enabled": O.settings && $(O.label, !0),
-			language: O.settings && O.enabled && ma(k.label, k.options),
+			language: O.settings && O.enabled && fa(k.label, k.options),
 			dimensionsEnabled: p.settings && $(p.label),
 			coordinatesOnHover: u.settings && $(u.label)
 		}, ce = {
@@ -3815,9 +3815,9 @@ var la = class extends G.Component {
 			promptEnabled: _.settings && $(_.label),
 			rationaleEnabled: v.settings && $(v.label),
 			spellCheckEnabled: x.settings && $(x.label),
-			scoringType: y.settings && da(y.label, ["dichotomous", "partial scoring"]),
+			scoringType: y.settings && la(y.label, ["dichotomous", "partial scoring"]),
 			rubricEnabled: D?.settings && $(D?.label),
-			instruction: m.settings && pa(m.label)
+			instruction: m.settings && da(m.label)
 		}, le = (e = {}) => ({
 			...l,
 			...e
@@ -3826,7 +3826,7 @@ var la = class extends G.Component {
 			extraCSSRules: M,
 			dimensions: d,
 			hideSettings: b,
-			settings: /* @__PURE__ */ q(ua, {
+			settings: /* @__PURE__ */ q(ca, {
 				model: e,
 				configuration: t,
 				onChangeModel: r,
@@ -3837,12 +3837,12 @@ var la = class extends G.Component {
 				}
 			}),
 			children: [
-				/* @__PURE__ */ q(_a, {
+				/* @__PURE__ */ q(ha, {
 					component: "div",
 					variant: "body1",
 					children: m?.label || ""
 				}),
-				re && /* @__PURE__ */ J(ga, {
+				re && /* @__PURE__ */ J(ma, {
 					label: C.label,
 					children: [/* @__PURE__ */ q(_e, {
 						markup: e.teacherInstructions || "",
@@ -3857,9 +3857,9 @@ var la = class extends G.Component {
 						uploadSoundSupport: a,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: A
-					}), ae && /* @__PURE__ */ q(va, { children: ae })]
+					}), ae && /* @__PURE__ */ q(ga, { children: ae })]
 				}),
-				ne && /* @__PURE__ */ J(ga, {
+				ne && /* @__PURE__ */ J(ma, {
 					label: _.label,
 					children: [/* @__PURE__ */ q(_e, {
 						markup: e.prompt,
@@ -3875,7 +3875,7 @@ var la = class extends G.Component {
 						uploadSoundSupport: a,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: A
-					}), ie && /* @__PURE__ */ q(va, { children: ie })]
+					}), ie && /* @__PURE__ */ q(ga, { children: ie })]
 				}),
 				/* @__PURE__ */ q(Ui, {
 					authoring: s,
@@ -3892,7 +3892,7 @@ var la = class extends G.Component {
 					mathMlOptions: A,
 					removeIncompleteTool: ee
 				}),
-				/* @__PURE__ */ q(la, {
+				/* @__PURE__ */ q(sa, {
 					availableTools: c,
 					errors: j,
 					model: e,
@@ -3900,7 +3900,7 @@ var la = class extends G.Component {
 					mathMlOptions: A,
 					removeIncompleteTool: ee
 				}),
-				P && /* @__PURE__ */ J(ga, {
+				P && /* @__PURE__ */ J(ma, {
 					label: v.label || "Rationale",
 					children: [/* @__PURE__ */ q(_e, {
 						markup: e.rationale || "",
@@ -3914,12 +3914,12 @@ var la = class extends G.Component {
 						uploadSoundSupport: a,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: A
-					}), L && /* @__PURE__ */ q(va, { children: L })]
+					}), L && /* @__PURE__ */ q(ga, { children: L })]
 				})
 			]
 		});
 	}
-}, ba = class e extends CustomEvent {
+}, va = class e extends CustomEvent {
 	static {
 		this.TYPE = "model.updated";
 	}
@@ -3932,7 +3932,7 @@ var la = class extends G.Component {
 			}
 		}), this.update = t, this.reset = n;
 	}
-}, xa = class e extends CustomEvent {
+}, ya = class e extends CustomEvent {
 	static {
 		this.TYPE = "delete.image";
 	}
@@ -3945,7 +3945,7 @@ var la = class extends G.Component {
 			}
 		}), this.src = t, this.done = n;
 	}
-}, Sa = class e extends CustomEvent {
+}, ba = class e extends CustomEvent {
 	static {
 		this.TYPE = "insert.image";
 	}
@@ -3955,7 +3955,7 @@ var la = class extends G.Component {
 			detail: t
 		}), this.handler = t;
 	}
-}, Ca = class e extends CustomEvent {
+}, xa = class e extends CustomEvent {
 	static {
 		this.TYPE = "delete.sound";
 	}
@@ -3968,7 +3968,7 @@ var la = class extends G.Component {
 			}
 		}), this.src = t, this.done = n;
 	}
-}, wa = class e extends CustomEvent {
+}, Sa = class e extends CustomEvent {
 	static {
 		this.TYPE = "insert.sound";
 	}
@@ -3978,7 +3978,7 @@ var la = class extends G.Component {
 			detail: t
 		}), this.handler = t;
 	}
-}, Ta = [
+}, Ca = [
 	"circle",
 	"line",
 	"label",
@@ -3989,7 +3989,7 @@ var la = class extends G.Component {
 	"segment",
 	"sine",
 	"vector"
-], Ea = {
+], wa = {
 	model: {
 		answers: { correctAnswer: {
 			name: "Correct Answer",
@@ -4036,7 +4036,7 @@ var la = class extends G.Component {
 		teacherInstructionsEnabled: !0,
 		title: "",
 		titleEnabled: !0,
-		toolbarTools: Ta
+		toolbarTools: Ca
 	},
 	configuration: {
 		baseInputConfiguration: {
@@ -4048,7 +4048,7 @@ var la = class extends G.Component {
 			showParagraphs: { disabled: !1 },
 			separateParagraphs: { disabled: !0 }
 		},
-		availableTools: Ta,
+		availableTools: Ca,
 		authoring: {
 			settings: !1,
 			label: "Customize Grid Setup",
@@ -4389,17 +4389,17 @@ var la = class extends G.Component {
 		},
 		removeIncompleteTool: !1
 	}
-}, Da = (0, zt.default)("pie-elements:graphing:configure"), Oa = (e) => Object.keys(e || {}).sort().reduce((t, n) => (n !== "correctAnswer" && (t[n] = e[n]), t), {}), ka = class t extends HTMLElement {
+}, Ta = (0, zt.default)("pie-elements:graphing:configure"), Ea = (e) => Object.keys(e || {}).sort().reduce((t, n) => (n !== "correctAnswer" && (t[n] = e[n]), t), {}), Da = class t extends HTMLElement {
 	static createDefaultModel = (e = {}) => {
 		let t = {
-			...Ea.model,
+			...wa.model,
 			...e
 		}, { answers: n = {}, domain: r = {}, defaultTool: i, graph: a = {}, range: o = {}, standardGrid: s, toolbarTools: c } = t, l = (c || []).filter((e) => e !== "label"), u = i || l.length && l[0] || "";
 		return {
 			...t,
 			answers: n && n.correctAnswer && {
 				correctAnswer: n.correctAnswer,
-				...Oa(n)
+				...Ea(n)
 			} || n,
 			defaultTool: u,
 			range: s && {
@@ -4416,7 +4416,7 @@ var la = class extends G.Component {
 		};
 	};
 	constructor() {
-		super(), this._root = null, this._model = t.createDefaultModel(), this._configuration = Ea.configuration;
+		super(), this._root = null, this._model = t.createDefaultModel(), this._configuration = wa.configuration;
 	}
 	set model(n) {
 		this._model = t.createDefaultModel(n), this._modelCopy = e(this._model), this._render();
@@ -4427,31 +4427,33 @@ var la = class extends G.Component {
 	};
 	set configuration(e) {
 		this._configuration = {
-			...Ea.configuration,
+			...wa.configuration,
 			...e
-		}, this.resetModelAfterConfigurationIsSet(), e.language?.enabled ? e.languageChoices?.options?.length && (this._model.language = e.languageChoices.options[0].value) : e.language.settings ? this._model.language && (this._configuration.language.enabled = !0) : delete this._model.language, this._render();
+		}, this.resetModelAfterConfigurationIsSet();
+		let { language: t, languageChoices: n } = this._configuration;
+		t?.enabled ? n?.options?.length && (this._model.language = n.options[0].value) : t?.settings ? this._model.language && (this._configuration.language.enabled = !0) : delete this._model.language, this._render();
 	}
 	onModelChanged = (e) => {
-		this._model = e, this._render(), Da("[onModelChanged]: ", this._model), this.dispatchEvent(new ba(this._model));
+		this._model = e, this._render(), Ta("[onModelChanged]: ", this._model), this.dispatchEvent(new va(this._model));
 	};
 	onConfigurationChanged = (e) => {
 		this._configuration = e, this._render();
 	};
 	insertImage = (e) => {
-		this.dispatchEvent(new Sa(e));
+		this.dispatchEvent(new ba(e));
 	};
 	onDeleteImage = (e, t) => {
-		this.dispatchEvent(new xa(e, t));
+		this.dispatchEvent(new ya(e, t));
 	};
 	insertSound(e) {
-		this.dispatchEvent(new wa(e));
+		this.dispatchEvent(new Sa(e));
 	}
 	onDeleteSound(e, t) {
-		this.dispatchEvent(new Ca(e, t));
+		this.dispatchEvent(new xa(e, t));
 	}
 	_render() {
 		if (this._model) {
-			let e = K.createElement(ya, {
+			let e = K.createElement(_a, {
 				onModelChanged: this.onModelChanged,
 				onConfigurationChanged: this.onConfigurationChanged,
 				model: this._model,
@@ -4470,11 +4472,14 @@ var la = class extends G.Component {
 			});
 		}
 	}
+	connectedCallback() {
+		this._render();
+	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion
-export { ka as default };
+export { Da as default };
 
 //# sourceMappingURL=index.js.map