@pie-element/categorize 13.1.2-next.2 → 13.1.2

package/dist/delivery/categorize/choices.js

@@ -1,51 +0,0 @@
-import e, { ChoiceType as t } from "./choice.js";
-import n from "./droppable-placeholder.js";
-import r from "react";
-import i from "prop-types";
-import { styled as a } from "@mui/material/styles";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/delivery/categorize/choices.tsx
-var c = a("div")({
-	flex: 1,
-	touchAction: "none"
-}), l = a("div")(({ theme: e }) => ({
-	margin: "0 auto",
-	textAlign: "center",
-	paddingTop: e.spacing(1)
-})), u = class extends r.Component {
-	static propTypes = {
-		choices: i.arrayOf(i.oneOfType([i.shape(t), i.shape({ empty: i.bool })])),
-		model: i.shape({
-			categoriesPerRow: i.number,
-			choicesLabel: i.string
-		}),
-		disabled: i.bool,
-		choicePosition: i.string,
-		onDropChoice: i.func,
-		onRemoveChoice: i.func,
-		correct: i.boolean
-	};
-	static defaultProps = { model: {
-		categoriesPerRow: 1,
-		choicesLabel: ""
-	} };
-	render() {
-		let { choices: t = [], model: r, disabled: i, onDropChoice: a, onRemoveChoice: u, choicePosition: d, correct: f } = this.props, p = { textAlign: "center" };
-		return d === "left" && (p.direction = "rtl"), /* @__PURE__ */ o(c, { children: /* @__PURE__ */ s(n, {
-			id: "choices-board",
-			onDropChoice: a,
-			onRemoveChoice: u,
-			disabled: i,
-			style: { background: "none" },
-			choiceBoard: !0,
-			correct: f,
-			children: [r.choicesLabel && r.choicesLabel !== "" && /* @__PURE__ */ o(l, { dangerouslySetInnerHTML: { __html: r.choicesLabel } }), t.map((t, n) => t.empty ? /* @__PURE__ */ o("div", {}, n) : /* @__PURE__ */ o(e, {
-				disabled: i,
-				extraStyle: { maxWidth: `${95 / r.categoriesPerRow}%` },
-				...t
-			}, n))]
-		}) });
-	}
-};
-//#endregion
-export { u as default };

package/dist/delivery/categorize/droppable-placeholder.d.ts

