@pie-element/passage 7.1.2-next.5 → 7.2.0-beta.0

package/lib/print.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _lodashEs = require("lodash-es");
+var _debug = _interopRequireDefault(require("debug"));
+var _stimulusTabs = _interopRequireDefault(require("./stimulus-tabs"));
+const log = (0, _debug.default)('pie-element:passage:print');
+const checkNullish = value => value !== null && value !== undefined;
+const isEnabled = (value, defaultValue) => checkNullish(value) ? value : defaultValue;
+const preparePrintPassage = (model, opts) => {
+  const isInstructor = opts.role === 'instructor';
+
+  // TODO: also update '../../configure/src/defaults.js' and '../../controller/src/defaults.js' when updating defaultValue
+  const teacherInstructionsEnabled = isEnabled(model.teacherInstructionsEnabled, true);
+  const titleEnabled = isEnabled(model.titleEnabled, true);
+  const authorEnabled = isEnabled(model.authorEnabled, false);
+  const subtitleEnabled = isEnabled(model.subtitleEnabled, true);
+  const textEnabled = isEnabled(model.textEnabled, true);
+  return model.passages.map((passage, index) => ({
+    id: index,
+    teacherInstructions: isEnabled(passage.teacherInstructionsEnabled, teacherInstructionsEnabled) ? isInstructor && passage.teacherInstructions || '' : '',
+    label: passage.title || `Passage ${index + 1}`,
+    title: isEnabled(passage.titleEnabled, titleEnabled) ? passage.title || '' : '',
+    author: isEnabled(passage.authorEnabled, authorEnabled) ? passage.author || '' : '',
+    subtitle: isEnabled(passage.subtitleEnabled, subtitleEnabled) ? passage.subtitle || '' : '',
+    text: isEnabled(passage.textEnabled, textEnabled) ? passage.text || '' : ''
+  }));
+};
+class PassagePrint extends HTMLElement {
+  constructor() {
+    super();
+    this._model = null;
+    this._options = null;
+    this._session = [];
+    this._root = null;
+    this._rerender = (0, _lodashEs.debounce)(() => {
+      if (this._model && this._session) {
+        if (this._model.passages && this._model.passages.length > 0) {
+          const printPassage = preparePrintPassage(this._model, this._options);
+          const element = /*#__PURE__*/_react.default.createElement(_stimulusTabs.default, {
+            disabledTabs: true,
+            tabs: printPassage
+          });
+          if (!this._root) {
+            this._root = (0, _client.createRoot)(this);
+          }
+          this._root.render(element);
+        }
+      } else {
+        log('skip');
+      }
+    }, 50, {
+      leading: false,
+      trailing: true
+    });
+  }
+  set model(s) {
+    this._model = s;
+    this._rerender();
+  }
+  set options(o) {
+    this._options = o;
+  }
+  connectedCallback() {}
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = PassagePrint;
+//# sourceMappingURL=print.js.map

package/lib/print.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"print.js","names":["_react","_interopRequireDefault","require","_client","_lodashEs","_debug","_stimulusTabs","log","debug","checkNullish","value","undefined","isEnabled","defaultValue","preparePrintPassage","model","opts","isInstructor","role","teacherInstructionsEnabled","titleEnabled","authorEnabled","subtitleEnabled","textEnabled","passages","map","passage","index","id","teacherInstructions","label","title","author","subtitle","text","PassagePrint","HTMLElement","constructor","_model","_options","_session","_root","_rerender","debounce","length","printPassage","element","React","createElement","StimulusTabs","disabledTabs","tabs","createRoot","render","leading","trailing","s","options","o","connectedCallback","disconnectedCallback","unmount","exports","default"],"sources":["../src/print.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { debounce } from 'lodash-es';\nimport debug from 'debug';\n\nimport StimulusTabs from './stimulus-tabs';\n\nconst log = debug('pie-element:passage:print');\n\nconst checkNullish = (value) => value !== null && value !== undefined;\n\nconst isEnabled = (value, defaultValue) => (checkNullish(value) ? value : defaultValue);\n\nconst preparePrintPassage = (model, opts) => {\n  const isInstructor = opts.role === 'instructor';\n\n  // TODO: also update '../../configure/src/defaults.js' and '../../controller/src/defaults.js' when updating defaultValue\n  const teacherInstructionsEnabled = isEnabled(model.teacherInstructionsEnabled, true);\n  const titleEnabled = isEnabled(model.titleEnabled, true);\n  const authorEnabled = isEnabled(model.authorEnabled, false);\n  const subtitleEnabled = isEnabled(model.subtitleEnabled, true);\n  const textEnabled = isEnabled(model.textEnabled, true);\n\n  return model.passages.map((passage, index) => ({\n    id: index,\n    teacherInstructions: isEnabled(passage.teacherInstructionsEnabled, teacherInstructionsEnabled)\n      ? (isInstructor && passage.teacherInstructions) || ''\n      : '',\n    label: passage.title || `Passage ${index + 1}`,\n    title: isEnabled(passage.titleEnabled, titleEnabled) ? passage.title || '' : '',\n    author: isEnabled(passage.authorEnabled, authorEnabled) ? passage.author || '' : '',\n    subtitle: isEnabled(passage.subtitleEnabled, subtitleEnabled) ? passage.subtitle || '' : '',\n    text: isEnabled(passage.textEnabled, textEnabled) ? passage.text || '' : '',\n  }));\n};\n\nexport default class PassagePrint extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._options = null;\n    this._session = [];\n    this._root = null;\n\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          if (this._model.passages && this._model.passages.length > 0) {\n            const printPassage = preparePrintPassage(this._model, this._options);\n\n            const element = React.createElement(StimulusTabs, {\n              disabledTabs: true,\n              tabs: printPassage,\n            });\n\n            if (!this._root) {\n              this._root = createRoot(this);\n            }\n            this._root.render(element);\n          }\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n  }\n\n  set options(o) {\n    this._options = o;\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,IAAAI,aAAA,GAAAL,sBAAA,CAAAC,OAAA;AAEA,MAAMK,GAAG,GAAG,IAAAC,cAAK,EAAC,2BAA2B,CAAC;AAE9C,MAAMC,YAAY,GAAIC,KAAK,IAAKA,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAKC,SAAS;AAErE,MAAMC,SAAS,GAAGA,CAACF,KAAK,EAAEG,YAAY,KAAMJ,YAAY,CAACC,KAAK,CAAC,GAAGA,KAAK,GAAGG,YAAa;AAEvF,MAAMC,mBAAmB,GAAGA,CAACC,KAAK,EAAEC,IAAI,KAAK;EAC3C,MAAMC,YAAY,GAAGD,IAAI,CAACE,IAAI,KAAK,YAAY;;EAE/C;EACA,MAAMC,0BAA0B,GAAGP,SAAS,CAACG,KAAK,CAACI,0BAA0B,EAAE,IAAI,CAAC;EACpF,MAAMC,YAAY,GAAGR,SAAS,CAACG,KAAK,CAACK,YAAY,EAAE,IAAI,CAAC;EACxD,MAAMC,aAAa,GAAGT,SAAS,CAACG,KAAK,CAACM,aAAa,EAAE,KAAK,CAAC;EAC3D,MAAMC,eAAe,GAAGV,SAAS,CAACG,KAAK,CAACO,eAAe,EAAE,IAAI,CAAC;EAC9D,MAAMC,WAAW,GAAGX,SAAS,CAACG,KAAK,CAACQ,WAAW,EAAE,IAAI,CAAC;EAEtD,OAAOR,KAAK,CAACS,QAAQ,CAACC,GAAG,CAAC,CAACC,OAAO,EAAEC,KAAK,MAAM;IAC7CC,EAAE,EAAED,KAAK;IACTE,mBAAmB,EAAEjB,SAAS,CAACc,OAAO,CAACP,0BAA0B,EAAEA,0BAA0B,CAAC,GACzFF,YAAY,IAAIS,OAAO,CAACG,mBAAmB,IAAK,EAAE,GACnD,EAAE;IACNC,KAAK,EAAEJ,OAAO,CAACK,KAAK,IAAI,WAAWJ,KAAK,GAAG,CAAC,EAAE;IAC9CI,KAAK,EAAEnB,SAAS,CAACc,OAAO,CAACN,YAAY,EAAEA,YAAY,CAAC,GAAGM,OAAO,CAACK,KAAK,IAAI,EAAE,GAAG,EAAE;IAC/EC,MAAM,EAAEpB,SAAS,CAACc,OAAO,CAACL,aAAa,EAAEA,aAAa,CAAC,GAAGK,OAAO,CAACM,MAAM,IAAI,EAAE,GAAG,EAAE;IACnFC,QAAQ,EAAErB,SAAS,CAACc,OAAO,CAACJ,eAAe,EAAEA,eAAe,CAAC,GAAGI,OAAO,CAACO,QAAQ,IAAI,EAAE,GAAG,EAAE;IAC3FC,IAAI,EAAEtB,SAAS,CAACc,OAAO,CAACH,WAAW,EAAEA,WAAW,CAAC,GAAGG,OAAO,CAACQ,IAAI,IAAI,EAAE,GAAG;EAC3E,CAAC,CAAC,CAAC;AACL,CAAC;AAEc,MAAMC,YAAY,SAASC,WAAW,CAAC;EACpDC,WAAWA,CAAA,EAAG;IACZ,KAAK,CAAC,CAAC;IACP,IAAI,CAACC,MAAM,GAAG,IAAI;IAClB,IAAI,CAACC,QAAQ,GAAG,IAAI;IACpB,IAAI,CAACC,QAAQ,GAAG,EAAE;IAClB,IAAI,CAACC,KAAK,GAAG,IAAI;IAEjB,IAAI,CAACC,SAAS,GAAG,IAAAC,kBAAQ,EACvB,MAAM;MACJ,IAAI,IAAI,CAACL,MAAM,IAAI,IAAI,CAACE,QAAQ,EAAE;QAChC,IAAI,IAAI,CAACF,MAAM,CAACd,QAAQ,IAAI,IAAI,CAACc,MAAM,CAACd,QAAQ,CAACoB,MAAM,GAAG,CAAC,EAAE;UAC3D,MAAMC,YAAY,GAAG/B,mBAAmB,CAAC,IAAI,CAACwB,MAAM,EAAE,IAAI,CAACC,QAAQ,CAAC;UAEpE,MAAMO,OAAO,gBAAGC,cAAK,CAACC,aAAa,CAACC,qBAAY,EAAE;YAChDC,YAAY,EAAE,IAAI;YAClBC,IAAI,EAAEN;UACR,CAAC,CAAC;UAEF,IAAI,CAAC,IAAI,CAACJ,KAAK,EAAE;YACf,IAAI,CAACA,KAAK,GAAG,IAAAW,kBAAU,EAAC,IAAI,CAAC;UAC/B;UACA,IAAI,CAACX,KAAK,CAACY,MAAM,CAACP,OAAO,CAAC;QAC5B;MACF,CAAC,MAAM;QACLvC,GAAG,CAAC,MAAM,CAAC;MACb;IACF,CAAC,EACD,EAAE,EACF;MAAE+C,OAAO,EAAE,KAAK;MAAEC,QAAQ,EAAE;IAAK,CACnC,CAAC;EACH;EAEA,IAAIxC,KAAKA,CAACyC,CAAC,EAAE;IACX,IAAI,CAAClB,MAAM,GAAGkB,CAAC;IACf,IAAI,CAACd,SAAS,CAAC,CAAC;EAClB;EAEA,IAAIe,OAAOA,CAACC,CAAC,EAAE;IACb,IAAI,CAACnB,QAAQ,GAAGmB,CAAC;EACnB;EAEAC,iBAAiBA,CAAA,EAAG,CAAC;EAErBC,oBAAoBA,CAAA,EAAG;IACrB,IAAI,IAAI,CAACnB,KAAK,EAAE;MACd,IAAI,CAACA,KAAK,CAACoB,OAAO,CAAC,CAAC;IACtB;EACF;AACF;AAACC,OAAA,CAAAC,OAAA,GAAA5B,YAAA","ignoreList":[]}

package/lib/stimulus-tabs.js

@@ -0,0 +1,427 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
+var _styles = require("@mui/material/styles");
+var _renderUi = require("@pie-lib/render-ui");
+// Must match the breakpoint Quiz Engine passes to the PIE section player for
+// switching from the side-by-side passage/question layout to the tabbed layout.
+// Below (and at) this width the passage tabs scroll with the passage content
+// instead of being locked to the top of the panel, so that they do not lock up
+// space needed for the passage text (WCAG 1.4.10 Reflow, 400% zoom / 320px).
+const STICKY_TABS_BREAKPOINT = 840;
+
+/**
+ * Zoom compensation for the passage selection tabs.
+ *
+ * The tabs scale naturally with browser zoom up to 200%. Beyond 200%,
+ * we shrink their CSS size proportionally so their physical on-screen size
+ * freezes at the 200% appearance, leaving more room for passage content
+ * in high-zoom / small-window situations.
+ * The factor is min(1, 2 / zoom): exactly 1 at zoom <= 200% (component
+ * behavior unchanged), shrinking proportionally above that. A lower clamp
+ * of 0.4 guards against inflated ratios (docked devtools, browser side
+ * panels, window chrome) ever making the tabs unusably small.
+ */
+const MAX_TABS_ZOOM = 2;
+const MIN_ZOOM_COMPENSATION = 0.4;
+
+// Per-tab horizontal-space floor in CSS pixels. When the passage container is
+// narrow enough that each tab would have at most this much room
+// (containerWidth <= tabs.length * NUMERIC_LABEL_MIN_WIDTH_PER_TAB), tab labels
+// fall back to "Passage 1", "Passage 2", ... so navigation stays usable instead
+// of being dominated by aggressively truncated titles.
+const NUMERIC_LABEL_MIN_WIDTH_PER_TAB = 170;
+const computeZoomCompensation = () => {
+  if (typeof window === 'undefined') return 1;
+  const ratio = window.outerWidth / window.innerWidth;
+  const zoom = Number.isFinite(ratio) && ratio > 0 ? ratio : 1;
+  return Math.max(MIN_ZOOM_COMPENSATION, Math.min(1, MAX_TABS_ZOOM / zoom));
+};
+const PassagesContainer = (0, _styles.styled)('div')({
+  flexGrow: 1,
+  backgroundColor: _renderUi.color.background(),
+  color: _renderUi.color.text(),
+  '&:not(.MathJax) table': {
+    borderCollapse: 'collapse'
+  },
+  '&:not(.MathJax) table td, &:not(.MathJax) table th': {
+    padding: '.6em 1em',
+    textAlign: 'left'
+  }
+});
+const Passage = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  backgroundColor: _renderUi.color.background(),
+  color: _renderUi.color.text(),
+  padding: theme.spacing(2),
+  '& blockquote': {
+    background: '#f9f9f9',
+    borderLeft: '5px solid #ccc',
+    margin: '1.5em 10px',
+    padding: '.5em 10px'
+  }
+}));
+const PassageTitle = (0, _styles.styled)('div')({
+  fontSize: '1.75rem'
+});
+const PassageSubtitle = (0, _styles.styled)('div')({
+  fontSize: '1.5rem'
+});
+const PassageAuthor = (0, _styles.styled)('div')({
+  fontSize: '1.25rem'
+});
+const TabStyled = (0, _styles.styled)(_Tab.default)(({
+  theme
+}) => ({
+  background: theme.palette.common.white,
+  // replace with color.background() once PD-2801 is DONE
+  fontSize: 'inherit',
+  fontFamily: 'Roboto, sans-serif',
+  color: theme.palette.common.black,
+  // remove when PD-2801 is DONE
+  borderRadius: `${theme.spacing(2)} ${theme.spacing(2)} 0 0`,
+  border: '1px solid #D9DADA',
+  borderBottomWidth: 0,
+  minHeight: '56px',
+  padding: '8px 10px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  margin: `0 ${theme.spacing(1)}`,
+  textTransform: 'none',
+  '.passage-label': {
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'normal',
+    margin: 'auto 0',
+    opacity: 0.7
+  },
+  '&.Mui-selected': {
+    color: theme.palette.common.black,
+    '.passage-label': {
+      opacity: 1
+    },
+    '.passage-label-underline': {
+      backgroundColor: _renderUi.color.tertiary()
+    }
+  },
+  '&:hover': {
+    '.passage-label-underline': {
+      backgroundColor: _renderUi.color.tertiaryLight()
+    }
+  },
+  '& .MuiTouchRipple-root': {
+    opacity: 0.7
+  }
+}));
+const Underline = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  height: '2px',
+  width: '100%',
+  marginTop: '6px',
+  background: theme.palette.common.white // replace with color.background() once PD-2801 is DONE
+}));
+class StimulusTabs extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
+      activeTab: 0,
+      zoomCompensation: computeZoomCompensation(),
+      containerWidth: 0
+    });
+    (0, _defineProperty2.default)(this, "containerRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "updateZoomCompensation", () => {
+      this.setState({
+        zoomCompensation: computeZoomCompensation()
+      });
+    });
+    (0, _defineProperty2.default)(this, "updateContainerWidth", () => {
+      const node = this.containerRef.current;
+      if (!node) return;
+      const width = node.clientWidth;
+      if (width !== this.state.containerWidth) {
+        this.setState({
+          containerWidth: width
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleChange", (event, activeTab) => {
+      this.setState(() => ({
+        activeTab
+      }));
+      setTimeout(() => {
+        const tabChangeEvent = new CustomEvent('pie-ui-passage-tabChanged', {
+          detail: {
+            tab: activeTab
+          }
+        });
+        window.dispatchEvent(tabChangeEvent);
+      });
+    });
+    (0, _defineProperty2.default)(this, "handleKeyDown", (event, currentTabId) => {
+      const {
+        key
+      } = event;
+      const {
+        tabs
+      } = this.props;
+      let newTabIndex = -1;
+      const currentIndex = tabs.findIndex(tab => tab.id === currentTabId);
+      switch (key) {
+        case 'ArrowRight':
+          // Move to the next tab
+          newTabIndex = (currentIndex + 1) % tabs.length;
+          break;
+        case 'ArrowLeft':
+          // Move to the previous tab
+          newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+          break;
+        // Commented out ArrowDown and ArrowUp for future vertical tab navigation
+        // case 'ArrowDown':
+        //   // Move to the next tab (for vertical alignment)
+        //   newTabIndex = (currentIndex + 1) % tabs.length;
+        //   break;
+        // case 'ArrowUp':
+        //   // Move to the previous tab (for vertical alignment)
+        //   newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        //   break;
+        case 'Home':
+          // Move to the first tab
+          newTabIndex = 0;
+          break;
+        case 'End':
+          // Move to the last tab
+          newTabIndex = tabs.length - 1;
+          break;
+        case 'Enter':
+        case ' ':
+          // Activate the current tab
+          newTabIndex = currentIndex;
+          break;
+        default:
+          break;
+      }
+      if (newTabIndex !== -1) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleChange(event, tabs[newTabIndex].id);
+        document.getElementById(`button-${tabs[newTabIndex].id}`).focus();
+      }
+    });
+    (0, _defineProperty2.default)(this, "parsedText", (text = '') => {
+      // fix imported audio content for Safari PD-1391
+      const div = document.createElement('div');
+      div.innerHTML = text.replace(/(<br\/>\n)/g, '<br/>');
+      const audio = div.querySelector('audio');
+      if (audio) {
+        const source = document.createElement('source');
+        source.setAttribute('type', 'audio/mp3');
+        source.setAttribute('src', audio.getAttribute('src'));
+        audio.removeAttribute('src');
+        audio.appendChild(source);
+      }
+      return div.innerHTML;
+    });
+  }
+  componentDidMount() {
+    if (typeof window === 'undefined') return;
+    window.addEventListener('resize', this.updateZoomCompensation);
+    if (this.containerRef.current && typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(this.updateContainerWidth);
+      this.resizeObserver.observe(this.containerRef.current);
+    }
+    this.updateContainerWidth();
+  }
+  componentWillUnmount() {
+    if (typeof window === 'undefined') return;
+    window.removeEventListener('resize', this.updateZoomCompensation);
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+  renderInstructions(teacherInstructions, disabledTabs = false) {
+    if (!teacherInstructions) {
+      return;
+    }
+    const teacherInstructionsDiv = /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      tagName: "div",
+      className: "prompt",
+      defaultClassName: "teacher-instructions",
+      prompt: teacherInstructions
+    });
+    if (disabledTabs) {
+      return teacherInstructionsDiv;
+    }
+    return /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, teacherInstructionsDiv);
+  }
+  renderTab(tab, disabledTabs) {
+    const {
+      baseHeadingLevel
+    } = this.props;
+    const clampedLevel = baseHeadingLevel ? Math.min(6, Math.max(1, baseHeadingLevel)) : undefined;
+    const TitleTag = baseHeadingLevel ? `h${clampedLevel}` : 'h2'; // default to h2 if no base level is provided - this was the previous behavior
+    const textLevel = baseHeadingLevel ? Math.min(6, Math.max(1, clampedLevel + 1)) : undefined; // promote text headings one level above title
+
+    return /*#__PURE__*/_react.default.createElement(Passage, {
+      key: tab.id,
+      id: `tabpanel-${tab.id}`,
+      role: "tabpanel",
+      "aria-labelledby": `button-${tab.id}`
+    }, this.renderInstructions(tab.teacherInstructions, disabledTabs), tab.title && /*#__PURE__*/_react.default.createElement(_renderUi.Purpose, {
+      purpose: "passage-title"
+    }, /*#__PURE__*/_react.default.createElement(TitleTag, null, /*#__PURE__*/_react.default.createElement(PassageTitle, {
+      dangerouslySetInnerHTML: {
+        __html: this.parsedText(tab.title)
+      }
+    }))), tab.subtitle && /*#__PURE__*/_react.default.createElement(_renderUi.Purpose, {
+      purpose: "passage-subtitle"
+    }, /*#__PURE__*/_react.default.createElement(PassageSubtitle, {
+      dangerouslySetInnerHTML: {
+        __html: this.parsedText(tab.subtitle)
+      }
+    })), tab.author && /*#__PURE__*/_react.default.createElement(_renderUi.Purpose, {
+      purpose: "passage-author"
+    }, /*#__PURE__*/_react.default.createElement(PassageAuthor, {
+      className: "author",
+      dangerouslySetInnerHTML: {
+        __html: this.parsedText(tab.author)
+      }
+    })), tab.text && /*#__PURE__*/_react.default.createElement(_renderUi.Purpose, {
+      purpose: "passage-text"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      key: tab.id,
+      className: "text",
+      dangerouslySetInnerHTML: {
+        __html: baseHeadingLevel ? (0, _renderUi.transformDataHeadings)(tab.text, textLevel) : tab.text
+      }
+    })));
+  }
+  render() {
+    const {
+      model,
+      tabs,
+      disabledTabs
+    } = this.props;
+    const {
+      activeTab,
+      zoomCompensation,
+      containerWidth
+    } = this.state;
+    if (!tabs?.length) {
+      return;
+    }
+    const {
+      extraCSSRules
+    } = model || {};
+    const selectedTab = (tabs || []).find(tab => tab.id === activeTab);
+
+    // cap each tab at 1/n of the passage container width so a single long
+    // title can't push other tabs off-screen. Existing two-line wrap + ellipsis
+    // on .passage-label still trims anything that doesn't fit.
+    const tabMaxWidth = containerWidth > 0 ? containerWidth / tabs.length : null;
+    // When per-tab horizontal space drops to NUMERIC_LABEL_MIN_WIDTH_PER_TAB or
+    // less, titles become unreadably truncated; swap to "Passage N" so users
+    // can still navigate. Container width is read once layout has settled
+    // (>0), so initial render uses real labels.
+    const useNumericLabels = containerWidth > 0 && containerWidth <= tabs.length * NUMERIC_LABEL_MIN_WIDTH_PER_TAB;
+    return /*#__PURE__*/_react.default.createElement(_renderUi.UiLayout, {
+      extraCSSRules: extraCSSRules
+    }, /*#__PURE__*/_react.default.createElement(PassagesContainer, {
+      className: "passages",
+      ref: this.containerRef
+    }, disabledTabs || tabs.length === 1 ? tabs.map(tab => this.renderTab(tab, disabledTabs)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+      sx: {
+        // Below the breakpoint (e.g. WCAG 400% zoom, ~320px viewport)
+        // the tabs are in normal flow and scroll with the passage text,
+        // so they don't lock up space needed to display the passage.
+        position: 'static',
+        // Above the breakpoint there is adequate screen space, so the
+        // tabs stay locked to the top of the panel while the passage
+        // text scrolls beneath them.
+        [`@media (min-width: ${STICKY_TABS_BREAKPOINT + 1}px)`]: {
+          position: 'sticky',
+          top: 0,
+          zIndex: 1
+        },
+        background: 'var(--pie-passage-header-background, rgba(255,255,255,0))',
+        color: _renderUi.color.text(),
+        fontFamily: 'Roboto, sans-serif',
+        // Freeze the tabs' physical size at their 200%-zoom appearance
+        // when browser zoom exceeds 200%. The factor is 1 at zoom <= 200%,
+        // so behavior below that threshold is unchanged. Using `zoom`
+        // (rather than transform: scale) shrinks the layout box itself,
+        // so the reclaimed space flows to the passage content below.
+        zoom: zoomCompensation,
+        '& .MuiTabs-list': {
+          backgroundColor: 'var(--pie-passage-header-background, #ffffff)',
+          borderBottom: '1px solid #D9DADA'
+        },
+        '& .MuiTabs-indicator': {
+          backgroundColor: _renderUi.color.white(),
+          marginBottom: '-1px'
+        }
+      },
+      value: activeTab,
+      onChange: this.handleChange
+    }, tabs.map((tab, index) => /*#__PURE__*/_react.default.createElement(TabStyled, {
+      key: tab.id,
+      id: `button-${tab.id}`,
+      sx: tabMaxWidth ? {
+        maxWidth: `${tabMaxWidth}px`
+      } : undefined,
+      label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_renderUi.Purpose, {
+        purpose: "passage-label"
+      }, useNumericLabels ? /*#__PURE__*/_react.default.createElement("span", {
+        className: "passage-label"
+      }, `Passage ${index + 1}`) : /*#__PURE__*/_react.default.createElement("span", {
+        className: "passage-label",
+        dangerouslySetInnerHTML: {
+          __html: this.parsedText(tab.label)
+        }
+      })), /*#__PURE__*/_react.default.createElement(Underline, {
+        className: "passage-label-underline"
+      })),
+      value: tab.id,
+      tabIndex: activeTab === tab.id ? 0 : -1,
+      "aria-controls": `tabpanel-${tab.id}`,
+      "aria-selected": activeTab === tab.id,
+      onKeyDown: event => this.handleKeyDown(event, tab.id)
+    }))), selectedTab ? this.renderTab(selectedTab, disabledTabs) : null)));
+  }
+}
+StimulusTabs.propTypes = {
+  tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.number.isRequired,
+    label: _propTypes.default.string.isRequired,
+    title: _propTypes.default.string.isRequired,
+    subtitle: _propTypes.default.string,
+    author: _propTypes.default.string,
+    text: _propTypes.default.string.isRequired,
+    teacherInstructions: _propTypes.default.string
+  }).isRequired).isRequired,
+  disabledTabs: _propTypes.default.bool,
+  model: _propTypes.default.object,
+  baseHeadingLevel: _propTypes.default.number
+};
+var _default = exports.default = StimulusTabs;
+//# sourceMappingURL=stimulus-tabs.js.map

