@pie-element/fraction-model 6.1.2-next.1 → 6.1.2

package/dist/author/index.js

@@ -1,88 +0,0 @@
-import e from "./main.js";
-import t from "./defaults.js";
-import n from "react";
-import { createRoot as r } from "react-dom/client";
-import { DeleteImageEvent as i, DeleteSoundEvent as a, InsertImageEvent as o, InsertSoundEvent as s, ModelUpdatedEvent as c } from "@pie-element/shared-configure-events";
-//#region src/author/index.ts
-var l = class l extends HTMLElement {
-	static createDefaultModel = (e = {}) => {
-		let n = t.configuration, r = e.language || "";
-		return !r && n.language && n.language.enabled && n.languageChoices?.options?.length && (r = n.languageChoices.options[0].value), {
-			...t.model,
-			...e,
-			language: r
-		};
-	};
-	constructor() {
-		super(), this._root = null, this._model = l.createDefaultModel(), this._configuration = t.configuration;
-	}
-	set model(e) {
-		this._model = l.createDefaultModel(e), this.render();
-	}
-	set configuration(e) {
-		let n = {
-			...t.configuration,
-			...e
-		};
-		this._configuration = n, this.resetModelAfterConfigurationIsSet(), n?.language?.enabled ? n?.languageChoices?.options?.length && (this._model.language = n?.languageChoices.options[0].value) : n.language.settings && this._model.language ? (this._configuration.language.enabled = !0, (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) && (this._configuration.languageChoices.options = []), this._configuration.languageChoices.options.find((e) => e.value === this._model.language) || this._configuration.languageChoices.options.push({
-			value: this._model.language,
-			label: this._model.language
-		})) : delete this._model.language, this.render();
-	}
-	resetModelAfterConfigurationIsSet = () => {
-		let e = document.querySelectorAll("pie-author");
-		this.hasPlayerAsParent = Array.from(e).some((e) => e.contains(this)), this.hasPlayerAsParent && (this._modelCopy ? this._model = this._modelCopy : delete this._modelCopy);
-	};
-	connectedCallback() {
-		this.render();
-	}
-	modelChanged(e) {
-		this._model = e, this.dispatchEvent(new c(this._model), !0), this.render();
-	}
-	onChange = (e) => {
-		this._model = {
-			...this._model,
-			...e
-		}, this.dispatchEvent(new c(this._model)), this.render();
-	};
-	onConfigurationChanged(e) {
-		this._configuration = e, this.render();
-	}
-	insertImage(e) {
-		this.dispatchEvent(new o(e));
-	}
-	onDeleteImage(e, t) {
-		this.dispatchEvent(new i(e, t));
-	}
-	insertSound(e) {
-		this.dispatchEvent(new s(e));
-	}
-	onDeleteSound(e, t) {
-		this.dispatchEvent(new a(e, t));
-	}
-	render() {
-		if (this._model) {
-			let t = n.createElement(e, {
-				classes: {},
-				model: this._model,
-				configuration: this._configuration,
-				onConfigurationChanged: this.onConfigurationChanged,
-				onChange: this.onChange,
-				imageSupport: {
-					add: this.insertImage.bind(this),
-					delete: this.onDeleteImage.bind(this)
-				},
-				uploadSoundSupport: {
-					add: this.insertSound.bind(this),
-					delete: this.onDeleteSound.bind(this)
-				}
-			});
-			this._root ||= r(this), this._root.render(t);
-		}
-	}
-	disconnectedCallback() {
-		this._root && this._root.unmount();
-	}
-};
-//#endregion
-export { l as default };

package/dist/author/main.d.ts

