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

package/module/demo.js

@@ -0,0 +1,57 @@
+import Configure from './configure.js';
+import Element from './element.js';
+import * as controller from './controller.js';
+
+var generate = {};
+
+generate.model = (id, element) => ({
+  id,
+  element,
+  passages: [
+    {
+      teacherInstructions: 'Teacher instructions for first tab',
+      title: 'Hope Is the Thing with Feathers',
+      subtitle: 'from <em>The Complete Poems of Emily Dickinson</em>',
+      author: 'by Emily Dickinson',
+      text: '<p><font style="visibility:hidden">00000</font>Hope is the thing with feathers<br /><font style="visibility:hidden">00000</font>That perches in the soul,<br /><font style="visibility:hidden">00000</font>And sings the tune without the words,<br /><font style="visibility:hidden">00000</font>And never stops at all,</p><p>5<font style="visibility:hidden">0000</font>And sweetest in the gale is heard;<br /><font style="visibility:hidden">00000</font>And sore must be the storm<br /><font style="visibility:hidden">00000</font>That could abash the little bird<br /><font style="visibility:hidden">00000</font>That kept so many warm.</p><p><font style="visibility:hidden">00000</font>I&#8217;ve heard it in the chillest land,<br />10<font style="visibility:hidden">000</font>And on the strangest sea;<br /><font style="visibility:hidden">00000</font>Yet, never, in extremity,<br /><font style="visibility:hidden">00000</font>It asked a crumb of me.</p>',
+    },
+    {
+      title: 'Ineskeen Road, July Evening',
+      text: `The bicycles go by in twos and threes -<br/>
+        There's a dance in Billy Brennan's barn tonight,<br/>
+        And there's the half-talk code of mysteries<br/>
+        And the wink-and-elbow language of delight.<br/>
+        Half-past eight and there is not a spot<br/>
+        Upon a mile of road, no shadow thrown<br/>
+        That might turn out a man or woman, not<br/>
+        A footfall tapping secrecies of stone. <br/>
+        <p/>
+        I have what every poet hates in spite<br/>
+        Of all the solemn talk of contemplation.<br/>
+        Oh, Alexander Selkirk knew the plight<br/>
+        Of being king and government and nation.<br/>
+        A road, a mile of kingdom. I am king<br/>
+        Of banks and stones and every blooming thing.<br/>
+        `,
+    },
+  ],
+});
+
+const { model } = generate;
+
+var config = {
+  elements: {
+    'passage-element': '../..',
+  },
+  models: [model('1', 'passage-element')],
+};
+
+//Note: demo-el is a custom element loaded in the markup.
+  customElements.whenDefined("demo-el").then(() => {
+    config.models.forEach((m) => {
+      const de = document.createElement("demo-el");
+      document.body.appendChild(de);
+      de.def = { tagName: m.element, Element, Configure, controller };
+      de.model = m;
+    });
+  });

package/module/element.js

