@pie-element/passage 7.1.2-next.5 → 7.2.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":"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","ignoreList":[]}

package/lib/stimulus-tabs.js

@@ -0,0 +1,340 @@
+"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;
+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
+    });
+    (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;
+    });
+  }
+  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
+    } = this.state;
+    if (!tabs?.length) {
+      return;
+    }
+    const {
+      extraCSSRules
+    } = model || {};
+    const selectedTab = (tabs || []).find(tab => tab.id === activeTab);
+    return /*#__PURE__*/_react.default.createElement(_renderUi.UiLayout, {
+      extraCSSRules: extraCSSRules
+    }, /*#__PURE__*/_react.default.createElement(PassagesContainer, {
+      className: "passages"
+    }, 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: _renderUi.color.background(),
+        color: _renderUi.color.text(),
+        fontFamily: 'Roboto, sans-serif',
+        '& .MuiTabs-list': {
+          backgroundColor: _renderUi.color.white(),
+          borderBottom: '1px solid #D9DADA'
+        },
+        '& .MuiTabs-indicator': {
+          backgroundColor: _renderUi.color.white(),
+          marginBottom: '-1px'
+        }
+      },
+      value: activeTab,
+      onChange: this.handleChange
+    }, tabs.map(tab => /*#__PURE__*/_react.default.createElement(TabStyled, {
+      key: tab.id,
+      id: `button-${tab.id}`,
+      label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_renderUi.Purpose, {
+        purpose: "passage-label"
+      }, /*#__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","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","event","setState","setTimeout","tabChangeEvent","CustomEvent","detail","tab","window","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","renderInstructions","teacherInstructions","disabledTabs","teacherInstructionsDiv","PreviewPrompt","tagName","className","defaultClassName","prompt","Collapsible","labels","hidden","visible","renderTab","baseHeadingLevel","clampedLevel","Math","min","max","undefined","TitleTag","textLevel","role","title","Purpose","purpose","dangerouslySetInnerHTML","__html","parsedText","subtitle","author","transformDataHeadings","render","model","state","extraCSSRules","selectedTab","find","UiLayout","map","Fragment","sx","position","top","zIndex","borderBottom","marginBottom","value","onChange","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\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  };\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 } = 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    return (\n      <UiLayout extraCSSRules={extraCSSRules}>\n        <PassagesContainer className=\"passages\">\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: color.background(),\n                  color: color.text(),\n                  fontFamily: 'Roboto, sans-serif',\n                  '& .MuiTabs-list': {\n                    backgroundColor: color.white(),\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) => (\n                  <TabStyled\n                    key={tab.id}\n                    id={`button-${tab.id}`}\n                    label={\n                      <>\n                        <Purpose purpose=\"passage-label\">\n                          <span\n                            className=\"passage-label\"\n                            dangerouslySetInnerHTML={{ __html: this.parsedText(tab.label) }}\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.2.5/module/index.js";import{_dll_pie_lib__config_ui as l}from"../../../@pie-lib/config-module@^4.0.10/module/index.js";import{_dll_pie_lib__editable_html_tip_tap as o}from"../../../@pie-lib/editable-html-module@^7.1.7/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};