@pie-element/categorize 13.4.0-beta.7 → 14.0.0-next.20261002094057

package/dist/delivery/categorize/index.js

@@ -0,0 +1,323 @@
+import e from "./choice.js";
+import { Choices as t } from "./choices.js";
+import { Categories as n } from "./categories.js";
+import { closestDroppableKeyboardCoordinates as r } from "./keyboard-coordinates.js";
+import i from "react";
+import { renderMath as a } from "@pie-element/shared-math-rendering-mathjax";
+import * as o from "@pie-lib/render-ui";
+import { Collapsible as s, Feedback as c, PreviewPrompt as l, UiLayout as u, color as d, hasMedia as f, hasText as p } from "@pie-lib/render-ui";
+import m from "prop-types";
+import h from "debug";
+import { styled as g } from "@mui/material/styles";
+import { DragOverlay as _ } from "@dnd-kit/core";
+import { restrictToFirstScrollableAncestor as v } from "@dnd-kit/modifiers";
+import y from "@pie-lib/correct-answer-toggle";
+import { buildState as b, moveChoiceToCategory as x, removeChoiceFromCategory as S } from "@pie-lib/categorize";
+import { DragProvider as C, uid as w } from "@pie-lib/drag";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import D from "@pie-lib/translator";
+import { AlertDialog as O } from "@pie-lib/config-ui";
+//#region src/delivery/categorize/index.tsx
+function k(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function A(e, t) {
+	return !e || k(e) ? e : k(e.default) ? e.default : t && k(e[t]) ? e[t] : t && k(e[t]?.default) ? e[t].default : e;
+}
+var j = A(u, "UiLayout") || A(L.UiLayout, "UiLayout"), M = A(l, "PreviewPrompt") || A(L.PreviewPrompt, "PreviewPrompt"), N = A(s, "Collapsible") || A(L.Collapsible, "Collapsible"), P = A(c, "Feedback") || A(L.Feedback, "Feedback"), F = o, I = F.default, L = I && typeof I == "object" ? I : F, { translator: R } = D, z = h("@pie-ui:categorize"), B = "choices-board", V = 250, H = class extends i.Component {
+	static propTypes = { children: m.node };
+	containerRef = i.createRef();
+	componentDidMount() {
+		this.containerRef.current && a(this.containerRef.current);
+	}
+	render() {
+		return /* @__PURE__ */ T("div", {
+			ref: this.containerRef,
+			children: this.props.children
+		});
+	}
+}, U = class extends i.Component {
+	static propTypes = {
+		model: m.object,
+		session: m.shape({ answers: m.arrayOf(m.shape({
+			choice: m.string,
+			category: m.string
+		})) }),
+		onAnswersChange: m.func.isRequired,
+		onShowCorrectToggle: m.func.isRequired,
+		pauseMathObserver: m.func,
+		resumeMathObserver: m.func,
+		selectedItem: m.object,
+		onSelectClick: m.func,
+		onPlacementClick: m.func
+	};
+	static defaultProps = { disabled: !1 };
+	constructor(e) {
+		super(e), this.state = {
+			showCorrect: !1,
+			showMaxChoiceAlert: !1
+		};
+	}
+	removeChoice = (e) => {
+		z("[removeChoice]: ", e);
+		let { onAnswersChange: t, session: n } = this.props;
+		t(S(e.id, e.categoryId, e.choiceIndex, n.answers));
+	};
+	dropChoice = (e, t) => {
+		let { session: n, onAnswersChange: r, model: i } = this.props, { maxChoicesPerCategory: a = 0 } = i || {}, { answers: o = [] } = n || {}, s;
+		t ? z("[dropChoice] category: ", t.categoryId, "choice: ", t) : z("[dropChoice] category: ", void 0, "choice: ", void 0);
+		let c = o.find((t) => t.category === e);
+		t && a === 1 && c && c.choices && c.choices.length === 1 ? (s = x(t.id, t.categoryId, e, t.choiceIndex, o), s = S(c.choices[0], e, 0, s)) : t && a > 1 && c && c.choices && c.choices.length === a ? (s = t.categoryId ? x(t.id, t.categoryId, t.categoryId, t.choiceIndex, o) : S(t.id, t.categoryId, t.choiceIndex, o), this.setState({ showMaxChoiceAlert: !0 })) : a !== 0 && c && c.choices && c.choices.length > a ? (s = o, this.setState({ showMaxChoiceAlert: !0 })) : s = t ? x(t.id, t.categoryId, e, t.choiceIndex, o) : this.removeChoice(e), t && r(s);
+	};
+	UNSAFE_componentWillReceiveProps(e) {
+		let { model: t } = this.props, { model: n } = e;
+		t.note && t.language && t.language !== n.language && t.note === R.t("common:commonCorrectAnswerWithAlternates", { lng: t.language }) && (t.note = R.t("common:commonCorrectAnswerWithAlternates", { lng: n.language })), this.setState({ showCorrect: !1 });
+	}
+	toggleShowCorrect = () => this.setState({ showCorrect: !this.state.showCorrect }, () => {
+		this.props.onShowCorrectToggle();
+	});
+	getPositionDirection = (e) => {
+		let t;
+		switch (e) {
+			case "left":
+				t = "row-reverse";
+				break;
+			case "right":
+				t = "row";
+				break;
+			case "below":
+				t = "column";
+				break;
+			default:
+				t = "column-reverse";
+				break;
+		}
+		return t;
+	};
+	existAlternateResponse = (e) => e?.some((e) => e.alternateResponses?.length > 0);
+	render() {
+		let { model: e, session: r, selectedItem: a, onSelectClick: o, onPlacementClick: s } = this.props, { showCorrect: c, showMaxChoiceAlert: l } = this.state, { choicesPosition: u, extraCSSRules: d, note: m, showNote: h, env: g, language: _, maxChoicesPerCategory: v, autoplayAudioEnabled: x, customAudioButton: S } = e, { mode: C, role: w } = g || {}, D = u || "above", k = {
+			flexDirection: this.getPositionDirection(D),
+			gap: "8px"
+		}, { categories: A, choices: j, correct: N } = b(e.categories, e.choices, c ? e.correctResponse : r.answers, e.correctResponse);
+		z("[render] disabled: ", e.disabled);
+		let { rowLabels: F, categoriesPerRow: I, correctResponse: L, fontSizeFactor: B } = e, V = A && Math.ceil(A.length / I) || 0, H = this.existAlternateResponse(L) || !1, U = (c || C === "view" && w === "instructor") && h && m && H, W = R.t("translation:categorize:limitMaxChoicesPerCategory", {
+			lng: e.language,
+			maxChoicesPerCategory: v
+		}), X = R.t("common:warning", { lng: e.language }), Z = R.t("common:cancel", { lng: e.language }), Q = e.rationale && (p(e.rationale) || f(e.rationale));
+		return /* @__PURE__ */ E(G, {
+			extraCSSRules: d,
+			id: "main-container",
+			fontSizeFactor: B,
+			children: [
+				e.teacherInstructions && (p(e.teacherInstructions) || f(e.teacherInstructions)) && /* @__PURE__ */ T(i.Fragment, { children: /* @__PURE__ */ T(Y, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: /* @__PURE__ */ T(M, { prompt: e.teacherInstructions })
+				}) }),
+				e.prompt && /* @__PURE__ */ T(M, {
+					prompt: e.prompt,
+					autoplayAudioEnabled: x,
+					customAudioButton: S
+				}),
+				/* @__PURE__ */ T(y, {
+					show: c || N === !1,
+					toggled: c,
+					onToggle: this.toggleShowCorrect,
+					language: _
+				}),
+				/* @__PURE__ */ T(q, { children: /* @__PURE__ */ E(J, {
+					style: k,
+					children: [/* @__PURE__ */ T("div", {
+						style: {
+							display: "flex",
+							flex: 1
+						},
+						children: /* @__PURE__ */ T(n, {
+							model: e,
+							disabled: e.disabled,
+							categories: A,
+							onDropChoice: this.dropChoice,
+							onRemoveChoice: this.removeChoice,
+							rowLabels: (F || []).slice(0, V),
+							selectedItem: a,
+							onSelectClick: o,
+							onPlacementClick: s
+						})
+					}), /* @__PURE__ */ T(t, {
+						disabled: e.disabled,
+						model: e,
+						choices: j,
+						choicePosition: D,
+						onDropChoice: this.dropChoice,
+						onRemoveChoice: this.removeChoice,
+						correct: N,
+						selectedItem: a,
+						onSelectClick: o,
+						onPlacementClick: s
+					})]
+				}) }),
+				U && /* @__PURE__ */ T(K, { dangerouslySetInnerHTML: { __html: m } }),
+				Q && /* @__PURE__ */ T(Y, {
+					labels: {
+						hidden: "Show Rationale",
+						visible: "Hide Rationale"
+					},
+					children: /* @__PURE__ */ T(M, { prompt: e.rationale })
+				}),
+				e.correctness && e.feedback && !c && /* @__PURE__ */ T(P, {
+					correctness: e.correctness,
+					feedback: e.feedback
+				}),
+				/* @__PURE__ */ T(O, {
+					title: X,
+					text: W,
+					open: l,
+					onCloseText: Z,
+					onClose: () => this.setState({ showMaxChoiceAlert: !1 })
+				})
+			]
+		});
+	}
+}, W = class extends i.Component {
+	static propTypes = {
+		model: m.object,
+		session: m.shape({ answers: m.arrayOf(m.shape({
+			choice: m.string,
+			category: m.string
+		})) }),
+		onAnswersChange: m.func.isRequired,
+		onShowCorrectToggle: m.func.isRequired,
+		pauseMathObserver: m.func,
+		resumeMathObserver: m.func
+	};
+	constructor(e) {
+		super(e), this.uid = w.generateId(), this.state = {
+			activeDragItem: null,
+			isValidDrop: !1,
+			selectedItem: null
+		}, this.lastDragEndAt = 0, this.isInternalDragCancel = !1;
+	}
+	onDragStart = (e) => {
+		let { active: t } = e, { pauseMathObserver: n } = this.props;
+		n && n(), t?.data?.current && this.setState({
+			activeDragItem: t.data.current,
+			isValidDrop: !1,
+			selectedItem: t.data.current
+		});
+	};
+	commitPlacement = (e, t) => {
+		if (this.categorizeRef) {
+			if (t === void 0 || t === B) {
+				e.categoryId && this.categorizeRef.removeChoice && this.categorizeRef.removeChoice(e);
+				return;
+			}
+			this.categorizeRef.dropChoice && this.categorizeRef.dropChoice(t, e);
+		}
+	};
+	onDragEnd = (e) => {
+		let { active: t, over: n } = e, { resumeMathObserver: r } = this.props, i = t?.data?.current, a = n?.data?.current, o = n && t && i && i.type === "choice" && a && a.itemType === "categorize";
+		if (this.setState({
+			activeDragItem: null,
+			isValidDrop: o,
+			selectedItem: null
+		}), r && r(), this.lastDragEndAt = Date.now(), !t || !i || i.type !== "choice") return;
+		let s = {
+			id: i.id,
+			categoryId: i.categoryId,
+			choiceIndex: i.choiceIndex,
+			value: i.value,
+			itemType: i.itemType
+		};
+		this.commitPlacement(s, n ? n.id : void 0);
+	};
+	onDragCancel = () => {
+		let { resumeMathObserver: e } = this.props;
+		this.setState({
+			activeDragItem: null,
+			isValidDrop: !1,
+			selectedItem: null
+		}), e && e(), this.isInternalDragCancel ? this.isInternalDragCancel = !1 : this.lastDragEndAt = Date.now();
+	};
+	isSameItem = (e, t) => !!e && !!t && e.id === t.id && e.categoryId === t.categoryId && e.choiceIndex === t.choiceIndex;
+	toggleItemSelection = (e) => {
+		this.setState((t) => ({ selectedItem: this.isSameItem(t.selectedItem, e) ? null : e }));
+	};
+	cancelSelection = () => {
+		this.setState({ selectedItem: null });
+	};
+	endAnyLiveKeyboardDrag = () => {
+		this.state.activeDragItem && (this.isInternalDragCancel = !0, document.dispatchEvent(new KeyboardEvent("keydown", {
+			code: "Escape",
+			bubbles: !0,
+			cancelable: !0
+		})), this.isInternalDragCancel = !1);
+	};
+	placeSelectedItem = (e) => {
+		let { selectedItem: t } = this.state;
+		t && (this.commitPlacement(t, e), this.cancelSelection(), this.endAnyLiveKeyboardDrag());
+	};
+	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < V;
+	onItemClick = (e) => {
+		this.isClickSoonAfterDragEnd() || (this.endAnyLiveKeyboardDrag(), this.toggleItemSelection(e));
+	};
+	onPlacementClick = (e) => {
+		this.isClickSoonAfterDragEnd() || this.placeSelectedItem(e);
+	};
+	renderDragOverlay = () => {
+		let { activeDragItem: t } = this.state, { model: n } = this.props;
+		if (!t) return null;
+		if (t.type === "choice") {
+			let r = n.choices?.find((e) => e.id === t.id);
+			if (r) return /* @__PURE__ */ T(e, {
+				id: r.id,
+				...r
+			}, r.id);
+		}
+		return null;
+	};
+	render() {
+		let { isValidDrop: e, selectedItem: t } = this.state, n = e ? null : void 0;
+		return /* @__PURE__ */ T(C, {
+			onDragStart: this.onDragStart,
+			onDragEnd: this.onDragEnd,
+			onDragCancel: this.onDragCancel,
+			keyboardCoordinateGetter: r,
+			keyboardCodes: {
+				start: ["Space", "Enter"],
+				cancel: ["Escape"],
+				end: ["Space", "Enter"]
+			},
+			modifiers: [v],
+			children: /* @__PURE__ */ E(w.Provider, {
+				value: this.uid,
+				children: [/* @__PURE__ */ T(U, {
+					ref: (e) => this.categorizeRef = e,
+					...this.props,
+					selectedItem: t,
+					onSelectClick: this.onItemClick,
+					onPlacementClick: this.onPlacementClick
+				}), /* @__PURE__ */ T(_, {
+					dropAnimation: n,
+					children: /* @__PURE__ */ T(H, { children: this.renderDragOverlay() })
+				})]
+			})
+		});
+	}
+}, G = g(j)({
+	color: d.text(),
+	backgroundColor: d.background(),
+	position: "relative"
+}), K = g("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), q = g("div")(({ theme: e }) => ({
+	marginBottom: e.spacing(1),
+	maxWidth: "100%",
+	overflowX: "auto",
+	overflowY: "hidden"
+})), J = g("div")(() => ({
+	display: "flex",
+	minWidth: "min-content"
+})), Y = g(N)(({ theme: e }) => ({ paddingBottom: e.spacing(2) }));
+//#endregion
+export { U as Categorize, W as default };