@@ -0,0 +1 @@
+import{_dll_pie_lib__math_rendering as e}from"../../../@pie-lib/math-rendering-module@^5.0.9/module/index.js";import{_dll_react as t,_dll_prop_types as s,_dll_mui__material as i,_dll_mui__material_styles as a,_dll_pie_lib__render_ui as r,_dll_react_dom_client as n}from"../../../@pie-lib/shared-module@^5.2.4/module/index.js";var o={};Object.defineProperty(o,"__esModule",{value:!0});class l extends CustomEvent{constructor(e,t,s){super(l.TYPE,{bubbles:!0,composed:!0,detail:{complete:t,component:e,hasModel:s}}),this.component=e,this.complete=t}}l.TYPE="model-set";var d=o.ModelSetEvent=l;class c extends CustomEvent{constructor(e,t){super(c.TYPE,{bubbles:!0,composed:!0,detail:{complete:t,component:e}}),this.component=e,this.complete=t}}c.TYPE="session-changed",o.SessionChangedEvent=c;const h=t,p=s,{Tabs:m}=i,{Tab:b}=i,{styled:u}=a,{Collapsible:g}=r,{color:_}=r,{PreviewPrompt:v}=r,{Purpose:x}=r,{UiLayout:y}=r,{transformDataHeadings:f}=r;const E=u("div")({flexGrow:1,backgroundColor:_.background(),color:_.text(),"&:not(.MathJax) table":{borderCollapse:"collapse"},"&:not(.MathJax) table td, &:not(.MathJax) table th":{padding:".6em 1em",textAlign:"left"}}),T=u("div")(({theme:e})=>({backgroundColor:_.background(),color:_.text(),padding:e.spacing(2),"& blockquote":{background:"#f9f9f9",borderLeft:"5px solid #ccc",margin:"1.5em 10px",padding:".5em 10px"}})),M=u("div")({fontSize:"1.75rem"}),O=u("div")({fontSize:"1.5rem"}),k=u("div")({fontSize:"1.25rem"}),C=u(b)(({theme:e})=>({background:e.palette.common.white,fontSize:"inherit",fontFamily:"Roboto, sans-serif",color:e.palette.common.black,borderRadius:`${e.spacing(2)} ${e.spacing(2)} 0 0`,border:"1px solid #D9DADA",borderBottomWidth:0,minHeight:"56px",padding:"8px 10px",display:"flex",alignItems:"center",justifyContent:"center",margin:`0 ${e.spacing(1)}`,textTransform:"none",".passage-label":{display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"normal",margin:"auto 0",opacity:.7},"&.Mui-selected":{color:e.palette.common.black,".passage-label":{opacity:1},".passage-label-underline":{backgroundColor:"#146EB3"}},"&:hover":{".passage-label-underline":{backgroundColor:"#D0E2F0"}},"& .MuiTouchRipple-root":{opacity:.7}})),w=u("div")(({theme:e})=>({height:"2px",width:"100%",marginTop:"6px",background:e.palette.common.white}));class A extends h.Component{constructor(...e){super(...e),A.prototype.__init.call(this),A.prototype.__init2.call(this),A.prototype.__init3.call(this),A.prototype.__init4.call(this)}__init(){this.state={activeTab:0}}__init2(){this.handleChange=(e,t)=>{this.setState(()=>({activeTab:t})),setTimeout(()=>{const e=new CustomEvent("pie-ui-passage-tabChanged",{detail:{tab:t}});window.dispatchEvent(e)})}}__init3(){this.handleKeyDown=(e,t)=>{const{key:s}=e,{tabs:i}=this.props;let a=-1;const r=i.findIndex(e=>e.id===t);switch(s){case"ArrowRight":a=(r+1)%i.length;break;case"ArrowLeft":a=(r-1+i.length)%i.length;break;case"Home":a=0;break;case"End":a=i.length-1;break;case"Enter":case" ":a=r}-1!==a&&(e.preventDefault(),e.stopPropagation(),this.handleChange(e,i[a].id),document.getElementById(`button-${i[a].id}`).focus())}}__init4(){this.parsedText=(e="")=>{const t=document.createElement("div");t.innerHTML=e.replace(/(<br\/>\n)/g,"<br/>");const s=t.querySelector("audio");if(s){const e=document.createElement("source");e.setAttribute("type","audio/mp3"),e.setAttribute("src",s.getAttribute("src")),s.removeAttribute("src"),s.appendChild(e)}return t.innerHTML}}renderInstructions(e,t=!1){if(!e)return;const s=h.createElement(v,{tagName:"div",className:"prompt",defaultClassName:"teacher-instructions",prompt:e});return t?s:h.createElement(g,{labels:{hidden:"Show Teacher Instructions",visible:"Hide Teacher Instructions"}},s)}renderTab(e,t){const{baseHeadingLevel:s}=this.props,i=s?Math.min(6,Math.max(1,s)):void 0,a=s?`h${i}`:"h2",r=s?Math.min(6,Math.max(1,i+1)):void 0;return h.createElement(T,{key:e.id,id:`tabpanel-${e.id}`,role:"tabpanel","aria-labelledby":`button-${e.id}`},this.renderInstructions(e.teacherInstructions,t),e.title&&h.createElement(x,{purpose:"passage-title"},h.createElement(a,null,h.createElement(M,{dangerouslySetInnerHTML:{__html:this.parsedText(e.title)}}))),e.subtitle&&h.createElement(x,{purpose:"passage-subtitle"},h.createElement(O,{dangerouslySetInnerHTML:{__html:this.parsedText(e.subtitle)}})),e.author&&h.createElement(x,{purpose:"passage-author"},h.createElement(k,{className:"author",dangerouslySetInnerHTML:{__html:this.parsedText(e.author)}})),e.text&&h.createElement(x,{purpose:"passage-text"},h.createElement("div",{key:e.id,className:"text",dangerouslySetInnerHTML:{__html:s?f(e.text,r):e.text}})))}render(){const{model:e,tabs:t,disabledTabs:s}=this.props,{activeTab:i}=this.state;if(!function(e){let t,s=e[0],i=1;for(;i<e.length;){const a=e[i],r=e[i+1];if(i+=2,("optionalAccess"===a||"optionalCall"===a)&&null==s)return;"access"===a||"optionalAccess"===a?(t=s,s=r(s)):"call"!==a&&"optionalCall"!==a||(s=r((...e)=>s.call(t,...e)),t=void 0)}return s}([t,"optionalAccess",e=>e.length]))return;const{extraCSSRules:a}=e||{},r=(t||[]).find(e=>e.id===i);return h.createElement(y,{extraCSSRules:a},h.createElement(E,{className:"passages"},s||1===t.length?t.map(e=>this.renderTab(e,s)):h.createElement(h.Fragment,null,h.createElement(m,{sx:{position:"sticky",top:0,background:_.background(),color:_.text(),fontFamily:"Roboto, sans-serif","& .MuiTabs-list":{borderBottom:"1px solid #D9DADA"},"& .MuiTabs-indicator":{backgroundColor:"#ffffff",marginBottom:"-1px"}},value:i,onChange:this.handleChange},t.map(e=>h.createElement(C,{key:e.id,id:`button-${e.id}`,label:h.createElement(h.Fragment,null,h.createElement(x,{purpose:"passage-label"},h.createElement("span",{className:"passage-label",dangerouslySetInnerHTML:{__html:this.parsedText(e.label)}})),h.createElement(w,{className:"passage-label-underline"})),value:e.id,tabIndex:i===e.id?0:-1,"aria-controls":`tabpanel-${e.id}`,"aria-selected":i===e.id,onKeyDown:t=>this.handleKeyDown(t,e.id)}))),r?this.renderTab(r,s):null)))}}A.propTypes={tabs:p.arrayOf(p.shape({id:p.number.isRequired,label:p.string.isRequired,title:p.string.isRequired,subtitle:p.string,author:p.string,text:p.string.isRequired,teacherInstructions:p.string}).isRequired).isRequired,disabledTabs:p.bool,model:p.object,baseHeadingLevel:p.number};const{renderMath:L}=e,R=t,{createRoot:S}=n;function P(e){const t=e.closest("pie-player")||e.closest("pie-item-player");if(t){let e=t.baseHeadingLevel;null==e&&(s=t.getAttribute("base-heading-level"),i=()=>t.getAttribute("baseheadinglevel"),e=null!=s?s:i());const a=parseInt(e,10);if(Number.isFinite(a)&&a>=1&&a<=6)return a}var s,i}class H extends HTMLElement{constructor(){super(),H.prototype.__init.call(this),this._model={passages:[]},this._session=null,this._root=null,this._mathObserver=null,this._mathRenderPending=!1,this._playerObserver=null}setLangAttribute(){const e=this._model&&(this._model.language,1)?this._model.language:"",t=e?e.slice(0,2):"en";this.setAttribute("lang",t)}__init(){this._scheduleMathRender=()=>{this._mathRenderPending||(this._mathRenderPending=!0,requestAnimationFrame(()=>{this._mathObserver&&this._mathObserver.disconnect(),L(this),this._mathRenderPending=!1,setTimeout(()=>{this._mathObserver&&this._mathObserver.observe(this,{childList:!0,subtree:!0})},50)}))}}_initMathObserver(){this._mathObserver||(this._mathObserver=new MutationObserver(this._scheduleMathRender),this._mathObserver.observe(this,{childList:!0,subtree:!0}))}_disconnectMathObserver(){this._mathObserver&&(this._mathObserver.disconnect(),this._mathObserver=null)}set model(e){this._model=e,this.dispatchEvent(new d(this.tagName.toLowerCase(),this._session,!!this._model)),this.setLangAttribute(),this._render()}set session(e){this._session=e}connectedCallback(){this.setAttribute("aria-label","Passage"),this.setAttribute("role","region"),this._initMathObserver(),this._initPlayerObserver(),this._render()}_render(){const{passages:e=[]}=this._model;if(this._model.passages.length>0){const t=e.map((e,t)=>({id:t,...e})),s=R.createElement(A,{tabs:t,model:this._model,baseHeadingLevel:P(this)});this._root||(this._root=S(this)),this._root.render(s),this._initMathObserver()}}_initPlayerObserver(){const e=this.closest("pie-player")||this.closest("pie-item-player");e&&(this._playerObserver=new MutationObserver(()=>{this._render()}),this._playerObserver.observe(e,{attributes:!0,attributeFilter:["base-heading-level"]}))}_disconnectPlayerObserver(){this._playerObserver&&(this._playerObserver.disconnect(),this._playerObserver=null)}disconnectedCallback(){this._disconnectMathObserver(),this._disconnectPlayerObserver(),this._root&&this._root.unmount()}}export{H as default};

