@pie-api/pie-element-extensions - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

dist/index.js

@@ -14,3 +14,3 @@ /**
  */
-const t="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,e=(t,e,s=null)=>{for(;e!==s;){const s=e.nextSibling;t.removeChild(e),e=s}},s=`{{lit-${String(Math.random()).slice(2)}}}`,i=`\x3c!--${s}--\x3e`,n=new RegExp(`${s}|${i}`);class r{constructor(t,e){this.parts=[],this.element=e;const i=[],r=[],a=document.createTreeWalker(e.content,133,null,!1);let h=0,d=-1,p=0;const{strings:u,values:{length:m}}=t;for(;p<m;){const t=a.nextNode();if(null!==t){if(d++,1===t.nodeType){if(t.hasAttributes()){const e=t.attributes,{length:s}=e;let i=0;for(let t=0;t<s;t++)o(e[t].name,"$lit$")&&i++;for(;i-- >0;){const e=u[p],s=c.exec(e)[2],i=s.toLowerCase()+"$lit$",r=t.getAttribute(i);t.removeAttribute(i);const o=r.split(n);this.parts.push({type:"attribute",index:d,name:s,strings:o}),p+=o.length-1}}"TEMPLATE"===t.tagName&&(r.push(t),a.currentNode=t.content)}else if(3===t.nodeType){const e=t.data;if(e.indexOf(s)>=0){const s=t.parentNode,r=e.split(n),a=r.length-1;for(let e=0;e<a;e++){let i,n=r[e];if(""===n)i=l();else{const t=c.exec(n);null!==t&&o(t[2],"$lit$")&&(n=n.slice(0,t.index)+t[1]+t[2].slice(0,-"$lit$".length)+t[3]),i=document.createTextNode(n)}s.insertBefore(i,t),this.parts.push({type:"node",index:++d})}""===r[a]?(s.insertBefore(l(),t),i.push(t)):t.data=r[a],p+=a}}else if(8===t.nodeType)if(t.data===s){const e=t.parentNode;null!==t.previousSibling&&d!==h||(d++,e.insertBefore(l(),t)),h=d,this.parts.push({type:"node",index:d}),null===t.nextSibling?t.data="":(i.push(t),d--),p++}else{let e=-1;for(;-1!==(e=t.data.indexOf(s,e+1));)this.parts.push({type:"node",index:-1}),p++}}else a.currentNode=r.pop()}for(const t of i)t.parentNode.removeChild(t)}}const o=(t,e)=>{const s=t.length-e.length;return s>=0&&t.slice(s)===e},a=t=>-1!==t.index,l=()=>document.createComment(""),c=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function h(t,e){const{element:{content:s},parts:i}=t,n=document.createTreeWalker(s,133,null,!1);let r=p(i),o=i[r],a=-1,l=0;const c=[];let h=null;for(;n.nextNode();){a++;const t=n.currentNode;for(t.previousSibling===h&&(h=null),e.has(t)&&(c.push(t),null===h&&(h=t)),null!==h&&l++;void 0!==o&&o.index===a;)o.index=null!==h?-1:o.index-l,r=p(i,r),o=i[r]}c.forEach(t=>t.parentNode.removeChild(t))}const d=t=>{let e=11===t.nodeType?0:1;const s=document.createTreeWalker(t,133,null,!1);for(;s.nextNode();)e++;return e},p=(t,e=-1)=>{for(let s=e+1;s<t.length;s++){const e=t[s];if(a(e))return s}return-1};
+const e="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,t=(e,t,s=null)=>{for(;t!==s;){const s=t.nextSibling;e.removeChild(t),t=s}},s=`{{lit-${String(Math.random()).slice(2)}}}`,i=`\x3c!--${s}--\x3e`,n=new RegExp(`${s}|${i}`);class r{constructor(e,t){this.parts=[],this.element=t;const i=[],r=[],a=document.createTreeWalker(t.content,133,null,!1);let c=0,d=-1,p=0;const{strings:u,values:{length:m}}=e;for(;p<m;){const e=a.nextNode();if(null!==e){if(d++,1===e.nodeType){if(e.hasAttributes()){const t=e.attributes,{length:s}=t;let i=0;for(let e=0;e<s;e++)o(t[e].name,"$lit$")&&i++;for(;i-- >0;){const t=u[p],s=h.exec(t)[2],i=s.toLowerCase()+"$lit$",r=e.getAttribute(i);e.removeAttribute(i);const o=r.split(n);this.parts.push({type:"attribute",index:d,name:s,strings:o}),p+=o.length-1}}"TEMPLATE"===e.tagName&&(r.push(e),a.currentNode=e.content)}else if(3===e.nodeType){const t=e.data;if(t.indexOf(s)>=0){const s=e.parentNode,r=t.split(n),a=r.length-1;for(let t=0;t<a;t++){let i,n=r[t];if(""===n)i=l();else{const e=h.exec(n);null!==e&&o(e[2],"$lit$")&&(n=n.slice(0,e.index)+e[1]+e[2].slice(0,-"$lit$".length)+e[3]),i=document.createTextNode(n)}s.insertBefore(i,e),this.parts.push({type:"node",index:++d})}""===r[a]?(s.insertBefore(l(),e),i.push(e)):e.data=r[a],p+=a}}else if(8===e.nodeType)if(e.data===s){const t=e.parentNode;null!==e.previousSibling&&d!==c||(d++,t.insertBefore(l(),e)),c=d,this.parts.push({type:"node",index:d}),null===e.nextSibling?e.data="":(i.push(e),d--),p++}else{let t=-1;for(;-1!==(t=e.data.indexOf(s,t+1));)this.parts.push({type:"node",index:-1}),p++}}else a.currentNode=r.pop()}for(const e of i)e.parentNode.removeChild(e)}}const o=(e,t)=>{const s=e.length-t.length;return s>=0&&e.slice(s)===t},a=e=>-1!==e.index,l=()=>document.createComment(""),h=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function c(e,t){const{element:{content:s},parts:i}=e,n=document.createTreeWalker(s,133,null,!1);let r=p(i),o=i[r],a=-1,l=0;const h=[];let c=null;for(;n.nextNode();){a++;const e=n.currentNode;for(e.previousSibling===c&&(c=null),t.has(e)&&(h.push(e),null===c&&(c=e)),null!==c&&l++;void 0!==o&&o.index===a;)o.index=null!==c?-1:o.index-l,r=p(i,r),o=i[r]}h.forEach(e=>e.parentNode.removeChild(e))}const d=e=>{let t=11===e.nodeType?0:1;const s=document.createTreeWalker(e,133,null,!1);for(;s.nextNode();)t++;return t},p=(e,t=-1)=>{for(let s=t+1;s<e.length;s++){const t=e[s];if(a(t))return s}return-1};
 /**
@@ -29,3 +29,3 @@ * @license
  */
-const u=new WeakMap,m=t=>"function"==typeof t&&u.has(t),_={},f={};
+const u=new WeakMap,m=e=>"function"==typeof e&&u.has(e),f={},_={};
 /**
@@ -44,3 +44,3 @@ * @license
  */
