@pie-element/passage 7.1.0-next.28 → 7.1.1-next.0

package/dist/author/passage.js

@@ -0,0 +1,127 @@
+import e from "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { InputContainer as a } from "@pie-lib/config-ui";
+import o, { ALL_PLUGINS as s } from "@pie-lib/editable-html-tip-tap";
+//#region src/author/passage.tsx
+var c = n(a)(({ theme: e }) => ({
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2),
+	width: "100%"
+})), l = n("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), u = class extends e.Component {
+	static propTypes = {
+		onModelChanged: t.func.isRequired,
+		model: t.object.isRequired,
+		configuration: t.object.isRequired,
+		imageSupport: t.object.isRequired,
+		passageIndex: t.number.isRequired,
+		uploadSoundSupport: t.object.isRequired
+	};
+	static defaultProps = { passageIndex: 0 };
+	constructor(e) {
+		super(e);
+	}
+	handleChange = (e, t) => {
+		let { model: n, onModelChanged: r, passageIndex: i } = this.props;
+		if (!n.passages || i < 0 || i >= n.passages.length) return;
+		let a = [...n.passages];
+		a[i] = {
+			...a[i],
+			[e]: t
+		}, r({
+			...n,
+			passages: a
+		});
+	};
+	render() {
+		let { model: t, configuration: n, imageSupport: a, passageIndex: u, uploadSoundSupport: d } = this.props, { maxImageWidth: f = {}, maxImageHeight: p = {}, mathMlOptions: m = {}, baseInputConfiguration: h = {}, teacherInstructions: g = {}, title: _ = {}, subtitle: v = {}, text: y = {}, author: b = {} } = n || {}, { errors: x = {}, passages: S = [], teacherInstructionsEnabled: C, titleEnabled: w, subtitleEnabled: T, authorEnabled: E, textEnabled: D } = t || {}, { passages: O } = x || {}, { teacherInstructions: k, title: A, subtitle: j, author: M, text: N } = O && O[u] || {}, P = f && f.prompt, F = p && p.prompt, I = (e) => ({
+			...h,
+			...e
+		}), L = (s || []).filter((e) => ![
+			"math",
+			"table",
+			"bulleted-list",
+			"numbered-list"
+		].includes(e));
+		return /* @__PURE__ */ i(e.Fragment, { children: [
+			C && /* @__PURE__ */ i(c, {
+				label: g.label,
+				children: [/* @__PURE__ */ r(o, {
+					activePlugins: s,
+					markup: S[u].teacherInstructions || "",
+					onChange: (e) => this.handleChange("teacherInstructions", e),
+					nonEmpty: !1,
+					error: k,
+					maxImageWidth: f && f.teacherInstructions || P,
+					maxImageHeight: p && p.teacherInstructions || F,
+					mathMlOptions: m,
+					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+					pluginProps: I(g?.inputConfiguration)
+				}), k && /* @__PURE__ */ r(l, { children: k })]
+			}),
+			w && /* @__PURE__ */ i(c, {
+				label: _.label,
+				children: [/* @__PURE__ */ r(o, {
+					activePlugins: L,
+					markup: S[u].title || "",
+					onChange: (e) => this.handleChange("title", e),
+					nonEmpty: !1,
+					error: A,
+					mathMlOptions: m,
+					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+					pluginProps: I(_?.inputConfiguration)
+				}), A && /* @__PURE__ */ r(l, { children: A })]
+			}),
+			T && /* @__PURE__ */ i(c, {
+				label: v.label,
+				children: [/* @__PURE__ */ r(o, {
+					activePlugins: L,
+					markup: S[u].subtitle || "",
+					onChange: (e) => this.handleChange("subtitle", e),
+					nonEmpty: !1,
+					error: j,
+					mathMlOptions: m,
+					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+					pluginProps: I(v?.inputConfiguration)
+				}), j && /* @__PURE__ */ r(l, { children: j })]
+			}),
+			E && /* @__PURE__ */ i(c, {
+				label: b.label,
+				children: [/* @__PURE__ */ r(o, {
+					activePlugins: L,
+					markup: S[u].author || "",
+					onChange: (e) => this.handleChange("author", e),
+					nonEmpty: !1,
+					error: M,
+					mathMlOptions: m,
+					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+					pluginProps: I(b?.inputConfiguration)
+				}), M && /* @__PURE__ */ r(l, { children: M })]
+			}),
+			D && /* @__PURE__ */ i(c, {
+				label: y.label,
+				children: [/* @__PURE__ */ r(o, {
+					activePlugins: s,
+					markup: S[u].text || "",
+					onChange: (e) => this.handleChange("text", e),
+					imageSupport: a,
+					uploadSoundSupport: d,
+					nonEmpty: !1,
+					error: N,
+					maxImageWidth: f && f.text || P,
+					maxImageHeight: p && p.text || F,
+					mathMlOptions: m,
+					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+					pluginProps: I(y?.inputConfiguration)
+				}), N && /* @__PURE__ */ r(l, { children: N })]
+			})
+		] });
+	}
+};
+//#endregion
+export { u as default };

