@pie-element/fraction-model 7.0.4-next.20261011174919 → 7.0.4

package/dist/author/defaults.d.ts

@@ -1,67 +1,69 @@
+import type { ConfigureLanguageOptionsProp } from '@pie-element/shared-types';
+import type { FractionModelResponse } from '../types.js';
 declare const _default: {
     model: {
-        correctResponse: never[];
+        correctResponse: FractionModelResponse[];
         title: string;
         prompt: string;
-        modelTypeSelected: string;
+        modelTypeSelected: "bar";
         maxModelSelected: number;
         partsPerModel: number;
-        allowedStudentConfig: boolean;
-        showGraphLabels: boolean;
+        allowedStudentConfig: false;
+        showGraphLabels: false;
     };
     configuration: {
         baseInputConfiguration: {
             h3: {
-                disabled: boolean;
+                disabled: true;
             };
             audio: {
-                disabled: boolean;
+                disabled: false;
             };
             video: {
-                disabled: boolean;
+                disabled: false;
             };
             image: {
-                disabled: boolean;
+                disabled: false;
             };
             textAlign: {
-                disabled: boolean;
+                disabled: true;
             };
             showParagraphs: {
-                disabled: boolean;
+                disabled: false;
             };
             separateParagraphs: {
-                disabled: boolean;
+                disabled: true;
             };
         };
         title: {
             label: string;
-            settings: boolean;
-            enabled: boolean;
+            settings: true;
+            enabled: true;
             inputConfiguration: {
                 audio: {
-                    disabled: boolean;
+                    disabled: false;
                 };
                 video: {
-                    disabled: boolean;
+                    disabled: false;
                 };
                 image: {
-                    disabled: boolean;
+                    disabled: false;
                 };
             };
         };
         prompt: {
             label: string;
-            settings: boolean;
-            enabled: boolean;
+            settings: true;
+            enabled: true;
             inputConfiguration: {
                 audio: {
-                    disabled: boolean;
+                    disabled: false;
                 };
                 video: {
-                    disabled: boolean;
+                    disabled: false;
                 };
                 image: {
-                    disabled: boolean;
+                    disabled: false;
                 };
             };
         };
@@ -76,30 +78,33 @@ declare const _default: {
                 max: number;
                 default: number;
             };
-            modelTypeChoices: {
-                value: string;
+            modelTypeChoices: ({
+                value: "bar";
                 label: string;
-            }[];
+            } | {
+                value: "pie";
+                label: string;
+            })[];
         };
         mathMlOptions: {
-            mmlOutput: boolean;
-            mmlEditing: boolean;
+            mmlOutput: false;
+            mmlEditing: false;
         };
         language: {
-            settings: boolean;
+            settings: false;
             label: string;
-            enabled: boolean;
+            enabled: false;
         };
         languageChoices: {
             label: string;
-            options: never[];
+            options: ConfigureLanguageOptionsProp[];
         };
         spellCheck: {
             label: string;
-            settings: boolean;
-            enabled: boolean;
+            settings: false;
+            enabled: true;
         };
-        settingsPanelDisabled: boolean;
+        settingsPanelDisabled: true;
     };
 };
 export default _default;

package/dist/author/index.d.ts

@@ -1,36 +1,34 @@
+import { type AuthorModel } from './main.js';
+import { type DeleteDone, type ImageHandler, type SoundHandler } from '@pie-element/shared-configure-events';
+import type { FractionModelConfiguration, FractionModelModel } from '../types.js';
 export default class FractionModelConfigure extends HTMLElement {
+    private _root;
+    private _model;
+    private _configuration;
+    private _modelCopy?;
+    hasPlayerAsParent?: boolean;
     /**
      * 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;
-    };
+    static createDefaultModel: (model?: Partial<FractionModelModel>) => AuthorModel;
     constructor();
-    set model(m: any);
-    set configuration(c: any);
-    resetModelAfterConfigurationIsSet: any;
+    set model(m: Partial<FractionModelModel>);
+    set configuration(c: FractionModelConfiguration);
+    resetModelAfterConfigurationIsSet: () => void;
     connectedCallback(): void;
-    modelChanged(m: any): void;
-    onChange: any;
-    onConfigurationChanged(c: any): void;
+    modelChanged(m: AuthorModel): void;
+    onChange: (o: Partial<AuthorModel>) => void;
+    onConfigurationChanged(c: FractionModelConfiguration): 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;
+    insertImage(handler: ImageHandler): void;
+    onDeleteImage(src: string, done: DeleteDone): void;
+    insertSound(handler: SoundHandler): void;
+    onDeleteSound(src: string, done: DeleteDone): void;
     render(): void;
     disconnectedCallback(): void;
 }

package/dist/author/index.js

@@ -5,6 +5,9 @@ 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 {
+	_root;
+	_model;
+	_configuration;
 	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), {
@@ -24,10 +27,15 @@ var l = class l extends HTMLElement {
 			...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();
+		if (this._configuration = n, this.resetModelAfterConfigurationIsSet(), n?.language?.enabled) n?.languageChoices?.options?.length && (this._model.language = n?.languageChoices.options[0].value);
+		else if (n.language.settings && this._model.language) {
+			let e = this._model.language, t = this._configuration.languageChoices;
+			this._configuration.language.enabled = !0, (!t.options || !t.options.length) && (t.options = []), t.options.find((t) => t.value === e) || t.options.push({
+				value: e,
+				label: e
+			});
+		} else delete this._model.language;
+		this.render();
 	}
 	resetModelAfterConfigurationIsSet = () => {
 		let e = document.querySelectorAll("pie-author");
@@ -37,7 +45,7 @@ var l = class l extends HTMLElement {
 		this.render();
 	}
 	modelChanged(e) {
-		this._model = e, this.dispatchEvent(new c(this._model), !0), this.render();
+		this._model = e, this.dispatchEvent(new c(this._model)), this.render();
 	}
 	onChange = (e) => {
 		this._model = {
@@ -63,7 +71,6 @@ var l = class l extends HTMLElement {
 	render() {
 		if (this._model) {
 			let t = n.createElement(e, {
-				classes: {},
 				model: this._model,
 				configuration: this._configuration,
 				onConfigurationChanged: this.onConfigurationChanged,

package/dist/author/main.d.ts

@@ -1,17 +1,39 @@
 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>;
+import type { DeleteDone, ImageHandler, SoundHandler } from '@pie-element/shared-configure-events';
+import type { FractionModelValidationErrors } from '../controller/index.js';
+import type { FractionModelConfiguration, FractionModelModel, FractionModelResponse } from '../types.js';
+/** The model the author edits; `createDefaultModel()` fills it from the defaults, and the host sets `errors` from the controller's `validate()`. */
+export type AuthorModel = Partial<FractionModelModel> & {
+    correctResponse: FractionModelResponse[];
+    errors?: FractionModelValidationErrors;
+};
+type MediaSupport<Handler> = {
+    add: (handler: Handler) => void;
+    delete: (src: string, done: DeleteDone) => void;
+};
+export type MainProps = {
+    model: AuthorModel;
+    configuration: FractionModelConfiguration;
+    onConfigurationChanged: (configuration: FractionModelConfiguration) => void;
+    /** Merges the update into the model */
+    onChange: (update: Partial<AuthorModel>) => void;
+    imageSupport: MediaSupport<ImageHandler>;
+    uploadSoundSupport: MediaSupport<SoundHandler>;
+};
+type State = {
+    /** The warning shown before a change to the model options clears the correct answer */
+    correctAnswerChangeDialog: {
+        open: boolean;
+        text?: string;
+        oldModel?: AuthorModel;
+        newModel?: AuthorModel;
     };
-    constructor(props: any);
-    onCorrectAnswerChange: any;
-    onModelOptionsChange: any;
-    generateRandomKey: any;
+};
+export declare class Main extends React.Component<MainProps, State> {
+    constructor(props: MainProps);
+    onCorrectAnswerChange: (correctResponse: FractionModelResponse[]) => void;
+    onModelOptionsChange: (oldModel: AuthorModel, newModel: AuthorModel, showDiag: boolean) => void;
+    generateRandomKey: () => number;
     render(): React.JSX.Element;
 }
 export default Main;

package/dist/author/main.js

@@ -2,30 +2,22 @@ import e from "../delivery/fraction-model-chart.js";
 import t from "./card-bar.js";
 import { ModelOptions as 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";
+import { styled as i } from "@mui/material/styles";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { AlertDialog as s, FormSection as c, layout as l } from "@pie-lib/config-ui";
+import u from "@pie-lib/editable-html-tip-tap";
+import d from "@mui/material/Tooltip";
+import f 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": {
+var p = i(c)(({ theme: e }) => ({ marginBottom: e.spacing(4) })), m = i(d)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
 	fontSize: e.typography.fontSize - 2,
 	whiteSpace: "pre",
 	maxWidth: "500px"
-} })), g = a("div")(({ theme: e }) => ({
+} })), h = i("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
-	};
+})), g = i("div")(({ theme: e, hasError: t }) => ({ ...t && { border: `2px solid ${e.palette.error.main}` } })), _ = i("label")(({ theme: e }) => ({ marginBottom: e.spacing(4) })), v = class extends r.Component {
 	constructor(e) {
 		super(e), this.state = { correctAnswerChangeDialog: {
 			open: !1,
@@ -47,19 +39,19 @@ var m = a(l)(({ theme: e }) => ({ marginBottom: e.spacing(4) })), h = a(f)(({ th
 	};
 	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 = {}) => ({
+		let { model: r, onChange: i, configuration: d, imageSupport: v, uploadSoundSupport: y } = this.props, { baseInputConfiguration: b = {}, contentDimensions: x = {}, title: S = {}, prompt: C = {}, modelOptions: w = {}, mathMlOptions: T = {} } = d || {}, { 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, {
+		return /* @__PURE__ */ o(l.ConfigLayout, {
 			extraCSSRules: D,
 			dimensions: x,
 			hideSettings: !0,
 			children: [
-				/* @__PURE__ */ o(t, { header: "Set Up" }),
-				/* @__PURE__ */ o(m, {
+				/* @__PURE__ */ a(t, { header: "Set Up" }),
+				/* @__PURE__ */ a(p, {
 					label: S?.label || "Title",
-					children: /* @__PURE__ */ o(d, {
+					children: /* @__PURE__ */ a(u, {
 						markup: r.title || "",
 						onChange: (e) => i({ title: e }),
 						toolbarOpts: j,
@@ -81,9 +73,9 @@ var m = a(l)(({ theme: e }) => ({ marginBottom: e.spacing(4) })), h = a(f)(({ th
 						mathMlOptions: T
 					})
 				}),
-				/* @__PURE__ */ o(m, {
+				/* @__PURE__ */ a(p, {
 					label: C?.label || "Question",
-					children: /* @__PURE__ */ o(d, {
+					children: /* @__PURE__ */ a(u, {
 						markup: r.prompt || "",
 						minHeight: 60,
 						onChange: (e) => i({ prompt: e }),
@@ -91,38 +83,38 @@ var m = a(l)(({ theme: e }) => ({ marginBottom: e.spacing(4) })), h = a(f)(({ th
 						pluginProps: M(C?.inputConfiguration),
 						spellCheck: O,
 						uploadSoundSupport: y,
-						imageSupport: f,
+						imageSupport: v,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: T
 					})
 				}),
-				/* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(n, {
+				/* @__PURE__ */ a(c, { children: /* @__PURE__ */ a(n, {
 					model: r,
 					onChange: this.onModelOptionsChange,
 					modelOptions: w
 				}) }),
-				/* @__PURE__ */ s(l, { children: [
+				/* @__PURE__ */ o(c, { children: [
 					"            ",
-					/* @__PURE__ */ o(t, {
+					/* @__PURE__ */ a(t, {
 						header: "Correct Answer",
-						info: /* @__PURE__ */ o(h, {
+						info: /* @__PURE__ */ a(m, {
 							disableFocusListener: !0,
 							disableTouchListener: !0,
 							placement: "right",
 							title: "The correct answer should include no more than one partially-filled model",
-							children: /* @__PURE__ */ o(p, {
+							children: /* @__PURE__ */ a(f, {
 								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(_, {
+					/* @__PURE__ */ a("br", {}),
+					/* @__PURE__ */ a(_, { children: "Click/touch the number of parts to represent the correct fraction model" }),
+					/* @__PURE__ */ a("br", {}),
+					/* @__PURE__ */ a(g, {
 						hasError: !!E.correctResponse,
-						children: /* @__PURE__ */ o(e, {
+						children: /* @__PURE__ */ a(e, {
 							value: r.correctResponse,
 							modelType: r.modelTypeSelected,
 							noOfModels: r.maxModelSelected,
@@ -131,9 +123,9 @@ var m = a(l)(({ theme: e }) => ({ marginBottom: e.spacing(4) })), h = a(f)(({ th
 							onChange: this.onCorrectAnswerChange
 						}, N)
 					}),
-					E.correctResponse && /* @__PURE__ */ o(g, { children: E.correctResponse })
+					E.correctResponse && /* @__PURE__ */ a(h, { children: E.correctResponse })
 				] }),
-				/* @__PURE__ */ o(c, {
+				/* @__PURE__ */ a(s, {
 					open: A.open,
 					title: "Warning",
 					text: A.text,
@@ -153,4 +145,4 @@ var m = a(l)(({ theme: e }) => ({ marginBottom: e.spacing(4) })), h = a(f)(({ th
 	}
 };
 //#endregion
-export { y as Main, y as default };
+export { v as Main, v as default };

package/dist/browser/author/index.js

@@ -32368,13 +32368,6 @@ var tV = it.forwardRef((e, t) => /* @__PURE__ */ A(eV, {
 	color: e.palette.error.main,
 	marginTop: e.spacing(1)
 })), fV = D("div")(({ theme: e, hasError: t }) => ({ ...t && { border: `2px solid ${e.palette.error.main}` } })), pV = D("label")(({ theme: e }) => ({ marginBottom: e.spacing(4) })), mV = class extends it.Component {
-	static propTypes = {
-		model: z.default.object.isRequired,
-		configuration: z.default.object.isRequired,
-		onConfigurationChanged: z.default.func.isRequired,
-		onChange: z.default.func.isRequired,
-		uploadSoundSupport: z.default.object.isRequired
-	};
 	constructor(e) {
 		super(e), this.state = { correctAnswerChangeDialog: {
 			open: !1,
@@ -32640,6 +32633,9 @@ var tV = it.forwardRef((e, t) => /* @__PURE__ */ A(eV, {
 		settingsPanelDisabled: !0
 	}
 }, xV = class e extends HTMLElement {
+	_root;
+	_model;
+	_configuration;
 	static createDefaultModel = (e = {}) => {
 		let t = bV.configuration, n = e.language || "";
 		return !n && t.language && t.language.enabled && t.languageChoices?.options?.length && (n = t.languageChoices.options[0].value), {
@@ -32659,10 +32655,15 @@ var tV = it.forwardRef((e, t) => /* @__PURE__ */ A(eV, {
 			...bV.configuration,
 			...e
 		};
-		this._configuration = t, this.resetModelAfterConfigurationIsSet(), t?.language?.enabled ? t?.languageChoices?.options?.length && (this._model.language = t?.languageChoices.options[0].value) : t.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();
+		if (this._configuration = t, this.resetModelAfterConfigurationIsSet(), t?.language?.enabled) t?.languageChoices?.options?.length && (this._model.language = t?.languageChoices.options[0].value);
+		else if (t.language.settings && this._model.language) {
+			let e = this._model.language, t = this._configuration.languageChoices;
+			this._configuration.language.enabled = !0, (!t.options || !t.options.length) && (t.options = []), t.options.find((t) => t.value === e) || t.options.push({
+				value: e,
+				label: e
+			});
+		} else delete this._model.language;
+		this.render();
 	}
 	resetModelAfterConfigurationIsSet = () => {
 		let e = document.querySelectorAll("pie-author");
@@ -32672,7 +32673,7 @@ var tV = it.forwardRef((e, t) => /* @__PURE__ */ A(eV, {
 		this.render();
 	}
 	modelChanged(e) {
-		this._model = e, this.dispatchEvent(new hV(this._model), !0), this.render();
+		this._model = e, this.dispatchEvent(new hV(this._model)), this.render();
 	}
 	onChange = (e) => {
 		this._model = {
@@ -32698,7 +32699,6 @@ var tV = it.forwardRef((e, t) => /* @__PURE__ */ A(eV, {
 	render() {
 		if (this._model) {
 			let e = it.createElement(mV, {
-				classes: {},
 				model: this._model,
 				configuration: this._configuration,
 				onConfigurationChanged: this.onConfigurationChanged,