@pie-element/match 12.1.1 → 12.1.2-next.0

package/dist/author/defaults.d.ts

@@ -0,0 +1,203 @@
+/**
+ * @synced-from pie-elements/packages/match/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.
+ */
+/** NOTE: teacherInstructions, studentInstructions, rationale & scoringType
+ * functionalities are not defined yet - the value for those can belong to
+ * model or to configuration
+ */
+declare const _default: {
+    model: {
+        choiceMode: string;
+        feedbackEnabled: boolean;
+        headers: string[];
+        layout: number;
+        lockChoiceOrder: boolean;
+        partialScoring: boolean;
+        prompt: string;
+        promptEnabled: boolean;
+        rationale: string;
+        rationaleEnabled: boolean;
+        rows: never[];
+        scoringType: string;
+        studentInstructionsEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+    };
+    configuration: {
+        baseInputConfiguration: {
+            h3: {
+                disabled: boolean;
+            };
+            audio: {
+                disabled: boolean;
+            };
+            video: {
+                disabled: boolean;
+            };
+            image: {
+                disabled: boolean;
+            };
+            textAlign: {
+                disabled: boolean;
+            };
+            showParagraphs: {
+                disabled: boolean;
+            };
+            separateParagraphs: {
+                disabled: boolean;
+            };
+        };
+        rows: {
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+        };
+        feedback: {
+            settings: boolean;
+            label: string;
+            enabled: boolean;
+        };
+        headers: {
+            settings: boolean;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+        };
+        layout: {
+            settings: boolean;
+            label: string;
+        };
+        lockChoiceOrder: {
+            settings: boolean;
+            label: string;
+        };
+        partialScoring: {
+            settings: boolean;
+            label: string;
+        };
+        choiceMode: {
+            settings: boolean;
+            label: string;
+        };
+        prompt: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        rationale: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        settingsPanelDisabled: boolean;
+        spellCheck: {
+            label: string;
+            settings: boolean;
+            enabled: boolean;
+        };
+        scoringType: {
+            settings: boolean;
+            label: string;
+        };
+        studentInstructions: {
+            settings: boolean;
+            label: string;
+        };
+        teacherInstructions: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        maxImageWidth: {
+            teacherInstructions: number;
+            prompt: number;
+            rationale: number;
+            rowTitles: number;
+        };
+        maxImageHeight: {
+            teacherInstructions: number;
+            prompt: number;
+            rationale: number;
+            rowTitles: number;
+        };
+        withRubric: {
+            settings: boolean;
+            label: string;
+        };
+        minQuestions: number;
+        maxQuestions: number;
+        maxLengthQuestionsHeading: number;
+        maxAnswers: number;
+        maxLengthAnswers: number;
+        maxLengthFirstColumnHeading: number;
+        mathMlOptions: {
+            mmlOutput: boolean;
+            mmlEditing: boolean;
+        };
+        language: {
+            settings: boolean;
+            label: string;
+            enabled: boolean;
+        };
+        languageChoices: {
+            label: string;
+            options: never[];
+        };
+    };
+};
+export default _default;

package/dist/author/defaults.js

