@pie-element/passage 7.4.4 → 8.0.0-next.20261002094057

package/dist/delivery/stimulus-tabs.js

@@ -0,0 +1,257 @@
+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 = 2, T = .4, E = 170, D = () => {
+	if (typeof window > "u") return 1;
+	let e = window.outerWidth / window.innerWidth;
+	return Math.max(T, Math.min(1, w / (Number.isFinite(e) && e > 0 ? e : 1)));
+}, O = 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"
+	}
+}), k = 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"
+	}
+})), A = i("div")({ fontSize: "1.75rem" }), j = i("div")({ fontSize: "1.5rem" }), M = i("div")({ fontSize: "1.25rem" }), N = i(r)(({ theme: e }) => ({
+	background: u.background(),
+	fontSize: "inherit",
+	fontFamily: "Roboto, sans-serif",
+	color: u.text(),
+	borderRadius: `${e.spacing(2)} ${e.spacing(2)} 0 0`,
+	border: `1px solid ${u.borderGray()}`,
+	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: u.text(),
+		".passage-label": { opacity: 1 },
+		".passage-label-underline": { backgroundColor: u.tertiary() }
+	},
+	"&:hover": { ".passage-label-underline": { backgroundColor: u.tertiaryLight() } },
+	"& .MuiTouchRipple-root": { opacity: .7 }
+})), P = i("div")(() => ({
+	height: "2px",
+	width: "100%",
+	marginTop: "6px",
+	background: u.background()
+})), F = class extends e.Component {
+	state = {
+		activeTab: 0,
+		zoomCompensation: D(),
+		containerWidth: 0
+	};
+	containerRef = e.createRef();
+	componentDidMount() {
+		typeof window > "u" || (window.addEventListener("resize", this.updateZoomCompensation), this.containerRef.current && typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(this.updateContainerWidth), this.resizeObserver.observe(this.containerRef.current)), this.updateContainerWidth());
+	}
+	componentWillUnmount() {
+		typeof window > "u" || (window.removeEventListener("resize", this.updateZoomCompensation), this.resizeObserver &&= (this.resizeObserver.disconnect(), null));
+	}
+	updateZoomCompensation = () => {
+		this.setState({ zoomCompensation: D() });
+	};
+	updateContainerWidth = () => {
+		let e = this.containerRef.current;
+		if (!e) return;
+		let t = e.clientWidth;
+		t !== this.state.containerWidth && this.setState({ containerWidth: t });
+	};
+	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(k, {
+			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(A, { dangerouslySetInnerHTML: { __html: this.parsedText(e.title) } }) })
+				}),
+				e.subtitle && /* @__PURE__ */ p(v, {
+					purpose: "passage-subtitle",
+					children: /* @__PURE__ */ p(j, { dangerouslySetInnerHTML: { __html: this.parsedText(e.subtitle) } })
+				}),
+				e.author && /* @__PURE__ */ p(v, {
+					purpose: "passage-author",
+					children: /* @__PURE__ */ p(M, {
+						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, zoomCompensation: a, containerWidth: o } = this.state;
+		if (!t?.length) return;
+		let { extraCSSRules: s } = e || {}, c = (t || []).find((e) => e.id === i), l = o > 0 ? o / t.length : null, d = o > 0 && o <= t.length * E;
+		return /* @__PURE__ */ p(_, {
+			extraCSSRules: s,
+			children: /* @__PURE__ */ p(O, {
+				className: "passages",
+				ref: this.containerRef,
+				children: r || t.length === 1 ? t.map((e) => this.renderTab(e, r)) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(n, {
+					sx: {
+						position: "static",
+						"@media (min-width: 841px)": {
+							position: "sticky",
+							top: 0,
+							zIndex: 1
+						},
+						background: "var(--pie-passage-header-background, rgba(255,255,255,0))",
+						color: u.text(),
+						fontFamily: "Roboto, sans-serif",
+						zoom: a,
+						"& .MuiTabs-list": {
+							backgroundColor: `var(--pie-passage-header-background, ${u.backgroundDark()})`,
+							borderBottom: `1px solid ${u.borderGray()}`
+						},
+						"& .MuiTabs-indicator": {
+							backgroundColor: u.white(),
+							marginBottom: "-1px"
+						}
+					},
+					value: i,
+					onChange: this.handleChange,
+					children: t.map((e, t) => /* @__PURE__ */ p(N, {
+						id: `button-${e.id}`,
+						sx: l ? { maxWidth: `${l}px` } : void 0,
+						label: /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(v, {
+							purpose: "passage-label",
+							children: d ? /* @__PURE__ */ p("span", {
+								className: "passage-label",
+								children: `Passage ${t + 1}`
+							}) : /* @__PURE__ */ p("span", {
+								className: "passage-label",
+								dangerouslySetInnerHTML: { __html: this.parsedText(e.label) }
+							})
+						}), /* @__PURE__ */ p(P, { 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))
+				}), c ? this.renderTab(c, r) : null] })
+			})
+		});
+	}
+};
+F.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 { F 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;