@citolab/qti-components 6.9.1-beta.76 → 6.9.1-beta.78

package/dist/index.min.js

@@ -191,7 +191,7 @@ Make sure to test your application with a production build as repeat registratio
         ?readonly="${this.readonly}"
       />
       <div part="correct">${this._correctResponse}</div>
-    `}textChanged(e){if(this.disabled||this.readonly)return;let r=e.target;if(this.setEmptyAttribute(r.value),this._value!==r.value){this.value=r.value;let i=this.validate();this.saveResponse(r.value)}}reportValidity(){let e=this.shadowRoot.querySelector("input");if(!e)return!1;let r=this.validate();return r||e.reportValidity(),r}reset(){this._value=""}setEmptyAttribute(e){this.setAttribute("empty",e===""?"true":"false")}};X.styles=$i,l([d({type:Number,attribute:"expected-length"})],X.prototype,"expectedLength",2),l([d({type:String,attribute:"pattern-mask"})],X.prototype,"patternMask",2),l([d({type:String,attribute:"placeholder-text"})],X.prototype,"placeholderText",2),l([d({type:String,attribute:"data-patternmask-message"})],X.prototype,"dataPatternmaskMessage",2),l([E()],X.prototype,"_value",2),X=l([h("qti-text-entry-interaction")],X);var ne=(s,t)=>{class e extends s{constructor(){super(...arguments);this._choiceElements=[];this.minChoices=0;this.maxChoices=1;this._handleDisabledChange=(o,n)=>{this._choiceElements.forEach(a=>a.disabled=n)};this._handleReadonlyChange=(o,n)=>{this._choiceElements.forEach(a=>a.readonly=n)};this._value=""}_handleMaxChoicesChange(o,n){this._determineInputType()}get value(){return Array.isArray(this._value)?this._value.join(","):this._value}set value(o){if(this.maxChoices>1&&typeof o=="string"?this._value=o.split(","):this._value=o,Array.isArray(this._value)){let n=new FormData;this._value.forEach(a=>{n.append(this.responseIdentifier,a)}),this._internals.setFormValue(n)}else this._internals.setFormValue(this._value);this._updateChoiceSelection()}get correctResponse(){return this._correctResponse}set correctResponse(o){this._correctResponse=o;let n=Array.isArray(o)?o:[o];this._choiceElements.forEach(a=>{a.internals.states.delete("correct-response"),a.internals.states.delete("incorrect-response"),n.length>0&&(n.includes(a.identifier)?a.internals.states.add("correct-response"):a.internals.states.add("incorrect-response"))})}connectedCallback(){super.connectedCallback(),this.addEventListener(`register-${t}`,this._registerChoiceElement),this.addEventListener(`unregister-${t}`,this._unregisterChoiceElement),this.addEventListener(`activate-${t}`,this._choiceElementSelectedHandler)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`register-${t}`,this._registerChoiceElement),this.removeEventListener(`unregister-${t}`,this._unregisterChoiceElement),this.removeEventListener(`activate-${t}`,this._choiceElementSelectedHandler)}validate(){let o=this._choiceElements.filter(p=>this._getChoiceChecked(p)),n=o.length,a=!0,c="";return this.maxChoices!==0&&n>this.maxChoices?(a=!1,c=this.dataset.maxSelectionsMessage||`You can select at most ${this.maxChoices} choices.`):n<this.minChoices&&(a=!1,c=this.dataset.minSelectionsMessage||`You must select at least ${this.minChoices} choices.`),o.length>0&&this._internals.setValidity(a?{}:{customError:!0},c,o[n-1]||this._choiceElements[0]||this),this.reportValidity(),a}reportValidity(){return this._validationMessageElement&&(this._internals.validity.valid?(this._validationMessageElement.textContent="",this._validationMessageElement.style.display="none"):(this._validationMessageElement.textContent=this._internals.validationMessage,this._validationMessageElement.style.display="block")),this._internals.validity.valid}_registerChoiceElement(o){o.stopPropagation();let n=o.target;n.disabled=this.disabled,this._choiceElements.push(n),this._setInputType(n)}_unregisterChoiceElement(o){o.stopPropagation();let n=o.target;this._choiceElements=this._choiceElements.filter(a=>a!==n)}_determineInputType(){this._choiceElements.forEach(o=>{this._setInputType(o)})}_setInputType(o){o.internals.role=this.maxChoices===1?"radio":"checkbox",o.internals.states.add(o.internals.role)}_choiceElementSelectedHandler(o){this._toggleChoiceChecked(o.target),this.maxChoices===1&&this._choiceElements.forEach(n=>{n.identifier!==o.detail.identifier&&this._setChoiceChecked(n,!1)}),this._handleChoiceSelection()}_setChoiceChecked(o,n){var a;(a=o.internals)!=null&&a.states&&(n?(o.internals.states.add("--checked"),o.internals.ariaChecked="true"):(o.internals.states.delete("--checked"),o.internals.ariaChecked="false"))}_getChoiceChecked(o){return o.internals.states.has("--checked")}_toggleChoiceChecked(o){let n=this._getChoiceChecked(o);this._setChoiceChecked(o,!n)}_handleChoiceSelection(){let n=this._choiceElements.filter(a=>this._getChoiceChecked(a)).map(a=>a.identifier);this.value=this.maxChoices===1?n[0]||"":n,this.validate(),this.saveResponse(this._value)}_updateChoiceSelection(){let o=Array.isArray(this._value)?this._value:[this._value];this._choiceElements.forEach(n=>{let a=o.includes(n.identifier);this._setChoiceChecked(n,a)})}}return l([be("#validationMessage")],e.prototype,"_validationMessageElement",2),l([d({type:Number,attribute:"min-choices"})],e.prototype,"minChoices",2),l([d({type:Number,attribute:"max-choices"})],e.prototype,"maxChoices",2),l([M("maxChoices",{waitUntilFirstUpdate:!0})],e.prototype,"_handleMaxChoicesChange",1),l([M("disabled",{waitUntilFirstUpdate:!0})],e.prototype,"_handleDisabledChange",2),l([M("readonly",{waitUntilFirstUpdate:!0})],e.prototype,"_handleReadonlyChange",2),e};var Vt=class extends ne(x,"qti-hottext"){constructor(){super(...arguments);this.render=()=>u`<slot></slot>`}connectedCallback(){super.connectedCallback(),this.setAttribute("qti-hottext-interaction","")}};Vt=l([h("qti-hottext-interaction")],Vt);var rt=class extends B{constructor(t){if(super(t),this.it=w,t.type!==oe.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===w||t==null)return this._t=void 0,this.it=t;if(t===L)return t;if(typeof t!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;let e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}};rt.directiveName="unsafeHTML",rt.resultType=1;var ae=J(rt);var le=class extends x{constructor(){super(...arguments);this.options=[];this.correctOption="";this.dataPrompt="select"}static get styles(){return[g`
+    `}textChanged(e){if(this.disabled||this.readonly)return;let r=e.target;if(this.setEmptyAttribute(r.value),this._value!==r.value){this.value=r.value;let i=this.validate();this.saveResponse(r.value)}}reportValidity(){let e=this.shadowRoot.querySelector("input");if(!e)return!1;let r=this.validate();return r||e.reportValidity(),r}reset(){this._value=""}setEmptyAttribute(e){this.setAttribute("empty",e===""?"true":"false")}};X.styles=$i,l([d({type:Number,attribute:"expected-length"})],X.prototype,"expectedLength",2),l([d({type:String,attribute:"pattern-mask"})],X.prototype,"patternMask",2),l([d({type:String,attribute:"placeholder-text"})],X.prototype,"placeholderText",2),l([d({type:String,attribute:"data-patternmask-message"})],X.prototype,"dataPatternmaskMessage",2),l([E()],X.prototype,"_value",2),X=l([h("qti-text-entry-interaction")],X);var ne=(s,t)=>{class e extends s{constructor(){super(...arguments);this._choiceElements=[];this.minChoices=0;this.maxChoices=1;this._handleDisabledChange=(o,n)=>{this._choiceElements.forEach(a=>a.disabled=n)};this._handleReadonlyChange=(o,n)=>{this._choiceElements.forEach(a=>a.readonly=n)};this._value=""}_handleMaxChoicesChange(o,n){this._determineInputType()}get value(){return Array.isArray(this._value)?this._value.join(","):this._value}set value(o){if(this.maxChoices>1&&typeof o=="string"?this._value=o.split(","):this._value=o,Array.isArray(this._value)){let n=new FormData;this._value.forEach(a=>{n.append(this.responseIdentifier,a)}),this._internals.setFormValue(n)}else this._internals.setFormValue(this._value);this._updateChoiceSelection()}get correctResponse(){return this._correctResponse}set correctResponse(o){this._correctResponse=o;let n=Array.isArray(o)?o:[o];this._choiceElements.forEach(a=>{a.internals.states.delete("correct-response"),a.internals.states.delete("incorrect-response"),n.length>0&&(n.includes(a.identifier)?a.internals.states.add("correct-response"):a.internals.states.add("incorrect-response"))})}connectedCallback(){super.connectedCallback(),this.addEventListener(`register-${t}`,this._registerChoiceElement),this.addEventListener(`unregister-${t}`,this._unregisterChoiceElement),this.addEventListener(`activate-${t}`,this._choiceElementSelectedHandler)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`register-${t}`,this._registerChoiceElement),this.removeEventListener(`unregister-${t}`,this._unregisterChoiceElement),this.removeEventListener(`activate-${t}`,this._choiceElementSelectedHandler)}validate(){let o=this._choiceElements.filter(p=>this._getChoiceChecked(p)),n=o.length,a=!0,c="";return this.maxChoices!==0&&n>this.maxChoices?(a=!1,c=this.dataset.maxSelectionsMessage||`You can select at most ${this.maxChoices} choices.`):n<this.minChoices&&(a=!1,c=this.dataset.minSelectionsMessage||`You must select at least ${this.minChoices} choices.`),o.length>0&&this._internals.setValidity(a?{}:{customError:!0},c,o[n-1]||this._choiceElements[0]||this),this.reportValidity(),a}reportValidity(){return this._validationMessageElement&&(this._internals.validity.valid?(this._validationMessageElement.textContent="",this._validationMessageElement.style.display="none"):(this._validationMessageElement.textContent=this._internals.validationMessage,this._validationMessageElement.style.display="block")),this._internals.validity.valid}_registerChoiceElement(o){o.stopPropagation();let n=o.target;n.disabled=this.disabled,this._choiceElements.push(n),this._setInputType(n)}_unregisterChoiceElement(o){o.stopPropagation();let n=o.target;this._choiceElements=this._choiceElements.filter(a=>a!==n)}_determineInputType(){this._choiceElements.forEach(o=>{this._setInputType(o)})}_setInputType(o){this._internals.ariaLabel=this.maxChoices===1?"radio-group":"checkbox-group",o.internals.role=this.maxChoices===1?"radio":"checkbox",o.internals.states.add(o.internals.role)}_choiceElementSelectedHandler(o){this._toggleChoiceChecked(o.target),this.maxChoices===1&&this._choiceElements.forEach(n=>{n.identifier!==o.detail.identifier&&this._setChoiceChecked(n,!1)}),this._handleChoiceSelection()}_setChoiceChecked(o,n){var a;(a=o.internals)!=null&&a.states&&(n?(o.internals.states.add("--checked"),o.internals.ariaChecked="true"):(o.internals.states.delete("--checked"),o.internals.ariaChecked="false"))}_getChoiceChecked(o){return o.internals.states.has("--checked")}_toggleChoiceChecked(o){let n=this._getChoiceChecked(o);this._setChoiceChecked(o,!n)}_handleChoiceSelection(){let n=this._choiceElements.filter(a=>this._getChoiceChecked(a)).map(a=>a.identifier);this.value=this.maxChoices===1?n[0]||"":n,this.validate(),this.saveResponse(this._value)}_updateChoiceSelection(){let o=Array.isArray(this._value)?this._value:[this._value];this._choiceElements.forEach(n=>{let a=o.includes(n.identifier);this._setChoiceChecked(n,a)})}}return l([be("#validationMessage")],e.prototype,"_validationMessageElement",2),l([d({type:Number,attribute:"min-choices"})],e.prototype,"minChoices",2),l([d({type:Number,attribute:"max-choices"})],e.prototype,"maxChoices",2),l([M("maxChoices",{waitUntilFirstUpdate:!0})],e.prototype,"_handleMaxChoicesChange",1),l([M("disabled",{waitUntilFirstUpdate:!0})],e.prototype,"_handleDisabledChange",2),l([M("readonly",{waitUntilFirstUpdate:!0})],e.prototype,"_handleReadonlyChange",2),e};var Vt=class extends ne(x,"qti-hottext"){constructor(){super(...arguments);this.render=()=>u`<slot></slot>`}connectedCallback(){super.connectedCallback(),this.setAttribute("qti-hottext-interaction","")}};Vt=l([h("qti-hottext-interaction")],Vt);var rt=class extends B{constructor(t){if(super(t),this.it=w,t.type!==oe.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===w||t==null)return this._t=void 0,this.it=t;if(t===L)return t;if(typeof t!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;let e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}};rt.directiveName="unsafeHTML",rt.resultType=1;var ae=J(rt);var le=class extends x{constructor(){super(...arguments);this.options=[];this.correctOption="";this.dataPrompt="select"}static get styles(){return[g`
         :host {
           display: inline-block;
         }
