@qti-components/base 1.5.0 → 2.0.0

package/dist/abstract/interaction.d.ts

@@ -1,15 +1,42 @@
 import { LitElement } from 'lit';
-import type { ConfigContext } from '../context/config.context';
+import type { PropertyValues } from 'lit';
+import type { InteractionContext } from '../context/interaction.context';
+import type { ConfigContext, ValidationDisplayMode } from '../context/config.context';
+import type { ValidatableInteraction } from '../lib/interaction.interface';
 import type { ResponseVariable } from '../lib/variables';
-import type { IInteraction } from '../lib/interaction.interface';
-export declare enum Correctness {
-    Correct = "correct",
-    PartiallyCorrect = "partially-correct",
-    Incorrect = "incorrect"
-}
-export declare abstract class Interaction extends LitElement implements IInteraction {
+/**
+ * Shared QTI interaction base. Formative correction behavior is supplied by the
+ * `@qti-components/corrections` package.
+ */
+export declare abstract class Interaction extends LitElement implements ValidatableInteraction {
+    #private;
     private _context;
-    protected configContext: ConfigContext;
+    /**
+     * Delivery configuration, from the nearest provider — `qti-test` or `qti-item`.
+     *
+     * **Public so it can be assigned directly, which is the development-time route.** An interaction
+     * has to work standalone, and in a story or a spec there is usually no provider above it — so
+     * setting the field is all that is needed:
+     *
+     *     orderInteraction.configContext = { allowReorder: false, validationDisplayMode: 'none' };
+     *
+     * With no provider, nothing ever overwrites it. That is the whole contract, and its limit: where a
+     * provider DOES exist it re-emits on its next update and wins, because `@consume` writes this same
+     * field. There is no merging — set the value on the provider in that case.
+     *
+     * In a lit-html template, bind it as a property rather than assigning after the fact:
+     *
+     *     html`<qti-order-interaction .configContext=${{ allowReorder: false }}>…`
+     *
+     * The binding is committed on the detached template clone, before the fragment is inserted, so it
+     * is in place by `connectedCallback` — which matters for anything that reads config on connect.
+     *
+     * It was `protected`, which fooled nobody: every caller reached it anyway through an
+     * `as any` / `as { configContext?: … }` cast. Public says what was already true and removes the
+     * casts, rather than pretending at an encapsulation the type system was the only thing enforcing.
+     */
+    configContext: ConfigContext;
+    protected _interactionContext: Readonly<InteractionContext>;
     static formAssociated: boolean;
     protected _internals: ElementInternals;
     get internals(): ElementInternals;
@@ -17,71 +44,34 @@ export declare abstract class Interaction extends LitElement implements IInterac
     disabled: boolean;
     readonly: boolean;
     name: any;
-    /**
-     * The correct response for this interaction. Can be set as a comma-separated
-     * string via attribute or as string/string[] via property.
-     *
-     * @example
-     * ```html
-     * <qti-choice-interaction correct-response="A,B">
-     * ```
-     */
-    set correctResponseAttr(val: string | null);
-    get correctResponseAttr(): string | null;
-    /**
-     * Shows which choices are correct with inline indicators.
-     * Adds `correct-response` / `incorrect-response` states to choices.
-     */
-    showCorrectResponse: boolean;
-    protected _handleShowCorrectResponseChange: (_: boolean, show: boolean) => void;
-    /**
-     * Shows a cloned interaction with the correct answers filled in.
-     * Creates a disabled copy positioned after this interaction.
-     */
-    showFullCorrectResponse: boolean;
-    protected _handleShowFullCorrectResponseChange: (_: boolean, show: boolean) => void;
-    /**
-     * Shows feedback on candidate's selections compared to correct response.
-     * Adds `candidate-correct` / `candidate-incorrect` states to choices.
-     */
-    showCandidateCorrection: boolean;
-    protected _handleShowCandidateCorrectionChange: (_: boolean, show: boolean) => void;
-    protected _isFullCorrectResponse: boolean;
-    get isFullCorrectResponse(): Readonly<boolean>;
-    set isFullCorrectResponse(val: Readonly<boolean>);
-    protected _correctResponse: string | string[] | null;
-    /**
-     * Get/set correct response programmatically.
-     * This property syncs with the `correct-response` attribute.
-     */
-    get correctResponse(): Readonly<string | string[] | null>;
-    set correctResponse(val: Readonly<string | string[] | null>);
-    /**
-     * Returns the correctness of the current response compared to correct response.
-     * Works in both standalone mode (using `correct-response` attribute) and
-     * item context mode (using responseVariable).
-     */
-    get correctness(): Readonly<Correctness | null>;
+    /** Extension point used by wrappers that should not register as candidate inputs. */
+    protected get registersWithItem(): boolean;
     get isInline(): boolean;
     get responseVariable(): ResponseVariable | undefined;
-    toggleCorrectResponse(show: boolean): void;
-    protected toggleFullCorrectResponse(show: boolean): Promise<void>;
-    protected toggleInternalCorrectResponse(show: boolean): void;
-    toggleCandidateCorrection(show: boolean): void;
-    constructor();
     abstract validate(): boolean;
     get value(): string | null;
     set value(val: string | null);
     abstract get response(): string | string[] | null;
     abstract set response(val: string | string[] | null);
     reportValidity(): boolean;
+    protected get validationDisplayMode(): ValidationDisplayMode;
+    protected resolveAllowReorder(options?: {
+        defaultWhenUnset?: boolean;
+    }): boolean;
+    protected resolveDisableAfterMaxReached(options?: {
+        defaultWhenUnset?: boolean;
+    }): boolean;
+    protected setInteractionValidity(isValid: boolean, validityMessage?: string, anchor?: HTMLElement | null, options?: {
+        suppressInline?: boolean;
+    }): void;
+    protected updateInlineValidationMessage(): void;
+    protected clearInlineValidationMessage(): void;
+    protected getValidationMessageElement(): HTMLElement | null;
     reset(): void;
-    /**
-     * Called by the browser when the associated form is reset.
-     * Part of the Form-Associated Custom Elements API.
-     */
     formResetCallback(): void;
     connectedCallback(): void;
-    protected firstUpdated(): void;
     saveResponse(value: string | string[], state?: string | null): void;
+    constructor();
+    /** Optional lifecycle bridge for interaction subclasses that do not need changed-property data. */
+    protected firstUpdated(_changedProperties?: PropertyValues<this>): void;
 }

package/dist/abstract/interaction.js

@@ -4,284 +4,133 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { property, state } from 'lit/decorators.js';
+import { consume, provide } from '@lit/context';
 import { LitElement } from 'lit';
-import { consume } from '@lit/context';
-import { watch } from '@qti-components/utilities';
+import { property } from 'lit/decorators.js';
 import { configContext } from '../context/config.context';
-import { itemContext } from '../context/qti-assessment-item.context';
-export var Correctness;
-(function (Correctness) {
-    Correctness["Correct"] = "correct";
-    Correctness["PartiallyCorrect"] = "partially-correct";
-    Correctness["Incorrect"] = "incorrect";
-})(Correctness || (Correctness = {}));
+import { interactionContext } from '../context/interaction.context';
+import { itemContext } from '../context/item.context';
+/**
+ * Shared QTI interaction base. Formative correction behavior is supplied by the
+ * `@qti-components/corrections` package.
+ */
 export class Interaction extends LitElement {
+    #didLogDisableAfterIfMaxChoicesReachedDeprecation;
     static { this.formAssociated = true; }
     get internals() {
         return this._internals;
     }
-    // ═══════════════════════════════════════════════════════════════════════════════
-    // CORRECT RESPONSE - Standalone mode attributes
-    // ═══════════════════════════════════════════════════════════════════════════════
-    /**
-     * The correct response for this interaction. Can be set as a comma-separated
-     * string via attribute or as string/string[] via property.
-     *
-     * @example
-     * ```html
-     * <qti-choice-interaction correct-response="A,B">
-     * ```
-     */
-    set correctResponseAttr(val) {
-        if (val === null) {
-            this._correctResponse = null;
-        }
-        else if (val.includes(',')) {
-            this._correctResponse = val.split(',').map(v => v.trim());
-        }
-        else {
-            this._correctResponse = val;
-        }
-    }
-    get correctResponseAttr() {
-        if (this._correctResponse === null || this._correctResponse === undefined) {
-            return null;
-        }
-        return Array.isArray(this._correctResponse) ? this._correctResponse.join(',') : this._correctResponse;
-    }
-    get isFullCorrectResponse() {
-        return this._isFullCorrectResponse;
-    }
-    set isFullCorrectResponse(val) {
-        this._isFullCorrectResponse = val;
-        if (val) {
-            this.disabled = true;
-            this.setAttribute('inert', '');
-            this.setAttribute('response-identifier', this.responseIdentifier + '_cr');
-        }
-    }
-    /**
-     * Get/set correct response programmatically.
-     * This property syncs with the `correct-response` attribute.
-     */
-    get correctResponse() {
-        // In standalone mode, use the local _correctResponse
-        // In item context mode, prefer responseVariable.correctResponse
-        const responseVariable = this.responseVariable;
-        if (responseVariable?.correctResponse) {
-            return responseVariable.correctResponse;
-        }
-        return this._correctResponse;
-    }
-    set correctResponse(val) {
-        const oldVal = this._correctResponse;
-        this._correctResponse = val;
-        // Sync to attribute
-        if (val === null || val === undefined) {
-            this.removeAttribute('correct-response');
-        }
-        else {
-            this.setAttribute('correct-response', Array.isArray(val) ? val.join(',') : val);
-        }
-        this.requestUpdate('_correctResponse', oldVal);
-    }
-    /**
-     * Returns the correctness of the current response compared to correct response.
-     * Works in both standalone mode (using `correct-response` attribute) and
-     * item context mode (using responseVariable).
-     */
-    get correctness() {
-        const correctResponse = this.correctResponse;
-        if (!correctResponse)
-            return null;
-        const currentResponse = this.response;
-        // No response yet (null, undefined, empty string, or empty array)
-        if (currentResponse === null ||
-            currentResponse === undefined ||
-            currentResponse === '' ||
-            (Array.isArray(currentResponse) && currentResponse.length === 0)) {
-            return null;
-        }
-        // Normalize both to arrays for comparison
-        const correctArr = Array.isArray(correctResponse) ? correctResponse : [correctResponse];
-        const responseArr = Array.isArray(currentResponse) ? currentResponse : [currentResponse];
-        // Filter out empty strings
-        const filteredResponseArr = responseArr.filter(r => r !== '');
-        if (filteredResponseArr.length === 0)
-            return null;
-        // Check for partial correctness - some correct selections but not all, or extra incorrect selections
-        const correctCount = filteredResponseArr.filter(r => correctArr.includes(r)).length;
-        const incorrectCount = filteredResponseArr.filter(r => !correctArr.includes(r)).length;
-        // All responses are correct and we have all correct answers
-        if (correctCount === correctArr.length &&
-            incorrectCount === 0 &&
-            filteredResponseArr.length === correctArr.length) {
-            return Correctness.Correct;
-        }
-        // Some correct responses but not complete or has incorrect responses
-        if (correctCount > 0 && (correctCount < correctArr.length || incorrectCount > 0)) {
-            return Correctness.PartiallyCorrect;
-        }
-        return Correctness.Incorrect;
+    /** Extension point used by wrappers that should not register as candidate inputs. */
+    get registersWithItem() {
+        return true;
     }
     get isInline() {
         return false;
     }
     get responseVariable() {
-        // In standalone mode (no item context), return undefined
         if (!this._context?.variables) {
             return undefined;
         }
-        // Get all response variables
         const responseVariables = this._context.variables.filter(v => v.type === 'response');
-        // Get the response identifier for this interaction
         const responseIdentifier = this.getAttribute('response-identifier');
-        // Return the matching response variable for this interaction
         return responseVariables.find(v => v.identifier === responseIdentifier);
     }
-    toggleCorrectResponse(show) {
-        const correctResponseMode = this?.configContext?.correctResponseMode || 'internal';
-        if (correctResponseMode === 'full') {
-            this.toggleFullCorrectResponse(show);
+    get value() {
+        return JSON.stringify(this.response);
+    }
+    set value(val) {
+        this.response = val ? JSON.parse(val) : null;
+    }
+    reportValidity() {
+        const isValid = this._internals.validity.valid;
+        const mode = this.validationDisplayMode;
+        if (mode === 'native' || mode === 'both') {
+            this._internals.reportValidity();
+        }
+        if (mode === 'inline' || mode === 'both') {
+            this.updateInlineValidationMessage();
         }
         else {
-            this.toggleInternalCorrectResponse(show);
+            this.clearInlineValidationMessage();
+        }
+        if (mode === 'none') {
+            this.clearInlineValidationMessage();
         }
+        return isValid;
     }
-    async toggleFullCorrectResponse(show) {
-        const nextSibling = this.nextSibling;
-        const nextSiblingIsFullCorrectResponse = nextSibling instanceof HTMLDivElement && nextSibling?.classList.contains('full-correct-response');
-        // Get correct response from either responseVariable (item context) or local property (standalone)
-        const correctResponse = this.correctResponse;
-        if (!correctResponse) {
-            return;
+    get validationDisplayMode() {
+        return this.configContext?.validationDisplayMode ?? 'inline';
+    }
+    resolveAllowReorder(options) {
+        const defaultWhenUnset = options?.defaultWhenUnset ?? true;
+        const config = this.configContext;
+        if (!config) {
+            return defaultWhenUnset;
         }
-        const showFullCorrectResponse = show &&
-            (this?.configContext?.fullCorrectResponseOnlyWhenIncorrect === false || this.correctness !== Correctness.Correct);
-        if (!showFullCorrectResponse) {
-            if (!nextSiblingIsFullCorrectResponse) {
-                return;
-            }
-            // Remove cloned interaction
-            this.parentElement?.removeChild(nextSibling);
-            return;
+        if (config.allowReorder !== undefined) {
+            return config.allowReorder;
         }
-        if (nextSiblingIsFullCorrectResponse) {
-            return; // Already exists
+        return defaultWhenUnset;
+    }
+    resolveDisableAfterMaxReached(options) {
+        const defaultWhenUnset = options?.defaultWhenUnset ?? false;
+        const config = this.configContext;
+        if (!config) {
+            return defaultWhenUnset;
         }
-        // Add a clone of interaction with the correct response
-        const clone = this.cloneNode(true);
-        // Remove attributes that could cause issues on the clone
-        clone.removeAttribute('show-full-correct-response');
-        clone.removeAttribute('show-correct-response');
-        clone.removeAttribute('show-candidate-correction');
-        const containerDiv = document.createElement('div');
-        containerDiv.classList.add('full-correct-response');
-        if (this.isInline) {
-            containerDiv.classList.add('full-correct-response-inline');
+        if (config.disableAfterMaxReached !== undefined) {
+            return config.disableAfterMaxReached;
         }
-        else {
-            containerDiv.classList.add('full-correct-response-block');
+        if (config.disableAfterIfMaxChoicesReached !== undefined) {
+            if (!this.#didLogDisableAfterIfMaxChoicesReachedDeprecation) {
+                this.#didLogDisableAfterIfMaxChoicesReachedDeprecation = true;
+                console.log('[QTI Config] `disableAfterIfMaxChoicesReached` is deprecated. Use `disableAfterMaxReached` instead.');
+            }
+            return config.disableAfterIfMaxChoicesReached;
         }
-        containerDiv.role = 'full-correct-response';
-        containerDiv.appendChild(clone);
-        clone.isFullCorrectResponse = true;
-        this.parentElement?.insertBefore(containerDiv, this.nextSibling);
-        await clone.updateComplete;
-        clone.response = Array.isArray(correctResponse) ? [...correctResponse] : correctResponse;
+        return defaultWhenUnset;
     }
-    toggleInternalCorrectResponse(show) {
-        // This method is meant to be overridden by mixins like ChoicesMixin
-        // In the base class, we just update internal state for CSS states
-        this._internals.states.delete('show-correct-response');
-        if (show && this.correctResponse) {
-            this._internals.states.add('show-correct-response');
+    setInteractionValidity(isValid, validityMessage = '', anchor, options) {
+        const validityAnchor = anchor ?? this;
+        this._internals.setValidity(isValid ? {} : { customError: true }, validityMessage, validityAnchor);
+        if (options?.suppressInline !== true &&
+            (this.validationDisplayMode === 'inline' || this.validationDisplayMode === 'both')) {
+            this.updateInlineValidationMessage();
         }
     }
-    toggleCandidateCorrection(show) {
-        this._internals.states.delete('candidate-correct');
-        this._internals.states.delete('candidate-partially-correct');
-        this._internals.states.delete('candidate-incorrect');
-        if (!show) {
+    updateInlineValidationMessage() {
+        const validationMessageElement = this.getValidationMessageElement();
+        if (!validationMessageElement) {
             return;
         }
-        // correctness getter now works in both standalone and item context modes
-        if (this.correctness === Correctness.Correct) {
-            this._internals.states.add('candidate-correct');
-        }
-        if (this.correctness === Correctness.PartiallyCorrect) {
-            this._internals.states.add('candidate-partially-correct');
-        }
-        if (this.correctness === Correctness.Incorrect) {
-            this._internals.states.add('candidate-incorrect');
+        if (!this._internals.validity.valid) {
+            validationMessageElement.textContent = this._internals.validationMessage;
+            validationMessageElement.style.setProperty('display', 'block', 'important');
+            return;
         }
+        validationMessageElement.textContent = '';
+        validationMessageElement.style.display = 'none';
     }
-    constructor() {
-        super();
-        this.disabled = false;
-        this.readonly = false;
-        /**
-         * Shows which choices are correct with inline indicators.
-         * Adds `correct-response` / `incorrect-response` states to choices.
-         */
-        this.showCorrectResponse = false;
-        this._handleShowCorrectResponseChange = (_, show) => {
-            this.toggleInternalCorrectResponse(show);
-        };
-        /**
-         * Shows a cloned interaction with the correct answers filled in.
-         * Creates a disabled copy positioned after this interaction.
-         */
-        this.showFullCorrectResponse = false;
-        this._handleShowFullCorrectResponseChange = (_, show) => {
-            this.toggleFullCorrectResponse(show);
-        };
-        /**
-         * Shows feedback on candidate's selections compared to correct response.
-         * Adds `candidate-correct` / `candidate-incorrect` states to choices.
-         */
-        this.showCandidateCorrection = false;
-        this._handleShowCandidateCorrectionChange = (_, show) => {
-            this.toggleCandidateCorrection(show);
-        };
-        /* PK: Correct response */
-        this._correctResponse = null;
-        this._internals = this.attachInternals();
-    }
-    get value() {
-        return JSON.stringify(this.response);
-    }
-    set value(val) {
-        this.response = val ? JSON.parse(val) : null;
+    clearInlineValidationMessage() {
+        const validationMessageElement = this.getValidationMessageElement();
+        if (!validationMessageElement) {
+            return;
+        }
+        validationMessageElement.textContent = '';
+        validationMessageElement.style.display = 'none';
     }
-    reportValidity() {
-        return this._internals.reportValidity();
+    getValidationMessageElement() {
+        return this.shadowRoot?.querySelector('#validation-message');
     }
     reset() {
         this.response = null;
     }
-    /**
-     * Called by the browser when the associated form is reset.
-     * Part of the Form-Associated Custom Elements API.
-     */
     formResetCallback() {
         this.reset();
     }
-    // attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    //   super.attributeChangedCallback(name, _old, value);
-    //   // changing attributes in lit is not a thing, they are defined in the QTI XML and will never change
-    //   // except in storybook where we can change the value of the attribute
-    //   // this can make the internal state out of sync with the attribute
-    //   // so we reset the value to null to force the internal state to be reset
-    //   const attributeNamesToExclude = ['style', 'class'];
-    //   if (!attributeNamesToExclude.includes(name)) {
-    //     this.reset();
-    //   }
-    // }
     connectedCallback() {
         super.connectedCallback();
-        if (this.isFullCorrectResponse) {
+        if (!this.registersWithItem) {
             return;
         }
         this.dispatchEvent(new CustomEvent('qti-register-interaction', {
@@ -294,22 +143,6 @@ export class Interaction extends LitElement {
             }
         }));
     }
-    firstUpdated() {
-        // Skip for full correct response clones to avoid infinite loops
-        if (this.isFullCorrectResponse) {
-            return;
-        }
-        // Apply initial correct response display states after first render
-        if (this.showCorrectResponse) {
-            this.toggleInternalCorrectResponse(true);
-        }
-        if (this.showFullCorrectResponse) {
-            this.toggleFullCorrectResponse(true);
-        }
-        if (this.showCandidateCorrection) {
-            this.toggleCandidateCorrection(true);
-        }
-    }
     saveResponse(value, state) {
         this.dispatchEvent(new CustomEvent('qti-interaction-response', {
             bubbles: true,
@@ -322,6 +155,24 @@ export class Interaction extends LitElement {
             }
         }));
     }
+    constructor() {
+        super();
+        this.#didLogDisableAfterIfMaxChoicesReachedDeprecation = false;
+        /*
+         * Published to the choice elements inside this interaction — their role, and how to tell
+         * whether they are draggable. Provided here on the base rather than in a mixin so that
+         * ChoicesMixin and the drag-drop mixins can each contribute without two providers of the same
+         * context competing on one element.
+         *
+         * Reassign, never mutate: an in-place change does not notify consumers.
+         */
+        this._interactionContext = { choiceRole: null, draggablesSelector: null };
+        this.disabled = false;
+        this.readonly = false;
+        this._internals = this.attachInternals();
+    }
+    /** Optional lifecycle bridge for interaction subclasses that do not need changed-property data. */
+    firstUpdated(_changedProperties) { }
 }
 __decorate([
     consume({ context: itemContext, subscribe: true })
@@ -329,6 +180,9 @@ __decorate([
 __decorate([
     consume({ context: configContext, subscribe: true })
 ], Interaction.prototype, "configContext", void 0);
+__decorate([
+    provide({ context: interactionContext })
+], Interaction.prototype, "_interactionContext", void 0);
 __decorate([
     property({ type: String, attribute: 'response-identifier' })
 ], Interaction.prototype, "responseIdentifier", void 0);
@@ -341,31 +195,4 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Interaction.prototype, "name", void 0);
-__decorate([
-    property({ type: String, attribute: 'correct-response', reflect: true })
-], Interaction.prototype, "correctResponseAttr", null);
-__decorate([
-    property({ type: Boolean, attribute: 'show-correct-response', reflect: true })
-], Interaction.prototype, "showCorrectResponse", void 0);
-__decorate([
-    watch('showCorrectResponse', { waitUntilFirstUpdate: true })
-], Interaction.prototype, "_handleShowCorrectResponseChange", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'show-full-correct-response', reflect: true })
-], Interaction.prototype, "showFullCorrectResponse", void 0);
-__decorate([
-    watch('showFullCorrectResponse', { waitUntilFirstUpdate: true })
-], Interaction.prototype, "_handleShowFullCorrectResponseChange", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'show-candidate-correction', reflect: true })
-], Interaction.prototype, "showCandidateCorrection", void 0);
-__decorate([
-    watch('showCandidateCorrection', { waitUntilFirstUpdate: true })
-], Interaction.prototype, "_handleShowCandidateCorrectionChange", void 0);
-__decorate([
-    state()
-], Interaction.prototype, "_isFullCorrectResponse", void 0);
-__decorate([
-    state()
-], Interaction.prototype, "_correctResponse", void 0);
 //# sourceMappingURL=interaction.js.map