package/module/index.html

@@ -0,0 +1,21 @@
+
+  <!doctype html>
+  <html>
+    <head>
+      <title>@pie-element/passage@7.1.1</title>
+      <script
+        type="module"
+        src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>
+     
+      <link
+        href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+        rel="stylesheet"
+      />
+      <style>
+        html, body {
+          font-family: 'Roboto', sans-serif;
+        }
+      </style>
+      <script type="module" src="./demo.js"></script> 
+    </head>
+  </html>

package/module/manifest.json

@@ -0,0 +1,10 @@
+{
+  "name": "@pie-element/passage",
+  "version": "7.1.1",
+  "modules": [
+    {
+      "name": "@pie-lib/shared-module",
+      "version": "^5.2.4"
+    }
+  ]
+}

package/module/print-demo.js

@@ -0,0 +1,95 @@
+import PrintElement from './print.js';
+
+var generate = {};
+
+generate.model = (id, element) => ({
+  id,
+  element,
+  passages: [
+    {
+      teacherInstructions: 'Teacher instructions for first tab',
+      title: 'Hope Is the Thing with Feathers',
+      subtitle: 'from <em>The Complete Poems of Emily Dickinson</em>',
+      author: 'by Emily Dickinson',
+      text: '<p><font style="visibility:hidden">00000</font>Hope is the thing with feathers<br /><font style="visibility:hidden">00000</font>That perches in the soul,<br /><font style="visibility:hidden">00000</font>And sings the tune without the words,<br /><font style="visibility:hidden">00000</font>And never stops at all,</p><p>5<font style="visibility:hidden">0000</font>And sweetest in the gale is heard;<br /><font style="visibility:hidden">00000</font>And sore must be the storm<br /><font style="visibility:hidden">00000</font>That could abash the little bird<br /><font style="visibility:hidden">00000</font>That kept so many warm.</p><p><font style="visibility:hidden">00000</font>I&#8217;ve heard it in the chillest land,<br />10<font style="visibility:hidden">000</font>And on the strangest sea;<br /><font style="visibility:hidden">00000</font>Yet, never, in extremity,<br /><font style="visibility:hidden">00000</font>It asked a crumb of me.</p>',
+    },
+    {
+      title: 'Ineskeen Road, July Evening',
+      text: `The bicycles go by in twos and threes -<br/>
+        There's a dance in Billy Brennan's barn tonight,<br/>
+        And there's the half-talk code of mysteries<br/>
+        And the wink-and-elbow language of delight.<br/>
+        Half-past eight and there is not a spot<br/>
+        Upon a mile of road, no shadow thrown<br/>
+        That might turn out a man or woman, not<br/>
+        A footfall tapping secrecies of stone. <br/>
+        <p/>
+        I have what every poet hates in spite<br/>
+        Of all the solemn talk of contemplation.<br/>
+        Oh, Alexander Selkirk knew the plight<br/>
+        Of being king and government and nation.<br/>
+        A road, a mile of kingdom. I am king<br/>
+        Of banks and stones and every blooming thing.<br/>
+        `,
+    },
+  ],
+});
+
+const { model } = generate;
+
+var config = {
+  elements: {
+    'passage-element': '../..',
+  },
+  models: [model('1', 'passage-element')],
+};
+
+// new init - just shows off print!
+
+const init = async () => {
+  console.log('define the element...');
+  await Promise.all(
+    config.models.map(async (m) => {
+      try {
+        const printTag = `${m.element}-print`;
+        if (customElements.get(printTag)) {
+          return true;
+        } else {
+          customElements.define(printTag, PrintElement);
+          await customElements.whenDefined(printTag);
+          return true;
+        }
+      } catch (e) {
+        return false;
+      }
+    })
+  );
+
+  console.log('now apply the model...');
+  config.models.forEach((m) => {
+    const printTag = `${m.element}-print`;
+    const h3s = document.createElement('h3');
+    h3s.textContent = 'student mode';
+    document.body.appendChild(h3s);
+    const de = document.createElement(printTag);
+    document.body.appendChild(de);
+    de.options = {};
+    de.model = m;
+
+    const h3 = document.createElement('h3');
+    h3.textContent = 'instructor mode';
+    document.body.appendChild(h3);
+    const instr = document.createElement(printTag);
+    document.body.appendChild(instr);
+    instr.options = { mode: 'instructor' };
+    instr.model = JSON.parse(JSON.stringify(m));
+  });
+};
+
+init()
+  .then(() => {
+    console.log('ready');
+  })
+  .catch((e) => {
+    console.error(e);
+  });

