@citolab/qti-components 6.9.1-beta.72 → 6.9.1-beta.74

package/dist/index.min.js

@@ -23,7 +23,7 @@ Make sure to test your application with a production build as repeat registratio
     <xsl:apply-templates/>
   </xsl:element>
 </xsl:template>
-</xsl:stylesheet>`;function mi(s,t,e){s.querySelectorAll(t).forEach(r=>{let i=`${t}-${e}`,o=gi(r,i);r.replaceWith(o)})}function fi(s,t){s.querySelectorAll("*").forEach(e=>{let r=e.classList;r&&r.forEach(i=>{if(i.startsWith(`${t}:`)){let o=i.slice(`${t}:`.length),n=`${e.nodeName}-${o}`,a=gi(e,n);e.replaceWith(a)}})})}function gi(s,t){let e=document.createElement(t);for(let r of s.attributes)e.setAttribute(r.name,r.value);for(;s.firstChild;)e.appendChild(s.firstChild);return e}function bi(s){let t=[];return s.querySelectorAll("qti-assessment-item-ref").forEach(e=>{let r=e.getAttribute("identifier"),i=e.getAttribute("href"),o=e.getAttribute("category");t.push({identifier:r,href:i,category:o})}),t}var lr=null;function qe(s,t=!1){return t&&lr!==null&&lr.abort(),new Promise((e,r)=>{let i=new XMLHttpRequest;lr=i,i.open("GET",s,!0),i.responseType="document",i.onload=()=>{i.status>=200&&i.status<300?e(i.responseXML):r(i.statusText)},i.onerror=()=>{r(i.statusText)},i.send()})}function Ae(s){return new DOMParser().parseFromString(s,"text/xml")}function Te(s){let t=new XSLTProcessor,e=new DOMParser().parseFromString(hs,"text/xml");return t.importStylesheet(e),t.transformToFragment(s,document)}function vi(s,t){t.endsWith("/")||(t+="/"),s.querySelectorAll("[src],[href],[primary-path]").forEach(e=>{var o;let r="";e.getAttribute("src")&&(r="src"),e.getAttribute("href")&&(r="href"),e.getAttribute("primary-path")&&(r="primary-path");let i=(o=e.getAttribute(r))==null?void 0:o.trim();if(!i.startsWith("data:")&&!i.startsWith("http")){let n=t+encodeURI(i);e.setAttribute(r,n)}})}function yi(s){s.querySelectorAll('qti-custom-operator[class="js.org"] > qti-base-value').forEach(e=>{let r=document.createComment(e.textContent);e.replaceChild(r,e.firstChild)})}function xi(s){s.querySelectorAll("qti-stylesheet").forEach(t=>t.remove())}var St=()=>{let s,t={async load(e,r=!1){return new Promise((i,o)=>{qe(e,r).then(n=>(s=n,t.path(e.substring(0,e.lastIndexOf("/"))),i(t)))})},parse(e){return s=Ae(e),t},path:e=>(vi(s,e),t),fn(e){return e(s),t},pciHooks(e){let r=["hook","module"],i=e.substring(0,e.lastIndexOf("/"));for(let o of r)s.querySelectorAll("["+o+"]").forEach(a=>{let c=a.getAttribute(o);!c.startsWith("data:")&&!c.startsWith("http")&&(a.setAttribute("base-url",e),a.setAttribute("module",i+"/"+encodeURI(c+(c.endsWith(".js")?"":".js"))))});return t},extendElementName:(e,r)=>(mi(s,e,r),t),extendElementsWithClass:(e="extend")=>(fi(s,e),t),customInteraction(e,r){let i=s.querySelector("qti-custom-interaction"),o=i.querySelector("object");return i.setAttribute("data-base-ref",e),i.setAttribute("data-base-item",e+r),i.setAttribute("data",o.getAttribute("data")),i.setAttribute("width",o.getAttribute("width")),i.setAttribute("height",o.getAttribute("height")),i.removeChild(o),t},convertCDATAtoComment(){return yi(s),t},stripStyleSheets(){return xi(s),t},html(){return new XMLSerializer().serializeToString(Te(s))},xml(){return new XMLSerializer().serializeToString(s)},htmlDoc(){return Te(s)},xmlDoc(){return s}};return t};var Ei=()=>{let s,t={async load(e){return new Promise((r,i)=>{qe(e).then(o=>(s=o,r(t)))})},parse(e){s=Ae(e)},assessmentTest(){let e=s.querySelector('resource[type="imsqti_test_xmlv3p0"]');return{href:e.getAttribute("href"),identifier:e.getAttribute("identifier")}}};return t};var cr=()=>{let s,t={async load(e){return new Promise((r,i)=>{qe(e).then(o=>(s=o,r(t)))})},parse(e){return s=Ae(e),t},fn(e){return e(s),t},items(){return bi(s)},html(){return new XMLSerializer().serializeToString(Te(s))},xml(){return new XMLSerializer().serializeToString(s)},htmlDoc(){return Te(s)},xmlDoc(){return s}};return t};var Se=class extends v{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 o=this.closest("qti-assessment-item").querySelector(`[data-stimulus-idref=${this.identifier}]`);o?await this.updateStimulusRef(o):console.warn(`Stimulus with data-stimulus-idref ${this.identifier} not found`)}}async updateStimulusRef(e){let r=this.href.substring(0,this.href.lastIndexOf("/")),i=await St().load(this.href).then(o=>o.path(r).htmlDoc());if(i){let o=i.querySelectorAll("qti-stimulus-body, qti-stylesheet");e.innerHTML="",e.append(...o)}}};l([d({type:String})],Se.prototype,"identifier",2),l([d({type:String})],Se.prototype,"href",2),Se=l([h("qti-assessment-stimulus-ref")],Se);var Ci={toAttribute:s=>s?"true":"false",fromAttribute:s=>s==="true"};function O(s,t){class e extends s{constructor(...o){super(...o);this.identifier="";this.tabIndex=0;this.disabled=!1;this.readonly=!1;this.internals=this.attachInternals()}handleDisabledChange(o,n){this.tabIndex=n?-1:0,n&&this.blur()}connectedCallback(){super.connectedCallback(),this.addEventListener("keyup",this._onKeyUp),this.addEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`register-${t}`,{bubbles:!0,composed:!0}))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keyup",this._onKeyUp),this.removeEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`unregister-${t}`,{bubbles:!0,composed:!0}))}_onKeyUp(o){o.altKey||o.code==="Space"&&(o.preventDefault(),this._activate())}_onClick(){this.disabled||this.readonly||(this.focus(),this._activate())}_activate(){this.disabled||this.readonly||this.dispatchEvent(new CustomEvent(`activate-${t}`,{bubbles:!0,composed:!0,detail:{identifier:this.identifier}}))}render(){return u`<slot></slot>`}}return l([d({type:String})],e.prototype,"identifier",2),l([d({type:Number,reflect:!0,attribute:"tabindex"})],e.prototype,"tabIndex",2),l([d({type:Boolean,reflect:!0,attribute:"aria-disabled",converter:Ci})],e.prototype,"disabled",2),l([d({type:Boolean,reflect:!0,attribute:"aria-readonly",converter:Ci})],e.prototype,"readonly",2),l([M("disabled",{waitUntilFirstUpdate:!0})],e.prototype,"handleDisabledChange",1),e}var _i=g`
+</xsl:stylesheet>`;function mi(s,t,e){s.querySelectorAll(t).forEach(r=>{let i=`${t}-${e}`,o=gi(r,i);r.replaceWith(o)})}function fi(s,t){s.querySelectorAll("*").forEach(e=>{let r=e.classList;r&&r.forEach(i=>{if(i.startsWith(`${t}:`)){let o=i.slice(`${t}:`.length),n=`${e.nodeName}-${o}`,a=gi(e,n);e.replaceWith(a)}})})}function gi(s,t){let e=document.createElement(t);for(let r of s.attributes)e.setAttribute(r.name,r.value);for(;s.firstChild;)e.appendChild(s.firstChild);return e}function bi(s){let t=[];return s.querySelectorAll("qti-assessment-item-ref").forEach(e=>{let r=e.getAttribute("identifier"),i=e.getAttribute("href"),o=e.getAttribute("category");t.push({identifier:r,href:i,category:o})}),t}var lr=null;function qe(s,t=!1){return t&&lr!==null&&lr.abort(),new Promise((e,r)=>{let i=new XMLHttpRequest;lr=i,i.open("GET",s,!0),i.responseType="document",i.onload=()=>{i.status>=200&&i.status<300?e(i.responseXML):r(i.statusText)},i.onerror=()=>{r(i.statusText)},i.send()})}function Ae(s){return new DOMParser().parseFromString(s,"text/xml")}function Te(s){let t=new XSLTProcessor,e=new DOMParser().parseFromString(hs,"text/xml");return t.importStylesheet(e),t.transformToFragment(s,document)}function vi(s,t){t.endsWith("/")||(t+="/"),s.querySelectorAll("[src],[href],[primary-path]").forEach(e=>{var o;let r="";e.getAttribute("src")&&(r="src"),e.getAttribute("href")&&(r="href"),e.getAttribute("primary-path")&&(r="primary-path");let i=(o=e.getAttribute(r))==null?void 0:o.trim();if(!i.startsWith("data:")&&!i.startsWith("http")){let n=t+encodeURI(i);e.setAttribute(r,n)}})}function yi(s){s.querySelectorAll('qti-custom-operator[class="js.org"] > qti-base-value').forEach(e=>{let r=document.createComment(e.textContent);e.replaceChild(r,e.firstChild)})}function xi(s){s.querySelectorAll("qti-stylesheet").forEach(t=>t.remove())}var St=()=>{let s,t={async load(e,r=!1){return new Promise((i,o)=>{qe(e,r).then(n=>(s=n,t.path(e.substring(0,e.lastIndexOf("/"))),i(t)))})},parse(e){return s=Ae(e),t},path:e=>(vi(s,e),t),fn(e){return e(s),t},pciHooks(e){let r=["hook","module"],i=e.substring(0,e.lastIndexOf("/"));for(let o of r)s.querySelectorAll("["+o+"]").forEach(a=>{let c=a.getAttribute(o);!c.startsWith("data:")&&!c.startsWith("http")&&(a.setAttribute("base-url",e),a.setAttribute("module",i+"/"+encodeURI(c+(c.endsWith(".js")?"":".js"))))});return t},extendElementName:(e,r)=>(mi(s,e,r),t),extendElementsWithClass:(e="extend")=>(fi(s,e),t),customInteraction(e,r){let i=s.querySelector("qti-custom-interaction"),o=i.querySelector("object");return i.setAttribute("data-base-ref",e),i.setAttribute("data-base-item",e+r),i.setAttribute("data",o.getAttribute("data")),i.setAttribute("width",o.getAttribute("width")),i.setAttribute("height",o.getAttribute("height")),i.removeChild(o),t},convertCDATAtoComment(){return yi(s),t},stripStyleSheets(){return xi(s),t},html(){return new XMLSerializer().serializeToString(Te(s))},xml(){return new XMLSerializer().serializeToString(s)},htmlDoc(){return Te(s)},xmlDoc(){return s}};return t};var Ei=()=>{let s,t={async load(e){return new Promise((r,i)=>{qe(e).then(o=>(s=o,r(t)))})},parse(e){s=Ae(e)},assessmentTest(){let e=s.querySelector('resource[type="imsqti_test_xmlv3p0"]');return{href:e.getAttribute("href"),identifier:e.getAttribute("identifier")}}};return t};var cr=()=>{let s,t={async load(e){return new Promise((r,i)=>{qe(e).then(o=>(s=o,r(t)))})},parse(e){return s=Ae(e),t},fn(e){return e(s),t},items(){return bi(s)},html(){return new XMLSerializer().serializeToString(Te(s))},xml(){return new XMLSerializer().serializeToString(s)},htmlDoc(){return Te(s)},xmlDoc(){return s}};return t};var Se=class extends v{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 o=this.closest("qti-assessment-item").querySelector(`[data-stimulus-idref=${this.identifier}]`);o?await this.updateStimulusRef(o):console.warn(`Stimulus with data-stimulus-idref ${this.identifier} not found`)}}async updateStimulusRef(e){let r=this.href.substring(0,this.href.lastIndexOf("/")),i=await St().load(this.href).then(o=>o.htmlDoc());if(i){let o=i.querySelectorAll("qti-stimulus-body, qti-stylesheet");e.innerHTML="",e.append(...o)}}};l([d({type:String})],Se.prototype,"identifier",2),l([d({type:String})],Se.prototype,"href",2),Se=l([h("qti-assessment-stimulus-ref")],Se);var Ci={toAttribute:s=>s?"true":"false",fromAttribute:s=>s==="true"};function O(s,t){class e extends s{constructor(...o){super(...o);this.identifier="";this.tabIndex=0;this.disabled=!1;this.readonly=!1;this.internals=this.attachInternals()}handleDisabledChange(o,n){this.tabIndex=n?-1:0,n&&this.blur()}connectedCallback(){super.connectedCallback(),this.addEventListener("keyup",this._onKeyUp),this.addEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`register-${t}`,{bubbles:!0,composed:!0}))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keyup",this._onKeyUp),this.removeEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`unregister-${t}`,{bubbles:!0,composed:!0}))}_onKeyUp(o){o.altKey||o.code==="Space"&&(o.preventDefault(),this._activate())}_onClick(){this.disabled||this.readonly||(this.focus(),this._activate())}_activate(){this.disabled||this.readonly||this.dispatchEvent(new CustomEvent(`activate-${t}`,{bubbles:!0,composed:!0,detail:{identifier:this.identifier}}))}render(){return u`<slot></slot>`}}return l([d({type:String})],e.prototype,"identifier",2),l([d({type:Number,reflect:!0,attribute:"tabindex"})],e.prototype,"tabIndex",2),l([d({type:Boolean,reflect:!0,attribute:"aria-disabled",converter:Ci})],e.prototype,"disabled",2),l([d({type:Boolean,reflect:!0,attribute:"aria-readonly",converter:Ci})],e.prototype,"readonly",2),l([M("disabled",{waitUntilFirstUpdate:!0})],e.prototype,"handleDisabledChange",1),e}var _i=g`
   :host {
     display: block;
   }

