@pie-element/inline-dropdown 9.0.0-beta.1 → 9.0.0-next.42

package/configure/package.json

@@ -10,14 +10,14 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "12.1.0-next.5",
-    "@pie-lib/editable-html-tip-tap": "1.1.0-next.5",
-    "@pie-lib/math-rendering": "4.1.0-next.4",
-    "@pie-lib/render-ui": "5.1.0-next.5",
+    "@pie-lib/config-ui": "12.1.1-next.0",
+    "@pie-lib/editable-html-tip-tap": "1.1.1-next.0",
+    "@pie-lib/math-rendering": "4.1.1-next.0",
+    "@pie-lib/render-ui": "5.1.1-next.0",
     "classnames": "^2.2.6",
-    "debug": "^3.1.0",
-    "lodash": "^4.17.15",
-    "prop-types": "^15.6.2",
+    "debug": "^4.1.1",
+    "lodash": "^4.17.23",
+    "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }

package/controller/package.json

@@ -8,9 +8,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@pie-lib/controller-utils": "1.1.0-next.4",
-    "debug": "^3.1.0",
-    "lodash": "^4.17.15",
+    "@pie-lib/controller-utils": "1.1.1-next.0",
+    "debug": "^4.1.1",
+    "lodash": "^4.17.23",
     "type-of": "^2.0.1"
   }
 }

package/module/configure.js

