@pie-element/fraction-model 6.1.1-next.11 → 6.1.2-next.0

package/dist/delivery/fraction-model-chart.js

@@ -0,0 +1,154 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { styled as r } from "@mui/material/styles";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Bar as o, BarChart as s, Cell as c, LabelList as l, Pie as u, PieChart as d, YAxis as f } from "recharts";
+//#region src/delivery/fraction-model-chart.tsx
+var p = r("div")({
+	display: "grid",
+	gridTemplateColumns: "200px 200px 200px",
+	gap: "10px",
+	padding: "5px 0"
+}), m = r("div")({
+	display: "grid",
+	gridTemplateColumns: "200px 200px 200px",
+	gap: "20px",
+	padding: "10px 0"
+}), h = r(d)({ "& .recharts-pie-sector": {
+	outline: "none !important",
+	"&:focus": { outline: "none !important" }
+} }), g = (r) => {
+	let d = (e, t) => {
+		typeof t == "string" && (t = parseInt(t));
+		let n = A.findIndex((t) => t.id === e), r;
+		r = n >= 0 ? A[n].value === t ? A.filter((e, t) => t !== n) : [
+			...A.slice(0, n),
+			{
+				id: e,
+				value: t
+			},
+			...A.slice(n + 1)
+		] : [...A, {
+			id: e,
+			value: t
+		}], D(r), j(r);
+	}, g = (e, t) => {
+		k(e + "-" + t);
+	}, _ = () => {
+		k(null);
+	}, v = (e, t) => {
+		let [n, r] = t.split("-").map(Number), i = A.find((e) => e.id === n);
+		if (i && r <= i.value) return "rgb(60, 73, 150, 0.6)";
+		if (e) {
+			let [t, i] = e.split("-").map(Number);
+			if (t === n && i >= r) return "rgb(0, 0, 0, 0.25)";
+		}
+		return "#FFFFFF";
+	}, y = (e) => {
+		let { cx: t, cy: n, midAngle: r, outerRadius: a, index: o } = e, s = Math.PI / 180, c = a * 1.13, l = t + c * Math.cos(-r * s);
+		return /* @__PURE__ */ i("text", {
+			x: l,
+			y: n + c * Math.sin(-r * s),
+			fill: "#000000",
+			textAnchor: l > t ? "start" : "end",
+			dominantBaseline: "central",
+			children: `${(o + 1).toFixed(0)}`
+		});
+	}, b = () => (e) => {
+		let { fill: t, x: n, y: r, width: a, height: o } = e;
+		return /* @__PURE__ */ i("g", { children: /* @__PURE__ */ i("rect", {
+			x: n,
+			y: r,
+			width: a,
+			height: o,
+			stroke: "#000000",
+			fill: t
+		}) });
+	}, { value: x = [], modelType: S = "bar", noOfModels: C = 0, partsPerModel: w = 0, showLabel: T = !1, disabled: E = !1, onChange: D } = r, [O, k] = n(null), [A, j] = n(x), M = () => {
+		let e = [];
+		for (let t = 1; t < C + 1; t++) {
+			let n = [{ name: t }];
+			for (let e = 1; e < w + 1; e++) n[0][`${e}`] = 1;
+			e.push(n);
+		}
+		let t = [];
+		return e.forEach((e, n) => {
+			t.push(/* @__PURE__ */ a(s, {
+				width: 200,
+				height: 30 * w,
+				data: e,
+				children: [/* @__PURE__ */ i(f, {
+					hide: !0,
+					type: "number",
+					domain: [0, w]
+				}), Object.keys(e[0]).map((e, t) => {
+					if (e !== "name") return /* @__PURE__ */ i(o, {
+						dataKey: e,
+						stackId: "a",
+						onClick: E ? null : () => d(n + 1, e),
+						onMouseEnter: E ? null : () => g(n + 1, e),
+						onMouseLeave: E ? null : () => _(n + 1, e),
+						shape: b(),
+						isAnimationActive: !1,
+						fill: v(O, `${n + 1}-${e}`),
+						children: T && /* @__PURE__ */ i(l, {
+							position: "left",
+							fill: "#000000"
+						})
+					}, `bar-${n + 1}-${t + 1}`);
+				})]
+			}, `bar-chart-${n + 1}`));
+		}), /* @__PURE__ */ i(m, { children: t });
+	}, N = t(null), P = () => {
+		let e = [];
+		for (let t = 1; t < C + 1; t++) {
+			let t = Array.from({ length: w }, (e, t) => ({
+				name: `${t + 1}`,
+				value: 1
+			}));
+			e.push(t);
+		}
+		let t = [];
+		return e.forEach((e, n) => {
+			t.push(/* @__PURE__ */ i(h, {
+				width: 200,
+				height: 200,
+				children: /* @__PURE__ */ i(u, {
+					data: e,
+					fill: "#FFFFFF",
+					stroke: "#000000",
+					dataKey: "value",
+					startAngle: 90,
+					endAngle: -270,
+					isAnimationActive: !1,
+					labelLine: !1,
+					label: T && y,
+					children: e.map((e, t) => /* @__PURE__ */ i(c, {
+						onClick: E ? null : () => d(n + 1, t + 1),
+						onMouseEnter: E ? null : () => g(n + 1, t + 1),
+						onMouseLeave: E ? null : () => _(n + 1, t + 1),
+						fill: v(O, `${n + 1}-${t + 1}`),
+						style: {
+							outline: "none",
+							cursor: E ? "default" : "pointer"
+						}
+					}, `${n + 1}-${t + 1}`))
+				}, `pie-${n + 1}`)
+			}, `pie-chart-${n}`));
+		}), /* @__PURE__ */ i(p, {
+			ref: N,
+			children: t
+		});
+	};
+	if (S === "bar") return M();
+	if (S === "pie") return e(() => {
+		if (N?.current && w === 1) {
+			let e = N.current.querySelectorAll("path");
+			e.length > 0 && e.forEach((e) => {
+				let t = e.getAttribute("d");
+				e.setAttribute("d", t.replaceAll("L 100,100", ""));
+			});
+		}
+	}, []), P();
+};
+//#endregion
+export { g as default };

