@pie-element/passage 7.1.2-next.1 → 7.1.2

package/dist/delivery/stimulus-tabs.js

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

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

package/dist/index.iife.d.ts

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