@@ -0,0 +1 @@
+import{_dll_react_dom as e,_dll_react as t,_dll_prop_types as o,_dll_mui__material_styles as i,_dll_lodash as n,_dll_pie_lib__render_ui as a,_dll_mui__icons_material as s,_dll_mui__material as l,_dll_debug as r}from"../../../@pie-lib/shared-module@^3.0.5/module/index.js";import{_dll_pie_lib__editable_html_tip_tap as c}from"../../../@pie-lib/editable-html-module@^6.0.5/module/index.js";import{_dll_pie_lib__config_ui as d}from"../../../@pie-lib/config-module@^3.0.0/module/index.js";import{_dll_pie_lib__math_rendering as p}from"../../../@pie-lib/math-rendering-module@^4.0.5/module/index.js";var h={};Object.defineProperty(h,"__esModule",{value:!0});class u extends CustomEvent{constructor(e,t=!1){super(u.TYPE,{bubbles:!0,detail:{update:e,reset:t}}),this.update=e,this.reset=t}}u.TYPE="model.updated";var g=h.ModelUpdatedEvent=u;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.image";var _=h.DeleteImageEvent=m;class C extends CustomEvent{constructor(e){super(C.TYPE,{bubbles:!0,detail:e}),this.handler=e}}C.TYPE="insert.image";var b=h.InsertImageEvent=C;class f extends CustomEvent{constructor(e,t){super(f.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}f.TYPE="delete.sound";var E=h.DeleteSoundEvent=f;class S extends CustomEvent{constructor(e){super(S.TYPE,{bubbles:!0,detail:e}),this.handler=e}}S.TYPE="insert.sound";var v,y=h.InsertSoundEvent=S,x=e;v=x.createRoot,x.hydrateRoot;const A=(e={},t={})=>({...t,...e}),R=t,k=e,I=o,{styled:M}=i,{isEqual:w}=n,{isEmpty:T}=n,{color:P}=a,{Add:D}=s,{Check:q}=s,{Close:O}=s,{Edit:z}=s,{IconButton:H}=l,L=c,{renderMath:$}=p;function B(e){let t,o=e[0],i=1;for(;i<e.length;){const n=e[i],a=e[i+1];if(i+=2,("optionalAccess"===n||"optionalCall"===n)&&null==o)return;"access"===n||"optionalAccess"===n?(t=o,o=a(o)):"call"!==n&&"optionalCall"!==n||(o=a((...e)=>o.call(t,...e)),t=void 0)}return o}const j=M("div")(({theme:e})=>({display:"flex",alignItems:"flex-start",position:"relative",background:e.palette.common.white,borderBottom:`1px solid ${e.palette.grey[400]}`,"&:last-child":{borderRadius:"0 0 4px 4px"}})),W=M("div")(({theme:e})=>({display:"flex",justifyContent:"center",color:e.palette.common.white,fontSize:e.typography.fontSize,fontStyle:"normal",position:"absolute",transform:"translate(0, -50%)",backgroundColor:P.correct(),borderRadius:"50%",top:e.spacing(2),left:e.spacing(1),zIndex:3})),Y=M("div")(({theme:e,correct:t})=>({flex:1,padding:e.spacing(.75),paddingLeft:e.spacing(3.5),...t&&{background:P.correctSecondary()}})),U=M("div")(({theme:e})=>({margin:e.spacing(.5),display:"flex"})),N=M(H)(({theme:e})=>({fontSize:e.typography.fontSize,padding:e.spacing(.5),color:e.palette.common.black}));class F extends R.Component{constructor(...e){super(...e),F.prototype.__init.call(this),F.prototype.__init2.call(this)}static __initStatic(){this.propTypes={correct:I.bool.isRequired,onClick:I.func.isRequired,onRemoveChoice:I.func.isRequired,onEditChoice:I.func.isRequired,value:I.string.isRequired}}__init(){this.onRemoveClick=e=>{const{onRemoveChoice:t}=this.props;e.preventDefault(),e.stopPropagation(),t()}}__init2(){this.onEditClick=e=>{const{onEditChoice:t}=this.props;e.preventDefault(),e.stopPropagation(),t()}}render(){const{correct:e,onClick:t,value:o}=this.props;return R.createElement(j,null,e&&R.createElement(W,{onClick:t},R.createElement(q,{fontSize:"inherit"})),R.createElement(Y,{correct:e,onClick:t,dangerouslySetInnerHTML:{__html:o}}),R.createElement(U,null,R.createElement(N,{onClick:this.onEditClick,size:"small","aria-label":"Edit"},R.createElement(z,{fontSize:"inherit"})),R.createElement(N,{onClick:this.onRemoveClick,size:"small","aria-label":"Remove"},R.createElement(O,{fontSize:"inherit"}))))}}F.__initStatic();const G=F,K=M("div")(({theme:e})=>({boxShadow:e.shadows[2],borderRadius:"4px",width:"400px"})),V=M(L)(({theme:e})=>({borderRadius:"4px",backgroundColor:e.palette.common.white,'& [data-slate-editor="true"]':{minHeight:"initial !important"}})),J=M(H)(({theme:e})=>({fontSize:e.typography.fontSize+2,padding:e.spacing(.5),color:e.palette.common.black,position:"absolute",top:"50%",right:e.spacing(2),transform:"translate(0, -50%)"})),Q=M("div")({display:"flex",flexDirection:"column","& > div:last-child":{border:"none"}}),X=M("div")(({theme:e})=>({padding:e.spacing(.5),position:"relative"}));class Z extends R.Component{constructor(...e){super(...e),Z.prototype.__init3.call(this),Z.prototype.__init4.call(this),Z.prototype.__init5.call(this),Z.prototype.__init6.call(this),Z.prototype.__init7.call(this),Z.prototype.__init8.call(this),Z.prototype.__init9.call(this),Z.prototype.__init10.call(this),Z.prototype.__init11.call(this),Z.prototype.__init12.call(this),Z.prototype.__init13.call(this),Z.prototype.__init14.call(this),Z.prototype.__init15.call(this)}static __initStatic2(){this.propTypes={node:I.object,uploadSoundSupport:I.object,onDone:I.func,choices:I.array,onAddChoice:I.func.isRequired,onCheck:I.func,onRemoveChoice:I.func.isRequired,onSelectChoice:I.func.isRequired,onToolbarDone:I.func.isRequired,editor:I.object,spellCheck:I.bool}}__init3(){this.clickedInside=!1}__init4(){this.preventDone=!1}__init5(){this.state={respAreaMarkup:"",editedChoiceIndex:-1}}componentDidMount(){const{editor:e}=this.props,t=e.view.nodeDOM(e.state.selection.from);if(1===B([t,"optionalAccess",e=>e.nodeType])){const e=t.getBoundingClientRect(),o=t.closest(".tiptap").getBoundingClientRect(),i=e.top-e.height,n=e.left-o.left;this.setState({toolbarStyle:{position:"absolute",top:`${i+e.height+40}px`,left:`${n+25}px`}})}}componentDidUpdate(){const e=k.findDOMNode(this);$(e)}__init6(){this.onRespAreaChange=e=>{this.setState({respAreaMarkup:e})}}__init7(){this.onAddChoice=()=>{const{editor:e}=this.props,{tr:t}=e.state;t.isDone=!0,e.view.dispatch(t)}}__init8(){this.onDone=e=>{const{choices:t,node:o,editor:i,onAddChoice:n,onToolbarDone:a}=this.props,{editedChoiceIndex:s}=this.state,l=(e=>{const t=document.createElement("div");return t.innerHTML=(e||"").trim(),t})(e).textContent.trim();s>=0&&B([t,"optionalAccess",e=>e[s],"optionalAccess",e=>e.correct])&&(i.commands.updateAttributes("inline_dropdown",{value:e}),a(!1)),T(l)||(n(o.attrs.index,e,s),i.commands.refreshResponseArea()),this.setState({editedChoiceIndex:-1})}}__init9(){this.onSelectChoice=(e,t)=>{const{node:o,editor:i,onToolbarDone:n,onSelectChoice:a}=this.props;i.commands.updateAttributes("inline_dropdown",{value:e}),n(!1),a(t),i.commands.refreshResponseArea()}}__init10(){this.onRemoveChoice=(e,t)=>{const{node:o,editor:i,onToolbarDone:n,onRemoveChoice:a}=this.props;console.log("LOGGING",e,o.attrs.value,w(e,o.attrs.value)),w(e,o.attrs.value)&&(i.commands.updateAttributes("explicit_constructed_response",{value:null}),n(!1)),a(t),i.commands.refreshResponseArea()}}__init11(){this.onEditChoice=(e,t)=>{this.onRespAreaChange(e),this.setState({editedChoiceIndex:t})}}__init12(){this.onKeyDown=e=>{if("Enter"===e.key)return this.preventDone=!1,this.onAddChoice(),!1}}__init13(){this.onBlur=()=>{if(this.clickedInside)return void(this.clickedInside=!1);const{node:e,choices:t,onCheck:o,onToolbarDone:i,editor:n}=this.props,a=(t||[]).find(e=>e.correct);this.onAddChoice(),(!t||t&&t.length<2||!a)&&o(()=>{const{tr:e}=n.state;e.deleteSelection(),n.view.dispatch(e),i(!1)})}}__init14(){this.onClickInside=()=>{this.clickedInside=!0}}__init15(){this.focusInput=()=>{const e=this.editorRef&&this.editorRef.rootRef&&this.editorRef.rootRef.slateEditor,t=e&&e.editorRef&&e.editorRef.element;t&&t.focus()}}render(){const{choices:e,spellCheck:t,uploadSoundSupport:o,mathMlOptions:i={},baseInputConfiguration:n={},responseAreaInputConfiguration:a={}}=this.props,{respAreaMarkup:s,toolbarStyle:l}=this.state;return l?R.createElement(K,{style:{...l,backgroundColor:"#E0E1E6"},onMouseDown:this.onClickInside},R.createElement(X,null,R.createElement(V,{ref:e=>{e&&(this.editorRef=e)},autoFocus:!0,autoSave:!0,toolbarOpts:{position:"top",alwaysVisible:!1,showDone:!1,doneOn:"blur"},markup:s,onKeyDown:this.onKeyDown,languageCharactersProps:[{language:"spanish"},{language:"special"}],onChange:e=>{this.preventDone||this.onRespAreaChange(e)},onDone:e=>{this.preventDone||this.onDone(e)},onBlur:e=>{if(!e.relatedTarget)return;const t=!(!e.relatedTarget||!e.relatedTarget.closest(".insert-character-dialog")),o=!(!e.relatedTarget||!e.relatedTarget.closest('[aria-label="Done"]'));this.preventDone=t||o,(t||o)&&(this.clickedInside=!0),this.onBlur(e)},placeholder:"Add Choice",pluginProps:A(B([a,"optionalAccess",e=>e.inputConfiguration]),n),spellCheck:t,uploadSoundSupport:o,mathMlOptions:i}),R.createElement(J,{onMouseDown:()=>this.focusInput(),onClick:()=>this.onAddChoice(),size:"small","aria-label":"Add"},R.createElement(D,{fontSize:"inherit"}))),e&&R.createElement(Q,null,e.map(({label:e,correct:t},o)=>R.createElement(G,{key:o,onClick:()=>this.onSelectChoice(e,o),onRemoveChoice:()=>this.onRemoveChoice(e,o),onEditChoice:()=>this.onEditChoice(e,o),value:e,correct:t})))):null}}Z.__initStatic2();const ee=Z,te=t,oe=e,ie=o,{styled:ne}=i,ae=c,{renderMath:se}=p,le=ne("div")(({theme:e})=>({paddingBottom:e.spacing(2.5)})),re=ne("div")(({theme:e})=>({fontSize:e.typography.fontSize-2,color:e.palette.error.main,paddingTop:e.spacing(1)}));class ce extends te.Component{static __initStatic(){this.propTypes={editableHtmlProps:ie.object.isRequired,responseAreasError:ie.string,responseAreaChoicesError:ie.string}}componentDidMount(){const e=oe.findDOMNode(this);se(e)}render(){const{editableHtmlProps:e,responseAreasError:t,responseAreaChoicesError:o}=this.props;return te.createElement(le,null,te.createElement(ae,{...e}),t&&te.createElement(re,null,t),o&&te.createElement(re,null,o))}}ce.__initStatic();const de=t,pe=e,he=o,{color:ue}=a,{cloneDeep:ge}=n,{isEqual:me}=n,{isUndefined:_e}=n,{isEmpty:Ce}=n,{reduce:be}=n,{max:fe}=n,{styled:Ee}=i,{Tooltip:Se}=l,{Typography:ve}=l,{Accordion:ye}=l,{AccordionSummary:xe}=l,{AccordionDetails:Ae}=l,{ExpandMore:Re}=s,{Info:ke}=s,Ie=c,{ALL_PLUGINS:Me}=c,{AlertDialog:we}=d,{InputContainer:Te}=d,{layout:Pe}=d,{settings:De}=d,{renderMath:qe}=p;function Oe(e){let t,o=e[0],i=1;for(;i<e.length;){const n=e[i],a=e[i+1];if(i+=2,("optionalAccess"===n||"optionalCall"===n)&&null==o)return;"access"===n||"optionalAccess"===n?(t=o,o=a(o)):"call"!==n&&"optionalCall"!==n||(o=a((...e)=>o.call(t,...e)),t=void 0)}return o}const{toggle:ze,Panel:He,dropdown:Le}=De,$e=Ee(Te)(({theme:e})=>({width:"100%",paddingTop:e.spacing(2),marginBottom:e.spacing(2)})),Be=Ee(Te)(({theme:e})=>({width:"100%",paddingTop:e.spacing(.5),marginBottom:e.spacing(2)})),je=Ee(ve)(({theme:e})=>({fontSize:e.typography.fontSize+2,marginRight:e.spacing(1)})),We=Ee("span")(({theme:e})=>({display:"flex",alignItems:"center",whiteSpace:"break-spaces",color:ue.disabled(),padding:0,fontSize:e.typography.fontSize-2,lineHeight:1})),Ye=Ee("div")(({theme:e})=>({marginBottom:e.spacing(2.5)})),Ue=Ee(Ae)({display:"block",paddingTop:0,paddingBottom:0}),Ne=Ee("div")(({theme:e})=>({display:"flex",alignItems:"center",marginBottom:e.spacing(1)})),Fe=Ee(Se)(({theme:e})=>({"& .MuiTooltip-tooltip":{fontSize:e.typography.fontSize-2,whiteSpace:"pre",maxWidth:"500px"}})),Ge=Ee("div")(({theme:e})=>({fontSize:e.typography.fontSize-2,color:e.palette.error.main,paddingTop:e.spacing(1)}));class Ke extends de.Component{constructor(...e){super(...e),Ke.prototype.__init.call(this),Ke.prototype.__init2.call(this),Ke.prototype.__init3.call(this),Ke.prototype.__init4.call(this),Ke.prototype.__init5.call(this),Ke.prototype.__init6.call(this),Ke.prototype.__init7.call(this),Ke.prototype.__init8.call(this),Ke.prototype.__init9.call(this),Ke.prototype.__init10.call(this),Ke.prototype.__init11.call(this),Ke.prototype.__init12.call(this)}static __initStatic(){this.propTypes={configuration:he.object.isRequired,model:he.object.isRequired,disableSidePanel:he.bool,onModelChanged:he.func.isRequired,onConfigurationChanged:he.func.isRequired,imageSupport:he.shape({add:he.func.isRequired,delete:he.func.isRequired}),uploadSoundSupport:he.shape({add:he.func.isRequired,delete:he.func.isRequired})}}__init(){this.state={warning:{open:!1}}}componentDidMount(){const{model:{choices:e}}=this.props;this.setState({respAreaChoices:ge(e)})}UNSAFE_componentWillReceiveProps(e){const t={};me(e.model.choices,this.props.model.choices)&&me(e.model.choices,this.state.respAreaChoices)||(t.respAreaChoices=ge(e.model.choices)),Ce(t)||this.setState(t)}componentDidUpdate(){const e=pe.findDOMNode(this);qe(e)}__init2(){this.onModelChange=e=>{this.props.onModelChanged({...this.props.model,...e})}}__init3(){this.onPromptChanged=e=>{this.onModelChange({prompt:e})}}__init4(){this.onRationaleChanged=e=>{this.onModelChange({rationale:e})}}__init5(){this.onChoiceRationaleChanged=(e,t)=>{const{model:o}=this.props,i=o.choices&&o.choices[e]&&o.choices[e].findIndex(e=>e.label===t.label&&e.value===t.value);o.choices[e]&&o.choices[e].splice(i,1,t),this.onModelChange(o)}}__init6(){this.onTeacherInstructionsChanged=e=>{this.onModelChange({teacherInstructions:e})}}__init7(){this.onMarkupChanged=e=>{this.onModelChange({slateMarkup:e})}}__init8(){this.onCheck=e=>{this.setState({warning:{open:!0,text:"Response areas with under 2 options or with no correct answers will be discarded.",onClose:()=>{this.setState({warning:{open:!1}})},onConfirm:()=>{this.setState({warning:{open:!1}},e)}}})}}__init9(){this.onChange=e=>{const{respAreaChoices:t}=this.state,o=(e=>{const t=document.createElement("div");return t.innerHTML=(e||"").trim(),t})(e),i=o.querySelectorAll('[data-type="inline_dropdown"]'),n={};i.forEach(e=>{n[e.dataset.index]=e.dataset.value||""});const a=be(t,(e,o,i)=>(_e(n[i])||(e[i]=t[i]),e),{}),s={};let l=!1;i.forEach((e,t)=>{const o=a[e.dataset.index]||[];o.length<2||!o.find(e=>e.correct)?(e.remove(),l=!0):(s[t]=a[e.dataset.index]||[],e.dataset.index=t)}),l?this.setState({warning:{open:!0,text:"Response areas with under 2 options or with no correct answers will be discarded.",onClose:()=>{this.setState({warning:{open:!1}})},onConfirm:()=>{this.setState({warning:{open:!1}},()=>this.onModelChange({choices:ge(s),slateMarkup:o.innerHTML}))}}}):this.onModelChange({choices:ge(s),slateMarkup:o.innerHTML})}}__init10(){this.onAddChoice=(e,t,o)=>{const{respAreaChoices:i}=this.state,{maxResponseAreaChoices:n}=this.props.configuration;if(i[e]&&i[e].length>=n)this.setState({warning:{open:!0,text:`There are only ${n} answers allowed per choice.`,onClose:void 0,onConfirm:()=>{this.setState({warning:{open:!1}})}}});else if(i[e]||(i[e]=[]),(i[e]||[]).find((e,i)=>e.label===t&&i!==o))this.setState({warning:{open:!0,text:"Duplicate answers are not allowed.",onClose:void 0,onConfirm:()=>{this.setState({warning:{open:!1}})}}});else{if(o>=0&&Oe([i,"access",t=>t[e],"optionalAccess",e=>e[o]]))i[e][o].label=t;else{const o=i[e]&&fe(i[e].map(e=>parseInt(e.value)).filter(e=>!isNaN(e)))||0;i[e].push({label:t,value:`${o+1}`,correct:!1})}this.onModelChange({choices:ge(i)})}}}__init11(){this.onRemoveChoice=(e,t)=>{const{respAreaChoices:o}=this.state;o[e].splice(t,1),this.onModelChange({choices:ge(o)})}}__init12(){this.onSelectChoice=(e,t)=>{const{respAreaChoices:o}=this.state;o[e]=o[e].map((e,o)=>({...e,correct:o===t})),this.onModelChange({choices:ge(o)})}}render(){const{warning:e}=this.state,{model:t,configuration:o,onConfigurationChanged:i,imageSupport:n,uploadSoundSupport:a}=this.props,{baseInputConfiguration:s={},choiceRationale:l={},contentDimensions:r={},lockChoiceOrder:c={},maxResponseAreas:d,maxImageWidth:p={},maxImageHeight:h={},partialScoring:u={},prompt:g={},rationale:m={},settingsPanelDisabled:_,spellCheck:C={},teacherInstructions:b={},template:f={},withRubric:E={},mathMlOptions:S={},language:v={},languageChoices:y={},responseAreaInputConfiguration:x={}}=o||{},{choiceRationaleEnabled:A,choices:R,errors:k,extraCSSRules:I,promptEnabled:M,rationaleEnabled:w,spellCheckEnabled:T,teacherInstructionsEnabled:P,toolbarEditorPosition:D}=t||{},{prompt:q,rationale:O,responseAreasError:z,responseAreaChoicesError:H,teacherInstructions:L}=k||{},$=p&&p.prompt,B=h&&h.prompt,j={position:"top"===D?"top":"bottom"},W=(e=>{const{maxResponseAreas:t,maxResponseAreaChoices:o}=e;return"Validation requirements:\nThere should be at least 1 "+(t?`and at most ${t} `:"")+"response area"+(t?"s":"")+" defined."+(o?`\nThere should be at most ${o} choices defined per response area.`:"")})(o),Y={partialScoring:u.settings&&ze(u.label),lockChoiceOrder:c.settings&&ze(c.label),"language.enabled":v.settings&&ze(v.label,!0),language:v.settings&&v.enabled&&Le(y.label,y.options)},U={teacherInstructionsEnabled:b.settings&&ze(b.label),rationaleEnabled:m.settings&&ze(m.label),choiceRationaleEnabled:l.settings&&ze(l.label),promptEnabled:g.settings&&ze(g.label),spellCheckEnabled:C.settings&&ze(C.label),rubricEnabled:Oe([E,"optionalAccess",e=>e.settings])&&ze(Oe([E,"optionalAccess",e=>e.label]))},N=(e={})=>({...s,...e});return de.createElement(Pe.ConfigLayout,{extraCSSRules:{names:["red","blue"],rules:"\n      .red {\n        color: red !important;\n      }\n\n      .blue {\n        color: blue !important;\n      }\n    "},dimensions:r,hideSettings:_,settings:de.createElement(He,{model:t,configuration:o,onChangeModel:e=>this.onModelChange(e),onChangeConfiguration:e=>i(e,!0),groups:{Settings:Y,Properties:U}})},P&&de.createElement($e,{label:b.label},de.createElement(Ie,{markup:t.teacherInstructions||"",onChange:this.onTeacherInstructionsChanged,imageSupport:n,nonEmpty:!1,error:L,toolbarOpts:j,pluginProps:N(Oe([b,"optionalAccess",e=>e.inputConfiguration])),spellCheck:T,maxImageWidth:p&&p.teacherInstructions||$,maxImageHeight:h&&h.teacherInstructions||B,uploadSoundSupport:a,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:S}),L&&de.createElement(Ge,null,L)),M&&de.createElement($e,{label:g.label},de.createElement(Ie,{markup:t.prompt,onChange:this.onPromptChanged,imageSupport:n,nonEmpty:!1,disableUnderline:!0,error:q,toolbarOpts:j,pluginProps:N(Oe([g,"optionalAccess",e=>e.inputConfiguration])),spellCheck:T,maxImageWidth:$,maxImageHeight:B,uploadSoundSupport:a,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:S}),q&&de.createElement(Ge,null,q)),de.createElement(Ne,null,de.createElement(je,{component:"div"},"Define Template, Choices, and Correct Responses"),de.createElement(Fe,{disableFocusListener:!0,disableTouchListener:!0,placement:"right",title:W},de.createElement(ke,{fontSize:"small",color:"primary"}))),de.createElement(ce,{responseAreasError:z,responseAreaChoicesError:H,editableHtmlProps:{pluginProps:N(Oe([f,"optionalAccess",e=>e.inputConfiguration])),activePlugins:Me,toolbarOpts:{position:"top"},extraCSSRules:{names:["red","blue"],rules:"\n      .red {\n        color: red !important;\n      }\n\n      .blue {\n        color: blue !important;\n      }\n    "},responseAreaProps:{type:"inline-dropdown",options:{duplicates:!0},maxResponseAreas:d,respAreaToolbar:(e,t,o)=>{const{respAreaChoices:i}=this.state;return()=>de.createElement(ee,{onAddChoice:this.onAddChoice,onCheck:this.onCheck,onRemoveChoice:t=>this.onRemoveChoice(e.attrs.index,t),onSelectChoice:t=>this.onSelectChoice(e.attrs.index,t),node:e,editor:t,onToolbarDone:o,choices:i[e.attrs.index],spellCheck:T,uploadSoundSupport:a,mathMlOptions:S,baseInputConfiguration:s,responseAreaInputConfiguration:x})}},spellCheck:T,markup:t.slateMarkup||"",onChange:this.onChange,imageSupport:n,disableImageAlignmentButtons:!0,disabled:!1,highlightShape:!1,error:z,uploadSoundSupport:a,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:S}}),A&&(()=>(Object.keys(R)||[]).map((e,t)=>de.createElement(Ye,{key:e},de.createElement(ye,{slotProps:{transition:{timeout:{enter:225,exit:195}}}},de.createElement(xe,{expandIcon:de.createElement(Re,null)},de.createElement(je,{component:"div"},`Rationale for response area #${t+1}`)),de.createElement(Ue,null,(R[e]||[]).map(t=>de.createElement(de.Fragment,{key:t.label},de.createElement(We,{dangerouslySetInnerHTML:{__html:`${m.label} for ${t.label} (${t.correct?"correct":"incorrect"})`}}),de.createElement(Be,null,de.createElement(Ie,{markup:t.rationale||"",spellCheck:T,onChange:o=>this.onChoiceRationaleChanged(e,{...t,rationale:o}),imageSupport:n,maxImageWidth:p&&p.rationale||$,maxImageHeight:h&&h.rationale||B,uploadSoundSupport:a,mathMlOptions:S})))))))))(),w&&de.createElement($e,{label:m.label},de.createElement(Ie,{markup:t.rationale||"",onChange:this.onRationaleChanged,imageSupport:n,error:O,toolbarOpts:j,pluginProps:N(Oe([m,"optionalAccess",e=>e.inputConfiguration])),spellCheck:T,maxImageWidth:p&&p.rationale||$,maxImageHeight:h&&h.rationale||B,uploadSoundSupport:a,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:S}),O&&de.createElement(Ge,null,O)),de.createElement(we,{open:e.open,title:"Warning",text:e.text,onClose:e.onClose,onConfirm:e.onConfirm,disableAutoFocus:!0,disableEnforceFocus:!0,disableRestoreFocus:!0}))}}Ke.__initStatic();var Ve={alternateResponse:{},choiceRationaleEnabled:!0,choices:{},disabled:!1,displayType:"block",markup:"",mode:"gather",prompt:"",promptEnabled:!0,rationale:"",rationaleEnabled:!0,shuffle:!0,studentInstructionsEnabled:!0,teacherInstructions:"",teacherInstructionsEnabled:!0,toolbarEditorPosition:"bottom"},Je={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}},prompt:{settings:!0,label:"Prompt",required:!1,inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}}},responseAreaInputConfiguration:{inputConfiguration:{audio:{disabled:!0},video:{disabled:!0},image:{disabled:!0},table:{disabled:!0},ul_list:{disabled:!0},ol_list:{disabled:!0}}},settingsPanelDisabled:!1,spellCheck:{label:"Spellcheck",settings:!1,enabled:!0},lockChoiceOrder:{settings:!0,label:"Lock Choice Order"},partialScoring:{settings:!1,label:"Allow Partial Scoring"},rationale:{settings:!0,label:"Rationale",required:!1,inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}}},teacherInstructions:{settings:!0,label:"Teacher Instructions",required:!1,inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}}},template:{inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}}},choiceRationale:{settings:!0,label:"Choice Rationale"},toolbarEditorPosition:{settings:!1,label:"Toolbar Editor Position"},maxResponseAreas:10,maxResponseAreaChoices:10,maxImageWidth:{teacherInstructions:300,prompt:300,rationale:300},maxImageHeight:{teacherInstructions:300,prompt:300,rationale:300},withRubric:{settings:!1,label:"Add Rubric"},mathMlOptions:{mmlOutput:!1,mmlEditing:!1},language:{settings:!1,label:"Specify Language",enabled:!1},languageChoices:{label:"Language Choices",options:[]}};const{escape:Qe}=n,Xe="imes|riangle|an|heta|herefore",Ze="throot|parallel|cong|approx|eq|e|sim",et=new RegExp(`(\\t(?!${Xe}))|(\\n(?!${Ze}))|(\\\\t(?!${Xe}))|(\\\\n(?!${Ze}))`,"g"),tt=e=>e.replace(et,"").replace(/\\"/g,'"').replace(/\\\//g,"/"),ot=/\{\{(\d+)\}\}/g,it=t,nt=r,{defaults:at}=n;function st(e){let t,o=e[0],i=1;for(;i<e.length;){const n=e[i],a=e[i+1];if(i+=2,("optionalAccess"===n||"optionalCall"===n)&&null==o)return;"access"===n||"optionalAccess"===n?(t=o,o=a(o)):"call"!==n&&"optionalCall"!==n||(o=a((...e)=>o.call(t,...e)),t=void 0)}return o}const lt=nt("multiple-choice:configure");class rt extends HTMLElement{static __initStatic(){this.prepareModel=(e={})=>{const t={...Ve,...e},o=e.slateMarkup||((e,t)=>tt(e).replace(ot,(e,o)=>(e=>{let o=t[e]&&t[e].find(e=>e.correct);return o&&o.value||(o={id:"",value:"",label:""}),`<span data-type="inline_dropdown" data-index="${e}" data-value="${Qe(o.label)}"></span>`})(o)))(t.markup,t.choices),i=(e=>{const t=(e=>{const t=document.createElement("div");return t.innerHTML=e.trim(),t})(tt(e));return t.querySelectorAll('[data-type="inline_dropdown"]').forEach(e=>{e.replaceWith(`{{${e.dataset.index}}}`)}),t.innerHTML})(o);return{...t,slateMarkup:o,markup:i}}}constructor(){super(),this._root=null,this._model=rt.prepareModel(),this._configuration=Je,this.onModelChanged=this.onModelChanged.bind(this),this.onConfigurationChanged=this.onConfigurationChanged.bind(this)}set model(e){this._model=rt.prepareModel(e),this._render()}set configuration(e){this._configuration=at(e,Je),st([e,"access",e=>e.language,"optionalAccess",e=>e.enabled])?st([e,"access",e=>e.languageChoices,"optionalAccess",e=>e.options,"optionalAccess",e=>e.length])&&(this._model.language=e.languageChoices.options[0].value):e.language.settings&&this._model.language?(this._configuration.language.enabled=!0,this._configuration.languageChoices.options&&this._configuration.languageChoices.options.length||(this._configuration.languageChoices.options=[]),this._configuration.languageChoices.options.find(e=>e.value===this._model.language)||this._configuration.languageChoices.options.push({value:this._model.language,label:this._model.language})):delete this._model.language,this._render()}set disableSidePanel(e){this._disableSidePanel=e,this._render()}dispatchModelUpdated(e){const t=!!e;this.dispatchEvent(new g(this._model,t))}onModelChanged(e,t){this._model=rt.prepareModel(e),this._render(),this.dispatchModelUpdated(t)}onConfigurationChanged(e){this._configuration=e,this._render()}insertImage(e){this.dispatchEvent(new b(e))}onDeleteImage(e,t){this.dispatchEvent(new _(e,t))}insertSound(e){this.dispatchEvent(new y(e))}onDeleteSound(e,t){this.dispatchEvent(new E(e,t))}_render(){lt("_render");let e=it.createElement(Ke,{model:this._model,configuration:this._configuration,onModelChanged:this.onModelChanged,onConfigurationChanged:this.onConfigurationChanged,disableSidePanel:this._disableSidePanel,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=v(this)),this._root.render(e)}disconnectedCallback(){this._root&&this._root.unmount()}}rt.__initStatic();export{rt as default};