package/dist/item.css

@@ -304,6 +304,14 @@
   background-color: var(--qti-bg-active);
 }
 
+.act-bg {
+  background-color: var(--qti-bg-active);
+}
+
+.act-bor {
+  border-color: var(--qti-border-active);
+}
+
 /* Apply .rdo for readonly state */
 
 .rdo {
@@ -1075,11 +1083,11 @@
 }
 
 .qti-height-1-3 {
-  height: 33.333333%;
+  height: 33.3333%;
 }
 
 .qti-height-2-3 {
-  height: 66.666667%;
+  height: 66.6667%;
 }
 
 .qti-height-1-4 {
@@ -1111,11 +1119,11 @@
 }
 
 .qti-height-1-6 {
-  height: 16.666667%;
+  height: 16.6667%;
 }
 
 .qti-height-2-6 {
-  height: 33.333333%;
+  height: 33.3333%;
 }
 
 .qti-height-3-6 {
@@ -1123,11 +1131,11 @@
 }
 
 .qti-height-4-6 {
-  height: 66.666667%;
+  height: 66.6667%;
 }
 
 .qti-height-5-6 {
-  height: 83.333333%;
+  height: 83.3333%;
 }
 
 .qti-height-auto {
@@ -1291,11 +1299,11 @@
 }
 
 .qti-width-1-3 {
-  width: 33.333333%;
+  width: 33.3333%;
 }
 
 .qti-width-2-3 {
-  width: 66.666667%;
+  width: 66.6667%;
 }
 
 .qti-width-1-4 {
@@ -1327,11 +1335,11 @@
 }
 
 .qti-width-1-6 {
-  width: 16.666667%;
+  width: 16.6667%;
 }
 
 .qti-width-2-6 {
-  width: 33.333333%;
+  width: 33.3333%;
 }
 
 .qti-width-3-6 {
@@ -1339,19 +1347,19 @@
 }
 
 .qti-width-4-6 {
-  width: 66.666667%;
+  width: 66.6667%;
 }
 
 .qti-width-5-6 {
-  width: 83.333333%;
+  width: 83.3333%;
 }
 
 .qti-width-1-12 {
-  width: 8.333333%;
+  width: 8.3333%;
 }
 
 .qti-width-2-12 {
-  width: 16.666667%;
+  width: 16.6667%;
 }
 
 .qti-width-3-12 {
@@ -1359,11 +1367,11 @@
 }
 
 .qti-width-4-12 {
-  width: 33.333333%;
+  width: 33.3333%;
 }
 
 .qti-width-5-12 {
-  width: 41.666667%;
+  width: 41.6667%;
 }
 
 .qti-width-6-12 {
@@ -1371,11 +1379,11 @@
 }
 
 .qti-width-7-12 {
-  width: 58.333333%;
+  width: 58.3333%;
 }
 
 .qti-width-8-12 {
-  width: 66.666667%;
+  width: 66.6667%;
 }
 
 .qti-width-9-12 {
@@ -1383,11 +1391,11 @@
 }
 
 .qti-width-10-12 {
-  width: 83.333333%;
+  width: 83.3333%;
 }
 
 .qti-width-11-12 {
-  width: 91.666667%;
+  width: 91.6667%;
 }
 
 .qti-width-full,