@@ -1,32 +0,0 @@
-/**
- * @synced-from pie-elements/packages/categorize/src/categorize/droppable-placeholder.jsx
- * @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.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-declare const DroppablePlaceholder: {
-    ({ children, grid, disabled, choiceBoard, minRowHeight, id, correct }: {
-        children: any;
-        grid: any;
-        disabled: any;
-        choiceBoard: any;
-        minRowHeight: any;
-        id: any;
-        correct: any;
-    }): React.JSX.Element;
-    propTypes: {
-        choiceBoard: PropTypes.Requireable<boolean>;
-        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        grid: PropTypes.Requireable<object>;
-        disabled: PropTypes.Requireable<boolean>;
-        minRowHeight: PropTypes.Requireable<string>;
-        onDropChoice: PropTypes.Requireable<(...args: any[]) => any>;
-        id: PropTypes.Validator<string>;
-        correct: PropTypes.Requireable<boolean>;
-    };
-};
-export default DroppablePlaceholder;

package/dist/delivery/categorize/droppable-placeholder.js

@@ -1,64 +0,0 @@
-import "react";
-import { color as e } from "@pie-lib/render-ui";
-import t from "prop-types";
-import n from "debug";
-import { useTheme as r } from "@mui/material/styles";
-import { useDroppable as i } from "@dnd-kit/core";
-import { PlaceHolder as a } from "@pie-lib/drag";
-import { jsx as o } from "react/jsx-runtime";
-//#region src/delivery/categorize/droppable-placeholder.tsx
-n("@pie-ui:categorize:droppable-placeholder");
-var s = ({ children: t, grid: n, disabled: s, choiceBoard: c, minRowHeight: l, id: u, correct: d }) => {
-	let f = r(), { setNodeRef: p, isOver: m } = i({
-		id: u,
-		data: {
-			itemType: "categorize",
-			categoryId: u
-		},
-		disabled: s
-	}), h = {
-		padding: f.spacing(.5),
-		borderRadius: f.spacing(.5),
-		gridColumnGap: 0,
-		gridRowGap: 0,
-		display: "flex",
-		flexWrap: "wrap",
-		justifyContent: "center",
-		alignItems: "center",
-		alignContent: "flex-start",
-		width: "100%",
-		height: "100%",
-		...d === !1 && !c && { border: `solid 2px ${e.incorrect()}` },
-		...d === !0 && !c && { border: `solid 2px ${e.correct()}` }
-	};
-	return /* @__PURE__ */ o("div", {
-		ref: p,
-		style: {
-			flex: 1,
-			minHeight: l || "80px",
-			position: "relative",
-			touchAction: "none"
-		},
-		children: /* @__PURE__ */ o(a, {
-			isOver: m,
-			grid: n,
-			disabled: s,
-			choiceBoard: c,
-			isCategorize: !0,
-			extraStyles: h,
-			children: t
-		})
-	});
-};
-s.propTypes = {
-	choiceBoard: t.bool,
-	children: t.node.isRequired,
-	grid: t.object,
-	disabled: t.bool,
-	minRowHeight: t.string,
-	onDropChoice: t.func,
-	id: t.string.isRequired,
-	correct: t.bool
-};
-//#endregion
-export { s as default };

package/dist/delivery/categorize/grid-content.d.ts

@@ -1,25 +0,0 @@
-/**
- * @synced-from pie-elements/packages/categorize/src/categorize/grid-content.jsx
- * @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.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-export declare class GridContent extends React.Component {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        columns: PropTypes.Requireable<number>;
-        rows: PropTypes.Requireable<number>;
-        extraStyle: PropTypes.Requireable<object>;
-    };
-    static defaultProps: {
-        columns: number;
-        rows: number;
-    };
-    render(): React.JSX.Element;
-}
-export default GridContent;

package/dist/delivery/categorize/grid-content.js

@@ -1,39 +0,0 @@
-import e from "react";
-import t from "prop-types";
-import { styled as n } from "@mui/material/styles";
-import { jsx as r } from "react/jsx-runtime";
-//#region src/delivery/categorize/grid-content.tsx
-var i = class extends e.Component {
-	static propTypes = {
-		className: t.string,
-		children: t.oneOfType([t.arrayOf(t.node), t.node]).isRequired,
-		columns: t.number,
-		rows: t.number,
-		extraStyle: t.object
-	};
-	static defaultProps = {
-		columns: 2,
-		rows: 2
-	};
-	render() {
-		let { className: e, children: t, columns: n, extraStyle: i, rows: o } = this.props;
-		return /* @__PURE__ */ r(a, {
-			style: {
-				gridTemplateColumns: `repeat(${n}, 1fr)`,
-				gridTemplateRows: o === 2 ? "auto 1fr" : `repeat(${o}, auto)`,
-				...i
-			},
-			className: e,
-			children: t
-		});
-	}
-}, a = n("div")(({ theme: e }) => ({
-	display: "grid",
-	columnGap: e.spacing(1),
-	gridColumnGap: e.spacing(1),
-	rowGap: e.spacing(1),
-	gridRowGap: e.spacing(1),
-	gridAutoRows: "1fr"
-}));
-//#endregion
-export { i as default };

package/dist/delivery/categorize/index.d.ts