@@ -0,0 +1,151 @@
+//#region src/author/defaults.ts
+var e = {
+	model: {
+		choiceMode: "radio",
+		feedbackEnabled: !1,
+		headers: [
+			"Column 1",
+			"Column 2",
+			"Column 3"
+		],
+		layout: 3,
+		lockChoiceOrder: !0,
+		partialScoring: !1,
+		prompt: "",
+		promptEnabled: !0,
+		rationale: "",
+		rationaleEnabled: !0,
+		rows: [],
+		scoringType: "auto",
+		studentInstructionsEnabled: !0,
+		teacherInstructions: "",
+		teacherInstructionsEnabled: !0,
+		toolbarEditorPosition: "bottom"
+	},
+	configuration: {
+		baseInputConfiguration: {
+			h3: { disabled: !0 },
+			audio: { disabled: !1 },
+			video: { disabled: !1 },
+			image: { disabled: !1 },
+			textAlign: { disabled: !0 },
+			showParagraphs: { disabled: !1 },
+			separateParagraphs: { disabled: !0 }
+		},
+		rows: { inputConfiguration: {
+			audio: { disabled: !0 },
+			video: { disabled: !0 },
+			image: { disabled: !1 }
+		} },
+		feedback: {
+			settings: !0,
+			label: "Feedback",
+			enabled: !0
+		},
+		headers: {
+			settings: !0,
+			inputConfiguration: {
+				audio: { disabled: !0 },
+				video: { disabled: !0 },
+				image: { disabled: !1 }
+			}
+		},
+		layout: {
+			settings: !0,
+			label: "Layout"
+		},
+		lockChoiceOrder: {
+			settings: !1,
+			label: "Lock Choice Order"
+		},
+		partialScoring: {
+			settings: !1,
+			label: "Allow Partial Scoring"
+		},
+		choiceMode: {
+			settings: !0,
+			label: "Response Type"
+		},
+		prompt: {
+			settings: !0,
+			label: "Prompt",
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			},
+			required: !1
+		},
+		rationale: {
+			settings: !0,
+			label: "Rationale",
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			},
+			required: !1
+		},
+		settingsPanelDisabled: !1,
+		spellCheck: {
+			label: "Spellcheck",
+			settings: !1,
+			enabled: !0
+		},
+		scoringType: {
+			settings: !1,
+			label: "Scoring Type"
+		},
+		studentInstructions: {
+			settings: !1,
+			label: "Student Instructions"
+		},
+		teacherInstructions: {
+			settings: !0,
+			label: "Teacher Instructions",
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			},
+			required: !1
+		},
+		maxImageWidth: {
+			teacherInstructions: 300,
+			prompt: 300,
+			rationale: 300,
+			rowTitles: 300
+		},
+		maxImageHeight: {
+			teacherInstructions: 300,
+			prompt: 300,
+			rationale: 300,
+			rowTitles: 150
+		},
+		withRubric: {
+			settings: !1,
+			label: "Add Rubric"
+		},
+		minQuestions: 2,
+		maxQuestions: 5,
+		maxLengthQuestionsHeading: 100,
+		maxAnswers: 5,
+		maxLengthAnswers: 100,
+		maxLengthFirstColumnHeading: 100,
+		mathMlOptions: {
+			mmlOutput: !1,
+			mmlEditing: !1
+		},
+		language: {
+			settings: !1,
+			label: "Specify Language",
+			enabled: !1
+		},
+		languageChoices: {
+			label: "Language Choices",
+			options: []
+		}
+	}
+};
+//#endregion
+export { e as default };

package/dist/author/general-config-block.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-elements/packages/match/configure/src/general-config-block.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 * as React from 'react';
+import PropTypes from 'prop-types';
+declare class GeneralConfigBlock extends React.Component {
+    static propTypes: {
+        model: PropTypes.Validator<object>;
+        configuration: PropTypes.Validator<object>;
+        onResponseTypeChange: PropTypes.Validator<(...args: any[]) => any>;
+        onLayoutChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    onChangeResponseType: (name: any) => (event: any) => void;
+    onChangeColumns: any;
+    render(): React.JSX.Element;
+}
+export default GeneralConfigBlock;

package/dist/author/general-config-block.js

@@ -0,0 +1,93 @@
+import { generateValidationMessage as e } from "./utils.js";
+import * as t from "react";
+import n from "prop-types";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "@mui/material/Typography";
+import { styled as o } from "@mui/material/styles";
+import { InputContainer as s, NumberTextField as c } from "@pie-lib/config-ui";
+import l from "@mui/material/Select";
+import u from "@mui/material/MenuItem";
+import d from "@mui/icons-material/Info";
+import f from "@mui/material/Tooltip";
+//#region src/author/general-config-block.tsx
+var p = o("div")(({ theme: e }) => ({
+	marginTop: e.spacing(2),
+	display: "flex"
+})), m = o("div")({ flex: 1 }), h = o(c)({ flexDirection: "unset" }), g = o("div")(({ theme: e }) => ({
+	paddingTop: e.spacing(1),
+	paddingBottom: e.spacing(2),
+	".select-input-container": { minWidth: "65%" }
+})), _ = o("div")({
+	display: "flex",
+	alignItems: "center"
+}), v = o(a)(({ theme: e }) => ({
+	fontSize: e.typography.fontSize + 2,
+	marginRight: e.spacing(1)
+})), y = o(f)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+	fontSize: e.typography.fontSize - 2,
+	whiteSpace: "pre",
+	maxWidth: "500px"
+} })), b = class extends t.Component {
+	static propTypes = {
+		model: n.object.isRequired,
+		configuration: n.object.isRequired,
+		onResponseTypeChange: n.func.isRequired,
+		onLayoutChange: n.func.isRequired
+	};
+	onChangeResponseType = (e) => (t) => {
+		let { model: n, onResponseTypeChange: r } = this.props, i = { ...n };
+		i[e] = t.target.value, r(i[e]);
+	};
+	onChangeColumns = (e, t) => {
+		let { model: n, onLayoutChange: r } = this.props, i = { ...n };
+		i[e] = t, r(i[e]);
+	};
+	render() {
+		let { model: n, configuration: a } = this.props, { layout: o = {}, choiceMode: c = {}, maxAnswers: f } = a || {}, b = e(n, a);
+		return /* @__PURE__ */ i(t.Fragment, { children: [/* @__PURE__ */ i(_, { children: [/* @__PURE__ */ r(v, {
+			component: "div",
+			children: "Define questions"
+		}), /* @__PURE__ */ r(y, {
+			disableFocusListener: !0,
+			disableTouchListener: !0,
+			placement: "right",
+			title: b,
+			children: /* @__PURE__ */ r(d, {
+				fontSize: "small",
+				color: "primary"
+			})
+		})] }), /* @__PURE__ */ i(p, { children: [/* @__PURE__ */ r(m, { children: o.settings && /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(s, {
+			label: o.label,
+			className: "input-container",
+			children: /* @__PURE__ */ r(h, {
+				type: "number",
+				min: 3,
+				max: f || 10,
+				value: n.layout,
+				onChange: (e, t) => this.onChangeColumns("layout", t),
+				suffix: "Columns"
+			})
+		}) }) }), /* @__PURE__ */ r(m, { children: c.settings && /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(s, {
+			label: c.label,
+			className: "select-input-container",
+			children: /* @__PURE__ */ i(l, {
+				variant: "standard",
+				onChange: this.onChangeResponseType("choiceMode"),
+				value: n.choiceMode,
+				MenuProps: { transitionDuration: {
+					enter: 225,
+					exit: 195
+				} },
+				children: [/* @__PURE__ */ r(u, {
+					value: "radio",
+					children: "Radio - One Answer"
+				}), /* @__PURE__ */ r(u, {
+					value: "checkbox",
+					children: "Checkbox - Multiple Answers"
+				})]
+			})
+		}) }) })] })] });
+	}
+};
+//#endregion
+export { b as default };