@@ -1,25 +0,0 @@
-/**
- * @synced-from pie-elements/packages/fraction-model/configure/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.Validator<object>;
-        configuration: PropTypes.Validator<object>;
-        onConfigurationChanged: PropTypes.Validator<(...args: any[]) => any>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-        uploadSoundSupport: PropTypes.Validator<object>;
-    };
-    constructor(props: any);
-    onCorrectAnswerChange: any;
-    onModelOptionsChange: any;
-    generateRandomKey: any;
-    render(): React.JSX.Element;
-}
-export default Main;

package/dist/author/main.js

@@ -1,156 +0,0 @@
-import e from "../delivery/fraction-model-chart.js";
-import t from "./card-bar.js";
-import n from "./model-options.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 { AlertDialog as c, FormSection as l, layout as u } from "@pie-lib/config-ui";
-import d from "@pie-lib/editable-html-tip-tap";
-import f from "@mui/material/Tooltip";
-import p from "@mui/icons-material/Info";
-//#region src/author/main.tsx
-var m = a(l)(({ theme: e }) => ({ marginBottom: e.spacing(4) })), h = a(f)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
-	fontSize: e.typography.fontSize - 2,
-	whiteSpace: "pre",
-	maxWidth: "500px"
-} })), g = a("div")(({ theme: e }) => ({
-	fontSize: e.typography.fontSize - 2,
-	color: e.palette.error.main,
-	marginTop: e.spacing(1)
-})), _ = a("div")(({ theme: e, hasError: t }) => ({ ...t && { border: `2px solid ${e.palette.error.main}` } })), v = a("label")(({ theme: e }) => ({ marginBottom: e.spacing(4) })), y = class extends r.Component {
-	static propTypes = {
-		model: i.object.isRequired,
-		configuration: i.object.isRequired,
-		onConfigurationChanged: i.func.isRequired,
-		onChange: i.func.isRequired,
-		uploadSoundSupport: i.object.isRequired
-	};
-	constructor(e) {
-		super(e), this.state = { correctAnswerChangeDialog: {
-			open: !1,
-			text: ""
-		} };
-	}
-	onCorrectAnswerChange = (e) => {
-		let { model: t, onChange: n } = this.props;
-		t.correctResponse = e, n({ ...t });
-	};
-	onModelOptionsChange = (e, t, n) => {
-		let { onChange: r } = this.props;
-		n && e.correctResponse.length > 0 ? this.setState({ correctAnswerChangeDialog: {
-			open: !0,
-			oldModel: e,
-			newModel: t,
-			text: "Changing either the Number of Models or Parts per Model will remove added correct answer. Are you sure you want to continue?"
-		} }) : r({ ...t });
-	};
-	generateRandomKey = () => Math.floor(Math.random() * 1e4);
-	render() {
-		let { model: r, onChange: i, configuration: a, imageSupport: f, uploadSoundSupport: y } = this.props, { baseInputConfiguration: b = {}, contentDimensions: x = {}, title: S = {}, prompt: C = {}, modelOptions: w = {}, mathMlOptions: T = {} } = a || {}, { errors: E = {}, extraCSSRules: D, spellCheckEnabled: O, toolbarEditorPosition: k } = r || {}, { correctAnswerChangeDialog: A } = this.state, j = { position: k === "top" ? "top" : "bottom" }, M = (e = {}) => ({
-			...b,
-			...e
-		}), N = this.generateRandomKey();
-		return /* @__PURE__ */ s(u.ConfigLayout, {
-			extraCSSRules: D,
-			dimensions: x,
-			hideSettings: !0,
-			children: [
-				/* @__PURE__ */ o(t, { header: "Set Up" }),
-				/* @__PURE__ */ o(m, {
-					label: S?.label || "Title",
-					children: /* @__PURE__ */ o(d, {
-						markup: r.title || "",
-						onChange: (e) => i({ title: e }),
-						toolbarOpts: j,
-						activePlugins: [
-							"bold",
-							"html",
-							"italic",
-							"underline",
-							"strikethrough",
-							"image",
-							"math",
-							"languageCharacters",
-							"responseArea"
-						],
-						pluginProps: M(S?.inputConfiguration),
-						spellCheck: O,
-						uploadSoundSupport: y,
-						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-						mathMlOptions: T
-					})
-				}),
-				/* @__PURE__ */ o(m, {
-					label: C?.label || "Question",
-					children: /* @__PURE__ */ o(d, {
-						markup: r.prompt || "",
-						minHeight: 60,
-						onChange: (e) => i({ prompt: e }),
-						toolbarOpts: j,
-						pluginProps: M(C?.inputConfiguration),
-						spellCheck: O,
-						uploadSoundSupport: y,
-						imageSupport: f,
-						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-						mathMlOptions: T
-					})
-				}),
-				/* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(n, {
-					model: r,
-					onChange: this.onModelOptionsChange,
-					modelOptions: w
-				}) }),
-				/* @__PURE__ */ s(l, { children: [
-					"            ",
-					/* @__PURE__ */ o(t, {
-						header: "Correct Answer",
-						info: /* @__PURE__ */ o(h, {
-							disableFocusListener: !0,
-							disableTouchListener: !0,
-							placement: "right",
-							title: "The correct answer should include no more than one partially-filled model",
-							children: /* @__PURE__ */ o(p, {
-								fontSize: "small",
-								color: "primary",
-								style: { marginLeft: "8px" }
-							})
-						})
-					}),
-					/* @__PURE__ */ o("br", {}),
-					/* @__PURE__ */ o(v, { children: "Click/touch the number of parts to represent the correct fraction model" }),
-					/* @__PURE__ */ o("br", {}),
-					/* @__PURE__ */ o(_, {
-						hasError: !!E.correctResponse,
-						children: /* @__PURE__ */ o(e, {
-							value: r.correctResponse,
-							modelType: r.modelTypeSelected,
-							noOfModels: r.maxModelSelected,
-							partsPerModel: r.partsPerModel,
-							showLabel: r.showGraphLabels,
-							onChange: this.onCorrectAnswerChange
-						}, N)
-					}),
-					E.correctResponse && /* @__PURE__ */ o(g, { children: E.correctResponse })
-				] }),
-				/* @__PURE__ */ o(c, {
-					open: A.open,
-					title: "Warning",
-					text: A.text,
-					onConfirm: () => {
-						let e = this.state.correctAnswerChangeDialog.newModel;
-						e.correctResponse = [], i({ ...e }), this.setState({ correctAnswerChangeDialog: { open: !1 } });
-					},
-					onClose: () => {
-						let e = this.state.correctAnswerChangeDialog.oldModel;
-						i({ ...e }), this.setState({ correctAnswerChangeDialog: { open: !1 } });
-					},
-					onConfirmText: "OK",
-					onCloseText: "Cancel"
-				})
-			]
-		});
-	}
-};
-//#endregion
-export { y as default };