package/dist/delivery/categorize/keyboard-coordinates.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/keyboard-coordinates.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+/**
+ * Custom keyboard coordinate getter for categorize's Tab-based placement.
+ *
+ * Tab/Shift+Tab cycle the dragged choice directly onto the next/previous enabled
+ * category, sorted by on-screen position (top-to-bottom, then left-to-right, matching the
+ * category grid's reading order), followed by the choices pool as a fixed last stop.
+ *
+ * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter`, leaving the
+ * existing free-form arrow-key dragging behavior completely unchanged.
+ */
+export declare const closestDroppableKeyboardCoordinates: (event: any, { context, currentCoordinates }: {
+    context: any;
+    currentCoordinates: any;
+}) => any;

package/dist/delivery/categorize/keyboard-coordinates.js

@@ -0,0 +1,49 @@
+import { KeyboardCode as e, defaultKeyboardCoordinateGetter as t } from "@dnd-kit/core";
+//#region src/delivery/categorize/keyboard-coordinates.ts
+var n = "choices-board", r = (r, { context: a, currentCoordinates: o }) => {
+	let { code: s } = r, c = s === e.Tab, l = s === e.Down || s === e.Up || s === e.Left || s === e.Right;
+	if (!c && !l) return;
+	if (l) return t(r, {
+		context: a,
+		currentCoordinates: o
+	});
+	r.preventDefault();
+	let { droppableRects: u, droppableContainers: d, collisionRect: f } = a;
+	if (!u || u.size === 0) return o;
+	let p = [], m;
+	for (let [e, t] of d) {
+		if (t?.disabled) continue;
+		let r = t?.node?.current?.getBoundingClientRect() ?? u.get(e);
+		if (!r) continue;
+		let i = {
+			x: r.left + r.width / 2,
+			y: r.top + r.height / 2
+		}, a = f?.height ?? 0, o = {
+			id: e,
+			rect: r,
+			dropPosition: {
+				x: r.left,
+				y: r.top + r.height / 2 - a / 2
+			},
+			center: i
+		};
+		e === n ? m = o : p.push(o);
+	}
+	if (p.length === 0 && !m) return o;
+	let h = r.shiftKey;
+	p.sort((e, t) => Math.abs(e.center.y - t.center.y) > 10 ? e.center.y - t.center.y : e.center.x - t.center.x), m && p.push(m);
+	let g = f ? {
+		x: f.left + f.width / 2,
+		y: f.top + f.height / 2
+	} : o, _ = p.findIndex((e) => g.x >= e.rect.left && g.x <= e.rect.right && g.y >= e.rect.top && g.y <= e.rect.bottom);
+	if (_ === -1) {
+		let e = Infinity;
+		for (let t = 0; t < p.length; t++) {
+			let n = i(o, p[t].dropPosition);
+			n < e && (e = n, _ = t);
+		}
+	}
+	return p[h ? (_ - 1 + p.length) % p.length : (_ + 1) % p.length].dropPosition;
+}, i = (e, t) => Math.sqrt((e.x - t.x) ** 2 + (e.y - t.y) ** 2);
+//#endregion
+export { r as closestDroppableKeyboardCoordinates };

