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

package/configure.js

@@ -0,0 +1,2 @@
+export { default } from './dist/author/index.js';
+export * from './dist/author/index.js';

package/controller.js

@@ -0,0 +1 @@
+export * from './dist/controller/index.js';

package/dist/author/card-bar.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @synced-from pie-elements/packages/fraction-model/configure/src/card-bar.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 CardBar: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        mini: PropTypes.Requireable<boolean>;
+        header: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        info: PropTypes.Requireable<any>;
+    };
+};
+export default CardBar;

package/dist/author/card-bar.js

@@ -0,0 +1,40 @@
+import "react";
+import e from "prop-types";
+import { styled as t } from "@mui/material/styles";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@mui/material/Tooltip";
+import a from "@mui/icons-material/HelpOutline";
+import o from "@mui/material/IconButton";
+import s from "@mui/material/Typography";
+//#region src/author/card-bar.tsx
+var c = t("div")({
+	display: "flex",
+	justifyContent: "space-between"
+}), l = t("div")({
+	display: "flex",
+	alignItems: "center"
+}), u = t(o)({
+	margin: 0,
+	padding: 0
+}), d = t(i)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": { fontSize: e.typography.fontSize - 2 } })), f = (e) => {
+	let { header: t, children: i, mini: o, info: f } = e;
+	return /* @__PURE__ */ r(c, { children: [/* @__PURE__ */ r(l, { children: [/* @__PURE__ */ n(s, {
+		variant: o ? "h6" : "h5",
+		children: t
+	}), f] }), i && /* @__PURE__ */ n(d, {
+		title: i,
+		children: /* @__PURE__ */ n(u, {
+			"aria-label": "Delete",
+			size: "large",
+			children: /* @__PURE__ */ n(a, {})
+		})
+	})] });
+};
+f.propTypes = {
+	mini: e.bool,
+	header: e.string,
+	children: e.node,
+	info: e.any
+};
+//#endregion
+export { f as default };

package/dist/author/defaults.d.ts

@@ -0,0 +1,113 @@
+/**
+ * @synced-from pie-elements/packages/fraction-model/configure/src/defaults.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.
+ */
+declare const _default: {
+    model: {
+        correctResponse: never[];
+        title: string;
+        prompt: string;
+        modelTypeSelected: string;
+        maxModelSelected: number;
+        partsPerModel: number;
+        allowedStudentConfig: boolean;
+        showGraphLabels: boolean;
+    };
+    configuration: {
+        baseInputConfiguration: {
+            h3: {
+                disabled: boolean;
+            };
+            audio: {
+                disabled: boolean;
+            };
+            video: {
+                disabled: boolean;
+            };
+            image: {
+                disabled: boolean;
+            };
+            textAlign: {
+                disabled: boolean;
+            };
+            showParagraphs: {
+                disabled: boolean;
+            };
+            separateParagraphs: {
+                disabled: boolean;
+            };
+        };
+        title: {
+            label: string;
+            settings: boolean;
+            enabled: boolean;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+        };
+        prompt: {
+            label: string;
+            settings: boolean;
+            enabled: boolean;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+        };
+        modelOptions: {
+            maxOfModel: {
+                min: number;
+                max: number;
+                default: number;
+            };
+            partsPerModel: {
+                min: number;
+                max: number;
+                default: number;
+            };
+            modelTypeChoices: {
+                value: string;
+                label: string;
+            }[];
+        };
+        mathMlOptions: {
+            mmlOutput: boolean;
+            mmlEditing: boolean;
+        };
+        language: {
+            settings: boolean;
+            label: string;
+            enabled: boolean;
+        };
+        languageChoices: {
+            label: string;
+            options: never[];
+        };
+        spellCheck: {
+            label: string;
+            settings: boolean;
+            enabled: boolean;
+        };
+        settingsPanelDisabled: boolean;
+    };
+};
+export default _default;

package/dist/author/defaults.js

@@ -0,0 +1,84 @@
+//#region src/author/defaults.ts
+var e = {
+	model: {
+		correctResponse: [],
+		title: "",
+		prompt: "",
+		modelTypeSelected: "bar",
+		maxModelSelected: 1,
+		partsPerModel: 5,
+		allowedStudentConfig: !1,
+		showGraphLabels: !1
+	},
+	configuration: {
+		baseInputConfiguration: {
+			h3: { disabled: !0 },
+			audio: { disabled: !1 },
+			video: { disabled: !1 },
+			image: { disabled: !1 },
+			textAlign: { disabled: !0 },
+			showParagraphs: { disabled: !1 },
+			separateParagraphs: { disabled: !0 }
+		},
+		title: {
+			label: "Title",
+			settings: !0,
+			enabled: !0,
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			}
+		},
+		prompt: {
+			label: "Question",
+			settings: !0,
+			enabled: !0,
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			}
+		},
+		modelOptions: {
+			maxOfModel: {
+				min: 1,
+				max: 9,
+				default: 1
+			},
+			partsPerModel: {
+				min: 1,
+				max: 9,
+				default: 5
+			},
+			modelTypeChoices: [{
+				value: "bar",
+				label: "Bar"
+			}, {
+				value: "pie",
+				label: "Pie"
+			}]
+		},
+		mathMlOptions: {
+			mmlOutput: !1,
+			mmlEditing: !1
+		},
+		language: {
+			settings: !1,
+			label: "Specify Language",
+			enabled: !1
+		},
+		languageChoices: {
+			label: "Language Choices",
+			options: []
+		},
+		spellCheck: {
+			label: "Spellcheck",
+			settings: !1,
+			enabled: !0
+		},
+		settingsPanelDisabled: !0
+	}
+};
+//#endregion
+export { e as default };

package/dist/author/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @synced-from pie-elements/packages/fraction-model/configure/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 FractionModelConfigure extends HTMLElement {
+    /**
+     * This function makes sure you set the default values on the model
+     * @param model
+     * @returns model
+     */
+    static createDefaultModel: (model?: {}) => {
+        language: any;
+        correctResponse: never[];
+        title: string;
+        prompt: string;
+        modelTypeSelected: string;
+        maxModelSelected: number;
+        partsPerModel: number;
+        allowedStudentConfig: boolean;
+        showGraphLabels: boolean;
+    };
+    constructor();
+    set model(m: any);
+    set configuration(c: any);
+    resetModelAfterConfigurationIsSet: any;
+    connectedCallback(): void;
+    modelChanged(m: any): void;
+    onChange: any;
+    onConfigurationChanged(c: any): void;
+    /**
+     *
+     * @param {done, progress, file} handler
+     */
+    insertImage(handler: any): void;
+    onDeleteImage(src: any, done: any): void;
+    insertSound(handler: any): void;
+    onDeleteSound(src: any, done: any): void;
+    render(): void;
+    disconnectedCallback(): void;
+}

package/dist/author/index.js

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

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

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

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