package/dist/author/model-options.d.ts

@@ -1,32 +0,0 @@
-/**
- * @synced-from pie-elements/packages/fraction-model/configure/src/model-options.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 ModelOptions extends React.Component {
-    static propTypes: {
-        model: PropTypes.Validator<object>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        modelOptions: PropTypes.Validator<object>;
-    };
-    constructor(props: any);
-    /**
-     * Function to trigger when DOM elements value change for Number type
-     * @param {string} key contains key of element
-     * @param {object} event contains event object
-     * @param {string} value contains value of DOM element
-     */
-    change(key: any, event: any, value: any): void;
-    /**
-     * Function to trigger on change of dropdown value model type
-     * @param {string} value contains selection value
-     */
-    handleSelect: any;
-    render(): React.JSX.Element;
-}
-export default ModelOptions;

package/dist/author/model-options.js

@@ -1,85 +0,0 @@
-import e from "./card-bar.js";
-import { MiniField as t } from "./number-text-field.js";
-import n from "react";
-import r from "prop-types";
-import { styled as i } from "@mui/material/styles";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Checkbox as s } from "@pie-lib/config-ui";
-import { cloneDeep as c } from "@pie-element/shared-lodash";
-import l from "@mui/material/Select";
-import u from "@mui/material/MenuItem";
-//#region src/author/model-options.tsx
-var d = i("div")({
-	alignItems: "center",
-	display: "flex",
-	gap: "20px"
-}), f = i("div")({ margin: "12px 0" }), p = i("label")({
-	display: "block",
-	marginBottom: "4px"
-}), m = i(l)({
-	width: "80px",
-	alignItems: "center",
-	height: "40px",
-	verticalAlign: "top",
-	marginBottom: "8px",
-	"& .MuiSelect-select": { paddingLeft: "10px" }
-}), h = i("div")({ marginLeft: "-15px" }), g = i("span")({ verticalAlign: "middle" }), _ = class extends n.Component {
-	static propTypes = {
-		model: r.object.isRequired,
-		onChange: r.func,
-		modelOptions: r.object.isRequired
-	};
-	constructor(e) {
-		super(e), this.changeMaxModel = this.change.bind(this, "max"), this.changePartModel = this.change.bind(this, "part"), this.studentConfig = this.change.bind(this, "student-config");
-	}
-	change(e, t, n) {
-		let { model: r, onChange: i } = this.props, a = c(r), o = c(r), s = !1;
-		e === "max" ? (o.maxModelSelected = n, s = !0) : e === "part" ? (o.partsPerModel = n, s = !0) : e === "student-config" && (o.allowedStudentConfig = n, s = !1), i(a, o, s);
-	}
-	handleSelect = (e) => {
-		let { model: t, onChange: n } = this.props;
-		t.modelTypeSelected = e?.target.value, n(t, { ...t }, !1);
-	};
-	render() {
-		let { model: n, modelOptions: r } = this.props, { maxOfModel: i, partsPerModel: c, modelTypeChoices: l } = r;
-		return /* @__PURE__ */ o("div", { children: [
-			/* @__PURE__ */ a(e, { header: "Configure Fraction Model" }),
-			/* @__PURE__ */ a("br", {}),
-			/* @__PURE__ */ o(d, { children: [
-				/* @__PURE__ */ o(f, { children: [/* @__PURE__ */ a(p, { children: "Model Type" }), /* @__PURE__ */ a(m, {
-					onChange: this.handleSelect,
-					value: n.modelTypeSelected,
-					MenuProps: { transitionDuration: {
-						enter: 225,
-						exit: 195
-					} },
-					children: l.map((e, t) => /* @__PURE__ */ a(u, {
-						value: e.value,
-						children: e.label
-					}, "item_" + t))
-				})] }),
-				/* @__PURE__ */ o(f, { children: [/* @__PURE__ */ a(p, { children: "Max # of Models" }), /* @__PURE__ */ a(t, {
-					min: i.min,
-					max: i.max,
-					value: n.maxModelSelected,
-					name: "max-model",
-					onChange: this.changeMaxModel
-				})] }),
-				/* @__PURE__ */ o(f, { children: [/* @__PURE__ */ a(p, { children: "Parts per Model" }), /* @__PURE__ */ a(t, {
-					min: c.min,
-					max: c.max,
-					value: n.partsPerModel,
-					name: "model-parts",
-					onChange: this.changePartModel
-				})] })
-			] }),
-			/* @__PURE__ */ o(h, { children: [/* @__PURE__ */ a(s, {
-				onChange: this.studentConfig,
-				checked: n.allowedStudentConfig,
-				label: ""
-			}), /* @__PURE__ */ a(g, { children: "Allow student to configure number of models and parts per model" })] })
-		] });
-	}
-};
-//#endregion
-export { _ as default };