@@ -1921,22 +1929,6 @@ qti-response-declaration {
   box-sizing: inherit;
 }
 
-[popover] {
-  position: fixed;
-  inset: 0;
-  margin: auto;
-  border: solid;
-  padding: 0.25em;
-  overflow: auto;
-  color: CanvasText;
-  background-color: Canvas;
-}
-
-[popovertarget] {
-  all: unset;
-  cursor: pointer;
-}
-
 /* components */
 
 @layer qti-components {
@@ -2094,14 +2086,6 @@ qti-response-declaration {
   }
 
   qti-text-entry-interaction {
-    &:hover {
-      background-color: var(--qti-hover-bg);
-    }
-
-    &:focus-within {
-      box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
-    }
-
     &::part(input) {
       border-radius: 0;
       cursor: text;
@@ -2110,6 +2094,17 @@ qti-response-declaration {
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
       outline: none;
     }
+
+    &:hover {
+      background-color: var(--qti-hover-bg);
+    }
+
+    &:focus-within {
+      &::part(input) {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        border-color: var(--qti-border-active);
+      }
+    }
   }
 
   qti-extended-text-interaction {
@@ -2129,6 +2124,7 @@ qti-response-declaration {
     &:focus-within {
       &::part(textarea) {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        border-color: var(--qti-border-active);
       }
     }
   }
@@ -2252,7 +2248,6 @@ qti-response-declaration {
         &:state(--checked),
         &[aria-checked='true'] {
           border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
         }
 
         &:state(--readonly),
@@ -2287,9 +2282,9 @@ qti-response-declaration {
 
       &[shape='rect'] {
 
-        &:hover {
-          background-color: var(--qti-hover-bg);
-        }
+        /* &:hover {
+          @apply hov;
+        } */
 
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
@@ -2298,7 +2293,6 @@ qti-response-declaration {
         &:state(--checked),
         &[aria-checked='true'] {
           border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
         }
 
         &[aria-readonly='true'] {
@@ -2331,25 +2325,21 @@ qti-response-declaration {
 
       &[shape='poly'] {
         &:hover::after {
-
           content: '';
           width: 100%;
           height: 100%;
           background: repeating-linear-gradient(
             45deg,
-            var(--qti-primary),
-            var(--qti-primary) 5px,
+            var(--qti-border-active),
+            var(--qti-border-active) 5px,
             transparent 5px,
             transparent 10px
           );
           display: block;
-          border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
         }
 
         &:state(--checked)::after,
         &[aria-checked='true']::after {
-
           content: '';
           width: 100%;
           height: 100%;
@@ -2357,18 +2347,10 @@ qti-response-declaration {
             45deg,
             transparent,
             transparent 5px,
-            var(--qti-primary) 5px,
-            var(--qti-primary) 10px
+            var(--qti-border-active) 5px,
+            var(--qti-border-active) 10px
           );
           display: block;
-          border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
-        }
-
-        &:state(--checked),
-        &[aria-checked='true'] {
-          border-color: var(--qti-border-active);
-          background-color: var(--qti-bg-active);
         }
 
         &[aria-readonly='true'] {
@@ -3111,7 +3093,7 @@ qti-response-declaration {
   qti-graphic-gap-match-interaction {
     position: relative;
 
-    & img {
+    &img {
       margin: 0;
       padding: 0;
     }
@@ -3146,9 +3128,8 @@ qti-response-declaration {
       margin-right: 0.125rem;
       margin-bottom: 0.25rem; /* mb-1 */
       height: 0.5rem; /* h-2 */
-      background-position: 0 center;
-      background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x;
-      background-size: calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
+      background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x 0
+        center / calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
     }
 
     &::part(rail) {
@@ -3229,4 +3210,3 @@ qti-response-declaration {
     width: 100%;
   }
 }
-