package/dist/author/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @synced-from pie-elements/packages/match/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 MatchConfigure extends HTMLElement {
+    static createDefaultModel: (model?: {}) => {
+        choiceMode: string;
+        feedbackEnabled: boolean;
+        headers: string[];
+        layout: number;
+        lockChoiceOrder: boolean;
+        partialScoring: boolean;
+        prompt: string;
+        promptEnabled: boolean;
+        rationale: string;
+        rationaleEnabled: boolean;
+        rows: never[];
+        scoringType: string;
+        studentInstructionsEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+    };
+    constructor();
+    set model(m: any);
+    resetModelAfterConfigurationIsSet: any;
+    set configuration(c: any);
+    onModelChanged(model: any): void;
+    onConfigurationChanged(config: 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,78 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
+import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import n from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/set.js";
+import r from "./configure.js";
+import i from "./defaults.js";
+import a from "react";
+import { createRoot as o } from "react-dom/client";
+import s from "debug";
+import { DeleteImageEvent as c, DeleteSoundEvent as l, InsertImageEvent as u, InsertSoundEvent as d, ModelUpdatedEvent as f } from "@pie-element/shared-configure-events";
+//#region src/author/index.ts
+var p = s("pie-elements:match:configure"), m = class s extends HTMLElement {
+	static createDefaultModel = (e = {}) => ({
+		...i.model,
+		...e
+	});
+	constructor() {
+		super(), this._root = null, this._model = s.createDefaultModel(), this._configuration = i.configuration;
+	}
+	set model(t) {
+		this._model = s.createDefaultModel(t), this._modelCopy = e(this._model), 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);
+	};
+	set configuration(e) {
+		let r = {
+			...i.configuration,
+			...e
+		};
+		this._configuration = r, this.resetModelAfterConfigurationIsSet(), r?.language?.enabled ? r?.languageChoices?.options?.length && (this._model.language = r?.languageChoices.options[0].value) : r.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, t(e?.rows?.inputConfiguration) && (n(this._configuration.rows, "inputConfiguration.image.disabled", !this._model?.enableImages), n(this._configuration.rows, "inputConfiguration.video.disabled", !0), n(this._configuration.rows, "inputConfiguration.audio.disabled", !0)), this._render();
+	}
+	onModelChanged(e) {
+		this._model = e, p("[onModelChanged]: ", this._model), this._render(), this.dispatchEvent(new f(this._model));
+	}
+	onConfigurationChanged(e) {
+		this._configuration = e, this._render();
+	}
+	insertImage(e) {
+		this.dispatchEvent(new u(e));
+	}
+	onDeleteImage(e, t) {
+		this.dispatchEvent(new c(e, t));
+	}
+	insertSound(e) {
+		this.dispatchEvent(new d(e));
+	}
+	onDeleteSound(e, t) {
+		this.dispatchEvent(new l(e, t));
+	}
+	_render() {
+		if (this._model) {
+			let e = a.createElement(r, {
+				onModelChanged: this.onModelChanged.bind(this),
+				onConfigurationChanged: this.onConfigurationChanged.bind(this),
+				model: this._model,
+				configuration: this._configuration,
+				imageSupport: {
+					add: this.insertImage.bind(this),
+					delete: this.onDeleteImage.bind(this)
+				},
+				uploadSoundSupport: {
+					add: this.insertSound.bind(this),
+					delete: this.onDeleteSound.bind(this)
+				}
+			});
+			this._root ||= o(this), this._root.render(e);
+		}
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { m as default };

package/dist/author/row.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @synced-from pie-elements/packages/match/configure/src/row.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 let canDrag: boolean;
+export declare class Row extends React.Component {
+    static propTypes: {
+        model: PropTypes.Validator<object>;
+        row: PropTypes.Validator<object>;
+        idx: PropTypes.Validator<number>;
+        maxImageWidth: PropTypes.Requireable<object>;
+        maxImageHeight: PropTypes.Requireable<object>;
+        onDeleteRow: PropTypes.Validator<(...args: any[]) => any>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        imageSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        uploadSoundSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        inputConfiguration: PropTypes.Requireable<object>;
+        toolbarOpts: PropTypes.Requireable<object>;
+        error: PropTypes.Requireable<string>;
+        spellCheck: PropTypes.Requireable<boolean>;
+        minQuestions: PropTypes.Requireable<number>;
+    };
+    static defaultProps: {};
+    state: {
+        dialog: {
+            open: boolean;
+            text: string;
+        };
+    };
+    componentDidMount(): void;
+    onRowTitleChange: (rowIndex: any) => (value: any) => void;
+    onRowValueChange: (rowIndex: any, rowValueIndex: any) => (event: any) => void;
+    onDeleteRow: (idx: any) => () => void;
+    onMouseDownOnHandle: any;
+    onMouseUpOnHandle: any;
+    render(): React.JSX.Element;
+}
+declare function DraggableRow(props: any): React.JSX.Element;
+export default DraggableRow;