-class g{constructor(t,e,s){this.__parts=[],this.template=t,this.processor=e,this.options=s}update(t){let e=0;for(const s of this.__parts)void 0!==s&&s.setValue(t[e]),e++;for(const t of this.__parts)void 0!==t&&t.commit()}_clone(){const e=t?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),s=[],i=this.template.parts,n=document.createTreeWalker(e,133,null,!1);let r,o=0,l=0,c=n.nextNode();for(;o<i.length;)if(r=i[o],a(r)){for(;l<r.index;)l++,"TEMPLATE"===c.nodeName&&(s.push(c),n.currentNode=c.content),null===(c=n.nextNode())&&(n.currentNode=s.pop(),c=n.nextNode());if("node"===r.type){const t=this.processor.handleTextExpression(this.options);t.insertAfterNode(c.previousSibling),this.__parts.push(t)}else this.__parts.push(...this.processor.handleAttributeExpressions(c,r.name,r.strings,this.options));o++}else this.__parts.push(void 0),o++;return t&&(document.adoptNode(e),customElements.upgrade(e)),e}}
+class g{constructor(e,t,s){this.__parts=[],this.template=e,this.processor=t,this.options=s}update(e){let t=0;for(const s of this.__parts)void 0!==s&&s.setValue(e[t]),t++;for(const e of this.__parts)void 0!==e&&e.commit()}_clone(){const t=e?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),s=[],i=this.template.parts,n=document.createTreeWalker(t,133,null,!1);let r,o=0,l=0,h=n.nextNode();for(;o<i.length;)if(r=i[o],a(r)){for(;l<r.index;)l++,"TEMPLATE"===h.nodeName&&(s.push(h),n.currentNode=h.content),null===(h=n.nextNode())&&(n.currentNode=s.pop(),h=n.nextNode());if("node"===r.type){const e=this.processor.handleTextExpression(this.options);e.insertAfterNode(h.previousSibling),this.__parts.push(e)}else this.__parts.push(...this.processor.handleAttributeExpressions(h,r.name,r.strings,this.options));o++}else this.__parts.push(void 0),o++;return e&&(document.adoptNode(t),customElements.upgrade(t)),t}}
 /**
@@ -58,3 +58,3 @@ * @license
  * http://polymer.github.io/PATENTS.txt
- */const y=` ${s} `;class v{constructor(t,e,s,i){this.strings=t,this.values=e,this.type=s,this.processor=i}getHTML(){const t=this.strings.length-1;let e="",n=!1;for(let r=0;r<t;r++){const t=this.strings[r],o=t.lastIndexOf("\x3c!--");n=(o>-1||n)&&-1===t.indexOf("--\x3e",o+1);const a=c.exec(t);e+=null===a?t+(n?y:i):t.substr(0,a.index)+a[1]+a[2]+"$lit$"+a[3]+s}return e+=this.strings[t],e}getTemplateElement(){const t=document.createElement("template");return t.innerHTML=this.getHTML(),t}}
+ */const v=` ${s} `;class y{constructor(e,t,s,i){this.strings=e,this.values=t,this.type=s,this.processor=i}getHTML(){const e=this.strings.length-1;let t="",n=!1;for(let r=0;r<e;r++){const e=this.strings[r],o=e.lastIndexOf("\x3c!--");n=(o>-1||n)&&-1===e.indexOf("--\x3e",o+1);const a=h.exec(e);t+=null===a?e+(n?v:i):e.substr(0,a.index)+a[1]+a[2]+"$lit$"+a[3]+s}return t+=this.strings[e],t}getTemplateElement(){const e=document.createElement("template");return e.innerHTML=this.getHTML(),e}}
 /**
@@ -72,3 +72,3 @@ * @license
  * http://polymer.github.io/PATENTS.txt
- */const S=t=>null===t||!("object"==typeof t||"function"==typeof t),w=t=>Array.isArray(t)||!(!t||!t[Symbol.iterator]);class b{constructor(t,e,s){this.dirty=!0,this.element=t,this.name=e,this.strings=s,this.parts=[];for(let t=0;t<s.length-1;t++)this.parts[t]=this._createPart()}_createPart(){return new x(this)}_getValue(){const t=this.strings,e=t.length-1;let s="";for(let i=0;i<e;i++){s+=t[i];const e=this.parts[i];if(void 0!==e){const t=e.value;if(S(t)||!w(t))s+="string"==typeof t?t:String(t);else for(const e of t)s+="string"==typeof e?e:String(e)}}return s+=t[e],s}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class x{constructor(t){this.value=void 0,this.committer=t}setValue(t){t===_||S(t)&&t===this.value||(this.value=t,m(t)||(this.committer.dirty=!0))}commit(){for(;m(this.value);){const t=this.value;this.value=_,t(this)}this.value!==_&&this.committer.commit()}}class P{constructor(t){this.value=void 0,this.__pendingValue=void 0,this.options=t}appendInto(t){this.startNode=t.appendChild(l()),this.endNode=t.appendChild(l())}insertAfterNode(t){this.startNode=t,this.endNode=t.nextSibling}appendIntoPart(t){t.__insert(this.startNode=l()),t.__insert(this.endNode=l())}insertAfterPart(t){t.__insert(this.startNode=l()),this.endNode=t.endNode,t.endNode=this.startNode}setValue(t){this.__pendingValue=t}commit(){if(null===this.startNode.parentNode)return;for(;m(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=_,t(this)}const t=this.__pendingValue;t!==_&&(S(t)?t!==this.value&&this.__commitText(t):t instanceof v?this.__commitTemplateResult(t):t instanceof Node?this.__commitNode(t):w(t)?this.__commitIterable(t):t===f?(this.value=f,this.clear()):this.__commitText(t))}__insert(t){this.endNode.parentNode.insertBefore(t,this.endNode)}__commitNode(t){this.value!==t&&(this.clear(),this.__insert(t),this.value=t)}__commitText(t){const e=this.startNode.nextSibling,s="string"==typeof(t=null==t?"":t)?t:String(t);e===this.endNode.previousSibling&&3===e.nodeType?e.data=s:this.__commitNode(document.createTextNode(s)),this.value=t}__commitTemplateResult(t){const e=this.options.templateFactory(t);if(this.value instanceof g&&this.value.template===e)this.value.update(t.values);else{const s=new g(e,t.processor,this.options),i=s._clone();s.update(t.values),this.__commitNode(i),this.value=s}}__commitIterable(t){Array.isArray(this.value)||(this.value=[],this.clear());const e=this.value;let s,i=0;for(const n of t)s=e[i],void 0===s&&(s=new P(this.options),e.push(s),0===i?s.appendIntoPart(this):s.insertAfterPart(e[i-1])),s.setValue(n),s.commit(),i++;i<e.length&&(e.length=i,this.clear(s&&s.endNode))}clear(t=this.startNode){e(this.startNode.parentNode,t.nextSibling,this.endNode)}}class N{constructor(t,e,s){if(this.value=void 0,this.__pendingValue=void 0,2!==s.length||""!==s[0]||""!==s[1])throw new Error("Boolean attributes can only contain a single expression");this.element=t,this.name=e,this.strings=s}setValue(t){this.__pendingValue=t}commit(){for(;m(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=_,t(this)}if(this.__pendingValue===_)return;const t=!!this.__pendingValue;this.value!==t&&(t?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=t),this.__pendingValue=_}}class C extends b{constructor(t,e,s){super(t,e,s),this.single=2===s.length&&""===s[0]&&""===s[1]}_createPart(){return new A(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class A extends x{}let T=!1;(()=>{try{const t={get capture(){return T=!0,!1}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){}})();class E{constructor(t,e,s){this.value=void 0,this.__pendingValue=void 0,this.element=t,this.eventName=e,this.eventContext=s,this.__boundHandleEvent=t=>this.handleEvent(t)}setValue(t){this.__pendingValue=t}commit(){for(;m(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=_,t(this)}if(this.__pendingValue===_)return;const t=this.__pendingValue,e=this.value,s=null==t||null!=e&&(t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive),i=null!=t&&(null==e||s);s&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),i&&(this.__options=V(t),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=t,this.__pendingValue=_}handleEvent(t){"function"==typeof this.value?this.value.call(this.eventContext||this.element,t):this.value.handleEvent(t)}}const V=t=>t&&(T?{capture:t.capture,passive:t.passive,once:t.once}:t.capture)
+ */const S=e=>null===e||!("object"==typeof e||"function"==typeof e),x=e=>Array.isArray(e)||!(!e||!e[Symbol.iterator]);class b{constructor(e,t,s){this.dirty=!0,this.element=e,this.name=t,this.strings=s,this.parts=[];for(let e=0;e<s.length-1;e++)this.parts[e]=this._createPart()}_createPart(){return new w(this)}_getValue(){const e=this.strings,t=e.length-1;let s="";for(let i=0;i<t;i++){s+=e[i];const t=this.parts[i];if(void 0!==t){const e=t.value;if(S(e)||!x(e))s+="string"==typeof e?e:String(e);else for(const t of e)s+="string"==typeof t?t:String(t)}}return s+=e[t],s}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class w{constructor(e){this.value=void 0,this.committer=e}setValue(e){e===f||S(e)&&e===this.value||(this.value=e,m(e)||(this.committer.dirty=!0))}commit(){for(;m(this.value);){const e=this.value;this.value=f,e(this)}this.value!==f&&this.committer.commit()}}class C{constructor(e){this.value=void 0,this.__pendingValue=void 0,this.options=e}appendInto(e){this.startNode=e.appendChild(l()),this.endNode=e.appendChild(l())}insertAfterNode(e){this.startNode=e,this.endNode=e.nextSibling}appendIntoPart(e){e.__insert(this.startNode=l()),e.__insert(this.endNode=l())}insertAfterPart(e){e.__insert(this.startNode=l()),this.endNode=e.endNode,e.endNode=this.startNode}setValue(e){this.__pendingValue=e}commit(){if(null===this.startNode.parentNode)return;for(;m(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=f,e(this)}const e=this.__pendingValue;e!==f&&(S(e)?e!==this.value&&this.__commitText(e):e instanceof y?this.__commitTemplateResult(e):e instanceof Node?this.__commitNode(e):x(e)?this.__commitIterable(e):e===_?(this.value=_,this.clear()):this.__commitText(e))}__insert(e){this.endNode.parentNode.insertBefore(e,this.endNode)}__commitNode(e){this.value!==e&&(this.clear(),this.__insert(e),this.value=e)}__commitText(e){const t=this.startNode.nextSibling,s="string"==typeof(e=null==e?"":e)?e:String(e);t===this.endNode.previousSibling&&3===t.nodeType?t.data=s:this.__commitNode(document.createTextNode(s)),this.value=e}__commitTemplateResult(e){const t=this.options.templateFactory(e);if(this.value instanceof g&&this.value.template===t)this.value.update(e.values);else{const s=new g(t,e.processor,this.options),i=s._clone();s.update(e.values),this.__commitNode(i),this.value=s}}__commitIterable(e){Array.isArray(this.value)||(this.value=[],this.clear());const t=this.value;let s,i=0;for(const n of e)s=t[i],void 0===s&&(s=new C(this.options),t.push(s),0===i?s.appendIntoPart(this):s.insertAfterPart(t[i-1])),s.setValue(n),s.commit(),i++;i<t.length&&(t.length=i,this.clear(s&&s.endNode))}clear(e=this.startNode){t(this.startNode.parentNode,e.nextSibling,this.endNode)}}class P{constructor(e,t,s){if(this.value=void 0,this.__pendingValue=void 0,2!==s.length||""!==s[0]||""!==s[1])throw new Error("Boolean attributes can only contain a single expression");this.element=e,this.name=t,this.strings=s}setValue(e){this.__pendingValue=e}commit(){for(;m(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=f,e(this)}if(this.__pendingValue===f)return;const e=!!this.__pendingValue;this.value!==e&&(e?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=e),this.__pendingValue=f}}class N extends b{constructor(e,t,s){super(e,t,s),this.single=2===s.length&&""===s[0]&&""===s[1]}_createPart(){return new T(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class T extends w{}let A=!1;(()=>{try{const e={get capture(){return A=!0,!1}};window.addEventListener("test",e,e),window.removeEventListener("test",e,e)}catch(e){}})();class ${constructor(e,t,s){this.value=void 0,this.__pendingValue=void 0,this.element=e,this.eventName=t,this.eventContext=s,this.__boundHandleEvent=e=>this.handleEvent(e)}setValue(e){this.__pendingValue=e}commit(){for(;m(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=f,e(this)}if(this.__pendingValue===f)return;const e=this.__pendingValue,t=this.value,s=null==e||null!=t&&(e.capture!==t.capture||e.once!==t.once||e.passive!==t.passive),i=null!=e&&(null==t||s);s&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),i&&(this.__options=E(e),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=e,this.__pendingValue=f}handleEvent(e){"function"==typeof this.value?this.value.call(this.eventContext||this.element,e):this.value.handleEvent(e)}}const E=e=>e&&(A?{capture:e.capture,passive:e.passive,once:e.once}:e.capture)
 /**
@@ -86,3 +86,3 @@ * @license
  * http://polymer.github.io/PATENTS.txt
- */;function $(t){let e=U.get(t.type);void 0===e&&(e={stringsArray:new WeakMap,keyString:new Map},U.set(t.type,e));let i=e.stringsArray.get(t.strings);if(void 0!==i)return i;const n=t.strings.join(s);return i=e.keyString.get(n),void 0===i&&(i=new r(t,t.getTemplateElement()),e.keyString.set(n,i)),e.stringsArray.set(t.strings,i),i}const U=new Map,k=new WeakMap;
+ */;function V(e){let t=k.get(e.type);void 0===t&&(t={stringsArray:new WeakMap,keyString:new Map},k.set(e.type,t));let i=t.stringsArray.get(e.strings);if(void 0!==i)return i;const n=e.strings.join(s);return i=t.keyString.get(n),void 0===i&&(i=new r(e,e.getTemplateElement()),t.keyString.set(n,i)),t.stringsArray.set(e.strings,i),i}const k=new Map,U=new WeakMap;
 /**
@@ -114,3 +114,3 @@ * @license
  */
-class{handleAttributeExpressions(t,e,s,i){const n=e[0];if("."===n){return new C(t,e.slice(1),s).parts}if("@"===n)return[new E(t,e.slice(1),i.eventContext)];if("?"===n)return[new N(t,e.slice(1),s)];return new b(t,e,s).parts}handleTextExpression(t){return new P(t)}};
+class{handleAttributeExpressions(e,t,s,i){const n=t[0];if("."===n){return new N(e,t.slice(1),s).parts}if("@"===n)return[new $(e,t.slice(1),i.eventContext)];if("?"===n)return[new P(e,t.slice(1),s)];return new b(e,t,s).parts}handleTextExpression(e){return new C(e)}};
 /**
@@ -128,3 +128,3 @@ * @license
  * http://polymer.github.io/PATENTS.txt
- */"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.2.1");const M=(t,...e)=>new v(t,e,"html",O)
+ */"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.2.1");const M=(e,...t)=>new y(e,t,"html",O)
 /**
@@ -142,3 +142,3 @@ * @license
  * http://polymer.github.io/PATENTS.txt
- */,R=(t,e)=>`${t}--${e}`;let j=!0;void 0===window.ShadyCSS?j=!1:void 0===window.ShadyCSS.prepareTemplateDom&&(console.warn("Incompatible ShadyCSS version detected. Please update to at least @webcomponents/webcomponentsjs@2.0.2 and @webcomponents/shadycss@1.3.1."),j=!1);const q=t=>e=>{const i=R(e.type,t);let n=U.get(i);void 0===n&&(n={stringsArray:new WeakMap,keyString:new Map},U.set(i,n));let o=n.stringsArray.get(e.strings);if(void 0!==o)return o;const a=e.strings.join(s);if(o=n.keyString.get(a),void 0===o){const s=e.getTemplateElement();j&&window.ShadyCSS.prepareTemplateDom(s,t),o=new r(e,s),n.keyString.set(a,o)}return n.stringsArray.set(e.strings,o),o},z=["html","svg"],F=new Set,I=(t,e,s)=>{F.add(t);const i=s?s.element:document.createElement("template"),n=e.querySelectorAll("style"),{length:r}=n;if(0===r)return void window.ShadyCSS.prepareTemplateStyles(i,t);const o=document.createElement("style");for(let t=0;t<r;t++){const e=n[t];e.parentNode.removeChild(e),o.textContent+=e.textContent}(t=>{z.forEach(e=>{const s=U.get(R(e,t));void 0!==s&&s.keyString.forEach(t=>{const{element:{content:e}}=t,s=new Set;Array.from(e.querySelectorAll("style")).forEach(t=>{s.add(t)}),h(t,s)})})})(t);const a=i.content;s?function(t,e,s=null){const{element:{content:i},parts:n}=t;if(null==s)return void i.appendChild(e);const r=document.createTreeWalker(i,133,null,!1);let o=p(n),a=0,l=-1;for(;r.nextNode();){l++;for(r.currentNode===s&&(a=d(e),s.parentNode.insertBefore(e,s));-1!==o&&n[o].index===l;){if(a>0){for(;-1!==o;)n[o].index+=a,o=p(n,o);return}o=p(n,o)}}}(s,o,a.firstChild):a.insertBefore(o,a.firstChild),window.ShadyCSS.prepareTemplateStyles(i,t);const l=a.querySelector("style");if(window.ShadyCSS.nativeShadow&&null!==l)e.insertBefore(l.cloneNode(!0),e.firstChild);else if(s){a.insertBefore(o,a.firstChild);const t=new Set;t.add(o),h(s,t)}};window.JSCompiler_renameProperty=(t,e)=>t;const L={toAttribute(t,e){switch(e){case Boolean:return t?"":null;case Object:case Array:return null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){switch(e){case Boolean:return null!==t;case Number:return null===t?null:Number(t);case Object:case Array:return JSON.parse(t)}return t}},B=(t,e)=>e!==t&&(e==e||t==t),H={attribute:!0,type:String,converter:L,reflect:!1,hasChanged:B};class W extends HTMLElement{constructor(){super(),this._updateState=0,this._instanceProperties=void 0,this._updatePromise=new Promise(t=>this._enableUpdatingResolver=t),this._changedProperties=new Map,this._reflectingProperties=void 0,this.initialize()}static get observedAttributes(){this.finalize();const t=[];return this._classProperties.forEach((e,s)=>{const i=this._attributeNameForProperty(s,e);void 0!==i&&(this._attributeToPropertyMap.set(i,s),t.push(i))}),t}static _ensureClassProperties(){if(!this.hasOwnProperty(JSCompiler_renameProperty("_classProperties",this))){this._classProperties=new Map;const t=Object.getPrototypeOf(this)._classProperties;void 0!==t&&t.forEach((t,e)=>this._classProperties.set(e,t))}}static createProperty(t,e=H){if(this._ensureClassProperties(),this._classProperties.set(t,e),e.noAccessor||this.prototype.hasOwnProperty(t))return;const s="symbol"==typeof t?Symbol():"__"+t,i=this.getPropertyDescriptor(t,s,e);void 0!==i&&Object.defineProperty(this.prototype,t,i)}static getPropertyDescriptor(t,e,s){return{get(){return this[e]},set(s){const i=this[t];this[e]=s,this._requestUpdate(t,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this._classProperties&&this._classProperties.get(t)||H}static finalize(){const t=Object.getPrototypeOf(this);if(t.hasOwnProperty("finalized")||t.finalize(),this.finalized=!0,this._ensureClassProperties(),this._attributeToPropertyMap=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const t=this.properties,e=[...Object.getOwnPropertyNames(t),..."function"==typeof Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(t):[]];for(const s of e)this.createProperty(s,t[s])}}static _attributeNameForProperty(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}static _valueHasChanged(t,e,s=B){return s(t,e)}static _propertyValueFromAttribute(t,e){const s=e.type,i=e.converter||L,n="function"==typeof i?i:i.fromAttribute;return n?n(t,s):t}static _propertyValueToAttribute(t,e){if(void 0===e.reflect)return;const s=e.type,i=e.converter;return(i&&i.toAttribute||L.toAttribute)(t,s)}initialize(){this._saveInstanceProperties(),this._requestUpdate()}_saveInstanceProperties(){this.constructor._classProperties.forEach((t,e)=>{if(this.hasOwnProperty(e)){const t=this[e];delete this[e],this._instanceProperties||(this._instanceProperties=new Map),this._instanceProperties.set(e,t)}})}_applyInstanceProperties(){this._instanceProperties.forEach((t,e)=>this[e]=t),this._instanceProperties=void 0}connectedCallback(){this.enableUpdating()}enableUpdating(){void 0!==this._enableUpdatingResolver&&(this._enableUpdatingResolver(),this._enableUpdatingResolver=void 0)}disconnectedCallback(){}attributeChangedCallback(t,e,s){e!==s&&this._attributeToProperty(t,s)}_propertyToAttribute(t,e,s=H){const i=this.constructor,n=i._attributeNameForProperty(t,s);if(void 0!==n){const t=i._propertyValueToAttribute(e,s);if(void 0===t)return;this._updateState=8|this._updateState,null==t?this.removeAttribute(n):this.setAttribute(n,t),this._updateState=-9&this._updateState}}_attributeToProperty(t,e){if(8&this._updateState)return;const s=this.constructor,i=s._attributeToPropertyMap.get(t);if(void 0!==i){const t=s.getPropertyOptions(i);this._updateState=16|this._updateState,this[i]=s._propertyValueFromAttribute(e,t),this._updateState=-17&this._updateState}}_requestUpdate(t,e){let s=!0;if(void 0!==t){const i=this.constructor,n=i.getPropertyOptions(t);i._valueHasChanged(this[t],e,n.hasChanged)?(this._changedProperties.has(t)||this._changedProperties.set(t,e),!0!==n.reflect||16&this._updateState||(void 0===this._reflectingProperties&&(this._reflectingProperties=new Map),this._reflectingProperties.set(t,n))):s=!1}!this._hasRequestedUpdate&&s&&(this._updatePromise=this._enqueueUpdate())}requestUpdate(t,e){return this._requestUpdate(t,e),this.updateComplete}async _enqueueUpdate(){this._updateState=4|this._updateState;try{await this._updatePromise}catch(t){}const t=this.performUpdate();return null!=t&&await t,!this._hasRequestedUpdate}get _hasRequestedUpdate(){return 4&this._updateState}get hasUpdated(){return 1&this._updateState}performUpdate(){this._instanceProperties&&this._applyInstanceProperties();let t=!1;const e=this._changedProperties;try{t=this.shouldUpdate(e),t?this.update(e):this._markUpdated()}catch(e){throw t=!1,this._markUpdated(),e}t&&(1&this._updateState||(this._updateState=1|this._updateState,this.firstUpdated(e)),this.updated(e))}_markUpdated(){this._changedProperties=new Map,this._updateState=-5&this._updateState}get updateComplete(){return this._getUpdateComplete()}_getUpdateComplete(){return this._updatePromise}shouldUpdate(t){return!0}update(t){void 0!==this._reflectingProperties&&this._reflectingProperties.size>0&&(this._reflectingProperties.forEach((t,e)=>this._propertyToAttribute(e,this[e],t)),this._reflectingProperties=void 0),this._markUpdated()}updated(t){}firstUpdated(t){}}W.finalized=!0;
+ */,j=(e,t)=>`${e}--${t}`;let R=!0;void 0===window.ShadyCSS?R=!1:void 0===window.ShadyCSS.prepareTemplateDom&&(console.warn("Incompatible ShadyCSS version detected. Please update to at least @webcomponents/webcomponentsjs@2.0.2 and @webcomponents/shadycss@1.3.1."),R=!1);const z=e=>t=>{const i=j(t.type,e);let n=k.get(i);void 0===n&&(n={stringsArray:new WeakMap,keyString:new Map},k.set(i,n));let o=n.stringsArray.get(t.strings);if(void 0!==o)return o;const a=t.strings.join(s);if(o=n.keyString.get(a),void 0===o){const s=t.getTemplateElement();R&&window.ShadyCSS.prepareTemplateDom(s,e),o=new r(t,s),n.keyString.set(a,o)}return n.stringsArray.set(t.strings,o),o},q=["html","svg"],L=new Set,H=(e,t,s)=>{L.add(e);const i=s?s.element:document.createElement("template"),n=t.querySelectorAll("style"),{length:r}=n;if(0===r)return void window.ShadyCSS.prepareTemplateStyles(i,e);const o=document.createElement("style");for(let e=0;e<r;e++){const t=n[e];t.parentNode.removeChild(t),o.textContent+=t.textContent}(e=>{q.forEach(t=>{const s=k.get(j(t,e));void 0!==s&&s.keyString.forEach(e=>{const{element:{content:t}}=e,s=new Set;Array.from(t.querySelectorAll("style")).forEach(e=>{s.add(e)}),c(e,s)})})})(e);const a=i.content;s?function(e,t,s=null){const{element:{content:i},parts:n}=e;if(null==s)return void i.appendChild(t);const r=document.createTreeWalker(i,133,null,!1);let o=p(n),a=0,l=-1;for(;r.nextNode();){l++;for(r.currentNode===s&&(a=d(t),s.parentNode.insertBefore(t,s));-1!==o&&n[o].index===l;){if(a>0){for(;-1!==o;)n[o].index+=a,o=p(n,o);return}o=p(n,o)}}}(s,o,a.firstChild):a.insertBefore(o,a.firstChild),window.ShadyCSS.prepareTemplateStyles(i,e);const l=a.querySelector("style");if(window.ShadyCSS.nativeShadow&&null!==l)t.insertBefore(l.cloneNode(!0),t.firstChild);else if(s){a.insertBefore(o,a.firstChild);const e=new Set;e.add(o),c(s,e)}};window.JSCompiler_renameProperty=(e,t)=>e;const F={toAttribute(e,t){switch(t){case Boolean:return e?"":null;case Object:case Array:return null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){switch(t){case Boolean:return null!==e;case Number:return null===e?null:Number(e);case Object:case Array:return JSON.parse(e)}return e}},I=(e,t)=>t!==e&&(t==t||e==e),W={attribute:!0,type:String,converter:F,reflect:!1,hasChanged:I};class B extends HTMLElement{constructor(){super(),this._updateState=0,this._instanceProperties=void 0,this._updatePromise=new Promise(e=>this._enableUpdatingResolver=e),this._changedProperties=new Map,this._reflectingProperties=void 0,this.initialize()}static get observedAttributes(){this.finalize();const e=[];return this._classProperties.forEach((t,s)=>{const i=this._attributeNameForProperty(s,t);void 0!==i&&(this._attributeToPropertyMap.set(i,s),e.push(i))}),e}static _ensureClassProperties(){if(!this.hasOwnProperty(JSCompiler_renameProperty("_classProperties",this))){this._classProperties=new Map;const e=Object.getPrototypeOf(this)._classProperties;void 0!==e&&e.forEach((e,t)=>this._classProperties.set(t,e))}}static createProperty(e,t=W){if(this._ensureClassProperties(),this._classProperties.set(e,t),t.noAccessor||this.prototype.hasOwnProperty(e))return;const s="symbol"==typeof e?Symbol():"__"+e,i=this.getPropertyDescriptor(e,s,t);void 0!==i&&Object.defineProperty(this.prototype,e,i)}static getPropertyDescriptor(e,t,s){return{get(){return this[t]},set(s){const i=this[e];this[t]=s,this._requestUpdate(e,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this._classProperties&&this._classProperties.get(e)||W}static finalize(){const e=Object.getPrototypeOf(this);if(e.hasOwnProperty("finalized")||e.finalize(),this.finalized=!0,this._ensureClassProperties(),this._attributeToPropertyMap=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const e=this.properties,t=[...Object.getOwnPropertyNames(e),..."function"==typeof Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e):[]];for(const s of t)this.createProperty(s,e[s])}}static _attributeNameForProperty(e,t){const s=t.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof e?e.toLowerCase():void 0}static _valueHasChanged(e,t,s=I){return s(e,t)}static _propertyValueFromAttribute(e,t){const s=t.type,i=t.converter||F,n="function"==typeof i?i:i.fromAttribute;return n?n(e,s):e}static _propertyValueToAttribute(e,t){if(void 0===t.reflect)return;const s=t.type,i=t.converter;return(i&&i.toAttribute||F.toAttribute)(e,s)}initialize(){this._saveInstanceProperties(),this._requestUpdate()}_saveInstanceProperties(){this.constructor._classProperties.forEach((e,t)=>{if(this.hasOwnProperty(t)){const e=this[t];delete this[t],this._instanceProperties||(this._instanceProperties=new Map),this._instanceProperties.set(t,e)}})}_applyInstanceProperties(){this._instanceProperties.forEach((e,t)=>this[t]=e),this._instanceProperties=void 0}connectedCallback(){this.enableUpdating()}enableUpdating(){void 0!==this._enableUpdatingResolver&&(this._enableUpdatingResolver(),this._enableUpdatingResolver=void 0)}disconnectedCallback(){}attributeChangedCallback(e,t,s){t!==s&&this._attributeToProperty(e,s)}_propertyToAttribute(e,t,s=W){const i=this.constructor,n=i._attributeNameForProperty(e,s);if(void 0!==n){const e=i._propertyValueToAttribute(t,s);if(void 0===e)return;this._updateState=8|this._updateState,null==e?this.removeAttribute(n):this.setAttribute(n,e),this._updateState=-9&this._updateState}}_attributeToProperty(e,t){if(8&this._updateState)return;const s=this.constructor,i=s._attributeToPropertyMap.get(e);if(void 0!==i){const e=s.getPropertyOptions(i);this._updateState=16|this._updateState,this[i]=s._propertyValueFromAttribute(t,e),this._updateState=-17&this._updateState}}_requestUpdate(e,t){let s=!0;if(void 0!==e){const i=this.constructor,n=i.getPropertyOptions(e);i._valueHasChanged(this[e],t,n.hasChanged)?(this._changedProperties.has(e)||this._changedProperties.set(e,t),!0!==n.reflect||16&this._updateState||(void 0===this._reflectingProperties&&(this._reflectingProperties=new Map),this._reflectingProperties.set(e,n))):s=!1}!this._hasRequestedUpdate&&s&&(this._updatePromise=this._enqueueUpdate())}requestUpdate(e,t){return this._requestUpdate(e,t),this.updateComplete}async _enqueueUpdate(){this._updateState=4|this._updateState;try{await this._updatePromise}catch(e){}const e=this.performUpdate();return null!=e&&await e,!this._hasRequestedUpdate}get _hasRequestedUpdate(){return 4&this._updateState}get hasUpdated(){return 1&this._updateState}performUpdate(){this._instanceProperties&&this._applyInstanceProperties();let e=!1;const t=this._changedProperties;try{e=this.shouldUpdate(t),e?this.update(t):this._markUpdated()}catch(t){throw e=!1,this._markUpdated(),t}e&&(1&this._updateState||(this._updateState=1|this._updateState,this.firstUpdated(t)),this.updated(t))}_markUpdated(){this._changedProperties=new Map,this._updateState=-5&this._updateState}get updateComplete(){return this._getUpdateComplete()}_getUpdateComplete(){return this._updatePromise}shouldUpdate(e){return!0}update(e){void 0!==this._reflectingProperties&&this._reflectingProperties.size>0&&(this._reflectingProperties.forEach((e,t)=>this._propertyToAttribute(t,this[t],e)),this._reflectingProperties=void 0),this._markUpdated()}updated(e){}firstUpdated(e){}}B.finalized=!0;
 /**
@@ -154,3 +154,3 @@ @license
 */
-const D="adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,J=Symbol();class G{constructor(t,e){if(e!==J)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){return void 0===this._styleSheet&&(D?(this._styleSheet=new CSSStyleSheet,this._styleSheet.replaceSync(this.cssText)):this._styleSheet=null),this._styleSheet}toString(){return this.cssText}}const K=(t,...e)=>{const s=e.reduce((e,s,i)=>e+(t=>{if(t instanceof G)return t.cssText;if("number"==typeof t)return t;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${t}. Use 'unsafeCSS' to pass non-literal values, but\n            take care to ensure page security.`)})(s)+t[i+1],t[0]);return new G(s,J)};
+const D="adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,J=Symbol();class G{constructor(e,t){if(t!==J)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e}get styleSheet(){return void 0===this._styleSheet&&(D?(this._styleSheet=new CSSStyleSheet,this._styleSheet.replaceSync(this.cssText)):this._styleSheet=null),this._styleSheet}toString(){return this.cssText}}const K=(e,...t)=>{const s=t.reduce((t,s,i)=>t+(e=>{if(e instanceof G)return e.cssText;if("number"==typeof e)return e;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${e}. Use 'unsafeCSS' to pass non-literal values, but\n            take care to ensure page security.`)})(s)+e[i+1],e[0]);return new G(s,J)};
 /**
@@ -169,52 +169,134 @@ * @license
  */
-(window.litElementVersions||(window.litElementVersions=[])).push("2.3.1");const Q={};class X extends W{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const t=this.getStyles();if(void 0===t)this._styles=[];else if(Array.isArray(t)){const e=(t,s)=>t.reduceRight((t,s)=>Array.isArray(s)?e(s,t):(t.add(s),t),s),s=e(t,new Set),i=[];s.forEach(t=>i.unshift(t)),this._styles=i}else this._styles=[t]}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow({mode:"open"})}adoptStyles(){const t=this.constructor._styles;0!==t.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?D?this.renderRoot.adoptedStyleSheets=t.map(t=>t.styleSheet):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(t.map(t=>t.cssText),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(t){const e=this.render();super.update(t),e!==Q&&this.constructor.render(e,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach(t=>{const e=document.createElement("style");e.textContent=t.cssText,this.renderRoot.appendChild(e)}))}render(){return Q}}X.finalized=!0,X.render=(t,s,i)=>{if(!i||"object"!=typeof i||!i.scopeName)throw new Error("The `scopeName` option is required.");const n=i.scopeName,r=k.has(s),o=j&&11===s.nodeType&&!!s.host,a=o&&!F.has(n),l=a?document.createDocumentFragment():s;if(((t,s,i)=>{let n=k.get(s);void 0===n&&(e(s,s.firstChild),k.set(s,n=new P(Object.assign({templateFactory:$},i))),n.appendInto(s)),n.setValue(t),n.commit()})(t,l,Object.assign({templateFactory:q(n)},i)),a){const t=k.get(l);k.delete(l);const i=t.value instanceof g?t.value.template:void 0;I(n,l,i),e(s,s.firstChild),s.appendChild(l),k.set(s,t)}!r&&o&&window.ShadyCSS.styleElement(s.host)};const Y=(t,e)=>{const{choices:s,choicePrefix:i}=t||{},{value:n}=e||{};if(!s||!n)return"";const r="numbers"===i?49:65;return n.map(t=>{const e=s.findIndex(e=>e.value===t),{correct:i}=s[e],n=i?M`&#10004;`:M`&#10006;`;return M`<span>${String.fromCharCode(e+r)}</span>
-      <span class="correctness-indicator">${n}</span>`})},Z=K`white`,tt=K`sans-serif`,et=K`black`;K`grey`;class st extends X{static get styles(){return[K`
+(window.litElementVersions||(window.litElementVersions=[])).push("2.3.1");const Q={};class X extends B{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const e=this.getStyles();if(void 0===e)this._styles=[];else if(Array.isArray(e)){const t=(e,s)=>e.reduceRight((e,s)=>Array.isArray(s)?t(s,e):(e.add(s),e),s),s=t(e,new Set),i=[];s.forEach(e=>i.unshift(e)),this._styles=i}else this._styles=[e]}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow({mode:"open"})}adoptStyles(){const e=this.constructor._styles;0!==e.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?D?this.renderRoot.adoptedStyleSheets=e.map(e=>e.styleSheet):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(e.map(e=>e.cssText),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(e){const t=this.render();super.update(e),t!==Q&&this.constructor.render(t,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach(e=>{const t=document.createElement("style");t.textContent=e.cssText,this.renderRoot.appendChild(t)}))}render(){return Q}}X.finalized=!0,X.render=(e,s,i)=>{if(!i||"object"!=typeof i||!i.scopeName)throw new Error("The `scopeName` option is required.");const n=i.scopeName,r=U.has(s),o=R&&11===s.nodeType&&!!s.host,a=o&&!L.has(n),l=a?document.createDocumentFragment():s;if(((e,s,i)=>{let n=U.get(s);void 0===n&&(t(s,s.firstChild),U.set(s,n=new C(Object.assign({templateFactory:V},i))),n.appendInto(s)),n.setValue(e),n.commit()})(e,l,Object.assign({templateFactory:z(n)},i)),a){const e=U.get(l);U.delete(l);const i=e.value instanceof g?e.value.template:void 0;H(n,l,i),t(s,s.firstChild),s.appendChild(l),U.set(s,e)}!r&&o&&window.ShadyCSS.styleElement(s.host)};const Y=K`pink`,Z=K`sans-serif`,ee=K`black`,te=K`grey`,se=K`
+  font-family: var(--pie-font-family, ${Z});
+`,ie=K`
+  .bubble {
+    background-color: white;
+    box-shadow: 2px 2px 10px 2px #999;
+    border-top-right-radius: 16px;
+    border-bottom-right-radius: 16px;
+    border-bottom-left-radius: 16px;
+    display: block;
+    left: 28px;
+    max-width: 80%;
+    max-height: 80%;
+    position: absolute;
+    padding: 10px;
+    top: 6px;
+    z-index: 1;
+    ${se}
+  }
+`,ne=K`
+  .choice-value {
+    cursor: pointer;
+    display: flex;
+  }
+`,re=K`
+  .response {
+    align-items: start;
+    background-color: var(--pie-background-color, ${Y});
+    color: var(--pie-color, ${ee});
+    display: flex;
+    flex-direction: column;
+    font-size: ${12}px;
+    height: calc(var(--pie-item-height, ${88}) * 1px);
+    justify-content: start;
+    overflow: hidden;
+    padding: 8px;
+    width: calc(var(--pie-item-width, ${120}) * 1px);
+    ${se}
+  }
+`,oe=K`
+  .cell {
+    background-color: var(--pie-background-color, ${Y});
+    height: calc(var(--pie-item-height, ${32}) * 1px);
+    overflow: hidden;
+    width: calc(var(--pie-item-width, ${96}) * 1px);
+    ${se}
+  }
+`,ae=(K`
+  .response {
+    align-items: center;
+    background-color: var(--pie-background-color, ${Y});
+    color: var(--pie-color, ${te});
+    display: flex;
+    font-size: ${12}px;
+    font-style: italic;
+    height: calc(var(--pie-item-height, ${88}) * 1px);
+    justify-content: center;
+    overflow: hidden;
+    padding: 12px;
+    position: relative;
+    text-align: center;
+    width: calc(var(--pie-item-width, ${120}) * 1px);
+    ${se}
+  }
+  .magnifier {
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+    transform: rotate(315deg);
+    font-size: 24px;
+    font-style: normal;
+    font-weight: bold;
+  }
+`,K`
+  .correctness-indicator {
+    font-size: ${10}px;
+    vertical-align: top;
+  }
+`),le=new WeakMap,he=(ce=e=>t=>{if(!(t instanceof C))throw new Error("unsafeHTML can only be used in text bindings");const s=le.get(t);if(void 0!==s&&S(e)&&e===s.value&&t.value===s.fragment)return;const i=document.createElement("template");i.innerHTML=e;const n=document.importNode(i.content,!0);t.setValue(n),le.set(t,{value:e,fragment:n})},(...e)=>{const t=ce(...e);return u.set(t,!0),t});var ce;const de=(e,t,s)=>{const{choices:i,choicePrefix:n}=e||{},{value:r}=t||{},{mouseover:o,mouseout:a}=s||{};if(!i||!r)return"";const l="numbers"===n?49:65;return r.map(e=>{const t=i.findIndex(t=>t.value===e),{correct:s,label:n}=i[t];return M`<div
+      class="choice-value"
+      @mouseover=${e=>o(e,n)}
+      @mouseout=${a}
+    >
+      <span>${String.fromCharCode(t+l)}</span>
+      <span class="correctness-indicator">${((e,t)=>t?e?"&#10004;":"&#10006;":e?M`&#10004;`:M`&#10006;`)(s)}</span>
+    </div>`})},pe=e=>e&&e.value?M` <div
+    class="bubble"
+    style="top: ${e.top}px; left: ${e.left}px;"
+  >
+    ${he((e=>{const t=document.createElement("textarea");return t.innerHTML=e,t.innerText})(e.value))}
+  </div>`:M``;class ue extends X{}class me extends ue{static get styles(){return[ie,oe,ne,ae,K`
         :host {
-          color: var(--color, black);
+          color: var(--pie-color, black);
         }
         .cell {
           align-items: center;
-          background-color: var(--background-color, ${Z});
-          color: var(--color, ${et});
+          color: var(--pie-color, ${ee});
           display: flex;
-          font-size: ${14}px;
-          font-family: ${tt};
-          height: calc(var(--height, ${32}) * 1px);
+          font-size: ${12}px;
           justify-content: center;
-          overflow: hidden;
-          width: calc(var(--width, ${96}) * 1px);
         }
         span {
           line-height: 3;
+          display: flex;
         }
         .correctness-indicator {
-          font-size: ${12}px;
           line-height: 2;
-          margin-left: -4px;
-          vertical-align: top;
+          margin-left: -2px;
         }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){const t=Y(this.model,this.session);return M` <div class="cell"><span>${t}</span></div> `}}class it extends X{static get styles(){return[K`
+      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1},hoveredChoice:{type:Object}}}set hoveredChoice(e){const t=this._hoveredChoice;t&&e&&t.value===e.value||(this._hoveredChoice=e,this.requestUpdate("hoveredChoice",t))}get hoveredChoice(){return this._hoveredChoice}constructor(){super(),this._hoveredChoice=null}mouseover(e,t){const s=e.target.closest(".choice-value"),{offsetTop:i,offsetHeight:n,offsetLeft:r,offsetWidth:o}=s;this.hoveredChoice={top:i+n/1.5,value:t,left:r+o/2}}mouseout(){this.hoveredChoice=null}render(){const e=de(this.model,this.session,{mouseover:this.mouseover.bind(this),mouseout:this.mouseout.bind(this)});return M`
+      <div class="cell"><span>${e}</span></div>
+      ${pe(this.hoveredChoice)}
+    `}}class fe extends ue{static get styles(){return[ie,ne,ae,re,K`
         .response {
           align-items: center;
-          background-color: var(--background-color, ${Z});
-          color: var(--color, ${et});
-          display: flex;
-          font-size: ${24}px;
-          font-family: ${tt};
-          height: calc(var(--height, ${88}) * 1px);
+          font-size: ${18}px;
           justify-content: center;
-          overflow: hidden;
-          width: calc(var(--width, ${120}) * 1px);
         }
         span {
           line-height: 2;
+          display: flex;
         }
         .correctness-indicator {
-          font-size: ${14}px;
+          font-size: ${12}px;
           line-height: 1;
-          margin-left: -8px;
-          vertical-align: top;
+          margin-left: -4px;
         }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return M`<div class="response">
-      <span>${Y(this.model,this.session)}</span>
-    </div>`}}export{st as MultipleChoiceCell,it as MultipleChoiceResponse};
+      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1},hoveredChoice:{type:Object}}}set hoveredChoice(e){const t=this._hoveredChoice;t&&e&&t.value===e.value||(this._hoveredChoice=e,this.requestUpdate("hoveredChoice",t))}get hoveredChoice(){return this._hoveredChoice}constructor(){super(),this._hoveredChoice=null}mouseover(e,t){const s=e.target.closest(".choice-value"),{offsetTop:i,offsetHeight:n,offsetLeft:r,offsetWidth:o}=s;this.hoveredChoice={top:i+n/1.5,value:t,left:r+o/2}}mouseout(){this.hoveredChoice=null}render(){return M`<div class="response">
+      <span
+        >${de(this.model,this.session,{mouseover:this.mouseover.bind(this),mouseout:this.mouseout.bind(this)})}</span
+      >
+      ${pe(this.hoveredChoice)}
+    </div>`}}export{me as MultipleChoiceCell,fe as MultipleChoiceResponse};

dist/pies/CategorizeCell.js

@@ -1,9 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          overflow: hidden;
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as CategorizeCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as CategorizeCell};
 //# sourceMappingURL=CategorizeCell.js.map

dist/pies/CategorizeResponse.js

@@ -1,31 +0,5 @@
-import{L as t,c as e,d as s,b as r,e as o,f as a,g as i,i as n,h as l}from"./utils-5be58cd4.js";class c extends t{static get styles(){return[e`
-        .response {
-          align-items: center;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${r});
-          display: flex;
-          font-size: ${o}px;
-          font-style: italic;
-          font-family: ${a};
-          height: calc(var(--height, ${i}) * 1px);
-          justify-content: center;
-          overflow: hidden;
-          padding: 12px;
-          position: relative;
-          text-align: center;
-          width: calc(var(--width, ${n}) * 1px);
-        }
-        .magnifier {
-          position: absolute;
-          bottom: 0;
-          right: 10px;
-          transform: rotate(315deg);
-          font-size: 24px;
-          font-style: normal;
-          font-weight: bold;
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return l`<div class="response">
+import{e,h as t}from"./cssUtils-1002e72e.js";import{C as s}from"./CustomLitElement-d4cbc445.js";class r extends s{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return t`<div class="response">
       Expand to see student response
       <div class="magnifier">&#9906;</div>
-    </div>`}}export default c;export{c as CategorizeResponse};
+    </div>`}}export default r;export{r as CategorizeResponse};
 //# sourceMappingURL=CategorizeResponse.js.map

dist/pies/ChartingCell.js

@@ -1,8 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as ChartingCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as ChartingCell};
 //# sourceMappingURL=ChartingCell.js.map

dist/pies/ChartingResponse.js

@@ -1,31 +0,5 @@
-import{L as t,c as e,d as s,b as r,e as o,f as a,g as i,i as n,h as l}from"./utils-5be58cd4.js";class c extends t{static get styles(){return[e`
-        .response {
-          align-items: center;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${r});
-          display: flex;
-          font-size: ${o}px;
-          font-style: italic;
-          font-family: ${a};
-          height: calc(var(--height, ${i}) * 1px);
-          justify-content: center;
-          overflow: hidden;
-          padding: 12px;
-          position: relative;
-          text-align: center;
-          width: calc(var(--width, ${n}) * 1px);
-        }
-        .magnifier {
-          position: absolute;
-          bottom: 0;
-          right: 10px;
-          transform: rotate(315deg);
-          font-size: 24px;
-          font-style: normal;
-          font-weight: bold;
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return l`<div class="response">
+import{e,h as t}from"./cssUtils-1002e72e.js";import{C as s}from"./CustomLitElement-d4cbc445.js";class r extends s{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return t`<div class="response">
       Expand to see student response
       <div class="magnifier">&#9906;</div>
-    </div>`}}export default c;export{c as ChartingResponse};
+    </div>`}}export default r;export{r as ChartingResponse};
 //# sourceMappingURL=ChartingResponse.js.map

dist/pies/ConstructedCell.js

@@ -1,9 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          overflow: hidden;
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as ConstructedCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as ConstructedCell};
 //# sourceMappingURL=ConstructedCell.js.map

dist/pies/ConstructedResponse.js

@@ -1,16 +0,2 @@
-import{L as e,c as s,d as t,j as r,k as a,f as n,g as i,i as o,e as c,h as p}from"./utils-5be58cd4.js";import{u as d}from"./unsafe-html-371e8bd8.js";class l extends e{static get styles(){return[s`
-        .response {
-          align-items: center;
-          background-color: var(--background-color, ${t});
-          color: var(--color, ${r});
-          display: flex;
-          flex-direction: column;
-          font-size: ${a}px;
-          font-family: ${n};
-          height: calc(var(--height, ${i}) * 1px);
-          justify-content: start;
-          overflow: hidden;
-          padding: 8px;
-          width: calc(var(--width, ${o}) * 1px);
-        }
+import{a as s,r as e,b as t,h as r}from"./cssUtils-1002e72e.js";import{C as n}from"./CustomLitElement-d4cbc445.js";import{u as a}from"./unsafe-html-5b707d11.js";import{p as i,g as o}from"./utils-c60e6fc2.js";class p extends n{static get styles(){return[s,e,t`
         p {
@@ -24,9 +10,5 @@ line-height: 2;
         }
-        .correctness-indicator {
-          font-size: ${c}px;
-          vertical-align: top;
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}_processEscapedMarkup(){const{choices:e,markup:s}=this.model||{},{value:t}=this.session||{};if(!t||!s)return"";const r=document.createElement("textarea");return r.innerHTML=s,r.innerText.replace(/\{\{(.)\}\}/g,(s,r)=>{const a=e[r].find(e=>e.label===t[r]);return`<span class="answer">${t[r]}<span class="correctness-indicator">${a?"&#10004;":"&#10006;"}</span></span>`})}render(){return p`<div class="response">
-      ${d(this._processEscapedMarkup())}
-    </div>`}}export default l;export{l as ConstructedResponse};
+      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}_renderResponse(){const{choices:s,markup:e}=this.model||{},{value:t}=this.session||{};if(!t||!e)return"";return i(e).replace(/\{\{(.)\}\}/g,(e,r)=>{const n=s[r].find(s=>s.label===t[r]);return`\n        <span class="answer">\n        ${t[r]}\n        <span class="correctness-indicator">${o(n,!0)}</span>\n        </span>`})}render(){return r`<div class="response">
+      ${a(this._renderResponse())}
+    </div>`}}export default p;export{p as ConstructedResponse};
 //# sourceMappingURL=ConstructedResponse.js.map

dist/pies/DragInTheBlankCell.js

@@ -1,9 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          overflow: hidden;
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as DragInTheBlankCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as DragInTheBlankCell};
 //# sourceMappingURL=DragInTheBlankCell.js.map

dist/pies/DragInTheBlankResponse.js

@@ -1,23 +0,17 @@
-import{L as e,c as t,d as s,j as r,k as a,f as o,g as i,i as n,h as c}from"./utils-5be58cd4.js";class p extends e{static get styles(){return[t`
-        .response {
-          align-items: start;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${r});
-          display: flex;
-          flex-direction: column;
-          font-size: ${a}px;
-          font-family: ${o};
-          height: calc(var(--height, ${i}) * 1px);
-          justify-content: start;
-          overflow: hidden;
-          padding: 8px;
-          width: calc(var(--width, ${n}) * 1px);
-        }
-        p {
+import{f as e,g as s,r as t,b as o,h as r}from"./cssUtils-1002e72e.js";import{C as i}from"./CustomLitElement-d4cbc445.js";import"./unsafe-html-5b707d11.js";import{g as h,r as c}from"./utils-c60e6fc2.js";class u extends i{static get styles(){return[e,s,t,o`
+        span {
           margin: 2px;
         }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}static _getIcon(e,t){return t===e?c`&#10004;`:c`&#10006;`}_getResponse(){const{correctResponse:e}=this.model||{},{value:t}=this.session||{};return t&&e?Object.keys(e).map(s=>c`<p>
-          ${s}.
-          ${t[s]?p._getIcon(e[s],t[s]):""}
-        </p>`):c``}render(){return c`<div class="response">${this._getResponse()}</div>`}}export default p;export{p as DragInTheBlankResponse};
+      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1},hoveredChoice:{type:Object}}}set hoveredChoice(e){const s=this._hoveredChoice;s&&e&&s.value===e.value||(this._hoveredChoice=e,this.requestUpdate("hoveredChoice",s))}get hoveredChoice(){return this._hoveredChoice}constructor(){super(),this._hoveredChoice=null}mouseover(e,s){const t=e.target.closest(".choice-value"),{offsetTop:o,offsetHeight:r}=t;this.hoveredChoice={value:s,top:o+r/2}}mouseout(){this.hoveredChoice=null}_renderResponse(){const{correctResponse:e,choices:s}=this.model||{},{value:t}=this.session||{};if(!t||!e)return r``;return(Object.keys(e)||[]).map(o=>{const i=s.find(s=>s.id===e[o]);return r`<div
+        class="choice-value"
+        @mouseover=${e=>this.mouseover(e,i.value)}
+        @mouseout=${this.mouseout}
+      >
+        <span>
+          ${o}. ${t[o]?h(e[o]===t[o]):""}
+        </span>
+      </div>`})}render(){return r`
+      <div class="response">${this._renderResponse()}</div>
+      ${c({...this.hoveredChoice,left:44})}
+    `}}export default u;export{u as DragInTheBlankResponse};
 //# sourceMappingURL=DragInTheBlankResponse.js.map

dist/pies/DrawingCell.js

@@ -1,8 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as DrawingCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as DrawingCell};
 //# sourceMappingURL=DrawingCell.js.map

dist/pies/DrawingResponse.js

@@ -1,2 +0,2 @@
-import{L as e,c as t,h as a,g as r,i as s}from"./utils-5be58cd4.js";class i extends e{static get styles(){return[t`
+import{b as e,j as t,h as a,m as s,k as r}from"./cssUtils-1002e72e.js";import{C as i}from"./CustomLitElement-d4cbc445.js";class l extends i{static get styles(){return[e`
         .response {
@@ -7,3 +7,3 @@ position: relative;
         .drawables {
-          background-color: var(--background-color, transparent);
+          background-color: var(--pie-background-color, transparent);
           position: absolute;
@@ -14,3 +14,3 @@ left: 0;
         .drawableText {
-          font-family: sans-serif;
+          ${t}
           font-size: 16px;
@@ -20,13 +20,15 @@ position: absolute;
         }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}_getMinWidthAndHeight(){const{imageDimensions:e}=this.model||{},{drawables:t=[],texts:a=[]}=this.session||{};let{height:r,width:s}=e||{};return a.forEach(({x:e,y:t,width:a,fontSize:i})=>{e+a>s&&(s=e+a),t+i>r&&(r=t+i)}),t.reduce((e,t)=>{const{type:a,startx:r,starty:s,x:i,y:l,height:n,points:o,radius:h,width:c}=t||{};let d,g;switch(a){case"FreePathDrawable":case"EraserDrawable":d=Math.max(...o.filter((e,t)=>t%2==0)),g=Math.max(...o.filter((e,t)=>t%2==1));break;case"LineDrawable":d=Math.max(r,i),g=Math.max(s,l);break;case"RectangleDrawable":d=Math.max(r,r+c),g=Math.max(s,s+n);break;case"CircleDrawable":d=Math.max(r,r+h),g=Math.max(s,s+h)}return d>e.width&&(e.width=d),g>e.height&&(e.height=g),e},{width:s,height:r})}static _renderDrawing(e,t,r){const s=document.createElement("canvas"),i=s.getContext("2d");s.width=t,s.height=r,s.style.position="absolute",s.style.top="0",s.style.left="0";const{type:l,fillColor:n,outlineColor:o}=e;switch(i.fillStyle=n,i.strokeStyle=o,i.lineWidth=2,i.beginPath(),l){case"FreePathDrawable":case"EraserDrawable":{const{points:t}=e;"EraserDrawable"===l&&(i.strokeStyle="#fff",i.lineWidth=5);for(let e=0;e<t.length;e+=1)e%2!=0&&i.lineTo(t[e+1],t[e]);break}case"LineDrawable":{const{startx:t,starty:a,x:r,y:s}=e;i.moveTo(t,a),i.lineTo(r,s);break}case"RectangleDrawable":{const{startx:t,starty:a,width:r,height:s}=e;i.fillRect(t,a,r,s),i.strokeRect(t,a,r,s);break}case"CircleDrawable":{const{radius:t,startx:a,starty:r}=e;i.arc(a,r,t,0,2*Math.PI),i.fill();break}}return i.stroke(),a`${s}`}static _renderText({text:e,x:t,y:r,rotation:s,scaleX:i,scaleY:l}){return a`<span class="drawableText" style="${`top: ${r-3}px; left: ${t}px; transform: rotate(${s}deg) scaleX(${i}) scaleY(${l});`}">${e}</span>`}_renderImage(){const{imageUrl:e,imageDimensions:t}=this.model||{},{height:r,width:s}=t||{};return e?a`<img
+      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}_getMinWidthAndHeight(){const{imageDimensions:e}=this.model||{},{drawables:t=[],texts:a=[]}=this.session||{};let{height:s,width:r}=e||{};return a.forEach(({x:e,y:t,width:a,fontSize:i})=>{e+a>r&&(r=e+a),t+i>s&&(s=t+i)}),t.reduce((e,t)=>{const{type:a,startx:s,starty:r,x:i,y:l,height:n,points:o,radius:h,width:c}=t||{};let d,m;switch(a){case"FreePathDrawable":case"EraserDrawable":d=Math.max(...o.filter((e,t)=>t%2==0)),m=Math.max(...o.filter((e,t)=>t%2==1));break;case"LineDrawable":d=Math.max(s,i),m=Math.max(r,l);break;case"RectangleDrawable":d=Math.max(s,s+c),m=Math.max(r,r+n);break;case"CircleDrawable":d=Math.max(s,s+h),m=Math.max(r,r+h)}return d>e.width&&(e.width=d),m>e.height&&(e.height=m),e},{width:r,height:s})}static _renderDrawing(e,t,s){const r=document.createElement("canvas"),i=r.getContext("2d");r.width=t,r.height=s,r.style.position="absolute",r.style.top="0",r.style.left="0";const{type:l,fillColor:n,outlineColor:o}=e;switch(i.fillStyle=n,i.strokeStyle=o,i.lineWidth=2,i.beginPath(),l){case"FreePathDrawable":case"EraserDrawable":{const{points:t}=e;"EraserDrawable"===l&&(i.strokeStyle="#fff",i.lineWidth=5);for(let e=0;e<t.length;e+=1)e%2!=0&&i.lineTo(t[e+1],t[e]);break}case"LineDrawable":{const{startx:t,starty:a,x:s,y:r}=e;i.moveTo(t,a),i.lineTo(s,r);break}case"RectangleDrawable":{const{startx:t,starty:a,width:s,height:r}=e;i.fillRect(t,a,s,r),i.strokeRect(t,a,s,r);break}case"CircleDrawable":{const{radius:t,startx:a,starty:s}=e;i.arc(a,s,t,0,2*Math.PI),i.fill();break}}return i.stroke(),a`${r}`}static _renderText({text:e,x:t,y:s,rotation:r,scaleX:i,scaleY:l}){return a`<span class="drawableText" style="${`top: ${s-3}px; left: ${t}px; transform: rotate(${r}deg) scaleX(${i}) scaleY(${l});`}">${e}</span>`}_renderImage(){const{imageUrl:e,imageDimensions:t}=this.model||{},{height:s,width:r}=t||{};return e?a`<img
       alt="Image"
       src="${e}"
-      height="${r}px"
-      width="${s}px"
-    />`:a``}render(){const{drawables:e,texts:t}=this.session||{},{height:l,width:n}=this._getMinWidthAndHeight(),o=`width: ${n}px; height: ${l}px;`;return a` <style>
+      height="${s}px"
+      width="${r}px"
+    />`:a``}render(){const{drawables:e,texts:t}=this.session||{},{height:i,width:n}=this._getMinWidthAndHeight(),o=`width: ${n}px; height: ${i}px;`;return a` <style>
         .response {
           transform: scale(
             min(
-              calc(var(--max-height, ${r}) / ${l}),
-              calc(var(--max-width, ${s}) / ${n}),
+              calc(
+                var(--pie-max-height, ${s}) / ${i}
+              ),
+              calc(var(--pie-max-width, ${r}) / ${n}),
               1
@@ -42,6 +44,6 @@ )
         <div class="drawables" style=${o}>
-          ${e&&e.map(e=>i._renderDrawing(e,n,l))}
-          ${t&&t.map(i._renderText)}
+          ${e&&e.map(e=>l._renderDrawing(e,n,i))}
+          ${t&&t.map(l._renderText)}
         </div>
-      </div>`}}export default i;export{i as DrawingResponse};
+      </div>`}}export default l;export{l as DrawingResponse};
 //# sourceMappingURL=DrawingResponse.js.map

dist/pies/EBSRCell.js

@@ -1,27 +0,25 @@
-import{L as t,c as e,d as s,j as r,k as a,f as o,m as i,a as n,e as c,o as l,h as p}from"./utils-5be58cd4.js";class d extends t{static get styles(){return[e`
+import{f as e,c as t,g as s,a as o,b as r,l as i,n as h,h as a}from"./cssUtils-1002e72e.js";import{C as c}from"./CustomLitElement-d4cbc445.js";import"./unsafe-html-5b707d11.js";import{a as n,r as l}from"./utils-c60e6fc2.js";class u extends c{static get styles(){return[e,t,s,o,r`
         :host {
-          color: var(--color, black);
+          color: var(--pie-color, black);
         }
         .cell {
           align-items: center;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${r});
+          color: var(--pie-color, ${i});
           display: flex;
-          font-size: ${a}px;
-          font-family: ${o};
-          height: calc(var(--height, ${i}) * 1px);
+          font-size: ${h}px;
           justify-content: center;
-          overflow: hidden;
-          width: calc(var(--width, ${n}) * 1px);
+          flex-wrap: wrap;
         }
         span {
           line-height: 3;
+          display: flex;
         }
         .correctness-indicator {
-          font-size: ${c}px;
           line-height: 2;
-          margin-left: -4px;
-          vertical-align: top;
+          margin-left: -2px;
         }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}_getResponse(){const{partA:t,partB:e}=this.model||{},{value:s}=this.session||{};if(!s)return"";const r=l(t,s.partA),a=l(e,s.partB);return p`<span>${r}, ${a}</span>`}render(){const t=this._getResponse();return p`<div class="cell">${t}</div>`}}export default d;export{d as EBSRCell};
+      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1},hoveredChoice:{type:Object}}}set hoveredChoice(e){const t=this._hoveredChoice;t&&e&&t.value===e.value||(this._hoveredChoice=e,this.requestUpdate("hoveredChoice",t))}get hoveredChoice(){return this._hoveredChoice}constructor(){super(),this._hoveredChoice=null}mouseover(e,t){const s=e.target.closest(".choice-value"),{offsetTop:o,offsetHeight:r,offsetLeft:i,offsetWidth:h}=s;this.hoveredChoice={top:o+r/1.5,value:t,left:i+h/2}}mouseout(){this.hoveredChoice=null}_renderResponse(){const{partA:e,partB:t}=this.model||{},{value:s}=this.session||{};if(!s)return"";const o=n(e,s.partA,{mouseover:this.mouseover.bind(this),mouseout:this.mouseout.bind(this)}),r=n(t,s.partB,{mouseover:this.mouseover.bind(this),mouseout:this.mouseout.bind(this)});return a`<span>${o}, ${r}</span>`}render(){const e=this._renderResponse();return a`
+      <div class="cell">${e}</div>
+      ${l(this.hoveredChoice)}
+    `}}export default u;export{u as EBSRCell};
 //# sourceMappingURL=EBSRCell.js.map

dist/pies/EBSRResponse.js

@@ -1,24 +0,20 @@
-import{L as e,c as t,d as s,j as r,p as a,f as i,g as n,i as o,k as c,o as p,h as l}from"./utils-5be58cd4.js";class d extends e{static get styles(){return[t`
+import{f as e,g as t,a as s,r as o,b as r,o as i,n as h,h as n}from"./cssUtils-1002e72e.js";import{C as a}from"./CustomLitElement-d4cbc445.js";import"./unsafe-html-5b707d11.js";import{a as u,r as c}from"./utils-c60e6fc2.js";class d extends a{static get styles(){return[e,t,s,o,r`
         .response {
           align-items: center;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${r});
-          display: flex;
-          font-size: ${a}px;
-          font-family: ${i};
-          height: calc(var(--height, ${n}) * 1px);
+          font-size: ${i}px;
           justify-content: center;
-          overflow: hidden;
-          width: calc(var(--width, ${o}) * 1px);
         }
         span {
           line-height: 2;
+          display: flex;
         }
         .correctness-indicator {
-          font-size: ${c}px;
+          font-size: ${h}px;
           line-height: 1;
-          margin-left: -8px;
-          vertical-align: top;
+          margin-left: -4px;
         }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}_getResponse(){const{partA:e,partB:t}=this.model||{},{value:s}=this.session||{};if(!s)return"";const r=p(e,s.partA),a=p(t,s.partB);return l`<span>${r}, ${a}</span>`}render(){return l`<div class="response">${this._getResponse()}</div>`}}export default d;export{d as EBSRResponse};
+      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1},hoveredChoice:{type:Object}}}set hoveredChoice(e){const t=this._hoveredChoice;t&&e&&t.value===e.value||(this._hoveredChoice=e,this.requestUpdate("hoveredChoice",t))}get hoveredChoice(){return this._hoveredChoice}constructor(){super(),this._hoveredChoice=null}mouseover(e,t){const s=e.target.closest(".choice-value"),{offsetTop:o,offsetHeight:r,offsetLeft:i,offsetWidth:h}=s;this.hoveredChoice={top:o+r/1.5,value:t,left:i+h/2}}mouseout(){this.hoveredChoice=null}_renderResponse(){const{partA:e,partB:t}=this.model||{},{value:s}=this.session||{};if(!s)return"";const o=u(e,s.partA,{mouseover:this.mouseover.bind(this),mouseout:this.mouseout.bind(this)}),r=u(t,s.partB,{mouseover:this.mouseover.bind(this),mouseout:this.mouseout.bind(this)});return n`<span>${o}, ${r}</span>`}render(){return n`
+      <div class="response">${this._renderResponse()}</div>
+      ${c(this.hoveredChoice)}
+    `}}export default d;export{d as EBSRResponse};
 //# sourceMappingURL=EBSRResponse.js.map

dist/pies/GraphingCell.js

@@ -1,8 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as GraphingCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as GraphingCell};
 //# sourceMappingURL=GraphingCell.js.map

dist/pies/GraphingResponse.js

@@ -1,31 +0,5 @@
-import{L as t,c as e,d as s,b as r,e as o,f as a,g as i,i as n,h as l}from"./utils-5be58cd4.js";class c extends t{static get styles(){return[e`
-        .response {
-          align-items: center;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${r});
-          display: flex;
-          font-size: ${o}px;
-          font-style: italic;
-          font-family: ${a};
-          height: calc(var(--height, ${i}) * 1px);
-          justify-content: center;
-          overflow: hidden;
-          padding: 12px;
-          position: relative;
-          text-align: center;
-          width: calc(var(--width, ${n}) * 1px);
-        }
-        .magnifier {
-          position: absolute;
-          bottom: 0;
-          right: 10px;
-          transform: rotate(315deg);
-          font-size: 24px;
-          font-style: normal;
-          font-weight: bold;
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return l`<div class="response">
+import{e,h as t}from"./cssUtils-1002e72e.js";import{C as s}from"./CustomLitElement-d4cbc445.js";class r extends s{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return t`<div class="response">
       Expand to see student response
       <div class="magnifier">&#9906;</div>
-    </div>`}}export default c;export{c as GraphingResponse};
+    </div>`}}export default r;export{r as GraphingResponse};
 //# sourceMappingURL=GraphingResponse.js.map

dist/pies/HotspotCell.js

@@ -1,8 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as HotspotCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as HotspotCell};
 //# sourceMappingURL=HotspotCell.js.map

dist/pies/HotspotResponse.js

@@ -1,31 +0,5 @@
-import{L as t,c as e,d as s,b as r,e as o,f as a,g as i,i as n,h as l}from"./utils-5be58cd4.js";class c extends t{static get styles(){return[e`
-        .response {
-          align-items: center;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${r});
-          display: flex;
-          font-size: ${o}px;
-          font-style: italic;
-          font-family: ${a};
-          height: calc(var(--height, ${i}) * 1px);
-          justify-content: center;
-          overflow: hidden;
-          padding: 12px;
-          position: relative;
-          text-align: center;
-          width: calc(var(--width, ${n}) * 1px);
-        }
-        .magnifier {
-          position: absolute;
-          bottom: 0;
-          right: 10px;
-          transform: rotate(315deg);
-          font-size: 24px;
-          font-style: normal;
-          font-weight: bold;
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return l`<div class="response">
+import{e,h as t}from"./cssUtils-1002e72e.js";import{C as s}from"./CustomLitElement-d4cbc445.js";class r extends s{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return t`<div class="response">
       Expand to see student response
       <div class="magnifier">&#9906;</div>
-    </div>`}}export default c;export{c as HotspotResponse};
+    </div>`}}export default r;export{r as HotspotResponse};
 //# sourceMappingURL=HotspotResponse.js.map

dist/pies/InlineDropdownCell.js

@@ -1,9 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          overflow: hidden;
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as InlineDropdownCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as InlineDropdownCell};
 //# sourceMappingURL=InlineDropdownCell.js.map

dist/pies/InlineDropdownResponse.js

@@ -1,22 +0,15 @@
-import{L as e,c as t,d as s,j as r,k as a,f as o,g as i,i as n,h as c}from"./utils-5be58cd4.js";class l extends e{static get styles(){return[t`
-        .response {
-          align-items: start;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${r});
-          display: flex;
-          flex-direction: column;
-          font-size: ${a}px;
-          font-family: ${o};
-          height: calc(var(--height, ${i}) * 1px);
-          justify-content: start;
-          overflow: hidden;
-          padding: 8px;
-          width: calc(var(--width, ${n}) * 1px);
-        }
+import{f as e,g as s,r as t,b as o,h as r}from"./cssUtils-1002e72e.js";import{C as i}from"./CustomLitElement-d4cbc445.js";import"./unsafe-html-5b707d11.js";import{g as h,r as c}from"./utils-c60e6fc2.js";class u extends i{static get styles(){return[e,s,t,o`
         p {
           margin: 2px;
         }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}_getResponse(){const{choices:e}=this.model||{},{value:t}=this.session||{};return t&&e?Object.keys(e).map(s=>{const{label:r,correct:a}=e[s].find(e=>e.value===t[s])||{},o=t[s]&&r||"",i=a?c`&#10004;`:c`&#10006;`;return c`<p>${s}. ${o} ${i}</p>`}):c``}render(){return c`<div class="response">
-      ${this._getResponse()}
-    </div>`}}export default l;export{l as InlineDropdownResponse};
+      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1},hoveredChoice:{type:Object}}}set hoveredChoice(e){const s=this._hoveredChoice;s&&e&&s.value===e.value||(this._hoveredChoice=e,this.requestUpdate("hoveredChoice",s))}get hoveredChoice(){return this._hoveredChoice}constructor(){super(),this._hoveredChoice=null}mouseover(e,s){const t=e.target.closest(".choice-value"),{offsetTop:o,offsetHeight:r}=t;this.hoveredChoice={value:s,top:o+r/2}}mouseout(){this.hoveredChoice=null}_renderResponse(){const{choices:e}=this.model||{},{value:s}=this.session||{};return s&&e?Object.keys(e).map(t=>{const{label:o,correct:i}=e[t].find(e=>e.value===s[t])||{},c=s[t]&&o||"";return r`<div
+        class="choice-value"
+        @mouseover=${e=>this.mouseover(e,c)}
+        @mouseout=${this.mouseout}
+      >
+        <p>${t}. ${h(i)}</p>
+      </div>`}):r``}render(){return r`
+      <div class="response">${this._renderResponse()}</div>
+      ${c({...this.hoveredChoice,left:44})}
+    `}}export default u;export{u as InlineDropdownResponse};
 //# sourceMappingURL=InlineDropdownResponse.js.map

dist/pies/MatchCell.js

@@ -1,8 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as MatchCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as MatchCell};
 //# sourceMappingURL=MatchCell.js.map

dist/pies/MatchListCell.js

@@ -1,8 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as MatchListCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as MatchListCell};
 //# sourceMappingURL=MatchListCell.js.map

dist/pies/MatchListResponse.js

@@ -1,31 +0,5 @@
-import{L as t,c as e,d as s,b as r,e as o,f as a,g as i,i as n,h as l}from"./utils-5be58cd4.js";class c extends t{static get styles(){return[e`
-        .response {
-          align-items: center;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${r});
-          display: flex;
-          font-size: ${o}px;
-          font-style: italic;
-          font-family: ${a};
-          height: calc(var(--height, ${i}) * 1px);
-          justify-content: center;
-          overflow: hidden;
-          padding: 12px;
-          position: relative;
-          text-align: center;
-          width: calc(var(--width, ${n}) * 1px);
-        }
-        .magnifier {
-          position: absolute;
-          bottom: 0;
-          right: 10px;
-          transform: rotate(315deg);
-          font-size: 24px;
-          font-style: normal;
-          font-weight: bold;
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return l`<div class="response">
+import{e,h as t}from"./cssUtils-1002e72e.js";import{C as s}from"./CustomLitElement-d4cbc445.js";class r extends s{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return t`<div class="response">
       Expand to see student response
       <div class="magnifier">&#9906;</div>
-    </div>`}}export default c;export{c as MatchListResponse};
+    </div>`}}export default r;export{r as MatchListResponse};
 //# sourceMappingURL=MatchListResponse.js.map

dist/pies/MatchResponse.js

@@ -1,15 +0,5 @@
-import{L as t,c as e,d as r,j as s,e as o,f as a,g as i,i as c,h as d}from"./utils-5be58cd4.js";class l extends t{static get styles(){return[e`
+import{f as e,r as t,b as o,p as s,l as r,h as i}from"./cssUtils-1002e72e.js";import{C as c}from"./CustomLitElement-d4cbc445.js";import"./unsafe-html-5b707d11.js";import{g as h,r as d}from"./utils-c60e6fc2.js";class a extends c{static get styles(){return[e,t,o`
         .response {
-          align-items: start;
-          background-color: var(--background-color, ${r});
-          color: var(--color, ${s});
-          display: flex;
-          flex-direction: column;
-          font-size: ${o}px;
-          font-family: ${a};
-          height: calc(var(--height, ${i}) * 1px);
-          justify-content: start;
-          overflow: scroll;
-          padding: 4px;
-          width: calc(var(--width, ${c}) * 1px);
+          font-size: ${s}px;
+          padding: 4px 8px;
         }
@@ -20,3 +10,3 @@ p {
         .choice {
-          border: 1px solid var(--color, ${s});
+          border: 1px solid var(--pie-color, ${r});
           height: 12px;
@@ -34,16 +24,23 @@ width: 12px;
         .is-true {
-          background-color: var(--color, ${s});
+          background-color: var(--pie-color, ${r});
         }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}_getResponse(){const{headers:t,rows:e,choiceMode:r}=this.model||{},{answers:s}=this.session||{};return t&&e?d`<table>
+        .choice-value {
+          cursor: pointer;
+        }
+      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1},hoveredChoice:{type:Object}}}set hoveredChoice(e){const t=this._hoveredChoice;t&&e&&t.value===e.value||(this._hoveredChoice=e,this.requestUpdate("hoveredChoice",t))}get hoveredChoice(){return this._hoveredChoice}constructor(){super(),this._hoveredChoice=null}mouseover(e,t){const o=e.target.closest(".choice-value"),{offsetTop:s,offsetHeight:r,offsetLeft:i,offsetWidth:c}=o;this.hoveredChoice={top:s+r+4,value:t,left:i+c+10}}mouseout(){this.hoveredChoice=null}_renderResponse(){const{headers:e,rows:t,choiceMode:o}=this.model||{},{answers:s}=this.session||{};return e&&t?i`<table>
       <tr>
-        ${t.map((t,e)=>d`<td>${e?"C"+e:"Q-id"}</td>`)}
+        ${e.map((e,t)=>i`<td>${t?"C"+t:"Q-id"}</td>`)}
       </tr>
 
-      ${e.map(t=>{const{values:e}=t,o=s[t.id];return d`<tr>
-          <td>${t.id}</td>
+      ${t.map(e=>{const{values:t,title:r}=e,c=s[e.id];return i` <tr
+          class="choice-value"
+          @mouseover=${e=>this.mouseover(e,r)}
+          @mouseout=${this.mouseout}
+        >
+          <td>${e.id}</td>
 
-          ${(e||o).map((t,s)=>{let a="";const i=o&&o[s];return i&&(a=e[s]?d`&#10004;`:d`&#10006;`),d`
+          ${(t||c).map((e,s)=>{let r="";const d=c&&c[s];return d&&(r=h(t[s])),i`
               <td>
-                <div class="choice ${r} is-${i}">
-                  ${a}
+                <div class="choice ${o} is-${d}">
+                  ${r}
                 </div>
@@ -53,3 +50,6 @@ </td>
         </tr>`})}
-    </table>`:d``}render(){return d`<div class="response">${this._getResponse()}</div>`}}export default l;export{l as MatchResponse};
+    </table>`:i``}render(){return i`
+      <div class="response">${this._renderResponse()}</div>
+      ${d(this.hoveredChoice)}
+    `}}export default a;export{a as MatchResponse};
 //# sourceMappingURL=MatchResponse.js.map

dist/pies/MathInlineCell.js

@@ -1,8 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as MathInlineCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as MathInlineCell};
 //# sourceMappingURL=MathInlineCell.js.map

dist/pies/MathInlineResponse.js

@@ -1,19 +0,4 @@
-import{L as t,c as e,d as s,j as a,k as o,f as r,g as n,i,h as c}from"./utils-5be58cd4.js";import{u as l}from"./unsafe-html-371e8bd8.js";const u={ROUND_BRACKETS:"round_brackets",SQUARE_BRACKETS:"square_brackets",DOLLAR:"dollar",DOUBLE_DOLLAR:"double_dollar"},d={[u.ROUND_BRACKETS]:["\\(","\\)"],[u.SQUARE_BRACKETS]:["\\[","\\]"],[u.DOLLAR]:["$","$"],[u.DOUBLE_DOLLAR]:["$$","$$"]};class h extends t{static get styles(){return[e`
-        .response {
-          align-items: start;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${a});
-          display: flex;
-          flex-direction: column;
-          font-size: ${o}px;
-          font-family: ${r};
-          height: calc(var(--height, ${n}) * 1px);
-          justify-content: start;
-          overflow: hidden;
-          padding: 8px;
-          width: calc(var(--width, ${i}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1},imgSrc:{type:String,attribute:!1},svgSrc:{type:String,attribute:!1},mathLoaded:{type:Boolean,attribute:!1}}}constructor(){super();const t=this;window.MathJax={jax:["input/TeX","output/SVG"],extensions:["tex2jax.js","MathMenu.js","MathZoom.js"],showMathMenu:!1,showProcessingMessages:!1,messageStyle:"none",SVG:{useGlobalCache:!1},TeX:{extensions:["AMSmath.js","AMSsymbols.js","autoload-all.js"],inlineMath:[["$","$"],["\\(","\\)"]]},AuthorInit(){window.MathJax.Hub.Register.StartupHook("End",(function(){const{completeAnswer:e}=t.session||{};h.mathToSvg(((t,e)=>{let s=e;s===u.SQUARE_BRACKETS&&(console.warn("\\[...\\] is not supported yet"),s=u.ROUND_BRACKETS),s===u.DOUBLE_DOLLAR&&(console.warn("$$...$$ is not supported yet"),s=u.DOLLAR);const[a,o]=d[s]||d[u.ROUND_BRACKETS];return`${a}${t}${o}`})(e)).then(e=>{t.svgSrc=e}).catch(t=>console.error(t))}))}},(t=>{const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js",t.getElementsByTagName("head")[0].appendChild(e)})(document)}static mathToSvg(t){return new Promise(e=>{const s=t,a=document.createElement("div");a.innerHTML=s,window.MathJax.Hub.Queue(["Typeset",window.MathJax.Hub,a]),window.MathJax.Hub.Queue(()=>{const t=a.getElementsByTagName("svg")[0];t.setAttribute("xmlns","http://www.w3.org/2000/svg"),e(t.outerHTML)})})}render(){return c`<div class="response">
-      ${this.svgSrc?l(this.svgSrc):""}
-    </div>`}}export default h;export{h as MathInlineResponse};
+import{L as t,r as e,h as s}from"./cssUtils-1002e72e.js";import{u as a}from"./unsafe-html-5b707d11.js";const o={ROUND_BRACKETS:"round_brackets",SQUARE_BRACKETS:"square_brackets",DOLLAR:"dollar",DOUBLE_DOLLAR:"double_dollar"},r={[o.ROUND_BRACKETS]:["\\(","\\)"],[o.SQUARE_BRACKETS]:["\\[","\\]"],[o.DOLLAR]:["$","$"],[o.DOUBLE_DOLLAR]:["$$","$$"]};class n extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1},imgSrc:{type:String,attribute:!1},svgSrc:{type:String,attribute:!1},mathLoaded:{type:Boolean,attribute:!1}}}constructor(){super();const t=this;window.MathJax={jax:["input/TeX","output/SVG"],extensions:["tex2jax.js","MathMenu.js","MathZoom.js"],showMathMenu:!1,showProcessingMessages:!1,messageStyle:"none",SVG:{useGlobalCache:!1},TeX:{extensions:["AMSmath.js","AMSsymbols.js","autoload-all.js"],inlineMath:[["$","$"],["\\(","\\)"]]},AuthorInit(){window.MathJax.Hub.Register.StartupHook("End",(function(){const{completeAnswer:e}=t.session||{};n.mathToSvg(((t,e)=>{let s=e;s===o.SQUARE_BRACKETS&&(console.warn("\\[...\\] is not supported yet"),s=o.ROUND_BRACKETS),s===o.DOUBLE_DOLLAR&&(console.warn("$$...$$ is not supported yet"),s=o.DOLLAR);const[a,n]=r[s]||r[o.ROUND_BRACKETS];return`${a}${t}${n}`})(e)).then(e=>{t.svgSrc=e}).catch(t=>console.error(t))}))}},(t=>{const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js",t.getElementsByTagName("head")[0].appendChild(e)})(document)}static mathToSvg(t){return new Promise(e=>{const s=t,a=document.createElement("div");a.innerHTML=s,window.MathJax.Hub.Queue(["Typeset",window.MathJax.Hub,a]),window.MathJax.Hub.Queue(()=>{const t=a.getElementsByTagName("svg")[0];t.setAttribute("xmlns","http://www.w3.org/2000/svg"),e(t.outerHTML)})})}render(){return s`<div class="response">
+      ${this.svgSrc?a(this.svgSrc):""}
+    </div>`}}export default n;export{n as MathInlineResponse};
 //# sourceMappingURL=MathInlineResponse.js.map

dist/pies/MultipleChoiceCell.js

@@ -1,27 +0,24 @@
-import{L as t,c as e,d as s,j as a,k as r,f as o,m as i,a as c,e as l,o as n,h as d}from"./utils-5be58cd4.js";class p extends t{static get styles(){return[e`
+import{f as e,c as t,g as s,a as o,b as i,l as r,n as h,h as c}from"./cssUtils-1002e72e.js";import{C as a}from"./CustomLitElement-d4cbc445.js";import"./unsafe-html-5b707d11.js";import{a as l,r as n}from"./utils-c60e6fc2.js";class u extends a{static get styles(){return[e,t,s,o,i`
         :host {
-          color: var(--color, black);
+          color: var(--pie-color, black);
         }
         .cell {
           align-items: center;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${a});
+          color: var(--pie-color, ${r});
           display: flex;
-          font-size: ${r}px;
-          font-family: ${o};
-          height: calc(var(--height, ${i}) * 1px);
+          font-size: ${h}px;
           justify-content: center;
-          overflow: hidden;
-          width: calc(var(--width, ${c}) * 1px);
         }
         span {
           line-height: 3;
+          display: flex;
         }
         .correctness-indicator {
-          font-size: ${l}px;
           line-height: 2;
-          margin-left: -4px;
-          vertical-align: top;
+          margin-left: -2px;
         }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){const t=n(this.model,this.session);return d` <div class="cell"><span>${t}</span></div> `}}export default p;export{p as MultipleChoiceCell};
+      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1},hoveredChoice:{type:Object}}}set hoveredChoice(e){const t=this._hoveredChoice;t&&e&&t.value===e.value||(this._hoveredChoice=e,this.requestUpdate("hoveredChoice",t))}get hoveredChoice(){return this._hoveredChoice}constructor(){super(),this._hoveredChoice=null}mouseover(e,t){const s=e.target.closest(".choice-value"),{offsetTop:o,offsetHeight:i,offsetLeft:r,offsetWidth:h}=s;this.hoveredChoice={top:o+i/1.5,value:t,left:r+h/2}}mouseout(){this.hoveredChoice=null}render(){const e=l(this.model,this.session,{mouseover:this.mouseover.bind(this),mouseout:this.mouseout.bind(this)});return c`
+      <div class="cell"><span>${e}</span></div>
+      ${n(this.hoveredChoice)}
+    `}}export default u;export{u as MultipleChoiceCell};
 //# sourceMappingURL=MultipleChoiceCell.js.map

dist/pies/MultipleChoiceResponse.js

@@ -1,26 +0,22 @@
-import{L as e,c as t,d as s,j as r,p as a,f as i,g as o,i as n,k as c,h as l,o as p}from"./utils-5be58cd4.js";class d extends e{static get styles(){return[t`
+import{f as e,g as t,a as s,r as o,b as i,o as r,n as h,h as a}from"./cssUtils-1002e72e.js";import{C as c}from"./CustomLitElement-d4cbc445.js";import"./unsafe-html-5b707d11.js";import{a as n,r as u}from"./utils-c60e6fc2.js";class d extends c{static get styles(){return[e,t,s,o,i`
         .response {
           align-items: center;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${r});
-          display: flex;
-          font-size: ${a}px;
-          font-family: ${i};
-          height: calc(var(--height, ${o}) * 1px);
+          font-size: ${r}px;
           justify-content: center;
-          overflow: hidden;
-          width: calc(var(--width, ${n}) * 1px);
         }
         span {
           line-height: 2;
+          display: flex;
         }
         .correctness-indicator {
-          font-size: ${c}px;
+          font-size: ${h}px;
           line-height: 1;
-          margin-left: -8px;
-          vertical-align: top;
+          margin-left: -4px;
         }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return l`<div class="response">
-      <span>${p(this.model,this.session)}</span>
+      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1},hoveredChoice:{type:Object}}}set hoveredChoice(e){const t=this._hoveredChoice;t&&e&&t.value===e.value||(this._hoveredChoice=e,this.requestUpdate("hoveredChoice",t))}get hoveredChoice(){return this._hoveredChoice}constructor(){super(),this._hoveredChoice=null}mouseover(e,t){const s=e.target.closest(".choice-value"),{offsetTop:o,offsetHeight:i,offsetLeft:r,offsetWidth:h}=s;this.hoveredChoice={top:o+i/1.5,value:t,left:r+h/2}}mouseout(){this.hoveredChoice=null}render(){return a`<div class="response">
+      <span
+        >${n(this.model,this.session,{mouseover:this.mouseover.bind(this),mouseout:this.mouseout.bind(this)})}</span
+      >
+      ${u(this.hoveredChoice)}
     </div>`}}export default d;export{d as MultipleChoiceResponse};
 //# sourceMappingURL=MultipleChoiceResponse.js.map

dist/pies/NumberLineCell.js

@@ -1,8 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as NumberLineCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as NumberLineCell};
 //# sourceMappingURL=NumberLineCell.js.map

dist/pies/NumberLineResponse.js

@@ -1,31 +0,5 @@
-import{L as t,c as e,d as s,b as r,e as o,f as a,g as i,i as n,h as l}from"./utils-5be58cd4.js";class c extends t{static get styles(){return[e`
-        .response {
-          align-items: center;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${r});
-          display: flex;
-          font-size: ${o}px;
-          font-style: italic;
-          font-family: ${a};
-          height: calc(var(--height, ${i}) * 1px);
-          justify-content: center;
-          overflow: hidden;
-          padding: 12px;
-          position: relative;
-          text-align: center;
-          width: calc(var(--width, ${n}) * 1px);
-        }
-        .magnifier {
-          position: absolute;
-          bottom: 0;
-          right: 10px;
-          transform: rotate(315deg);
-          font-size: 24px;
-          font-style: normal;
-          font-weight: bold;
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return l`<div class="response">
+import{e,h as t}from"./cssUtils-1002e72e.js";import{C as s}from"./CustomLitElement-d4cbc445.js";class r extends s{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return t`<div class="response">
       Expand to see student response
       <div class="magnifier">&#9906;</div>
-    </div>`}}export default c;export{c as NumberLineResponse};
+    </div>`}}export default r;export{r as NumberLineResponse};
 //# sourceMappingURL=NumberLineResponse.js.map

dist/pies/OrderingCell.js

@@ -1,8 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as OrderingCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as OrderingCell};
 //# sourceMappingURL=OrderingCell.js.map

dist/pies/OrderingResponse.js

@@ -1,31 +0,5 @@
-import{L as t,c as e,d as s,b as r,e as o,f as a,g as i,i as n,h as l}from"./utils-5be58cd4.js";class c extends t{static get styles(){return[e`
-        .response {
-          align-items: center;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${r});
-          display: flex;
-          font-size: ${o}px;
-          font-style: italic;
-          font-family: ${a};
-          height: calc(var(--height, ${i}) * 1px);
-          justify-content: center;
-          overflow: hidden;
-          padding: 12px;
-          position: relative;
-          text-align: center;
-          width: calc(var(--width, ${n}) * 1px);
-        }
-        .magnifier {
-          position: absolute;
-          bottom: 0;
-          right: 10px;
-          transform: rotate(315deg);
-          font-size: 24px;
-          font-style: normal;
-          font-weight: bold;
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return l`<div class="response">
+import{e,h as t}from"./cssUtils-1002e72e.js";import{C as s}from"./CustomLitElement-d4cbc445.js";class r extends s{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return t`<div class="response">
       Expand to see student response
       <div class="magnifier">&#9906;</div>
-    </div>`}}export default c;export{c as OrderingResponse};
+    </div>`}}export default r;export{r as OrderingResponse};
 //# sourceMappingURL=OrderingResponse.js.map

dist/pies/SelectTextCell.js

@@ -1,9 +0,2 @@
-import{L as t,c as e,d as r,m as a,a as s,h as c}from"./utils-5be58cd4.js";class i extends t{static get styles(){return[e`
-        .cell {
-          background-color: var(--background-color, ${r});
-          height: calc(var(--height, ${a}) * 1px);
-          overflow: hidden;
-          width: calc(var(--width, ${s}) * 1px);
-        }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return c`<div class="cell"></div>`}}export default i;export{i as SelectTextCell};
+import{L as t,c as e,h as s}from"./cssUtils-1002e72e.js";class r extends t{static get styles(){return[e]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}render(){return s`<div class="cell"></div>`}}export default r;export{r as SelectTextCell};
 //# sourceMappingURL=SelectTextCell.js.map

dist/pies/SelectTextResponse.js

@@ -1,23 +0,18 @@
-import{L as t,c as e,d as s,j as r,k as n,f as o,g as a,i,h as c}from"./utils-5be58cd4.js";class l extends t{static get styles(){return[e`
-        .response {
-          align-items: start;
-          background-color: var(--background-color, ${s});
-          color: var(--color, ${r});
-          display: flex;
-          flex-direction: column;
-          font-size: ${n}px;
-          font-family: ${o};
-          height: calc(var(--height, ${a}) * 1px);
-          justify-content: start;
-          overflow: hidden;
-          padding: 8px;
-          width: calc(var(--width, ${i}) * 1px);
-        }
+import{f as e,g as t,r as s,b as o,h as r}from"./cssUtils-1002e72e.js";import{C as i}from"./CustomLitElement-d4cbc445.js";import"./unsafe-html-5b707d11.js";import{g as h,r as c}from"./utils-c60e6fc2.js";class n extends i{static get styles(){return[e,t,s,o`
         p {
           margin: 2px;
         }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}_getResponse(){const{tokens:t}=this.model||{},{selectedTokens:e}=this.session||{};return t&&t.length&&e&&e.length?e.map(e=>{const s=t.find(t=>t.start===e.start&&t.end===e.end);if(!s)return c``;const{text:r,correct:n}=s;return c`<p>
-        ${n?c`&#10004;`:c`&#10006;`}
-        ${r.length>12?r.slice(0,12)+"...":r}
-      </p>`}):c``}render(){return c`<div class="response">${this._getResponse()}</div>`}}export default l;export{l as SelectTextResponse};
+      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1},hoveredChoice:{type:Object}}}set hoveredChoice(e){const t=this._hoveredChoice;t&&e&&t.value===e.value||(this._hoveredChoice=e,this.requestUpdate("hoveredChoice",t))}get hoveredChoice(){return this._hoveredChoice}constructor(){super(),this._hoveredChoice=null}mouseover(e,t){const s=e.target.closest(".choice-value"),{offsetTop:o,offsetHeight:r,offsetLeft:i,offsetWidth:h}=s;this.hoveredChoice={top:o+r/2,value:t,left:i+h}}mouseout(){this.hoveredChoice=null}_renderResponse(){const{tokens:e}=this.model||{},{selectedTokens:t}=this.session||{};return e&&e.length&&t&&t.length?t.map(t=>{const s=e.find(e=>e.start===t.start&&e.end===t.end);if(!s)return r``;const{text:o,correct:i}=s;return r` <div
+        class="choice-value"
+        @mouseover=${e=>this.mouseover(e,o)}
+        @mouseout=${this.mouseout}
+      >
+        <p>
+          ${h(i)}
+          ${o.length>12?o.slice(0,12)+"...":o}
+        </p>
+      </div>`}):r``}render(){return r`
+      <div class="response">${this._renderResponse()}</div>
+      ${c(this.hoveredChoice)}
+    `}}export default n;export{n as SelectTextResponse};
 //# sourceMappingURL=SelectTextResponse.js.map

package.json

@@ -6,3 +6,3 @@ {
   },
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Extended capabilites for pie-elements",
@@ -9,0 +9,0 @@ "author": "PIE Api Authors",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of package files

76

increased by5.56%

Worsened metrics

Total package byte prevSize

330320

decreased by-1.19%

Lines of code

1076

decreased by-9.81%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes