@citolab/qti-components 6.9.1-beta.12 → 6.9.1-beta.13

package/dist/item.css

@@ -28,7 +28,7 @@ https://www.imsglobal.org/spec/qti/v3p0/impl#h.e0onr51nghyl
   --qti-bg-primary: var(--qti-primary);
 
   /* Text colors */
-  --qti-text-gray-500: #6b7280;
+  --qti-text-gray-500: #45484f;
   --qti-text-white: white;
 
   /* Border properties */
@@ -311,8 +311,7 @@ https://www.imsglobal.org/spec/qti/v3p0/impl#h.e0onr51nghyl
   background-color: var(--qti-bg-gray-100);
   color: var(--qti-text-gray-500);
   border-color: var(--qti-border-color-gray);
-
-  /* outline: 2px solid var(--qti-bg-gray-100); */
+  outline: 4px solid var(--qti-bg-gray-100);
 
   /* outline-color: var(--qti-text-gray-50); */
 }
@@ -1959,6 +1958,7 @@ qti-response-declaration {
           background-color: var(--qti-bg-gray-100);
           color: var(--qti-text-gray-500);
           border-color: var(--qti-border-color-gray);
+          outline: 4px solid var(--qti-bg-gray-100);
         }
 
         border-radius: var(--qti-border-radius-md);
@@ -2000,6 +2000,7 @@ qti-response-declaration {
           background-color: var(--qti-bg-gray-100);
           color: var(--qti-text-gray-500);
           border-color: var(--qti-border-color-gray);
+          outline: 4px solid var(--qti-bg-gray-100);
         }
 
         &::part(cha) {
@@ -2211,6 +2212,7 @@ qti-response-declaration {
           background-color: var(--qti-bg-gray-100);
           color: var(--qti-text-gray-500);
           border-color: var(--qti-border-color-gray);
+          outline: 4px solid var(--qti-bg-gray-100);
         }
 
         width: 100%;
@@ -2252,6 +2254,7 @@ qti-response-declaration {
           background-color: var(--qti-bg-gray-100);
           color: var(--qti-text-gray-500);
           border-color: var(--qti-border-color-gray);
+          outline: 4px solid var(--qti-bg-gray-100);
         }
 
         width: 100%;
@@ -2316,6 +2319,7 @@ qti-response-declaration {
           background-color: var(--qti-bg-gray-100);
           color: var(--qti-text-gray-500);
           border-color: var(--qti-border-color-gray);
+          outline: 4px solid var(--qti-bg-gray-100);
         }
       }
     }
@@ -2422,6 +2426,7 @@ qti-response-declaration {
           background-color: var(--qti-bg-gray-100);
           color: var(--qti-text-gray-500);
           border-color: var(--qti-border-color-gray);
+          outline: 4px solid var(--qti-bg-gray-100);
         }
 
         border-radius: var(--qti-border-radius-md);
@@ -2470,6 +2475,7 @@ qti-response-declaration {
           background-color: var(--qti-bg-gray-100);
           color: var(--qti-text-gray-500);
           border-color: var(--qti-border-color-gray);
+          outline: 4px solid var(--qti-bg-gray-100);
         }
       }
     }
@@ -2599,7 +2605,11 @@ qti-response-declaration {
 
         &[disabled] {
           &::part(dropslot) {
-            background-color: red;
+            cursor: not-allowed;
+            background-color: var(--qti-bg-gray-100);
+            color: var(--qti-text-gray-500);
+            border-color: var(--qti-border-color-gray);
+            outline: 4px solid var(--qti-bg-gray-100);
           }
         }
 
@@ -2896,6 +2906,7 @@ qti-response-declaration {
         background-color: var(--qti-bg-gray-100);
         color: var(--qti-text-gray-500);
         border-color: var(--qti-border-color-gray);
+        outline: 4px solid var(--qti-bg-gray-100);
       }
 
       &[aria-ordervalue] {
@@ -2959,6 +2970,7 @@ qti-response-declaration {
           background-color: var(--qti-bg-gray-100);
           color: var(--qti-text-gray-500);
           border-color: var(--qti-border-color-gray);
+          outline: 4px solid var(--qti-bg-gray-100);
         }
 
         width: 100%;
@@ -3000,6 +3012,7 @@ qti-response-declaration {
           background-color: var(--qti-bg-gray-100);
           color: var(--qti-text-gray-500);
           border-color: var(--qti-border-color-gray);
+          outline: 4px solid var(--qti-bg-gray-100);
         }
 
         width: 100%;

package/dist/qti-components/index.js

@@ -1,4 +1,4 @@
-import{a as Dt}from"../chunk-62FWJYVB.js";import{a as b,b as C,c as n}from"../chunk-E7TLXHQH.js";import{provide as hr}from"@lit/context";import{LitElement as fr,html as gr}from"lit";import{customElement as br,property as K}from"lit/decorators.js";function y(c,i){let e=b({waitUntilFirstUpdate:!1},i);return(t,r)=>{let{update:s}=t,o=Array.isArray(c)?c:[c];t.update=function(a){o.forEach(l=>{let p=l;if(a.has(p)){let d=a.get(p),m=this[p];d!==m&&(!e.waitUntilFirstUpdate||this.hasUpdated)&&this[r](d,m)}}),s.call(this,a)}}}import{createContext as mr}from"@lit/context";var Ht=[{identifier:"completionStatus",cardinality:"single",baseType:"string",value:"unknown",type:"outcome"},{identifier:"numAttempts",cardinality:"single",baseType:"integer",value:"0",type:"response"}],L=mr("item");var q=class extends fr{constructor(){super();this.identifier="";this.adaptive="false";this.timeDependent=null;this._handleDisabledChange=(e,t)=>{this._interactionElements.forEach(r=>r.disabled=t)};this._handleReadonlyChange=(e,t)=>this._interactionElements.forEach(r=>r.readonly=t);this._context={identifier:this.getAttribute("identifier"),variables:Ht};this._initialContext=C(b({},this._context),{variables:this._context.variables});this._feedbackElements=[];this._interactionElements=[];this.addEventListener("qti-register-variable",e=>{this._context=C(b({},this._context),{variables:[...this._context.variables,e.detail.variable]}),this._initialContext=this._context,e.stopPropagation()}),this.addEventListener("qti-register-feedback",e=>{e.stopPropagation();let t=e.detail;this._feedbackElements.push(t),t.checkShowFeedback(t.outcomeIdentifier)}),this.addEventListener("qti-register-interaction",e=>{e.stopPropagation(),this._interactionElements.push(e.target)}),this.addEventListener("end-attempt",e=>{let{responseIdentifier:t,countAttempt:r}=e.detail;this.updateResponseVariable(t,"true"),this.processResponse(r)}),this.addEventListener("qti-set-outcome-value",e=>{let{outcomeIdentifier:t,value:r}=e.detail;this.updateOutcomeVariable(t,r),e.stopPropagation()}),this.addEventListener("qti-interaction-response",this.handleUpdateResponseVariable)}get variables(){return this._context.variables.map(e=>b({identifier:e.identifier,value:e.value,type:e.type},e.type==="outcome"&&e.identifier==="SCORE"?{externalScored:e.externalScored}:{}))}set variables(e){if(!Array.isArray(e)||e.some(t=>!("identifier"in t))){console.warn("variables property should be an array of VariableDeclaration");return}this._context=C(b({},this._context),{variables:this._context.variables.map(t=>{let r=e.find(s=>s.identifier===t.identifier);return r?b(b({},t),r):t})}),this._context.variables.forEach(t=>{if(t.type==="response"){let r=this._interactionElements.find(s=>s.responseIdentifier===t.identifier);r&&(r.response=t.value)}t.type==="outcome"&&this._feedbackElements.forEach(r=>r.checkShowFeedback(t.identifier))})}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this._emit("qti-assessment-item-connected",this)}set responses(e){if(e)for(let t of e){this.getResponse(t.responseIdentifier)&&this.updateResponseVariable(t.responseIdentifier,t.response);let s=this._interactionElements.find(o=>o.getAttribute("response-identifier")===t.responseIdentifier);s&&(s.response=t.response)}}render(){return gr`<slot></slot>`}showCorrectResponse(e){let r=this._context.variables.filter(s=>"correctResponse"in s&&s.correctResponse).map(s=>({responseIdentifier:s.identifier,response:s.correctResponse}));for(let s of r){let o=this._interactionElements.find(a=>a.getAttribute("response-identifier")===s.responseIdentifier);o&&(o.correctResponse=e?s.response:"")}}processResponse(e=!0){var r;let t=this.querySelector("qti-response-processing");return!t||!t.process?!1:(t.process(),this.adaptive==="false"&&this.updateOutcomeVariable("completionStatus",this._getCompletionStatus()),e&&this.updateOutcomeVariable("numAttempts",(+((r=this._context.variables.find(s=>s.identifier==="numAttempts"))==null?void 0:r.value)+1).toString()),this._emit("qti-response-processed"),!0)}resetResponses(){this._context=this._initialContext}getResponse(e){return this.getVariable(e)}getOutcome(e){return this.getVariable(e)}getVariable(e){return this._context.variables.find(t=>t.identifier===e)||null}handleUpdateResponseVariable(e){let{responseIdentifier:t,response:r}=e.detail;this.updateResponseVariable(t,r)}updateResponseVariable(e,t){this._context=C(b({},this._context),{variables:this._context.variables.map(r=>r.identifier!==e?r:C(b({},r),{value:t}))}),this._emit("qti-interaction-changed",{item:this.identifier,responseIdentifier:e,response:Array.isArray(t)?[...t]:t}),this.adaptive==="false"&&this.updateOutcomeVariable("completionStatus",this._getCompletionStatus())}updateOutcomeVariable(e,t){var s;let r=this.getOutcome(e);if(!r){console.warn(`Can not set qti-outcome-identifier: ${e}, it is not available`);return}this._context=C(b({},this._context),{variables:this._context.variables.map(o=>o.identifier!==e?o:C(b({},o),{value:r.cardinality==="single"?t:[...o.value,t]}))}),this._feedbackElements.forEach(o=>o.checkShowFeedback(e)),this._emit("qti-outcome-changed",{item:this.identifier,outcomeIdentifier:e,value:(s=this._context.variables.find(o=>o.identifier===e))==null?void 0:s.value})}_getCompletionStatus(){return this._interactionElements.every(e=>e.validate())?"completed":this._interactionElements.some(e=>e.validate())?"incomplete":"not_attempted"}_emit(e,t=null){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,detail:t}))}};n([K({type:String})],q.prototype,"title",2),n([K({type:String})],q.prototype,"identifier",2),n([K({type:String})],q.prototype,"adaptive",2),n([K({type:String})],q.prototype,"timeDependent",2),n([K({type:Boolean})],q.prototype,"disabled",2),n([y("disabled",{waitUntilFirstUpdate:!0})],q.prototype,"_handleDisabledChange",2),n([K({type:Boolean})],q.prototype,"readonly",2),n([y("readonly",{waitUntilFirstUpdate:!0})],q.prototype,"_handleReadonlyChange",2),n([hr({context:L})],q.prototype,"_context",2),q=n([br("qti-assessment-item")],q);import{LitElement as vr}from"lit";import{customElement as yr,property as Nt}from"lit/decorators.js";var W=class extends vr{constructor(){super(...arguments);this.identifier="";this.href=""}async connectedCallback(){super.connectedCallback();let e=new Event("qti-assessment-stimulus-ref-connected",{cancelable:!0,bubbles:!0});if(this.dispatchEvent(e)){let s=this.closest("qti-assessment-item").querySelector(`[data-stimulus-idref=${this.identifier}]`);s?await this.loadAndAppendStimulus(s):console.warn(`Stimulus with data-stimulus-idref ${this.identifier} not found`)}}async loadAndAppendStimulus(e){var s;let t=this.href.substring(0,this.href.lastIndexOf("/")),r=await Dt().load(this.href).then(o=>o.path(t).htmldoc());if(r){let o=r.querySelectorAll("qti-stimulus-body, qti-stylesheet");e.append(...o),((s=r.querySelector("qti-assessment-stimulus"))==null?void 0:s.title).includes("(lijst)")&&e.classList.add("qti-stimulus-list")}}};n([Nt({type:String})],W.prototype,"identifier",2),n([Nt({type:String})],W.prototype,"href",2),W=n([yr("qti-assessment-stimulus-ref")],W);import{html as xr}from"lit";import{property as Ae}from"lit/decorators.js";var Vt={toAttribute:c=>c?"true":"false",fromAttribute:c=>c==="true"};function R(c,i){class e extends c{constructor(...s){super(...s);this.identifier="";this.tabIndex=0;this.disabled=!1;this.readonly=!1;this._internals=this.attachInternals()}handleDisabledChange(s,o){this.tabIndex=o?-1:0,o&&this.blur()}setInternalState(s,o){o&&!this._internals.states.has(s)?this._internals.states.add(s):!o&&this._internals.states.has(s)&&this._internals.states.delete(s)}connectedCallback(){super.connectedCallback(),this.addEventListener("keyup",this._onKeyUp),this.addEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`register-${i}`,{bubbles:!0,composed:!0}))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keyup",this._onKeyUp),this.removeEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`unregister-${i}`,{bubbles:!0,composed:!0}))}_onKeyUp(s){s.altKey||s.code==="Space"&&(s.preventDefault(),this._activate())}_onClick(){this.disabled||this.readonly||(this.focus(),this._activate())}_activate(){this.disabled||this.readonly||this.dispatchEvent(new CustomEvent(`activate-${i}`,{bubbles:!0,composed:!0,detail:{identifier:this.identifier}}))}render(){return xr`<slot></slot>`}}return n([Ae({type:String})],e.prototype,"identifier",2),n([Ae({type:Number,reflect:!0,attribute:"tabindex"})],e.prototype,"tabIndex",2),n([Ae({type:Boolean,reflect:!0,attribute:"aria-disabled",converter:Vt})],e.prototype,"disabled",2),n([Ae({type:Boolean,reflect:!0,attribute:"aria-readonly",converter:Vt})],e.prototype,"readonly",2),n([y("disabled",{waitUntilFirstUpdate:!0})],e.prototype,"handleDisabledChange",1),e}import{customElement as Cr}from"lit/decorators.js";import{html as qr,LitElement as Tr}from"lit";import{css as Er}from"lit";var $t=Er`
+import{a as Dt}from"../chunk-FGJTTWL5.js";import{a as b,b as C,c as n}from"../chunk-E7TLXHQH.js";import{provide as hr}from"@lit/context";import{LitElement as fr,html as gr}from"lit";import{customElement as br,property as K}from"lit/decorators.js";function y(c,i){let e=b({waitUntilFirstUpdate:!1},i);return(t,r)=>{let{update:s}=t,o=Array.isArray(c)?c:[c];t.update=function(a){o.forEach(l=>{let p=l;if(a.has(p)){let d=a.get(p),m=this[p];d!==m&&(!e.waitUntilFirstUpdate||this.hasUpdated)&&this[r](d,m)}}),s.call(this,a)}}}import{createContext as mr}from"@lit/context";var Ht=[{identifier:"completionStatus",cardinality:"single",baseType:"string",value:"unknown",type:"outcome"},{identifier:"numAttempts",cardinality:"single",baseType:"integer",value:"0",type:"response"}],L=mr("item");var q=class extends fr{constructor(){super();this.identifier="";this.adaptive="false";this.timeDependent=null;this._handleDisabledChange=(e,t)=>{this._interactionElements.forEach(r=>r.disabled=t)};this._handleReadonlyChange=(e,t)=>this._interactionElements.forEach(r=>r.readonly=t);this._context={identifier:this.getAttribute("identifier"),variables:Ht};this._initialContext=C(b({},this._context),{variables:this._context.variables});this._feedbackElements=[];this._interactionElements=[];this.addEventListener("qti-register-variable",e=>{this._context=C(b({},this._context),{variables:[...this._context.variables,e.detail.variable]}),this._initialContext=this._context,e.stopPropagation()}),this.addEventListener("qti-register-feedback",e=>{e.stopPropagation();let t=e.detail;this._feedbackElements.push(t),t.checkShowFeedback(t.outcomeIdentifier)}),this.addEventListener("qti-register-interaction",e=>{e.stopPropagation(),this._interactionElements.push(e.target)}),this.addEventListener("end-attempt",e=>{let{responseIdentifier:t,countAttempt:r}=e.detail;this.updateResponseVariable(t,"true"),this.processResponse(r)}),this.addEventListener("qti-set-outcome-value",e=>{let{outcomeIdentifier:t,value:r}=e.detail;this.updateOutcomeVariable(t,r),e.stopPropagation()}),this.addEventListener("qti-interaction-response",this.handleUpdateResponseVariable)}get variables(){return this._context.variables.map(e=>b({identifier:e.identifier,value:e.value,type:e.type},e.type==="outcome"&&e.identifier==="SCORE"?{externalScored:e.externalScored}:{}))}set variables(e){if(!Array.isArray(e)||e.some(t=>!("identifier"in t))){console.warn("variables property should be an array of VariableDeclaration");return}this._context=C(b({},this._context),{variables:this._context.variables.map(t=>{let r=e.find(s=>s.identifier===t.identifier);return r?b(b({},t),r):t})}),this._context.variables.forEach(t=>{if(t.type==="response"){let r=this._interactionElements.find(s=>s.responseIdentifier===t.identifier);r&&(r.response=t.value)}t.type==="outcome"&&this._feedbackElements.forEach(r=>r.checkShowFeedback(t.identifier))})}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this._emit("qti-assessment-item-connected",this)}set responses(e){if(e)for(let t of e){this.getResponse(t.responseIdentifier)&&this.updateResponseVariable(t.responseIdentifier,t.response);let s=this._interactionElements.find(o=>o.getAttribute("response-identifier")===t.responseIdentifier);s&&(s.response=t.response)}}render(){return gr`<slot></slot>`}showCorrectResponse(e){let r=this._context.variables.filter(s=>"correctResponse"in s&&s.correctResponse).map(s=>({responseIdentifier:s.identifier,response:s.correctResponse}));for(let s of r){let o=this._interactionElements.find(a=>a.getAttribute("response-identifier")===s.responseIdentifier);o&&(o.correctResponse=e?s.response:"")}}processResponse(e=!0){var r;let t=this.querySelector("qti-response-processing");return!t||!t.process?!1:(t.process(),this.adaptive==="false"&&this.updateOutcomeVariable("completionStatus",this._getCompletionStatus()),e&&this.updateOutcomeVariable("numAttempts",(+((r=this._context.variables.find(s=>s.identifier==="numAttempts"))==null?void 0:r.value)+1).toString()),this._emit("qti-response-processed"),!0)}resetResponses(){this._context=this._initialContext}getResponse(e){return this.getVariable(e)}getOutcome(e){return this.getVariable(e)}getVariable(e){return this._context.variables.find(t=>t.identifier===e)||null}handleUpdateResponseVariable(e){let{responseIdentifier:t,response:r}=e.detail;this.updateResponseVariable(t,r)}updateResponseVariable(e,t){this._context=C(b({},this._context),{variables:this._context.variables.map(r=>r.identifier!==e?r:C(b({},r),{value:t}))}),this._emit("qti-interaction-changed",{item:this.identifier,responseIdentifier:e,response:Array.isArray(t)?[...t]:t}),this.adaptive==="false"&&this.updateOutcomeVariable("completionStatus",this._getCompletionStatus())}updateOutcomeVariable(e,t){var s;let r=this.getOutcome(e);if(!r){console.warn(`Can not set qti-outcome-identifier: ${e}, it is not available`);return}this._context=C(b({},this._context),{variables:this._context.variables.map(o=>o.identifier!==e?o:C(b({},o),{value:r.cardinality==="single"?t:[...o.value,t]}))}),this._feedbackElements.forEach(o=>o.checkShowFeedback(e)),this._emit("qti-outcome-changed",{item:this.identifier,outcomeIdentifier:e,value:(s=this._context.variables.find(o=>o.identifier===e))==null?void 0:s.value})}_getCompletionStatus(){return this._interactionElements.every(e=>e.validate())?"completed":this._interactionElements.some(e=>e.validate())?"incomplete":"not_attempted"}_emit(e,t=null){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,detail:t}))}};n([K({type:String})],q.prototype,"title",2),n([K({type:String})],q.prototype,"identifier",2),n([K({type:String})],q.prototype,"adaptive",2),n([K({type:String})],q.prototype,"timeDependent",2),n([K({type:Boolean})],q.prototype,"disabled",2),n([y("disabled",{waitUntilFirstUpdate:!0})],q.prototype,"_handleDisabledChange",2),n([K({type:Boolean})],q.prototype,"readonly",2),n([y("readonly",{waitUntilFirstUpdate:!0})],q.prototype,"_handleReadonlyChange",2),n([hr({context:L})],q.prototype,"_context",2),q=n([br("qti-assessment-item")],q);import{LitElement as vr}from"lit";import{customElement as yr,property as Nt}from"lit/decorators.js";var W=class extends vr{constructor(){super(...arguments);this.identifier="";this.href=""}async connectedCallback(){super.connectedCallback();let e=new Event("qti-assessment-stimulus-ref-connected",{cancelable:!0,bubbles:!0});if(this.dispatchEvent(e)){let s=this.closest("qti-assessment-item").querySelector(`[data-stimulus-idref=${this.identifier}]`);s?await this.loadAndAppendStimulus(s):console.warn(`Stimulus with data-stimulus-idref ${this.identifier} not found`)}}async loadAndAppendStimulus(e){var s;let t=this.href.substring(0,this.href.lastIndexOf("/")),r=await Dt().load(this.href).then(o=>o.path(t).htmldoc());if(r){let o=r.querySelectorAll("qti-stimulus-body, qti-stylesheet");e.append(...o),((s=r.querySelector("qti-assessment-stimulus"))==null?void 0:s.title).includes("(lijst)")&&e.classList.add("qti-stimulus-list")}}};n([Nt({type:String})],W.prototype,"identifier",2),n([Nt({type:String})],W.prototype,"href",2),W=n([yr("qti-assessment-stimulus-ref")],W);import{html as xr}from"lit";import{property as Ae}from"lit/decorators.js";var Vt={toAttribute:c=>c?"true":"false",fromAttribute:c=>c==="true"};function R(c,i){class e extends c{constructor(...s){super(...s);this.identifier="";this.tabIndex=0;this.disabled=!1;this.readonly=!1;this._internals=this.attachInternals()}handleDisabledChange(s,o){this.tabIndex=o?-1:0,o&&this.blur()}setInternalState(s,o){o&&!this._internals.states.has(s)?this._internals.states.add(s):!o&&this._internals.states.has(s)&&this._internals.states.delete(s)}connectedCallback(){super.connectedCallback(),this.addEventListener("keyup",this._onKeyUp),this.addEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`register-${i}`,{bubbles:!0,composed:!0}))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keyup",this._onKeyUp),this.removeEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`unregister-${i}`,{bubbles:!0,composed:!0}))}_onKeyUp(s){s.altKey||s.code==="Space"&&(s.preventDefault(),this._activate())}_onClick(){this.disabled||this.readonly||(this.focus(),this._activate())}_activate(){this.disabled||this.readonly||this.dispatchEvent(new CustomEvent(`activate-${i}`,{bubbles:!0,composed:!0,detail:{identifier:this.identifier}}))}render(){return xr`<slot></slot>`}}return n([Ae({type:String})],e.prototype,"identifier",2),n([Ae({type:Number,reflect:!0,attribute:"tabindex"})],e.prototype,"tabIndex",2),n([Ae({type:Boolean,reflect:!0,attribute:"aria-disabled",converter:Vt})],e.prototype,"disabled",2),n([Ae({type:Boolean,reflect:!0,attribute:"aria-readonly",converter:Vt})],e.prototype,"readonly",2),n([y("disabled",{waitUntilFirstUpdate:!0})],e.prototype,"handleDisabledChange",1),e}import{customElement as Cr}from"lit/decorators.js";import{html as qr,LitElement as Tr}from"lit";import{css as Er}from"lit";var $t=Er`
   :host {
     display: block;
   }

package/dist/qti-item/index.d.ts

@@ -17,3 +17,5 @@ declare global {
         'qti-item': QtiItem;
     }
 }
+
+export { QtiItem };