package/module/print.html

@@ -0,0 +1,18 @@
+
+  <!doctype html>
+  <html>
+    <head>
+      <title>@pie-element/passage@7.1.1</title>
+      <link
+        href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+        rel="stylesheet"
+      />
+      <style>
+        html, body {
+          font-family: 'Roboto', sans-serif;
+        }
+      </style>
+      <script type="module" src="./print-demo.js"></script> 
+    </head>
+    <body></body>
+  </html>

package/module/print.js

@@ -0,0 +1 @@
+import{_dll_react as e,_dll_prop_types as t,_dll_mui__material as n,_dll_mui__material_styles as a,_dll_pie_lib__render_ui as r,_dll_debug as i,_dll_react_dom_client as o}from"../../../@pie-lib/shared-module@^5.2.4/module/index.js";var s="object"==typeof global&&global&&global.Object===Object&&global,l="object"==typeof self&&self&&self.Object===Object&&self,c=s||l||Function("return this")(),u=c.Symbol,d=Object.prototype,p=d.hasOwnProperty,b=d.toString,h=u?u.toStringTag:void 0;var m=Object.prototype.toString;var g=u?u.toStringTag:void 0;function f(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":g&&g in Object(e)?function(e){var t=p.call(e,h),n=e[h];try{e[h]=void 0;var a=!0}catch(e){}var r=b.call(e);return a&&(t?e[h]=n:delete e[h]),r}(e):function(e){return m.call(e)}(e)}var v=/\s/;var x=/^\s+/;function y(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&v.test(e.charAt(t)););return t}(e)+1).replace(x,""):e}function _(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var E=/^[-+]0x[0-9a-f]+$/i,T=/^0b[01]+$/i,k=/^0o[0-7]+$/i,C=parseInt;function w(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&"[object Symbol]"==f(e)}(e))return NaN;if(_(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=_(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=y(e);var n=T.test(e);return n||k.test(e)?C(e.slice(2),n?2:8):E.test(e)?NaN:+e}var S=function(){return c.Date.now()},M=Math.max,I=Math.min;function j(e,t,n){var a,r,i,o,s,l,c=0,u=!1,d=!1,p=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function b(t){var n=a,i=r;return a=r=void 0,c=t,o=e.apply(i,n)}function h(e){var n=e-l;return void 0===l||n>=t||n<0||d&&e-c>=i}function m(){var e=S();if(h(e))return g(e);s=setTimeout(m,function(e){var n=t-(e-l);return d?I(n,i-(e-c)):n}(e))}function g(e){return s=void 0,p&&a?b(e):(a=r=void 0,o)}function f(){var e=S(),n=h(e);if(a=arguments,r=this,l=e,n){if(void 0===s)return function(e){return c=e,s=setTimeout(m,t),u?b(e):o}(l);if(d)return clearTimeout(s),s=setTimeout(m,t),b(l)}return void 0===s&&(s=setTimeout(m,t)),o}return t=w(t)||0,_(n)&&(u=!!n.leading,i=(d="maxWait"in n)?M(w(n.maxWait)||0,t):i,p="trailing"in n?!!n.trailing:p),f.cancel=function(){void 0!==s&&clearTimeout(s),c=0,a=l=r=s=void 0},f.flush=function(){return void 0===s?o:g(S())},f}const A=e,H=t,{Tabs:L}=n,{Tab:R}=n,{styled:D}=a,{Collapsible:N}=r,{color:O}=r,{PreviewPrompt:$}=r,{Purpose:q}=r,{UiLayout:B}=r,{transformDataHeadings:F}=r;const P=D("div")({flexGrow:1,backgroundColor:O.background(),color:O.text(),"&:not(.MathJax) table":{borderCollapse:"collapse"},"&:not(.MathJax) table td, &:not(.MathJax) table th":{padding:".6em 1em",textAlign:"left"}}),W=D("div")(({theme:e})=>({backgroundColor:O.background(),color:O.text(),padding:e.spacing(2),"& blockquote":{background:"#f9f9f9",borderLeft:"5px solid #ccc",margin:"1.5em 10px",padding:".5em 10px"}})),z=D("div")({fontSize:"1.75rem"}),J=D("div")({fontSize:"1.5rem"}),K=D("div")({fontSize:"1.25rem"}),U=D(R)(({theme:e})=>({background:e.palette.common.white,fontSize:"inherit",fontFamily:"Roboto, sans-serif",color:e.palette.common.black,borderRadius:`${e.spacing(2)} ${e.spacing(2)} 0 0`,border:"1px solid #D9DADA",borderBottomWidth:0,minHeight:"56px",padding:"8px 10px",display:"flex",alignItems:"center",justifyContent:"center",margin:`0 ${e.spacing(1)}`,textTransform:"none",".passage-label":{display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"normal",margin:"auto 0",opacity:.7},"&.Mui-selected":{color:e.palette.common.black,".passage-label":{opacity:1},".passage-label-underline":{backgroundColor:"#146EB3"}},"&:hover":{".passage-label-underline":{backgroundColor:"#D0E2F0"}},"& .MuiTouchRipple-root":{opacity:.7}})),G=D("div")(({theme:e})=>({height:"2px",width:"100%",marginTop:"6px",background:e.palette.common.white}));class Q extends A.Component{constructor(...e){super(...e),Q.prototype.__init.call(this),Q.prototype.__init2.call(this),Q.prototype.__init3.call(this),Q.prototype.__init4.call(this)}__init(){this.state={activeTab:0}}__init2(){this.handleChange=(e,t)=>{this.setState(()=>({activeTab:t})),setTimeout(()=>{const e=new CustomEvent("pie-ui-passage-tabChanged",{detail:{tab:t}});window.dispatchEvent(e)})}}__init3(){this.handleKeyDown=(e,t)=>{const{key:n}=e,{tabs:a}=this.props;let r=-1;const i=a.findIndex(e=>e.id===t);switch(n){case"ArrowRight":r=(i+1)%a.length;break;case"ArrowLeft":r=(i-1+a.length)%a.length;break;case"Home":r=0;break;case"End":r=a.length-1;break;case"Enter":case" ":r=i}-1!==r&&(e.preventDefault(),e.stopPropagation(),this.handleChange(e,a[r].id),document.getElementById(`button-${a[r].id}`).focus())}}__init4(){this.parsedText=(e="")=>{const t=document.createElement("div");t.innerHTML=e.replace(/(<br\/>\n)/g,"<br/>");const n=t.querySelector("audio");if(n){const e=document.createElement("source");e.setAttribute("type","audio/mp3"),e.setAttribute("src",n.getAttribute("src")),n.removeAttribute("src"),n.appendChild(e)}return t.innerHTML}}renderInstructions(e,t=!1){if(!e)return;const n=A.createElement($,{tagName:"div",className:"prompt",defaultClassName:"teacher-instructions",prompt:e});return t?n:A.createElement(N,{labels:{hidden:"Show Teacher Instructions",visible:"Hide Teacher Instructions"}},n)}renderTab(e,t){const{baseHeadingLevel:n}=this.props,a=n?Math.min(6,Math.max(1,n)):void 0,r=n?`h${a}`:"h2",i=n?Math.min(6,Math.max(1,a+1)):void 0;return A.createElement(W,{key:e.id,id:`tabpanel-${e.id}`,role:"tabpanel","aria-labelledby":`button-${e.id}`},this.renderInstructions(e.teacherInstructions,t),e.title&&A.createElement(q,{purpose:"passage-title"},A.createElement(r,null,A.createElement(z,{dangerouslySetInnerHTML:{__html:this.parsedText(e.title)}}))),e.subtitle&&A.createElement(q,{purpose:"passage-subtitle"},A.createElement(J,{dangerouslySetInnerHTML:{__html:this.parsedText(e.subtitle)}})),e.author&&A.createElement(q,{purpose:"passage-author"},A.createElement(K,{className:"author",dangerouslySetInnerHTML:{__html:this.parsedText(e.author)}})),e.text&&A.createElement(q,{purpose:"passage-text"},A.createElement("div",{key:e.id,className:"text",dangerouslySetInnerHTML:{__html:n?F(e.text,i):e.text}})))}render(){const{model:e,tabs:t,disabledTabs:n}=this.props,{activeTab:a}=this.state;if(!function(e){let t,n=e[0],a=1;for(;a<e.length;){const r=e[a],i=e[a+1];if(a+=2,("optionalAccess"===r||"optionalCall"===r)&&null==n)return;"access"===r||"optionalAccess"===r?(t=n,n=i(n)):"call"!==r&&"optionalCall"!==r||(n=i((...e)=>n.call(t,...e)),t=void 0)}return n}([t,"optionalAccess",e=>e.length]))return;const{extraCSSRules:r}=e||{},i=(t||[]).find(e=>e.id===a);return A.createElement(B,{extraCSSRules:r},A.createElement(P,{className:"passages"},n||1===t.length?t.map(e=>this.renderTab(e,n)):A.createElement(A.Fragment,null,A.createElement(L,{sx:{position:"sticky",top:0,background:O.background(),color:O.text(),fontFamily:"Roboto, sans-serif","& .MuiTabs-list":{borderBottom:"1px solid #D9DADA"},"& .MuiTabs-indicator":{backgroundColor:"#ffffff",marginBottom:"-1px"}},value:a,onChange:this.handleChange},t.map(e=>A.createElement(U,{key:e.id,id:`button-${e.id}`,label:A.createElement(A.Fragment,null,A.createElement(q,{purpose:"passage-label"},A.createElement("span",{className:"passage-label",dangerouslySetInnerHTML:{__html:this.parsedText(e.label)}})),A.createElement(G,{className:"passage-label-underline"})),value:e.id,tabIndex:a===e.id?0:-1,"aria-controls":`tabpanel-${e.id}`,"aria-selected":a===e.id,onKeyDown:t=>this.handleKeyDown(t,e.id)}))),i?this.renderTab(i,n):null)))}}Q.propTypes={tabs:H.arrayOf(H.shape({id:H.number.isRequired,label:H.string.isRequired,title:H.string.isRequired,subtitle:H.string,author:H.string,text:H.string.isRequired,teacherInstructions:H.string}).isRequired).isRequired,disabledTabs:H.bool,model:H.object,baseHeadingLevel:H.number};const V=e,{createRoot:X}=o,Y=i("pie-element:passage:print"),Z=(e,t)=>(e=>null!=e)(e)?e:t;class ee extends HTMLElement{constructor(){super(),this._model=null,this._options=null,this._session=[],this._root=null,this._rerender=j(()=>{if(this._model&&this._session){if(this._model.passages&&this._model.passages.length>0){const e=((e,t)=>{const n="instructor"===t.role,a=Z(e.teacherInstructionsEnabled,!0),r=Z(e.titleEnabled,!0),i=Z(e.authorEnabled,!1),o=Z(e.subtitleEnabled,!0),s=Z(e.textEnabled,!0);return e.passages.map((e,t)=>({id:t,teacherInstructions:Z(e.teacherInstructionsEnabled,a)&&n&&e.teacherInstructions||"",label:e.title||`Passage ${t+1}`,title:Z(e.titleEnabled,r)&&e.title||"",author:Z(e.authorEnabled,i)&&e.author||"",subtitle:Z(e.subtitleEnabled,o)&&e.subtitle||"",text:Z(e.textEnabled,s)&&e.text||""}))})(this._model,this._options),t=V.createElement(Q,{disabledTabs:!0,tabs:e});this._root||(this._root=X(this)),this._root.render(t)}}else Y("skip")},50,{leading:!1,trailing:!0})}set model(e){this._model=e,this._rerender()}set options(e){this._options=e}connectedCallback(){}disconnectedCallback(){this._root&&this._root.unmount()}}export{ee as default};

package/package.json

@@ -1,100 +1,33 @@
 {
   "name": "@pie-element/passage",
-  "version": "7.1.2-next.2",
+  "repository": "pie-framework/pie-elements",
+  "version": "7.1.2",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "",
+  "author": "pie framework developers",
+  "license": "ISC",
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/render-ui": "6.1.1-next.37",
+    "@pie-framework/pie-player-events": "^0.1.0",
+    "@pie-lib/math-rendering": "5.0.2",
+    "@pie-lib/render-ui": "6.1.1",
     "prop-types": "^15.8.1",
-    "@pie-lib/config-ui": "13.0.4-next.30",
-    "@pie-element/shared-configure-events": "0.1.0",
-    "@pie-lib/editable-html-tip-tap": "2.1.2-next.30",
-    "@pie-element/shared-lodash": "0.1.1-next.0",
-    "@pie-element/shared-player-events": "0.1.0",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.1-next.0",
-    "debug": "^4.4.3"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./delivery": {
-      "types": "./dist/delivery/index.d.ts",
-      "default": "./dist/delivery/index.js"
-    },
-    "./browser/delivery": {
-      "default": "./dist/browser/delivery/index.js"
-    },
-    "./author": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./browser/author": {
-      "default": "./dist/browser/author/index.js"
-    },
-    "./configure": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./controller": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    },
-    "./controller.js": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    },
-    "./browser/controller": {
-      "default": "./dist/browser/controller/index.js"
-    },
-    "./print": {
-      "types": "./dist/print/index.d.ts",
-      "default": "./dist/print/index.js"
-    },
-    "./browser/print": {
-      "default": "./dist/browser/print/index.js"
-    },
-    "./runtime-support": {
-      "types": "./dist/runtime-support.d.ts",
-      "default": "./dist/runtime-support.js"
-    }
-  },
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "configure.js",
-    "controller.js",
-    "dist"
-  ],
-  "sideEffects": false,
-  "devDependencies": {
-    "vite": "^8.0.1",
-    "typescript": "^5.9.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
+  "gitHead": "206ff17a94e8e197744d059f97ad2b9a1bc9145d",
   "scripts": {
-    "build": "bun x vite build && bun x vite build --config ../../../tools/vite/element-browser.config.ts && bun x vite build --config vite.config.iife.ts && bun x tsc --emitDeclarationOnly",
-    "dev": "bun x vite",
-    "demo": "bun x vite --mode demo",
-    "test": "bun x vitest run"
+    "postpublish": "../../scripts/postpublish"
   },
-  "pie": {
-    "controller": "@pie-element/passage/controller",
-    "configure": "@pie-element/passage/configure",
-    "browserSharedDependencies": {
-      "react": "18.2.0",
-      "react-dom": "18.2.0"
-    }
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./print": "./src/print.js"
   }
 }