package/dist/controller/defaults.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @synced-from pie-elements/packages/passage/controller/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: {
+    authorEnabled: boolean;
+    passages: {
+        teacherInstructions: string;
+        title: string;
+        subtitle: string;
+        author: string;
+        text: string;
+    }[];
+    subtitleEnabled: boolean;
+    teacherInstructionsEnabled: boolean;
+    textEnabled: boolean;
+    titleEnabled: boolean;
+};
+export default _default;

package/dist/controller/defaults.js

@@ -0,0 +1,17 @@
+//#region src/controller/defaults.ts
+var e = {
+	authorEnabled: !1,
+	passages: [{
+		teacherInstructions: "",
+		title: "",
+		subtitle: "",
+		author: "",
+		text: ""
+	}],
+	subtitleEnabled: !0,
+	teacherInstructionsEnabled: !0,
+	textEnabled: !0,
+	titleEnabled: !0
+};
+//#endregion
+export { e as default };

package/dist/controller/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-elements/packages/passage/controller/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 declare function createDefaultModel(model?: {}): Promise<unknown>;
+export declare const normalize: (question: any) => any;
+/**
+ *
+ * @param {*} question
+ * @param {*} session
+ * @param {*} env
+ */
+export declare function model(question: any, session: any, env: any): Promise<any>;
+export declare const validate: (model?: {}, config?: {}) => {};

package/dist/controller/index.js

@@ -0,0 +1,50 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import t from "./defaults.js";
+//#region src/controller/index.ts
+var n = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), r = (e) => e != null, i = (e, t) => r(e) ? e : t;
+function a(e = {}) {
+	return new Promise((n) => {
+		n({
+			...t,
+			...e
+		});
+	});
+}
+var o = (e) => ({
+	...t,
+	...e
+}), s = (e, t) => {
+	let { role: n, mode: r } = t;
+	return n === "instructor" && (r === "view" || r === "evaluate") && e || "";
+};
+async function c(e, t, r) {
+	let a = o(e), c = a.passages.map((e, t) => ({
+		teacherInstructions: i(e.teacherInstructionsEnabled, a.teacherInstructionsEnabled) ? s(e.teacherInstructions, r) : "",
+		label: n(e.title) ? e.title : `Passage ${t + 1}`,
+		title: i(e.titleEnabled, a.titleEnabled) && e.title || "",
+		subtitle: i(e.subtitleEnabled, a.subtitleEnabled) && e.subtitle || "",
+		author: i(e.authorEnabled, a.authorEnabled) && e.author || "",
+		text: i(e.textEnabled, a.textEnabled) && e.text || ""
+	}));
+	return {
+		...a,
+		passages: c
+	};
+}
+var l = (t = {}, r = {}) => {
+	let i = {}, a = {};
+	return (t.passages || []).forEach((t, i) => {
+		let o = {};
+		[
+			"teacherInstructions",
+			"title",
+			"subtitle",
+			"author",
+			"text"
+		].forEach((e) => {
+			r[e]?.required && !n(t[e]) && (o[e] = "This field is required.");
+		}), e(o) || (a[i] = o);
+	}), e(a) || (i.passages = a), i;
+};
+//#endregion
+export { a as createDefaultModel, c as model, o as normalize, l as validate };

package/dist/delivery/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-elements/packages/passage/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 PiePassage extends HTMLElement {
+    constructor();
+    setLangAttribute(): void;
+    _scheduleMathRender: any;
+    _initMathObserver(): void;
+    _disconnectMathObserver(): void;
+    set model(s: any);
+    set session(s: any);
+    connectedCallback(): void;
+    _render(): void;
+    _initPlayerObserver(): void;
+    _disconnectPlayerObserver(): void;
+    disconnectedCallback(): void;
+}

package/dist/delivery/index.js