package/dist/author/number-text-field.d.ts

@@ -1,15 +0,0 @@
-/**
- * @synced-from pie-elements/packages/fraction-model/configure/src/number-text-field.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';
-export declare class NumberTextField extends React.Component {
-    static propTypes: {};
-    render(): React.JSX.Element;
-}
-export declare const MiniField: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
-export default NumberTextField;

package/dist/author/number-text-field.js

@@ -1,24 +0,0 @@
-import e from "react";
-import { styled as t } from "@mui/material/styles";
-import { jsx as n } from "react/jsx-runtime";
-import { NumberTextField as r } from "@pie-lib/config-ui";
-t(r)(({ theme: e }) => ({ marginLeft: e.spacing(1) }));
-//#region src/author/number-text-field.tsx
-var i = t(r)({
-	maxWidth: "120px",
-	width: "120px",
-	marginTop: "0",
-	"& [class^=\"MuiInputBase-root\"]": {
-		height: 40,
-		fontSize: "14px"
-	},
-	"& [class^=\"MuiInputBase-input\"]": { padding: "18.5px 14px" }
-});
-e.Component;
-var a = e.forwardRef((e, t) => /* @__PURE__ */ n(i, {
-	...e,
-	ref: t,
-	variant: "outlined"
-}));
-//#endregion
-export { a as MiniField };