@citolab/qti-components 7.0.6-beta.2 → 7.0.6-beta.4

package/dist/chunks/{chunk-K6ATVWMP.js → chunk-MEQM6M67.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-ELDMXTUQ.js";
 import {
   Interaction
-} from "./chunk-ZPNJ2HP5.js";
+} from "./chunk-OIRWOI3E.js";
 import {
   itemContextVariables
 } from "./chunk-DLUJN2FW.js";
@@ -61,13 +61,13 @@ var QtiAssessmentItem = class extends LitElement {
         feedbackElement.checkShowFeedback(feedbackElement.outcomeIdentifier);
       }
     });
-    this.addEventListener("qti-register-interaction", (e) => {
-      e.stopPropagation();
-      const composedPath = e.composedPath();
-      if (e.composedPath.length === 1) {
-        this._interactionElements.push(composedPath[0]);
+    this.addEventListener(
+      "qti-register-interaction",
+      (e) => {
+        e.stopPropagation();
+        this._interactionElements.push(e.detail.interactionElement);
       }
-    });
+    );
     this.addEventListener("end-attempt", (e) => {
       const { responseIdentifier, countAttempt } = e.detail;
       this.validate();
@@ -145,22 +145,23 @@ var QtiAssessmentItem = class extends LitElement {
   render() {
     return html`<slot></slot>`;
   }
+  /**
+   * Toggles the display of correct responses for interactions.
+   * @param show - A boolean indicating whether to show or hide correct responses.
+   */
   showCorrectResponse(show) {
-    const responseVariables = this._context.variables.filter(
-      (vari) => "correctResponse" in vari && vari.correctResponse
-    );
-    const responses = responseVariables.map((cr) => {
-      return {
-        responseIdentifier: cr.identifier,
-        response: cr.correctResponse
-      };
-    });
-    for (const response of responses) {
+    const responses = this._context.variables.filter(
+      (variable) => "correctResponse" in variable && variable.correctResponse
+    ).map((variable) => ({
+      responseIdentifier: variable.identifier,
+      response: variable.correctResponse || ""
+    }));
+    for (const { responseIdentifier, response } of responses) {
       const interaction = this._interactionElements.find(
-        (i) => i.getAttribute("response-identifier") === response.responseIdentifier
+        (element) => element.getAttribute("response-identifier") === responseIdentifier
       );
       if (interaction) {
-        interaction.correctResponse = show ? response.response : "";
+        interaction.correctResponse = show ? response : "";
       }
     }
   }
@@ -744,7 +745,7 @@ var FlippablesMixin = (superClass, _droppablesSel, _draggablesSel) => {
 
 // src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts
 import { property as property4 } from "lit/decorators.js";
-var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelector, dragContainersSelector, appendClone = "default") => {
+var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelector, dragContainersSelector) => {
   class DragDropInteractionElement extends FlippablesMixin(
     superClass,
     droppablesSelector,
@@ -771,14 +772,10 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       // Offset for positioning the drag clone
       this.isDragging = false;
       // Whether a drag operation is ongoing
-      this.rootNode = null;
-      // Root node for boundary calculations
       this.allDropzones = [];
       // All dropzones for keyboard navigation
       this.lastTarget = null;
       // Last touch target
-      this.dropzoneOriginalParent = null;
-      // Original parent of the drag clone
       this.currentDropTarget = null;
       // Current droppable element
       this.MIN_DRAG_DISTANCE = 5;
@@ -1051,10 +1048,6 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
     }
     handleTouchEnd(e) {
       if (this.isDragging) {
-        if (this.currentDropTarget) {
-          const draggable = this.dragClone;
-          this.moveDraggableToDroppable(draggable, this.currentDropTarget);
-        }
         this.resetDragState();
       }
       this._internals.states.delete("--dragzone-active");
@@ -1063,7 +1056,9 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       this._internals.states.delete("--dragzone-active");
       this.deactivateDragLocation();
       this.deactivateDroppables();
-      this.dragClone.removeAttribute("dragging");
+      this.draggables.forEach((d) => {
+        d.removeAttribute("dragging");
+      });
       e.preventDefault();
     }
     handleTouchCancel(_e) {
@@ -1109,21 +1104,20 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       if (this.dragClone) {
         const isDropped = this.currentDropTarget !== null;
         const droppedInDragContainer = !isDropped || this.dragContainers.includes(this.currentDropTarget);
-        if (!droppedInDragContainer) {
-          const computedStyles = window.getComputedStyle(this.dragSource);
-          for (let i = 0; i < computedStyles.length; i++) {
-            const key = computedStyles[i];
-            this.dragClone.style.setProperty(key, computedStyles.getPropertyValue(key));
-          }
-          this.dragClone.style.opacity = "1.0";
-          this.dragClone.style.display = "block";
-          this.dragClone.style.pointerEvents = "auto";
-        } else {
+        if (isDropped && this.currentDropTarget && !droppedInDragContainer) {
+          const cleanClone = this.dragSource.cloneNode(true);
+          cleanClone.removeAttribute("style");
+          this.currentDropTarget.appendChild(cleanClone);
+          this.draggablesModified([cleanClone], []);
+        }
+        if (droppedInDragContainer) {
           this.dragSource.style.opacity = "1.0";
           this.dragSource.style.display = "block";
+          this.dragSource.style.position = "static";
           this.dragSource.style.pointerEvents = "auto";
-          this.dragClone.remove();
         }
+        this.dragClone.remove();
+        this.draggablesModified([], [this.dragClone]);
       }
       this.isDragging = false;
       this.isDraggable = false;
@@ -1132,6 +1126,7 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       this.touchStartPoint = null;
       this.currentDropTarget = null;
       this.lastTarget = null;
+      this.deactivateDroppables();
     }
     checkAllMaxAssociations() {
       this.droppables.forEach((d) => {
@@ -1199,7 +1194,6 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       return this.droppables.filter((d) => d.childElementCount > 0).length;
     }
     saveResponse() {
-      this.validate();
       const response = this.collectResponseData();
       this.dispatchEvent(
         new CustomEvent("qti-interaction-response", {
@@ -1228,10 +1222,23 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       if (!this.isDragging || !this.dragClone) return;
       const newLeft = touch.clientX - this.cloneOffset.x;
       const newTop = touch.clientY - this.cloneOffset.y;
-      const { newLeft: boundedLeft, newTop: boundedTop } = this.applyBoundaries(newLeft, newTop, this.dragClone);
+      const { newLeft: boundedLeft, newTop: boundedTop } = this.applyInteractionBoundaries(
+        newLeft,
+        newTop,
+        this.dragClone
+      );
       this.dragClone.style.left = `${boundedLeft}px`;
       this.dragClone.style.top = `${boundedTop}px`;
     }
+    applyInteractionBoundaries(newLeft, newTop, element) {
+      const interactionRect = this.getBoundingClientRect();
+      const elementRect = element.getBoundingClientRect();
+      const elementWidth = elementRect.width;
+      const elementHeight = elementRect.height;
+      const boundedLeft = Math.max(interactionRect.left, Math.min(newLeft, interactionRect.right - elementWidth));
+      const boundedTop = Math.max(interactionRect.top, Math.min(newTop, interactionRect.bottom - elementHeight));
+      return { newLeft: boundedLeft, newTop: boundedTop };
+    }
     getEventCoordinates(event, page = false) {
       const touch = event.touches ? event.touches[0] : event;
       return {
@@ -1244,20 +1251,6 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       const yDist = Math.abs(touch.clientY - this.touchStartPoint.y);
       return xDist + yDist;
     }
-    applyBoundaries(newLeft, newTop, element) {
-      let boundaryRect = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
-      if (this.rootNode instanceof ShadowRoot) {
-        boundaryRect = this.rootNode.host.getBoundingClientRect();
-      } else if (this.rootNode instanceof Document) {
-        boundaryRect = document.documentElement.getBoundingClientRect();
-      }
-      const elementRect = element.getBoundingClientRect();
-      const elementWidth = elementRect.width;
-      const elementHeight = elementRect.height;
-      const boundedLeft = Math.max(boundaryRect.left, Math.min(newLeft, boundaryRect.right - elementWidth));
-      const boundedTop = Math.max(boundaryRect.top, Math.min(newTop, boundaryRect.bottom - elementHeight));
-      return { newLeft: boundedLeft, newTop: boundedTop };
-    }
     findClosestDropzone() {
       const allActiveDropzones = this.allDropzones.filter((d) => !d.hasAttribute("disabled"));
       if (!this.dragClone || allActiveDropzones.length === 0) return null;
@@ -1299,82 +1292,61 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       element.dispatchEvent(event);
     }
     appendClone() {
-      const interaction = this.findParentInteractionElement(this.dragSource);
-      if (appendClone == "default") {
-        if (interaction) {
-          interaction.appendChild(this.dragClone);
-        } else if (this.rootNode instanceof ShadowRoot) {
-          this.rootNode.host.appendChild(this.dragClone);
-        } else if (this.rootNode instanceof Document) {
-          document.body.appendChild(this.dragClone);
-        }
-      } else if (appendClone == "interaction") {
-        if (interaction) {
-          interaction.appendChild(this.dragClone);
-        } else {
-          console.error("No interaction found to append the drag clone");
-        }
-      } else if (appendClone == "host") {
-        if (this.rootNode instanceof ShadowRoot) {
-          this.rootNode.host.appendChild(this.dragClone);
-        } else {
-          console.error("No host found to append the drag clone");
-        }
-      } else if (appendClone == "body") {
-        document.body.appendChild(this.dragClone);
-      }
+      document.body.appendChild(this.dragClone);
     }
     handleTouchStart(e) {
+      if (this.isDragging) {
+        return;
+      }
       const { x, y } = this.getEventCoordinates(e);
-      this.dropzoneOriginalParent = e.currentTarget.parentElement;
       this.touchStartPoint = { x, y };
       this.dragSource = e.currentTarget;
       this.isDraggable = true;
-      this.rootNode = this.dragSource.getRootNode();
       this._internals.states.add("--dragzone-enabled");
       this._internals.states.add("--dragzone-active");
-      this.dragSource.setAttribute("dragging", "");
       this.activateDragLocation();
       this.activateDroppables(this.dragSource);
       const draggableInDragContainer = this.findDraggableInDraggableContainer(
         this.dragSource.getAttribute("identifier")
       );
-      const parent = this.dragSource.parentElement;
-      if (!this.droppables.includes(parent)) {
-        const rect = draggableInDragContainer.getBoundingClientRect();
-        this.cloneOffset.x = x - rect.left;
-        this.cloneOffset.y = y - rect.top;
-        this.dragClone = draggableInDragContainer.cloneNode(true);
-        const computedStyles = window.getComputedStyle(this.dragSource);
-        for (let i = 0; i < computedStyles.length; i++) {
-          const key = computedStyles[i];
-          this.dragClone.style.setProperty(key, computedStyles.getPropertyValue(key));
-        }
-        if (rect) {
-          this.setDragCloneStyles(rect);
-        }
-        this.appendClone();
-        const matchMax = this.getMatchMaxValue(this.dragSource);
-        const currentDraggables = this.draggables.filter(
-          (d) => d.getAttribute("identifier") === this.dragSource.getAttribute("identifier")
-        );
-        if (matchMax !== 0 && currentDraggables.length >= matchMax) {
-          draggableInDragContainer.style.opacity = "0.0";
-          draggableInDragContainer.style.pointerEvents = "none";
-        } else {
-          draggableInDragContainer.style.opacity = "1.0";
-        }
-        e.preventDefault();
+      const draggedFromDropzone = this.droppables.some(
+        (d) => Array.from(d.children).some((child) => child === this.dragSource)
+      );
+      const rect = this.dragSource.getBoundingClientRect();
+      if (draggedFromDropzone) {
+        this.dragSource.remove();
+        this.draggablesModified([], [this.dragSource]);
+        this.dragSource = draggableInDragContainer;
+      }
+      this.cloneOffset.x = x - rect.left;
+      this.cloneOffset.y = y - rect.top;
+      this.dragClone = draggableInDragContainer.cloneNode(true);
+      const computedStyles = window.getComputedStyle(draggableInDragContainer);
+      for (let i = 0; i < computedStyles.length; i++) {
+        const key = computedStyles[i];
+        this.dragClone.style.setProperty(key, computedStyles.getPropertyValue(key));
+      }
+      const rectOrg = draggableInDragContainer.getBoundingClientRect();
+      this.dragClone.style.width = `${rectOrg.width}px`;
+      this.dragClone.style.height = `${rectOrg.height}px`;
+      if (rect) {
+        this.setDragCloneStyles(rect);
+      }
+      this.dragClone.style.display = "block";
+      this.dragClone.style.opacity = "1";
+      this.appendClone();
+      const matchMax = this.getMatchMaxValue(this.dragSource);
+      const currentDraggables = this.draggables.filter(
+        (d) => d.getAttribute("identifier") === this.dragSource.getAttribute("identifier")
+      );
+      if (matchMax !== 0 && currentDraggables.length >= matchMax) {
+        draggableInDragContainer.style.opacity = "0.0";
+        draggableInDragContainer.style.pointerEvents = "none";
       } else {
-        this.enableDroppable(parent);
-        this.dragClone = this.dragSource;
-        this.dragSource = this.findDraggableInDraggableContainer(this.dragSource.getAttribute("identifier"));
-        const rect = this.dragClone.getBoundingClientRect();
-        this.appendClone();
-        if (rect) {
-          this.setDragCloneStyles(rect);
-        }
+        draggableInDragContainer.style.opacity = "1.0";
       }
+      e.preventDefault();
+      this.dragClone.setAttribute("dragging", "");
     }
     findParentInteractionElement(element) {
       let parent = element.parentElement;
@@ -1406,8 +1378,6 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       this.dragClone.style.position = "fixed";
       this.dragClone.style.top = `${rect.top}px`;
       this.dragClone.style.left = `${rect.left}px`;
-      this.dragClone.style.width = `${rect.width}px`;
-      this.dragClone.style.height = `${rect.height}px`;
       this.dragClone.style.setProperty("box-sizing", "border-box", "important");
       this.dragClone.style.zIndex = "9999";
       this.dragClone.style.pointerEvents = "none";
@@ -3346,8 +3316,7 @@ var QtiMatchInteraction = class extends DragDropInteractionMixin(
   Interaction,
   "qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-simple-match-set:last-of-type > qti-simple-associable-choice > qti-simple-associable-choice",
   "qti-simple-match-set:last-of-type > qti-simple-associable-choice",
-  "qti-simple-match-set:first-of-type",
-  "body"
+  "qti-simple-match-set:first-of-type"
 ) {
   constructor() {
     super(...arguments);
@@ -3423,6 +3392,9 @@ var QtiMatchInteraction = class extends DragDropInteractionMixin(
       return;
     } else if (Array.isArray(responseValue)) {
       this.correctOptions = responseValue;
+      if (!this.class.split(" ").includes("qti-match-tabular")) {
+        this.value = responseValue;
+      }
     }
   }
   render() {
@@ -5962,12 +5934,12 @@ var QtiResponseDeclaration = class extends QtiVariableDeclaration {
     if (correctResponse) {
       const values = correctResponse.querySelectorAll("qti-value");
       if (this.cardinality === "single" && values.length > 0) {
-        result = values[0].textContent;
+        result = values[0].textContent.trim();
         values[0].remove();
       } else if (this.cardinality !== "single") {
         result = [];
         for (let i = 0; i < values.length; i++) {
-          result.push(values[i].textContent);
+          result.push(values[i].textContent.trim());
           values[i].remove();
         }
       }
@@ -6088,4 +6060,4 @@ export {
   QtiOutcomeDeclaration,
   QtiResponseDeclaration
 };
-//# sourceMappingURL=chunk-K6ATVWMP.js.map
+//# sourceMappingURL=chunk-MEQM6M67.js.map