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

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

@@ -1,154 +0,0 @@
-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

@@ -1,22 +0,0 @@
-/**
- * @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

@@ -1,54 +0,0 @@
-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

@@ -1,38 +0,0 @@
-/**
- * @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

@@ -1,136 +0,0 @@
-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

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

package/dist/index.iife.d.ts

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