@@ -0,0 +1,83 @@
+import e from "./stimulus-tabs.js";
+import { ModelSetEvent as t } from "@pie-element/shared-player-events";
+import { renderMath as n } from "@pie-element/shared-math-rendering-mathjax";
+import r from "react";
+import { createRoot as i } from "react-dom/client";
+//#region src/delivery/index.ts
+function a(e) {
+	let t = e.closest("pie-player") || e.closest("pie-item-player");
+	if (t) {
+		let e = t.baseHeadingLevel;
+		e ??= t.getAttribute("base-heading-level") ?? t.getAttribute("baseheadinglevel");
+		let n = parseInt(e, 10);
+		if (Number.isFinite(n) && n >= 1 && n <= 6) return n;
+	}
+}
+var o = class extends HTMLElement {
+	constructor() {
+		super(), this._model = { passages: [] }, this._session = null, this._root = null, this._mathObserver = null, this._mathRenderPending = !1, this._playerObserver = null;
+	}
+	setLangAttribute() {
+		let e = this._model && typeof this._model.language ? this._model.language : "", t = e ? e.slice(0, 2) : "en";
+		this.setAttribute("lang", t);
+	}
+	_scheduleMathRender = () => {
+		this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
+			this._mathObserver && this._mathObserver.disconnect(), n(this), this._mathRenderPending = !1, setTimeout(() => {
+				this._mathObserver && this._mathObserver.observe(this, {
+					childList: !0,
+					subtree: !0
+				});
+			}, 50);
+		}));
+	};
+	_initMathObserver() {
+		this._mathObserver || (this._mathObserver = new MutationObserver(this._scheduleMathRender), this._mathObserver.observe(this, {
+			childList: !0,
+			subtree: !0
+		}));
+	}
+	_disconnectMathObserver() {
+		this._mathObserver &&= (this._mathObserver.disconnect(), null);
+	}
+	set model(e) {
+		this._model = e, this.dispatchEvent(new t(this.tagName.toLowerCase(), this._session, !!this._model)), this.setLangAttribute(), this._render();
+	}
+	set session(e) {
+		this._session = e;
+	}
+	connectedCallback() {
+		this.setAttribute("aria-label", "Passage"), this.setAttribute("role", "region"), this._initMathObserver(), this._initPlayerObserver(), this._render();
+	}
+	_render() {
+		let { passages: t = [] } = this._model;
+		if (this._model.passages.length > 0) {
+			let n = t.map((e, t) => ({
+				id: t,
+				...e
+			})), o = r.createElement(e, {
+				tabs: n,
+				model: this._model,
+				baseHeadingLevel: a(this)
+			});
+			this._root ||= i(this), this._root.render(o), this._initMathObserver();
+		}
+	}
+	_initPlayerObserver() {
+		let e = this.closest("pie-player") || this.closest("pie-item-player");
+		e && (this._playerObserver = new MutationObserver(() => {
+			this._render();
+		}), this._playerObserver.observe(e, {
+			attributes: !0,
+			attributeFilter: ["base-heading-level"]
+		}));
+	}
+	_disconnectPlayerObserver() {
+		this._playerObserver &&= (this._playerObserver.disconnect(), null);
+	}
+	disconnectedCallback() {
+		this._disconnectMathObserver(), this._disconnectPlayerObserver(), this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { o as default };

package/dist/delivery/stimulus-tabs.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @synced-from pie-elements/packages/passage/src/stimulus-tabs.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';
+declare class StimulusTabs extends React.Component {
+    state: {
+        activeTab: number;
+    };
+    handleChange: any;
+    handleKeyDown: any;
+    parsedText: any;
+    renderInstructions(teacherInstructions: any, disabledTabs?: boolean): React.JSX.Element | undefined;
+    renderTab(tab: any, disabledTabs: any): React.JSX.Element;
+    render(): React.JSX.Element | undefined;
+}
+export default StimulusTabs;

package/dist/delivery/stimulus-tabs.js

@@ -0,0 +1,220 @@
+import e from "react";
+import t from "prop-types";
+import n from "@mui/material/Tabs";
+import r from "@mui/material/Tab";
+import { styled as i } from "@mui/material/styles";
+import * as a from "@pie-lib/render-ui";
+import { Collapsible as o, PreviewPrompt as s, Purpose as c, UiLayout as l, color as u, transformDataHeadings as d } from "@pie-lib/render-ui";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/delivery/stimulus-tabs.tsx
+function h(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function g(e, t) {
+	return !e || h(e) ? e : h(e.default) ? e.default : t && h(e[t]) ? e[t] : t && h(e[t]?.default) ? e[t].default : e;
+}
+var _ = g(l, "UiLayout") || g(C.UiLayout, "UiLayout"), v = g(c, "Purpose") || g(C.Purpose, "Purpose"), y = g(s, "PreviewPrompt") || g(C.PreviewPrompt, "PreviewPrompt"), b = g(o, "Collapsible") || g(C.Collapsible, "Collapsible"), x = a, S = x.default, C = S && typeof S == "object" ? S : x, w = i("div")({
+	flexGrow: 1,
+	backgroundColor: u.background(),
+	color: u.text(),
+	"&:not(.MathJax) table": { borderCollapse: "collapse" },
+	"&:not(.MathJax) table td, &:not(.MathJax) table th": {
+		padding: ".6em 1em",
+		textAlign: "left"
+	}
+}), T = i("div")(({ theme: e }) => ({
+	backgroundColor: u.background(),
+	color: u.text(),
+	padding: e.spacing(2),
+	"& blockquote": {
+		background: "#f9f9f9",
+		borderLeft: "5px solid #ccc",
+		margin: "1.5em 10px",
+		padding: ".5em 10px"
+	}
+})), E = i("div")({ fontSize: "1.75rem" }), D = i("div")({ fontSize: "1.5rem" }), O = i("div")({ fontSize: "1.25rem" }), k = i(r)(({ theme: e }) => ({
+	background: e.palette.common.white,
+	fontSize: "inherit",
+	fontFamily: "Roboto, sans-serif",
+	color: e.palette.common.black,
+	borderRadius: `${e.spacing(2)} ${e.spacing(2)} 0 0`,
+	border: "1px solid #D9DADA",
+	borderBottomWidth: 0,
+	minHeight: "56px",
+	padding: "8px 10px",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	margin: `0 ${e.spacing(1)}`,
+	textTransform: "none",
+	".passage-label": {
+		display: "-webkit-box",
+		WebkitLineClamp: 2,
+		WebkitBoxOrient: "vertical",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "normal",
+		margin: "auto 0",
+		opacity: .7
+	},
+	"&.Mui-selected": {
+		color: e.palette.common.black,
+		".passage-label": { opacity: 1 },
+		".passage-label-underline": { backgroundColor: "#146EB3" }
+	},
+	"&:hover": { ".passage-label-underline": { backgroundColor: "#D0E2F0" } },
+	"& .MuiTouchRipple-root": { opacity: .7 }
+})), A = i("div")(({ theme: e }) => ({
+	height: "2px",
+	width: "100%",
+	marginTop: "6px",
+	background: e.palette.common.white
+})), j = class extends e.Component {
+	state = { activeTab: 0 };
+	handleChange = (e, t) => {
+		this.setState(() => ({ activeTab: t })), setTimeout(() => {
+			let e = new CustomEvent("pie-ui-passage-tabChanged", { detail: { tab: t } });
+			window.dispatchEvent(e);
+		});
+	};
+	handleKeyDown = (e, t) => {
+		let { key: n } = e, { tabs: r } = this.props, i = -1, a = r.findIndex((e) => e.id === t);
+		switch (n) {
+			case "ArrowRight":
+				i = (a + 1) % r.length;
+				break;
+			case "ArrowLeft":
+				i = (a - 1 + r.length) % r.length;
+				break;
+			case "Home":
+				i = 0;
+				break;
+			case "End":
+				i = r.length - 1;
+				break;
+			case "Enter":
+			case " ":
+				i = a;
+				break;
+			default: break;
+		}
+		i !== -1 && (e.preventDefault(), e.stopPropagation(), this.handleChange(e, r[i].id), document.getElementById(`button-${r[i].id}`).focus());
+	};
+	parsedText = (e = "") => {
+		let t = document.createElement("div");
+		t.innerHTML = e.replace(/(<br\/>\n)/g, "<br/>");
+		let n = t.querySelector("audio");
+		if (n) {
+			let e = document.createElement("source");
+			e.setAttribute("type", "audio/mp3"), e.setAttribute("src", n.getAttribute("src")), n.removeAttribute("src"), n.appendChild(e);
+		}
+		return t.innerHTML;
+	};
+	renderInstructions(e, t = !1) {
+		if (!e) return;
+		let n = /* @__PURE__ */ p(y, {
+			tagName: "div",
+			className: "prompt",
+			defaultClassName: "teacher-instructions",
+			prompt: e
+		});
+		return t ? n : /* @__PURE__ */ p(b, {
+			labels: {
+				hidden: "Show Teacher Instructions",
+				visible: "Hide Teacher Instructions"
+			},
+			children: n
+		});
+	}
+	renderTab(e, t) {
+		let { baseHeadingLevel: n } = this.props, r = n ? Math.min(6, Math.max(1, n)) : void 0, i = n ? `h${r}` : "h2", a = n ? Math.min(6, Math.max(1, r + 1)) : void 0;
+		return /* @__PURE__ */ m(T, {
+			id: `tabpanel-${e.id}`,
+			role: "tabpanel",
+			"aria-labelledby": `button-${e.id}`,
+			children: [
+				this.renderInstructions(e.teacherInstructions, t),
+				e.title && /* @__PURE__ */ p(v, {
+					purpose: "passage-title",
+					children: /* @__PURE__ */ p(i, { children: /* @__PURE__ */ p(E, { dangerouslySetInnerHTML: { __html: this.parsedText(e.title) } }) })
+				}),
+				e.subtitle && /* @__PURE__ */ p(v, {
+					purpose: "passage-subtitle",
+					children: /* @__PURE__ */ p(D, { dangerouslySetInnerHTML: { __html: this.parsedText(e.subtitle) } })
+				}),
+				e.author && /* @__PURE__ */ p(v, {
+					purpose: "passage-author",
+					children: /* @__PURE__ */ p(O, {
+						className: "author",
+						dangerouslySetInnerHTML: { __html: this.parsedText(e.author) }
+					})
+				}),
+				e.text && /* @__PURE__ */ p(v, {
+					purpose: "passage-text",
+					children: /* @__PURE__ */ p("div", {
+						className: "text",
+						dangerouslySetInnerHTML: { __html: n ? d(e.text, a) : e.text }
+					}, e.id)
+				})
+			]
+		}, e.id);
+	}
+	render() {
+		let { model: e, tabs: t, disabledTabs: r } = this.props, { activeTab: i } = this.state;
+		if (!t?.length) return;
+		let { extraCSSRules: a } = e || {}, o = (t || []).find((e) => e.id === i);
+		return /* @__PURE__ */ p(_, {
+			extraCSSRules: a,
+			children: /* @__PURE__ */ p(w, {
+				className: "passages",
+				children: r || t.length === 1 ? t.map((e) => this.renderTab(e, r)) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(n, {
+					sx: {
+						position: "sticky",
+						top: 0,
+						background: u.background(),
+						color: u.text(),
+						fontFamily: "Roboto, sans-serif",
+						"& .MuiTabs-list": { borderBottom: "1px solid #D9DADA" },
+						"& .MuiTabs-indicator": {
+							backgroundColor: "#ffffff",
+							marginBottom: "-1px"
+						}
+					},
+					value: i,
+					onChange: this.handleChange,
+					children: t.map((e) => /* @__PURE__ */ p(k, {
+						id: `button-${e.id}`,
+						label: /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(v, {
+							purpose: "passage-label",
+							children: /* @__PURE__ */ p("span", {
+								className: "passage-label",
+								dangerouslySetInnerHTML: { __html: this.parsedText(e.label) }
+							})
+						}), /* @__PURE__ */ p(A, { className: "passage-label-underline" })] }),
+						value: e.id,
+						tabIndex: i === e.id ? 0 : -1,
+						"aria-controls": `tabpanel-${e.id}`,
+						"aria-selected": i === e.id,
+						onKeyDown: (t) => this.handleKeyDown(t, e.id)
+					}, e.id))
+				}), o ? this.renderTab(o, r) : null] })
+			})
+		});
+	}
+};
+j.propTypes = {
+	tabs: t.arrayOf(t.shape({
+		id: t.number.isRequired,
+		label: t.string.isRequired,
+		title: t.string.isRequired,
+		subtitle: t.string,
+		author: t.string,
+		text: t.string.isRequired,
+		teacherInstructions: t.string
+	}).isRequired).isRequired,
+	disabledTabs: t.bool,
+	model: t.object,
+	baseHeadingLevel: t.number
+};
+//#endregion
+export { j as default };

package/dist/index.d.ts

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

package/dist/index.iife.d.ts

@@ -0,0 +1,8 @@
+/**
+ * IIFE entry point for passage 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;