package/dist/delivery/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @synced-from pie-elements/packages/categorize/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export default class Categorize extends HTMLElement {
+    constructor();
+    _scheduleMathRender: any;
+    _initMathObserver(): void;
+    _disconnectMathObserver(): void;
+    pauseMathObserver: any;
+    resumeMathObserver: any;
+    set model(m: any);
+    isComplete(): any;
+    set session(s: any);
+    get session(): any;
+    eliminateBlindAnswersFromSession(): void;
+    changeAnswers(answers: any): void;
+    onShowCorrectToggle(): void;
+    _createAudioInfoToast(): HTMLDivElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): void;
+}

package/dist/delivery/index.js

@@ -0,0 +1,154 @@
+import e from "./categorize/index.js";
+import t from "react";
+import { createRoot as n } from "react-dom/client";
+import { renderMath as r } from "@pie-element/shared-math-rendering-mathjax";
+import * as i from "@pie-lib/render-ui";
+import { EnableAudioAutoplayImage as a } from "@pie-lib/render-ui";
+import { ModelSetEvent as o, SessionChangedEvent as s } from "@pie-element/shared-player-events";
+//#region src/delivery/index.ts
+function c(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function l(e, t) {
+	return !e || c(e) ? e : c(e.default) ? e.default : t && c(e[t]) ? e[t] : t && c(e[t]?.default) ? e[t].default : e;
+}
+var u = l(a, "EnableAudioAutoplayImage") || l(p.EnableAudioAutoplayImage, "EnableAudioAutoplayImage"), d = i, f = d.default, p = f && typeof f == "object" ? f : d, m = class extends HTMLElement {
+	constructor() {
+		super(), this._root = null, this._mathObserver = null, this._mathRenderPending = !1;
+	}
+	_scheduleMathRender = () => {
+		this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
+			this._mathObserver && !this._mathObserverPaused && this._mathObserver.disconnect(), r(this), this._mathRenderPending = !1, setTimeout(() => {
+				this._mathObserver && !this._mathObserverPaused && this._mathObserver.observe(this, {
+					childList: !0,
+					subtree: !0,
+					characterData: !1
+				});
+			}, 50);
+		}));
+	};
+	_initMathObserver() {
+		this._mathObserver || (this._mathObserver = new MutationObserver(() => {
+			this._scheduleMathRender();
+		}), this._mathObserver.observe(this, {
+			childList: !0,
+			subtree: !0,
+			characterData: !1
+		}));
+	}
+	_disconnectMathObserver() {
+		this._mathObserver &&= (this._mathObserver.disconnect(), null);
+	}
+	pauseMathObserver = () => {
+		this._mathObserver && (this._mathObserver.disconnect(), this._mathObserverPaused = !0);
+	};
+	resumeMathObserver = () => {
+		this._mathObserverPaused && (this._mathObserverPaused = !1, this._mathObserver && this._mathObserver.observe(this, {
+			childList: !0,
+			subtree: !0,
+			characterData: !1
+		}));
+	};
+	set model(e) {
+		this._model = e, this.eliminateBlindAnswersFromSession(), this.dispatchEvent(new o(this.tagName.toLowerCase(), this.isComplete(), !!this._model)), this._audioInitialized = !1, this.render();
+	}
+	isComplete() {
+		let { choices: e, completeAudioEnabled: t, hasUnplacedChoices: n, possibleResponses: r, responseAreasToBeFilled: i } = this._model || {}, a = this;
+		if (t && !this.audioComplete && a) {
+			let e = a.querySelector("audio"), t = e && e.closest(".preview-prompt");
+			if (e && t) return !1;
+		}
+		if (!this._session || !this._session.answers) return !1;
+		let { answers: o } = this._session;
+		if (!Array.isArray(o)) return !1;
+		let s = o.filter((e) => e.choices.length).length >= i;
+		if ((e || []).some((e) => e.categoryCount === 0) || n) return s;
+		let c = o.map((e) => e.choices).flat();
+		return (r || []).some((e) => e.every((e) => c.includes(e)));
+	}
+	set session(e) {
+		e && !e.answers && (e.answers = []), this._session = e, this.render();
+	}
+	get session() {
+		return this._session;
+	}
+	eliminateBlindAnswersFromSession() {
+		let { answers: e = [] } = this._session || {}, { choices: t = [] } = this._model || {}, n = t.map((e) => e.id) || [], r = e.map((e) => (e.choices = (e?.choices || []).filter((e) => n.includes(e)), e));
+		r.length > 0 && this.changeAnswers(r);
+	}
+	changeAnswers(e) {
+		this._session.answers = e, this._session.selector = "Mouse", this.dispatchEvent(new s(this.tagName.toLowerCase(), this.isComplete())), this.render();
+	}
+	onShowCorrectToggle() {
+		r(this);
+	}
+	_createAudioInfoToast() {
+		let e = document.createElement("div");
+		e.id = "play-audio-info", Object.assign(e.style, {
+			position: "absolute",
+			top: 0,
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			background: "white",
+			zIndex: "1000",
+			cursor: "pointer"
+		});
+		let t = document.createElement("img");
+		return t.src = u, t.alt = "Click anywhere to enable audio autoplay", t.width = 500, t.height = 300, e.appendChild(t), e;
+	}
+	connectedCallback() {
+		this._initMathObserver(), new MutationObserver((e, t) => {
+			e.forEach((e) => {
+				if (e.type === "childList") {
+					if (this._audioInitialized) return;
+					let e = this.querySelector("audio"), n = e && e.closest(".preview-prompt");
+					if (!this._model) return;
+					let { autoplayAudioEnabled: r, completeAudioEnabled: i } = this._model;
+					if (!r && !i || e && !n || !e) return;
+					let a = this._createAudioInfoToast(), o = this.querySelector("#main-container"), c = () => {
+						this.querySelector("#play-audio-info") && (e.play(), o.removeChild(a)), document.removeEventListener("click", c);
+					};
+					r && setTimeout(() => {
+						e.paused && !this.querySelector("#play-audio-info") ? (o.appendChild(a), document.addEventListener("click", c)) : document.removeEventListener("click", c);
+					}, 500);
+					let l = () => {
+						this._session.audioStartTime = this._session.audioStartTime || (/* @__PURE__ */ new Date()).getTime();
+						let t = this.querySelector("#play-audio-info");
+						t && o.removeChild(t), e.removeEventListener("playing", l);
+					};
+					e.addEventListener("playing", l);
+					let u = () => {
+						this._session.audioEndTime = this._session.audioEndTime || (/* @__PURE__ */ new Date()).getTime();
+						let { audioStartTime: t, audioEndTime: n, waitTime: r } = this._session;
+						!r && t && n && (this._session.waitTime = n - t), this.audioComplete = !0, this.dispatchEvent(new s(this.tagName.toLowerCase(), this.isComplete())), e.removeEventListener("ended", u);
+					};
+					e.addEventListener("ended", u), this._audio = e, this._handlePlaying = l, this._handleEnded = u, this._enableAudio = c, this._audioInitialized = !0, t.disconnect();
+				}
+			});
+		}).observe(this, {
+			childList: !0,
+			subtree: !0
+		}), this.render();
+	}
+	disconnectedCallback() {
+		this._disconnectMathObserver(), document.removeEventListener("click", this._enableAudio), this._audio &&= (this._audio.removeEventListener("playing", this._handlePlaying), this._audio.removeEventListener("ended", this._handleEnded), null), this._root &&= (this._root.unmount(), null);
+	}
+	render() {
+		if (this._model && this._session) {
+			let r = t.createElement(e, {
+				model: this._model,
+				session: this._session,
+				onAnswersChange: this.changeAnswers.bind(this),
+				onShowCorrectToggle: this.onShowCorrectToggle.bind(this),
+				pauseMathObserver: this.pauseMathObserver,
+				resumeMathObserver: this.resumeMathObserver
+			});
+			this._root ||= n(this), this._root.render(r);
+		}
+	}
+};
+//#endregion
+export { m as default };

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default } from './delivery/index.js';

package/dist/index.iife.d.ts

@@ -0,0 +1,8 @@
+/**
+ * IIFE entry point for categorize element
+ * This file is only used for IIFE builds and includes auto-registration
+ *
+ * @sync-generated - Auto-generated during sync from pie-elements
+ */
+import Element from './index.js';
+export default Element;