package/dist/delivery/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-elements/packages/fraction-model/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.
+ */
+import FractionModelChart from './fraction-model-chart.js';
+export { FractionModelChart };
+export default class FractionModel extends HTMLElement {
+    constructor();
+    set model(m: any);
+    get model(): any;
+    set session(s: any);
+    get session(): any;
+    isSessionComplete(session: any, model: any): boolean;
+    onSessionChange(session: any): void;
+    connectedCallback(): void;
+    _render(): void;
+    disconnectedCallback(): void;
+}

package/dist/delivery/index.js

@@ -0,0 +1,54 @@
+import e from "./fraction-model-chart.js";
+import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
+import n from "./main.js";
+import r from "react";
+import { createRoot as i } from "react-dom/client";
+import { SessionChangedEvent as a } from "@pie-element/shared-player-events";
+import { renderMath as o } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/delivery/index.ts
+var s = class extends HTMLElement {
+	constructor() {
+		super(), this._root = null;
+	}
+	set model(e) {
+		this._model = e, this._render();
+	}
+	get model() {
+		return this._model;
+	}
+	set session(e) {
+		this._session = e, this._render();
+	}
+	get session() {
+		return this._session;
+	}
+	isSessionComplete(e, t) {
+		let n = e && e.answers, r = t.allowedStudentConfig ? n.noOfModel > 0 && n.partsPerModel > 0 : !0, i = Array.isArray(n.response) && n.response.length > 0;
+		return r && i;
+	}
+	onSessionChange(e) {
+		this._session.answers = e && e.answers;
+		let t = this.isSessionComplete(this._session, this._model);
+		this.dispatchEvent(new a(this.tagName.toLowerCase(), t));
+	}
+	connectedCallback() {
+		this._render();
+	}
+	_render() {
+		if (this._model && this._session) {
+			let e = t(this._model), a = r.createElement(n, {
+				model: e,
+				session: this._session,
+				onSessionChange: this.onSessionChange.bind(this)
+			});
+			this._root ||= i(this), this._root.render(a), queueMicrotask(() => {
+				o(this);
+			});
+		}
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { e as FractionModelChart, s as default };

package/dist/delivery/main.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @synced-from pie-elements/packages/fraction-model/src/main.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 Main extends React.Component {
+    static propTypes: {
+        model: PropTypes.Requireable<object>;
+        session: PropTypes.Requireable<object>;
+        onSessionChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    constructor(props: any);
+    /**
+     * Function to trigger when session value change for fraction model
+     */
+    callOnSessionChange: any;
+    /**
+     * Function to generate answers for preview selection
+     * @param {object} model contains model object for fraction model
+     * @returns answer model
+     */
+    generateAnswers: any;
+    /**
+     * Function to trigger when answer change from preview
+     * @param {object} newAnswers contains updated answer model
+     */
+    onAnswerChange: any;
+    toggleShowCorrect: any;
+    onResponseChange: any;
+    generateRandomKey: any;
+    render(): React.JSX.Element;
+}
+export default Main;

package/dist/delivery/main.js

@@ -0,0 +1,136 @@
+import e from "./answer-fraction.js";
+import t from "./fraction-model-chart.js";
+import n from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.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";
+import c from "@pie-lib/correct-answer-toggle";
+import { AlertDialog as l } from "@pie-lib/config-ui";
+import * as u from "@pie-lib/render-ui";
+import { PreviewPrompt as d, UiLayout as f } from "@pie-lib/render-ui";
+//#region src/delivery/main.tsx
+function p(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function m(e, t) {
+	return !e || p(e) ? e : p(e.default) ? e.default : t && p(e[t]) ? e[t] : t && p(e[t]?.default) ? e[t].default : e;
+}
+var h = m(f, "UiLayout") || m(y.UiLayout, "UiLayout"), g = m(d, "PreviewPrompt") || m(y.PreviewPrompt, "PreviewPrompt"), _ = u, v = _.default, y = v && typeof v == "object" ? v : _, b = a("div")({ padding: "16px" }), x = a("div")({
+	textAlign: "center",
+	fontSize: "20px"
+}), S = class extends r.Component {
+	static propTypes = {
+		model: i.object,
+		session: i.object,
+		onSessionChange: i.func.isRequired
+	};
+	constructor(e) {
+		super(e), this.state = {
+			session: {
+				...e.session,
+				answers: e.session && e.session.answers || this.generateAnswers(e.model)
+			},
+			showCorrect: !1,
+			answerChangeDialog: {
+				open: !1,
+				text: ""
+			}
+		}, this.callOnSessionChange();
+	}
+	callOnSessionChange = () => {
+		let { onSessionChange: e } = this.props;
+		e && e(this.state.session);
+	};
+	generateAnswers = (e) => {
+		let t = { response: [] };
+		return e.allowedStudentConfig && (t.noOfModel = "", t.partsPerModel = ""), t;
+	};
+	onAnswerChange = (e) => {
+		let t = n(this.state.session), r = {
+			...this.state.session,
+			answers: e
+		};
+		e.response.length > 0 ? this.setState({ answerChangeDialog: {
+			open: !0,
+			oldSession: t,
+			newSession: r,
+			text: "Changing either the Number of Models or Parts per Model will remove added answer. Are you sure you want to continue?"
+		} }) : this.setState((e) => ({ session: r }), this.callOnSessionChange);
+	};
+	toggleShowCorrect = (e) => {
+		this.setState({ showCorrect: e });
+	};
+	onResponseChange = (e) => {
+		this.setState((t) => ({ session: {
+			...t.session,
+			answers: {
+				...t.session.answers,
+				response: e
+			}
+		} }), this.callOnSessionChange);
+	};
+	generateRandomKey = () => Math.floor(Math.random() * 1e4);
+	render() {
+		let { model: n } = this.props, { showCorrect: r, session: i, answerChangeDialog: a } = this.state, { prompt: u, title: d, correctness: f = {}, extraCSSRules: p, language: m } = n, _ = f.correctness && f.correctness !== "correct", v = this.generateRandomKey();
+		return /* @__PURE__ */ o(h, {
+			extraCSSRules: p,
+			children: /* @__PURE__ */ s(b, { children: [
+				/* @__PURE__ */ o(x, { children: /* @__PURE__ */ o(g, {
+					className: "prompt",
+					prompt: d,
+					tagName: "h3"
+				}) }),
+				/* @__PURE__ */ o(g, {
+					className: "prompt",
+					prompt: u,
+					tagName: "p"
+				}),
+				/* @__PURE__ */ o(c, {
+					language: m,
+					show: _,
+					toggled: r,
+					onToggle: this.toggleShowCorrect
+				}),
+				/* @__PURE__ */ o(e, {
+					model: n,
+					showCorrect: r,
+					disabled: n.view,
+					onAnswerChange: this.onAnswerChange,
+					answers: i.answers
+				}),
+				/* @__PURE__ */ o(t, {
+					disabled: n.view,
+					value: r ? n.correctResponse : i.answers.response,
+					modelType: n.modelTypeSelected,
+					noOfModels: r ? n.maxModelSelected : n.allowedStudentConfig ? i.answers.noOfModel : n.maxModelSelected,
+					partsPerModel: r ? n.partsPerModel : n.allowedStudentConfig ? i.answers.partsPerModel : n.partsPerModel,
+					showLabel: n.showGraphLabels,
+					onChange: this.onResponseChange
+				}, v),
+				/* @__PURE__ */ o(l, {
+					open: a.open,
+					title: "Warning",
+					text: a.text,
+					onConfirm: () => {
+						let e = this.state.answerChangeDialog.newSession;
+						e.answers.response = [], this.setState(() => ({
+							session: e,
+							answerChangeDialog: { open: !1 }
+						}), this.callOnSessionChange);
+					},
+					onClose: () => {
+						this.setState((e) => ({
+							session: e.answerChangeDialog.oldSession,
+							answerChangeDialog: { open: !1 }
+						}), this.callOnSessionChange);
+					},
+					onConfirmText: "OK",
+					onCloseText: "Cancel"
+				})
+			] })
+		});
+	}
+};
+//#endregion
+export { S 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 fraction-model 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;