@@ -1,57 +0,0 @@
-/**
- * @synced-from pie-elements/packages/categorize/src/categorize/index.jsx
- * @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.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-export declare class Categorize extends React.Component {
-    static propTypes: {
-        model: PropTypes.Requireable<object>;
-        session: PropTypes.Requireable<PropTypes.InferProps<{
-            answers: PropTypes.Requireable<(PropTypes.InferProps<{
-                choice: PropTypes.Requireable<string>;
-                category: PropTypes.Requireable<string>;
-            }> | null | undefined)[]>;
-        }>>;
-        onAnswersChange: PropTypes.Validator<(...args: any[]) => any>;
-        onShowCorrectToggle: PropTypes.Validator<(...args: any[]) => any>;
-        pauseMathObserver: PropTypes.Requireable<(...args: any[]) => any>;
-        resumeMathObserver: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        disabled: boolean;
-    };
-    constructor(props: any);
-    removeChoice: any;
-    dropChoice: any;
-    UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    toggleShowCorrect: () => void;
-    getPositionDirection: any;
-    existAlternateResponse: (correctResponse: any) => any;
-    render(): React.JSX.Element;
-}
-declare class CategorizeProvider extends React.Component {
-    static propTypes: {
-        model: PropTypes.Requireable<object>;
-        session: PropTypes.Requireable<PropTypes.InferProps<{
-            answers: PropTypes.Requireable<(PropTypes.InferProps<{
-                choice: PropTypes.Requireable<string>;
-                category: PropTypes.Requireable<string>;
-            }> | null | undefined)[]>;
-        }>>;
-        onAnswersChange: PropTypes.Validator<(...args: any[]) => any>;
-        onShowCorrectToggle: PropTypes.Validator<(...args: any[]) => any>;
-        pauseMathObserver: PropTypes.Requireable<(...args: any[]) => any>;
-        resumeMathObserver: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    constructor(props: any);
-    onDragStart: any;
-    onDragEnd: any;
-    renderDragOverlay: any;
-    render(): React.JSX.Element;
-}
-export default CategorizeProvider;

package/dist/delivery/categorize/index.js

@@ -1,260 +0,0 @@
-import e from "./choice.js";
-import t from "./choices.js";
-import n from "./categories.js";
-import r from "react";
-import { renderMath as i } from "@pie-element/shared-math-rendering-mathjax";
-import * as a from "@pie-lib/render-ui";
-import { Collapsible as o, Feedback as s, PreviewPrompt as c, UiLayout as l, color as u, hasMedia as d, hasText as f } from "@pie-lib/render-ui";
-import p from "prop-types";
-import m from "debug";
-import { styled as h } from "@mui/material/styles";
-import { DragOverlay as g } from "@dnd-kit/core";
-import _ from "@pie-lib/correct-answer-toggle";
-import { buildState as v, moveChoiceToCategory as y, removeChoiceFromCategory as b } from "@pie-lib/categorize";
-import { DragProvider as x, uid as S } from "@pie-lib/drag";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import T from "@pie-lib/translator";
-import { AlertDialog as E } from "@pie-lib/config-ui";
-//#region src/delivery/categorize/index.tsx
-function D(e) {
-	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
-}
-function O(e, t) {
-	return !e || D(e) ? e : D(e.default) ? e.default : t && D(e[t]) ? e[t] : t && D(e[t]?.default) ? e[t].default : e;
-}
-var k = O(l, "UiLayout") || O(F.UiLayout, "UiLayout"), A = O(c, "PreviewPrompt") || O(F.PreviewPrompt, "PreviewPrompt"), j = O(o, "Collapsible") || O(F.Collapsible, "Collapsible"), M = O(s, "Feedback") || O(F.Feedback, "Feedback"), N = a, P = N.default, F = P && typeof P == "object" ? P : N, { translator: I } = T, L = m("@pie-ui:categorize"), R = class extends r.Component {
-	static propTypes = { children: p.node };
-	containerRef = r.createRef();
-	componentDidMount() {
-		this.containerRef.current && i(this.containerRef.current);
-	}
-	render() {
-		return /* @__PURE__ */ C("div", {
-			ref: this.containerRef,
-			children: this.props.children
-		});
-	}
-}, z = class extends r.Component {
-	static propTypes = {
-		model: p.object,
-		session: p.shape({ answers: p.arrayOf(p.shape({
-			choice: p.string,
-			category: p.string
-		})) }),
-		onAnswersChange: p.func.isRequired,
-		onShowCorrectToggle: p.func.isRequired,
-		pauseMathObserver: p.func,
-		resumeMathObserver: p.func
-	};
-	static defaultProps = { disabled: !1 };
-	constructor(e) {
-		super(e), this.state = {
-			showCorrect: !1,
-			showMaxChoiceAlert: !1
-		};
-	}
-	removeChoice = (e) => {
-		L("[removeChoice]: ", e);
-		let { onAnswersChange: t, session: n } = this.props;
-		t(b(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 ? L("[dropChoice] category: ", t.categoryId, "choice: ", t) : L("[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 = y(t.id, t.categoryId, e, t.choiceIndex, o), s = b(c.choices[0], e, 0, s)) : t && a > 1 && c && c.choices && c.choices.length === a ? (s = t.categoryId ? y(t.id, t.categoryId, t.categoryId, t.choiceIndex, o) : b(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 ? y(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 === I.t("common:commonCorrectAnswerWithAlternates", { lng: t.language }) && (t.note = I.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: i } = this.props, { showCorrect: a, showMaxChoiceAlert: o } = this.state, { choicesPosition: s, extraCSSRules: c, note: l, showNote: u, env: p, language: m, maxChoicesPerCategory: h, autoplayAudioEnabled: g, customAudioButton: y } = e, { mode: b, role: x } = p || {}, S = s || "above", T = {
-			flexDirection: this.getPositionDirection(S),
-			gap: "8px"
-		}, { categories: D, choices: O, correct: k } = v(e.categories, e.choices, a ? e.correctResponse : i.answers, e.correctResponse);
-		L("[render] disabled: ", e.disabled);
-		let { rowLabels: j, categoriesPerRow: N, correctResponse: P, fontSizeFactor: F } = e, R = D && Math.ceil(D.length / N) || 0, z = this.existAlternateResponse(P) || !1, B = (a || b === "view" && x === "instructor") && u && l && z, G = I.t("translation:categorize:limitMaxChoicesPerCategory", {
-			lng: e.language,
-			maxChoicesPerCategory: h
-		}), K = I.t("common:warning", { lng: e.language }), q = I.t("common:cancel", { lng: e.language }), J = e.rationale && (f(e.rationale) || d(e.rationale));
-		return /* @__PURE__ */ w(V, {
-			extraCSSRules: c,
-			id: "main-container",
-			fontSizeFactor: F,
-			children: [
-				e.teacherInstructions && (f(e.teacherInstructions) || d(e.teacherInstructions)) && /* @__PURE__ */ C(r.Fragment, { children: /* @__PURE__ */ C(W, {
-					labels: {
-						hidden: "Show Teacher Instructions",
-						visible: "Hide Teacher Instructions"
-					},
-					children: /* @__PURE__ */ C(A, { prompt: e.teacherInstructions })
-				}) }),
-				e.prompt && /* @__PURE__ */ C(A, {
-					prompt: e.prompt,
-					autoplayAudioEnabled: g,
-					customAudioButton: y
-				}),
-				/* @__PURE__ */ C(_, {
-					show: a || k === !1,
-					toggled: a,
-					onToggle: this.toggleShowCorrect,
-					language: m
-				}),
-				/* @__PURE__ */ w(U, {
-					style: T,
-					children: [/* @__PURE__ */ C("div", {
-						style: {
-							display: "flex",
-							flex: 1
-						},
-						children: /* @__PURE__ */ C(n, {
-							model: e,
-							disabled: e.disabled,
-							categories: D,
-							onDropChoice: this.dropChoice,
-							onRemoveChoice: this.removeChoice,
-							rowLabels: (j || []).slice(0, R)
-						})
-					}), /* @__PURE__ */ C(t, {
-						disabled: e.disabled,
-						model: e,
-						choices: O,
-						choicePosition: S,
-						onDropChoice: this.dropChoice,
-						onRemoveChoice: this.removeChoice,
-						correct: k
-					})]
-				}),
-				B && /* @__PURE__ */ C(H, { dangerouslySetInnerHTML: { __html: l } }),
-				J && /* @__PURE__ */ C(W, {
-					labels: {
-						hidden: "Show Rationale",
-						visible: "Hide Rationale"
-					},
-					children: /* @__PURE__ */ C(A, { prompt: e.rationale })
-				}),
-				e.correctness && e.feedback && !a && /* @__PURE__ */ C(M, {
-					correctness: e.correctness,
-					feedback: e.feedback
-				}),
-				/* @__PURE__ */ C(E, {
-					title: K,
-					text: G,
-					open: o,
-					onCloseText: q,
-					onClose: () => this.setState({ showMaxChoiceAlert: !1 })
-				})
-			]
-		});
-	}
-}, B = class extends r.Component {
-	static propTypes = {
-		model: p.object,
-		session: p.shape({ answers: p.arrayOf(p.shape({
-			choice: p.string,
-			category: p.string
-		})) }),
-		onAnswersChange: p.func.isRequired,
-		onShowCorrectToggle: p.func.isRequired,
-		pauseMathObserver: p.func,
-		resumeMathObserver: p.func
-	};
-	constructor(e) {
-		super(e), this.uid = S.generateId(), this.state = {
-			activeDragItem: null,
-			isValidDrop: !1
-		};
-	}
-	onDragStart = (e) => {
-		let { active: t } = e, { pauseMathObserver: n } = this.props;
-		n && n(), t?.data?.current && this.setState({
-			activeDragItem: t.data.current,
-			isValidDrop: !1
-		});
-	};
-	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
-		}), r && r(), !t || !i || i.type !== "choice") return;
-		let s = {
-			id: i.id,
-			categoryId: i.categoryId,
-			choiceIndex: i.choiceIndex,
-			value: i.value,
-			itemType: i.itemType
-		};
-		if (!n) {
-			this.categorizeRef && this.categorizeRef.removeChoice && i.categoryId && this.categorizeRef.removeChoice(s);
-			return;
-		}
-		if (n.id === "choices-board") {
-			this.categorizeRef && this.categorizeRef.removeChoice && i.categoryId && this.categorizeRef.removeChoice(s);
-			return;
-		}
-		this.categorizeRef && this.categorizeRef.dropChoice && this.categorizeRef.dropChoice(n.id, s);
-	};
-	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__ */ C(e, {
-				id: r.id,
-				...r
-			}, r.id);
-		}
-		return null;
-	};
-	render() {
-		let { isValidDrop: e } = this.state, t = e ? null : void 0;
-		return /* @__PURE__ */ C(x, {
-			onDragStart: this.onDragStart,
-			onDragEnd: this.onDragEnd,
-			children: /* @__PURE__ */ w(S.Provider, {
-				value: this.uid,
-				children: [/* @__PURE__ */ C(z, {
-					ref: (e) => this.categorizeRef = e,
-					...this.props
-				}), /* @__PURE__ */ C(g, {
-					dropAnimation: t,
-					children: /* @__PURE__ */ C(R, { children: this.renderDragOverlay() })
-				})]
-			})
-		});
-	}
-}, V = h(k)({
-	color: u.text(),
-	backgroundColor: u.background(),
-	position: "relative"
-}), H = h("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), U = h("div")(({ theme: e }) => ({
-	marginBottom: e.spacing(1),
-	display: "flex",
-	flexDirection: "column"
-})), W = h(j)(({ theme: e }) => ({ paddingBottom: e.spacing(2) }));
-//#endregion
-export { B as default };

package/dist/delivery/index.d.ts

@@ -1,27 +0,0 @@
-/**
- * @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;
-}