package/configure.js

@@ -1,2 +0,0 @@
-export { default } from './dist/author/index.js';
-export * from './dist/author/index.js';

package/controller.js

@@ -1 +0,0 @@
-export * from './dist/controller/index.js';

package/dist/author/common.d.ts

@@ -1,36 +0,0 @@
-/**
- * @synced-from pie-elements/packages/passage/configure/src/common.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-export declare const RemoveAddButton: ({ label, type, onClick }: {
-    label: any;
-    type?: string | undefined;
-    onClick: any;
-}) => React.JSX.Element;
-export declare const PassageButton: any;
-export declare const ConfirmationDialog: {
-    ({ content, cancel, title, ok, open, onOk, onCancel }: {
-        content: any;
-        cancel: any;
-        title: any;
-        ok: any;
-        open: any;
-        onOk: any;
-        onCancel: any;
-    }): React.JSX.Element;
-    propTypes: {
-        content: PropTypes.Validator<string>;
-        title: PropTypes.Validator<string>;
-        cancel: PropTypes.Validator<string>;
-        ok: PropTypes.Validator<string>;
-        open: PropTypes.Validator<boolean>;
-        onCancel: PropTypes.Validator<(...args: any[]) => any>;
-        onOk: PropTypes.Validator<(...args: any[]) => any>;
-    };
-};

package/dist/author/common.js

@@ -1,56 +0,0 @@
-import "react";
-import e from "prop-types";
-import { styled as t } from "@mui/material/styles";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Button as i } from "@mui/material";
-import a from "@mui/icons-material/RemoveCircle";
-import o from "@mui/icons-material/AddCircle";
-import s from "@mui/material/Dialog";
-import c from "@mui/material/DialogTitle";
-import l from "@mui/material/DialogContent";
-import u from "@mui/material/DialogContentText";
-import d from "@mui/material/DialogActions";
-var f = t(({ label: e, type: t = "add", onClick: s }) => /* @__PURE__ */ r(i, {
-	color: "primary",
-	size: "small",
-	onClick: s,
-	children: [/* @__PURE__ */ n(t === "add" ? o : a, {
-		fontSize: "small",
-		color: "primary",
-		style: { marginRight: 4 }
-	}), e]
-}))({
-	textDecoration: "underline",
-	"&:hover": {
-		textDecoration: "underline",
-		backgroundColor: "transparent"
-	},
-	display: "flex",
-	alignItems: "center"
-}), p = ({ content: e, cancel: t, title: a, ok: o, open: f, onOk: p, onCancel: m }) => /* @__PURE__ */ r(s, {
-	open: f,
-	children: [
-		/* @__PURE__ */ n(c, { children: a }),
-		/* @__PURE__ */ n(l, { children: /* @__PURE__ */ n(u, { children: e }) }),
-		/* @__PURE__ */ r(d, { children: [p && /* @__PURE__ */ n(i, {
-			onClick: p,
-			color: "primary",
-			children: o
-		}), m && /* @__PURE__ */ n(i, {
-			onClick: m,
-			color: "primary",
-			children: t
-		})] })
-	]
-});
-p.propTypes = {
-	content: e.string.isRequired,
-	title: e.string.isRequired,
-	cancel: e.string.isRequired,
-	ok: e.string.isRequired,
-	open: e.bool.isRequired,
-	onCancel: e.func.isRequired,
-	onOk: e.func.isRequired
-};
-//#endregion
-export { p as ConfirmationDialog, f as PassageButton };