package/lib/stimulus-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stimulus-tabs.js","names":["_react","_interopRequireDefault","require","_propTypes","_Tabs","_Tab","_styles","_renderUi","STICKY_TABS_BREAKPOINT","MAX_TABS_ZOOM","MIN_ZOOM_COMPENSATION","NUMERIC_LABEL_MIN_WIDTH_PER_TAB","computeZoomCompensation","window","ratio","outerWidth","innerWidth","zoom","Number","isFinite","Math","max","min","PassagesContainer","styled","flexGrow","backgroundColor","color","background","text","borderCollapse","padding","textAlign","Passage","theme","spacing","borderLeft","margin","PassageTitle","fontSize","PassageSubtitle","PassageAuthor","TabStyled","Tab","palette","common","white","fontFamily","black","borderRadius","border","borderBottomWidth","minHeight","display","alignItems","justifyContent","textTransform","WebkitLineClamp","WebkitBoxOrient","overflow","textOverflow","whiteSpace","opacity","tertiary","tertiaryLight","Underline","height","width","marginTop","StimulusTabs","React","Component","constructor","args","_defineProperty2","default","activeTab","zoomCompensation","containerWidth","createRef","setState","node","containerRef","current","clientWidth","state","event","setTimeout","tabChangeEvent","CustomEvent","detail","tab","dispatchEvent","currentTabId","key","tabs","props","newTabIndex","currentIndex","findIndex","id","length","preventDefault","stopPropagation","handleChange","document","getElementById","focus","div","createElement","innerHTML","replace","audio","querySelector","source","setAttribute","getAttribute","removeAttribute","appendChild","componentDidMount","addEventListener","updateZoomCompensation","ResizeObserver","resizeObserver","updateContainerWidth","observe","componentWillUnmount","removeEventListener","disconnect","renderInstructions","teacherInstructions","disabledTabs","teacherInstructionsDiv","PreviewPrompt","tagName","className","defaultClassName","prompt","Collapsible","labels","hidden","visible","renderTab","baseHeadingLevel","clampedLevel","undefined","TitleTag","textLevel","role","title","Purpose","purpose","dangerouslySetInnerHTML","__html","parsedText","subtitle","author","transformDataHeadings","render","model","extraCSSRules","selectedTab","find","tabMaxWidth","useNumericLabels","UiLayout","ref","map","Fragment","sx","position","top","zIndex","borderBottom","marginBottom","value","onChange","index","maxWidth","label","tabIndex","onKeyDown","handleKeyDown","propTypes","PropTypes","arrayOf","shape","number","isRequired","string","bool","object","_default","exports"],"sources":["../src/stimulus-tabs.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Tabs from '@mui/material/Tabs';\nimport Tab from '@mui/material/Tab';\nimport { styled } from '@mui/material/styles';\nimport { Collapsible, color, PreviewPrompt, Purpose, UiLayout, transformDataHeadings } from '@pie-lib/render-ui';\n\n// Must match the breakpoint Quiz Engine passes to the PIE section player for\n// switching from the side-by-side passage/question layout to the tabbed layout.\n// Below (and at) this width the passage tabs scroll with the passage content\n// instead of being locked to the top of the panel, so that they do not lock up\n// space needed for the passage text (WCAG 1.4.10 Reflow, 400% zoom / 320px).\nconst STICKY_TABS_BREAKPOINT = 840;\n\n/**\n * Zoom compensation for the passage selection tabs.\n *\n * The tabs scale naturally with browser zoom up to 200%. Beyond 200%,\n * we shrink their CSS size proportionally so their physical on-screen size\n * freezes at the 200% appearance, leaving more room for passage content\n * in high-zoom / small-window situations.\n * The factor is min(1, 2 / zoom): exactly 1 at zoom <= 200% (component\n * behavior unchanged), shrinking proportionally above that. A lower clamp\n * of 0.4 guards against inflated ratios (docked devtools, browser side\n * panels, window chrome) ever making the tabs unusably small.\n */\nconst MAX_TABS_ZOOM = 2;\nconst MIN_ZOOM_COMPENSATION = 0.4;\n\n// Per-tab horizontal-space floor in CSS pixels. When the passage container is\n// narrow enough that each tab would have at most this much room\n// (containerWidth <= tabs.length * NUMERIC_LABEL_MIN_WIDTH_PER_TAB), tab labels\n// fall back to \"Passage 1\", \"Passage 2\", ... so navigation stays usable instead\n// of being dominated by aggressively truncated titles.\nconst NUMERIC_LABEL_MIN_WIDTH_PER_TAB = 170;\n\nconst computeZoomCompensation = () => {\n  if (typeof window === 'undefined') return 1;\n  const ratio = window.outerWidth / window.innerWidth;\n  const zoom = Number.isFinite(ratio) && ratio > 0 ? ratio : 1;\n  return Math.max(MIN_ZOOM_COMPENSATION, Math.min(1, MAX_TABS_ZOOM / zoom));\n};\n\nconst PassagesContainer = styled('div')({\n  flexGrow: 1,\n  backgroundColor: color.background(),\n  color: color.text(),\n  '&:not(.MathJax) table': {\n    borderCollapse: 'collapse',\n  },\n  '&:not(.MathJax) table td, &:not(.MathJax) table th': {\n    padding: '.6em 1em',\n    textAlign: 'left',\n  },\n});\n\nconst Passage = styled('div')(({ theme }) => ({\n  backgroundColor: color.background(),\n  color: color.text(),\n  padding: theme.spacing(2),\n  '& blockquote': {\n    background: '#f9f9f9',\n    borderLeft: '5px solid #ccc',\n    margin: '1.5em 10px',\n    padding: '.5em 10px',\n  },\n}));\n\nconst PassageTitle = styled('div')({\n  fontSize: '1.75rem',\n});\n\nconst PassageSubtitle = styled('div')({\n  fontSize: '1.5rem',\n});\n\nconst PassageAuthor = styled('div')({\n  fontSize: '1.25rem',\n});\n\nconst TabStyled = styled(Tab)(({ theme }) => ({\n  background: theme.palette.common.white, // replace with color.background() once PD-2801 is DONE\n  fontSize: 'inherit',\n  fontFamily: 'Roboto, sans-serif',\n  color: theme.palette.common.black, // remove when PD-2801 is DONE\n  borderRadius: `${theme.spacing(2)} ${theme.spacing(2)} 0 0`,\n  border: '1px solid #D9DADA',\n  borderBottomWidth: 0,\n  minHeight: '56px',\n  padding: '8px 10px',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  margin: `0 ${theme.spacing(1)}`,\n  textTransform: 'none',\n\n  '.passage-label': {\n    display: '-webkit-box',\n    WebkitLineClamp: 2,\n    WebkitBoxOrient: 'vertical',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'normal',\n    margin: 'auto 0',\n    opacity: 0.7,\n  },\n\n  '&.Mui-selected': {\n    color: theme.palette.common.black,\n    '.passage-label': {\n      opacity: 1,\n    },\n    '.passage-label-underline': {\n      backgroundColor: color.tertiary(),\n    },\n  },\n\n  '&:hover': {\n    '.passage-label-underline': {\n      backgroundColor: color.tertiaryLight(),\n    },\n  },\n\n  '& .MuiTouchRipple-root': {\n    opacity: 0.7,\n  },\n}));\n\nconst Underline = styled('div')(({ theme }) => ({\n  height: '2px',\n  width: '100%',\n  marginTop: '6px',\n  background: theme.palette.common.white, // replace with color.background() once PD-2801 is DONE\n}));\n\nclass StimulusTabs extends React.Component {\n  state = {\n    activeTab: 0,\n    zoomCompensation: computeZoomCompensation(),\n    containerWidth: 0,\n  };\n\n  containerRef = React.createRef();\n\n  componentDidMount() {\n    if (typeof window === 'undefined') return;\n    window.addEventListener('resize', this.updateZoomCompensation);\n\n    if (this.containerRef.current && typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(this.updateContainerWidth);\n      this.resizeObserver.observe(this.containerRef.current);\n    }\n\n    this.updateContainerWidth();\n  }\n\n  componentWillUnmount() {\n    if (typeof window === 'undefined') return;\n    window.removeEventListener('resize', this.updateZoomCompensation);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n  }\n\n  updateZoomCompensation = () => {\n    this.setState({ zoomCompensation: computeZoomCompensation() });\n  };\n\n  updateContainerWidth = () => {\n    const node = this.containerRef.current;\n    if (!node) return;\n    const width = node.clientWidth;\n    if (width !== this.state.containerWidth) {\n      this.setState({ containerWidth: width });\n    }\n  };\n\n  handleChange = (event, activeTab) => {\n    this.setState(() => ({ activeTab }));\n\n    setTimeout(() => {\n      const tabChangeEvent = new CustomEvent('pie-ui-passage-tabChanged', {\n        detail: { tab: activeTab },\n      });\n\n      window.dispatchEvent(tabChangeEvent);\n    });\n  };\n\n  handleKeyDown = (event, currentTabId) => {\n    const { key } = event;\n    const { tabs } = this.props;\n\n    let newTabIndex = -1;\n    const currentIndex = tabs.findIndex((tab) => tab.id === currentTabId);\n\n    switch (key) {\n      case 'ArrowRight':\n        // Move to the next tab\n        newTabIndex = (currentIndex + 1) % tabs.length;\n        break;\n      case 'ArrowLeft':\n        // Move to the previous tab\n        newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n        break;\n      // Commented out ArrowDown and ArrowUp for future vertical tab navigation\n      // case 'ArrowDown':\n      //   // Move to the next tab (for vertical alignment)\n      //   newTabIndex = (currentIndex + 1) % tabs.length;\n      //   break;\n      // case 'ArrowUp':\n      //   // Move to the previous tab (for vertical alignment)\n      //   newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n      //   break;\n      case 'Home':\n        // Move to the first tab\n        newTabIndex = 0;\n        break;\n      case 'End':\n        // Move to the last tab\n        newTabIndex = tabs.length - 1;\n        break;\n      case 'Enter':\n      case ' ':\n        // Activate the current tab\n        newTabIndex = currentIndex;\n        break;\n      default:\n        break;\n    }\n\n    if (newTabIndex !== -1) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.handleChange(event, tabs[newTabIndex].id);\n      document.getElementById(`button-${tabs[newTabIndex].id}`).focus();\n    }\n  };\n\n  parsedText = (text = '') => {\n    // fix imported audio content for Safari PD-1391\n    const div = document.createElement('div');\n    div.innerHTML = text.replace(/(<br\\/>\\n)/g, '<br/>');\n\n    const audio = div.querySelector('audio');\n\n    if (audio) {\n      const source = document.createElement('source');\n\n      source.setAttribute('type', 'audio/mp3');\n      source.setAttribute('src', audio.getAttribute('src'));\n\n      audio.removeAttribute('src');\n      audio.appendChild(source);\n    }\n\n    return div.innerHTML;\n  };\n\n  renderInstructions(teacherInstructions, disabledTabs = false) {\n    if (!teacherInstructions) {\n      return;\n    }\n\n    const teacherInstructionsDiv = (\n      <PreviewPrompt\n        tagName=\"div\"\n        className=\"prompt\"\n        defaultClassName=\"teacher-instructions\"\n        prompt={teacherInstructions}\n      />\n    );\n\n    if (disabledTabs) {\n      return teacherInstructionsDiv;\n    }\n\n    return (\n      <Collapsible\n        labels={{\n          hidden: 'Show Teacher Instructions',\n          visible: 'Hide Teacher Instructions',\n        }}\n      >\n        {teacherInstructionsDiv}\n      </Collapsible>\n    );\n  }\n\n  renderTab(tab, disabledTabs) {\n    const { baseHeadingLevel } = this.props;\n    const clampedLevel = baseHeadingLevel ? Math.min(6, Math.max(1, baseHeadingLevel)) : undefined;\n    const TitleTag = baseHeadingLevel ? `h${clampedLevel}` : 'h2'; // default to h2 if no base level is provided - this was the previous behavior\n    const textLevel = baseHeadingLevel ? Math.min(6, Math.max(1, clampedLevel + 1)) : undefined; // promote text headings one level above title\n\n    return (\n      <Passage key={tab.id} id={`tabpanel-${tab.id}`} role=\"tabpanel\" aria-labelledby={`button-${tab.id}`}>\n        {this.renderInstructions(tab.teacherInstructions, disabledTabs)}\n\n        {tab.title && (\n          <Purpose purpose=\"passage-title\">\n            <TitleTag>\n              <PassageTitle dangerouslySetInnerHTML={{ __html: this.parsedText(tab.title) }} />\n            </TitleTag>\n          </Purpose>\n        )}\n\n        {tab.subtitle && (\n          <Purpose purpose=\"passage-subtitle\">\n            <PassageSubtitle dangerouslySetInnerHTML={{ __html: this.parsedText(tab.subtitle) }} />\n          </Purpose>\n        )}\n\n        {tab.author && (\n          <Purpose purpose=\"passage-author\">\n            <PassageAuthor className=\"author\" dangerouslySetInnerHTML={{ __html: this.parsedText(tab.author) }} />\n          </Purpose>\n        )}\n\n        {tab.text && (\n          <Purpose purpose=\"passage-text\">\n            <div key={tab.id} className=\"text\" dangerouslySetInnerHTML={{ __html: baseHeadingLevel ? transformDataHeadings(tab.text, textLevel) : tab.text }} />\n          </Purpose>\n        )}\n      </Passage>\n    );\n  }\n\n  render() {\n    const { model, tabs, disabledTabs } = this.props;\n    const { activeTab, zoomCompensation, containerWidth } = this.state;\n\n    if (!tabs?.length) {\n      return;\n    }\n\n    const { extraCSSRules } = model || {};\n    const selectedTab = (tabs || []).find((tab) => tab.id === activeTab);\n\n    // cap each tab at 1/n of the passage container width so a single long\n    // title can't push other tabs off-screen. Existing two-line wrap + ellipsis\n    // on .passage-label still trims anything that doesn't fit.\n    const tabMaxWidth = containerWidth > 0 ? containerWidth / tabs.length : null;\n    // When per-tab horizontal space drops to NUMERIC_LABEL_MIN_WIDTH_PER_TAB or\n    // less, titles become unreadably truncated; swap to \"Passage N\" so users\n    // can still navigate. Container width is read once layout has settled\n    // (>0), so initial render uses real labels.\n    const useNumericLabels =\n      containerWidth > 0 && containerWidth <= tabs.length * NUMERIC_LABEL_MIN_WIDTH_PER_TAB;\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules}>\n        <PassagesContainer className=\"passages\" ref={this.containerRef}>\n          {disabledTabs || tabs.length === 1 ? (\n            tabs.map((tab) => this.renderTab(tab, disabledTabs))\n          ) : (\n            <>\n              <Tabs\n                sx={{\n                  // Below the breakpoint (e.g. WCAG 400% zoom, ~320px viewport)\n                  // the tabs are in normal flow and scroll with the passage text,\n                  // so they don't lock up space needed to display the passage.\n                  position: 'static',\n                  // Above the breakpoint there is adequate screen space, so the\n                  // tabs stay locked to the top of the panel while the passage\n                  // text scrolls beneath them.\n                  [`@media (min-width: ${STICKY_TABS_BREAKPOINT + 1}px)`]: {\n                    position: 'sticky',\n                    top: 0,\n                    zIndex: 1,\n                  },\n                  background: 'var(--pie-passage-header-background, rgba(255,255,255,0))',\n                  color: color.text(),\n                  fontFamily: 'Roboto, sans-serif',\n                  // Freeze the tabs' physical size at their 200%-zoom appearance\n                  // when browser zoom exceeds 200%. The factor is 1 at zoom <= 200%,\n                  // so behavior below that threshold is unchanged. Using `zoom`\n                  // (rather than transform: scale) shrinks the layout box itself,\n                  // so the reclaimed space flows to the passage content below.\n                  zoom: zoomCompensation,\n                  '& .MuiTabs-list': {\n                    backgroundColor: 'var(--pie-passage-header-background, #ffffff)',\n                    borderBottom: '1px solid #D9DADA',\n                  },\n                  '& .MuiTabs-indicator': {\n                    backgroundColor: color.white(),\n                    marginBottom: '-1px',\n                  },\n                }}\n                value={activeTab}\n                onChange={this.handleChange}\n              >\n                {tabs.map((tab, index) => (\n                  <TabStyled\n                    key={tab.id}\n                    id={`button-${tab.id}`}\n                    sx={tabMaxWidth ? { maxWidth: `${tabMaxWidth}px` } : undefined}\n                    label={\n                      <>\n                        <Purpose purpose=\"passage-label\">\n                          {useNumericLabels ? (\n                            <span className=\"passage-label\">{`Passage ${index + 1}`}</span>\n                          ) : (\n                            <span\n                              className=\"passage-label\"\n                              dangerouslySetInnerHTML={{ __html: this.parsedText(tab.label) }}\n                            />\n                          )}\n                        </Purpose>\n                        <Underline className=\"passage-label-underline\" />\n                      </>\n                    }\n                    value={tab.id}\n                    tabIndex={activeTab === tab.id ? 0 : -1}\n                    aria-controls={`tabpanel-${tab.id}`}\n                    aria-selected={activeTab === tab.id}\n                    onKeyDown={(event) => this.handleKeyDown(event, tab.id)}\n                  />\n                ))}\n              </Tabs>\n              {selectedTab ? this.renderTab(selectedTab, disabledTabs) : null}\n            </>\n          )}\n        </PassagesContainer>\n      </UiLayout>\n    );\n  }\n}\n\nStimulusTabs.propTypes = {\n  tabs: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.number.isRequired,\n      label: PropTypes.string.isRequired,\n      title: PropTypes.string.isRequired,\n      subtitle: PropTypes.string,\n      author: PropTypes.string,\n      text: PropTypes.string.isRequired,\n      teacherInstructions: PropTypes.string,\n    }).isRequired,\n  ).isRequired,\n  disabledTabs: PropTypes.bool,\n  model: PropTypes.object,\n  baseHeadingLevel: PropTypes.number,\n};\n\nexport default StimulusTabs;\n"],"mappings":"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","ignoreList":[]}