@@ -259,7 +259,7 @@ Make sure to test your application with a production build as repeat registratio
   :host([orientation='horizontal']) [part='slot'] {
     flex-direction: row;
   }
-`;var $e=class extends Ri(Nt(ne(x,"qti-simple-choice"),"qti-simple-choice"),"qti-simple-choice"){render(){return u`
+`;var $e=class extends Ri(Nt(ne(x,"qti-simple-choice"),"qti-simple-choice"),"qti-simple-choice"){constructor(){super(),this._internals.role="group"}render(){return u`
       <slot name="prompt"></slot><slot part="slot"></slot>
       <div role="alert" id="validationMessage"></div>
     `}};$e.styles=ki,l([d({type:String})],$e.prototype,"orientation",2),$e=l([h("qti-choice-interaction")],$e);var it=class extends v{render(){return u`<slot></slot>`}process(){let t=new hr,e=[...this.children];t.process(e)}};it.styles=[g`
@@ -464,12 +464,12 @@ Make sure to test your application with a production build as repeat registratio
       display: flex;
       gap: 1rem;
     }
-  `,lt=l([h("qti-graphic-gap-match-interaction")],lt);var ct=class extends ne(x,"qti-hotspot-choice"){render(){return u`
+  `,lt=l([h("qti-graphic-gap-match-interaction")],lt);var ct=class extends ne(x,"qti-hotspot-choice"){constructor(){super(...arguments);this._choiceElements=[]}render(){return u`
       <slot name="prompt"></slot>
       <!-- slot for the prompt -->
       <slot></slot>
       <!-- slot for the image and hotspots -->