package/dist/author/defaults.d.ts

@@ -1,175 +0,0 @@
-/**
- * @synced-from pie-elements/packages/passage/configure/src/defaults.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-declare const _default: {
-    model: {
-        authorEnabled: boolean;
-        passages: {
-            teacherInstructions: string;
-            title: string;
-            subtitle: string;
-            author: string;
-            text: string;
-        }[];
-        subtitleEnabled: boolean;
-        teacherInstructionsEnabled: boolean;
-        textEnabled: boolean;
-        titleEnabled: boolean;
-    };
-    configuration: {
-        baseInputConfiguration: {
-            audio: {
-                disabled: boolean;
-            };
-            video: {
-                disabled: boolean;
-            };
-            image: {
-                disabled: boolean;
-            };
-            h3: {
-                disabled: boolean;
-            };
-            blockquote: {
-                disabled: boolean;
-            };
-            textAlign: {
-                disabled: boolean;
-            };
-            showParagraphs: {
-                disabled: boolean;
-            };
-            separateParagraphs: {
-                disabled: boolean;
-            };
-        };
-        settingsPanelDisabled: boolean;
-        title: {
-            settings: boolean;
-            label: string;
-            inputConfiguration: {
-                audio: {
-                    disabled: boolean;
-                };
-                video: {
-                    disabled: boolean;
-                };
-                image: {
-                    disabled: boolean;
-                };
-                textAlign: {
-                    disabled: boolean;
-                };
-            };
-            required: boolean;
-        };
-        subtitle: {
-            settings: boolean;
-            label: string;
-            inputConfiguration: {
-                audio: {
-                    disabled: boolean;
-                };
-                video: {
-                    disabled: boolean;
-                };
-                image: {
-                    disabled: boolean;
-                };
-                textAlign: {
-                    disabled: boolean;
-                };
-            };
-            required: boolean;
-        };
-        author: {
-            settings: boolean;
-            label: string;
-            inputConfiguration: {
-                audio: {
-                    disabled: boolean;
-                };
-                video: {
-                    disabled: boolean;
-                };
-                image: {
-                    disabled: boolean;
-                };
-            };
-            required: boolean;
-        };
-        text: {
-            settings: boolean;
-            label: string;
-            inputConfiguration: {
-                audio: {
-                    disabled: boolean;
-                };
-                video: {
-                    disabled: boolean;
-                };
-                image: {
-                    disabled: boolean;
-                };
-                h3: {
-                    disabled: boolean;
-                };
-                blockquote: {
-                    disabled: boolean;
-                };
-                textAlign: {
-                    disabled: boolean;
-                };
-            };
-            required: boolean;
-        };
-        teacherInstructions: {
-            settings: boolean;
-            label: string;
-            inputConfiguration: {
-                audio: {
-                    disabled: boolean;
-                };
-                video: {
-                    disabled: boolean;
-                };
-                image: {
-                    disabled: boolean;
-                };
-            };
-            required: boolean;
-        };
-        maxImageWidth: {
-            teacherInstructions: number;
-            text: number;
-        };
-        maxImageHeight: {
-            teacherInstructions: number;
-            text: number;
-        };
-        mathMlOptions: {
-            mmlOutput: boolean;
-            mmlEditing: boolean;
-        };
-        language: {
-            settings: boolean;
-            label: string;
-            enabled: boolean;
-        };
-        languageChoices: {
-            label: string;
-            options: never[];
-        };
-        additionalPassage: {
-            settings: boolean;
-            label: string;
-            enabled: boolean;
-        };
-    };
-};
-export default _default;