package/module/configure.js

@@ -0,0 +1 @@
+import{_dll_prop_types as e,_dll_mui__material_styles as t,_dll_react as a,_dll_mui__material as n,_dll_mui__icons_material as i,_dll_react_dom_client as s}from"../../../@pie-lib/shared-module@^5.1.1/module/index.js";import{_dll_pie_lib__config_ui as l}from"../../../@pie-lib/config-module@^4.0.4/module/index.js";import{_dll_pie_lib__editable_html_tip_tap as o}from"../../../@pie-lib/editable-html-module@^7.1.1/module/index.js";var r={};Object.defineProperty(r,"__esModule",{value:!0});class d extends CustomEvent{constructor(e,t=!1){super(d.TYPE,{bubbles:!0,detail:{update:e,reset:t}}),this.update=e,this.reset=t}}d.TYPE="model.updated";var u=r.ModelUpdatedEvent=d;class c extends CustomEvent{constructor(e,t){super(c.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}c.TYPE="delete.image";var g=r.DeleteImageEvent=c;class p extends CustomEvent{constructor(e){super(p.TYPE,{bubbles:!0,detail:e}),this.handler=e}}p.TYPE="insert.image";var h=r.InsertImageEvent=p;class m extends CustomEvent{constructor(e,t){super(m.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}m.TYPE="delete.sound";var b=r.DeleteSoundEvent=m;class _ extends CustomEvent{constructor(e){super(_.TYPE,{bubbles:!0,detail:e}),this.handler=e}}_.TYPE="insert.sound";var C=r.InsertSoundEvent=_;const E=a,f=e,{styled:x}=t,{Button:S}=n,{Dialog:I}=n,{DialogTitle:v}=n,{DialogContent:P}=n,{DialogContentText:y}=n,{DialogActions:T}=n,{RemoveCircle:R}=i,{AddCircle:q}=i,D=x(({label:e,type:t="add",onClick:a})=>{const n="add"===t?q:R;return E.createElement(S,{color:"primary",size:"small",onClick:a},E.createElement(n,{fontSize:"small",color:"primary",style:{marginRight:4}}),e)})({textDecoration:"underline","&:hover":{textDecoration:"underline",backgroundColor:"transparent"},display:"flex",alignItems:"center"}),k=({content:e,cancel:t,title:a,ok:n,open:i,onOk:s,onCancel:l})=>E.createElement(I,{open:i},E.createElement(v,null,a),E.createElement(P,null,E.createElement(y,null,e)),E.createElement(T,null,s&&E.createElement(S,{onClick:s,color:"primary"},n),l&&E.createElement(S,{onClick:l,color:"primary"},t)));k.propTypes={content:f.string.isRequired,title:f.string.isRequired,cancel:f.string.isRequired,ok:f.string.isRequired,open:f.bool.isRequired,onCancel:f.func.isRequired,onOk:f.func.isRequired};const A=a,M=e,{styled:w}=t,{InputContainer:j}=l,O=o,{ALL_PLUGINS:Y}=o;function L(e){let t,a=e[0],n=1;for(;n<e.length;){const i=e[n],s=e[n+1];if(n+=2,("optionalAccess"===i||"optionalCall"===i)&&null==a)return;"access"===i||"optionalAccess"===i?(t=a,a=s(a)):"call"!==i&&"optionalCall"!==i||(a=s((...e)=>a.call(t,...e)),t=void 0)}return a}const H=w(j)(({theme:e})=>({paddingTop:e.spacing(2),marginBottom:e.spacing(2),width:"100%"})),W=w("div")(({theme:e})=>({fontSize:e.typography.fontSize-2,color:e.palette.error.main,paddingTop:e.spacing(1)}));class z extends A.Component{static __initStatic(){this.propTypes={onModelChanged:M.func.isRequired,model:M.object.isRequired,configuration:M.object.isRequired,imageSupport:M.object.isRequired,passageIndex:M.number.isRequired,uploadSoundSupport:M.object.isRequired}}static __initStatic2(){this.defaultProps={passageIndex:0}}constructor(e){super(e),z.prototype.__init.call(this)}__init(){this.handleChange=(e,t)=>{const{model:a,onModelChanged:n,passageIndex:i}=this.props;if(!a.passages||i<0||i>=a.passages.length)return;const s=[...a.passages];s[i]={...s[i],[e]:t},n({...a,passages:s})}}render(){const{model:e,configuration:t,imageSupport:a,passageIndex:n,uploadSoundSupport:i}=this.props,{maxImageWidth:s={},maxImageHeight:l={},mathMlOptions:o={},baseInputConfiguration:r={},teacherInstructions:d={},title:u={},subtitle:c={},text:g={},author:p={}}=t||{},{errors:h={},passages:m=[],teacherInstructionsEnabled:b,titleEnabled:_,subtitleEnabled:C,authorEnabled:E,textEnabled:f}=e||{},{passages:x}=h||{},{teacherInstructions:S,title:I,subtitle:v,author:P,text:y}=x&&x[n]||{},T=s&&s.prompt,R=l&&l.prompt,q=e=>({...r,...e}),D=(Y||[]).filter(e=>!["math","table","bulleted-list","numbered-list"].includes(e));return A.createElement(A.Fragment,null,b&&A.createElement(H,{label:d.label},A.createElement(O,{activePlugins:Y,markup:m[n].teacherInstructions||"",onChange:e=>this.handleChange("teacherInstructions",e),nonEmpty:!1,error:S,maxImageWidth:s&&s.teacherInstructions||T,maxImageHeight:l&&l.teacherInstructions||R,mathMlOptions:o,languageCharactersProps:[{language:"spanish"},{language:"special"}],pluginProps:q(L([d,"optionalAccess",e=>e.inputConfiguration]))}),S&&A.createElement(W,null,S)),_&&A.createElement(H,{label:u.label},A.createElement(O,{activePlugins:D,markup:m[n].title||"",onChange:e=>this.handleChange("title",e),nonEmpty:!1,error:I,mathMlOptions:o,languageCharactersProps:[{language:"spanish"},{language:"special"}],pluginProps:q(L([u,"optionalAccess",e=>e.inputConfiguration]))}),I&&A.createElement(W,null,I)),C&&A.createElement(H,{label:c.label},A.createElement(O,{activePlugins:D,markup:m[n].subtitle||"",onChange:e=>this.handleChange("subtitle",e),nonEmpty:!1,error:v,mathMlOptions:o,languageCharactersProps:[{language:"spanish"},{language:"special"}],pluginProps:q(L([c,"optionalAccess",e=>e.inputConfiguration]))}),v&&A.createElement(W,null,v)),E&&A.createElement(H,{label:p.label},A.createElement(O,{activePlugins:D,markup:m[n].author||"",onChange:e=>this.handleChange("author",e),nonEmpty:!1,error:P,mathMlOptions:o,languageCharactersProps:[{language:"spanish"},{language:"special"}],pluginProps:q(L([p,"optionalAccess",e=>e.inputConfiguration]))}),P&&A.createElement(W,null,P)),f&&A.createElement(H,{label:g.label},A.createElement(O,{activePlugins:Y,markup:m[n].text||"",onChange:e=>this.handleChange("text",e),imageSupport:a,uploadSoundSupport:i,nonEmpty:!1,error:y,maxImageWidth:s&&s.text||T,maxImageHeight:l&&l.text||R,mathMlOptions:o,languageCharactersProps:[{language:"spanish"},{language:"special"}],pluginProps:q(L([g,"optionalAccess",e=>e.inputConfiguration]))}),y&&A.createElement(W,null,y)))}}z.__initStatic(),z.__initStatic2();const B=a,$=e,{styled:F}=t,{Typography:U}=n,{settings:G}=l,{layout:N}=l,{Panel:J,toggle:K,dropdown:Q}=G,V=F(U)(({theme:e})=>({paddingTop:e.spacing(2),marginBottom:e.spacing(2)}));class X extends B.Component{static __initStatic(){this.propTypes={onModelChanged:$.func.isRequired,onConfigurationChanged:$.func,model:$.object.isRequired,configuration:$.object.isRequired,imageSupport:$.object.isRequired,uploadSoundSupport:$.object.isRequired,classes:$.object.isRequired}}constructor(e){super(e),X.prototype.__init.call(this),X.prototype.__init2.call(this),X.prototype.__init3.call(this),X.prototype.__init4.call(this),this.state={showConfirmationDialog:!1,indexToRemove:-1}}__init(){this.getInnerText=e=>(e||"").replaceAll(/<[^>]*>/g,"")}__init2(){this.onDelete=(e,t,a)=>{let n=e.passages;n.splice(t,1),a({...e,passages:n}),this.setState({showConfirmationDialog:!1,indexToRemove:-1})}}__init3(){this.removeAdditionalPassage=e=>{const{model:t={},onModelChanged:a}=this.props,{passages:n=[]}=t,{teacherInstructions:i="",title:s="",subtitle:l="",author:o="",text:r=""}=n[e];this.getInnerText(i).trim()||this.getInnerText(s).trim()||this.getInnerText(l).trim()||this.getInnerText(o).trim()||this.getInnerText(r).trim()?this.setState({showConfirmationDialog:!0,indexToRemove:e}):this.onDelete(t,e,a)}}__init4(){this.addAdditionalPassage=()=>{const{model:e,onModelChanged:t}=this.props,a=[...e.passages,{teacherInstructions:"",title:"",subtitle:"",author:"",text:""}];t({...e,passages:a})}}render(){const{model:e,configuration:t,imageSupport:a,onConfigurationChanged:n,onModelChanged:i,uploadSoundSupport:s}=this.props,{settingsPanelDisabled:l,language:o={},languageChoices:r={},teacherInstructions:d={},title:u={},subtitle:c={},text:g={},author:p={},additionalPassage:h={}}=t||{},{extraCSSRules:m,passages:b}=e||{},_={titleEnabled:u&&u.settings&&K(u.label),subtitleEnabled:c&&c.settings&&K(c.label),authorEnabled:p&&p.settings&&K(p.label),textEnabled:g&&g.settings&&K(g.label),"additionalPassage.enabled":h&&h.settings&&K(h.label,!0)},C={teacherInstructionsEnabled:d&&d.settings&&K(d.label),"language.enabled":o&&o.settings&&K(o.label,!0),language:o&&o.settings&&o.enabled&&Q(r.label,r.options)},E=`${h.label} will be deleted`,{indexToRemove:f,showConfirmationDialog:x}=this.state;return B.createElement(N.ConfigLayout,{extraCSSRules:m,hideSettings:l,settings:B.createElement(J,{model:e,configuration:t,onChangeModel:e=>i(e),onChangeConfiguration:e=>n(e),groups:{Settings:_,Properties:C}})},b.map((n,l)=>B.createElement(B.Fragment,{key:l},l>0&&B.createElement(V,{variant:"h5"},h.label),B.createElement(z,{imageSupport:a,uploadSoundSupport:s,model:e,configuration:t,passageIndex:l,onModelChanged:i}),l>0&&h.enabled&&B.createElement(D,{type:"remove",label:`Remove ${h.label}`,onClick:()=>this.removeAdditionalPassage(l)}),0===l&&h.enabled&&b.length<2&&B.createElement(D,{label:`Add ${h.label}`,onClick:this.addAdditionalPassage}))),B.createElement(k,{open:x,title:"Warning",content:E,cancel:"Cancel",ok:"Ok",onCancel:()=>this.setState({showConfirmationDialog:!1}),onOk:()=>this.onDelete(e,f,i)}))}}X.__initStatic();var Z={authorEnabled:!0,passages:[{teacherInstructions:"",title:"",subtitle:"",author:"",text:""}],subtitleEnabled:!0,teacherInstructionsEnabled:!0,textEnabled:!0,titleEnabled:!0},ee={baseInputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1},h3:{disabled:!0},blockquote:{disabled:!0},textAlign:{disabled:!0},showParagraphs:{disabled:!1},separateParagraphs:{disabled:!0}},settingsPanelDisabled:!1,title:{settings:!0,label:"Title",inputConfiguration:{audio:{disabled:!0},video:{disabled:!0},image:{disabled:!0},textAlign:{disabled:!1}},required:!0},subtitle:{settings:!0,label:"Subtitle",inputConfiguration:{audio:{disabled:!0},video:{disabled:!0},image:{disabled:!0},textAlign:{disabled:!1}},required:!1},author:{settings:!0,label:"Author",inputConfiguration:{audio:{disabled:!0},video:{disabled:!0},image:{disabled:!0}},required:!1},text:{settings:!0,label:"Text",inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1},h3:{disabled:!1},blockquote:{disabled:!1},textAlign:{disabled:!1}},required:!0},teacherInstructions:{settings:!0,label:"Teacher Instructions",inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}},required:!1},maxImageWidth:{teacherInstructions:300,text:300},maxImageHeight:{teacherInstructions:300,text:300},mathMlOptions:{mmlOutput:!1,mmlEditing:!1},language:{settings:!1,label:"Specify Language",enabled:!1},languageChoices:{label:"Language Choices",options:[]},additionalPassage:{settings:!0,label:"Additional Passage",enabled:!1}};const te=a,{createRoot:ae}=s;class ne extends HTMLElement{static __initStatic(){this.createDefaultModel=(e={})=>({...Z,...e})}constructor(){super(),this._root=null,this._model=ne.createDefaultModel(),this._configuration=ee}set model(e){this._model=ne.createDefaultModel(e),this.render()}set configuration(e){this._configuration=e,this.render()}connectedCallback(){this.render()}modelChanged(e){this._model=e,this.dispatchEvent(new u(this._model),!0),this.render()}onConfigurationChanged(e){this._configuration=e,this.render()}insertImage(e){this.dispatchEvent(new h(e))}onDeleteImage(e,t){this.dispatchEvent(new g(e,t))}insertSound(e){this.dispatchEvent(new C(e))}onDeleteSound(e,t){this.dispatchEvent(new b(e,t))}render(){if(this._model){const e=te.createElement(X,{model:this._model,configuration:this._configuration,onModelChanged:this.modelChanged.bind(this),onConfigurationChanged:this.onConfigurationChanged.bind(this),imageSupport:{add:this.insertImage.bind(this),delete:this.onDeleteImage.bind(this)},uploadSoundSupport:{add:this.insertSound.bind(this),delete:this.onDeleteSound.bind(this)}});this._root||(this._root=ae(this)),this._root.render(e)}}disconnectedCallback(){this._root&&this._root.unmount()}}ne.__initStatic();export{ne as default};