-    `}setHotspotOrder(t){let{identifier:e}=t.detail,r=this._choiceElements.find(o=>o.getAttribute("identifier")===e),i=this._choiceElements.length;if(!this.choiceOrdering){if(this.choiceOrdering=!0,r.order==null){if(this._choiceElements.filter(o=>o.order>0).length>=i){this.choiceOrdering=!1;return}r.order=this._choiceElements.filter(o=>!!o.order).length+1,this.choiceOrdering=!1;return}else this._choiceElements.forEach(o=>(o.order>o.order&&o.order--,o)),r.order=null;this.choiceOrdering=!1}}positionHotspotOnRegister(t){let e=this.querySelector("img"),r=t.target,i=r.getAttribute("coords"),o=r.getAttribute("shape"),n=i.split(",").map(a=>parseInt(a));De(o,n,e,r)}connectedCallback(){super.connectedCallback(),this.addEventListener("activate-qti-hotspot-choice",this.setHotspotOrder),this.addEventListener("register-qti-hotspot-choice",this.positionHotspotOnRegister)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("activate-qti-hotspot-choice",this.setHotspotOrder),this.removeEventListener("register-qti-hotspot-choice",this.positionHotspotOnRegister)}};ct.styles=[g`
+    `}setHotspotOrder(e){let{identifier:r}=e.detail,i=this._choiceElements.find(n=>n.getAttribute("identifier")===r),o=this._choiceElements.length;if(!this.choiceOrdering){if(this.choiceOrdering=!0,i.order==null){if(this._choiceElements.filter(n=>n.order>0).length>=o){this.choiceOrdering=!1;return}i.order=this._choiceElements.filter(n=>!!n.order).length+1,this.choiceOrdering=!1;return}else this._choiceElements.forEach(n=>(n.order>n.order&&n.order--,n)),i.order=null;this.choiceOrdering=!1}}positionHotspotOnRegister(e){let r=this.querySelector("img"),i=e.target,o=i.getAttribute("coords"),n=i.getAttribute("shape"),a=o.split(",").map(c=>parseInt(c));De(n,a,r,i)}connectedCallback(){super.connectedCallback(),this.addEventListener("activate-qti-hotspot-choice",this.setHotspotOrder),this.addEventListener("register-qti-hotspot-choice",this.positionHotspotOnRegister)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("activate-qti-hotspot-choice",this.setHotspotOrder),this.removeEventListener("register-qti-hotspot-choice",this.positionHotspotOnRegister)}};ct.styles=[g`
       slot:not([name='prompt']) {
         position: relative; /* qti-hotspot-choice relative to the slot */
         display: block;