@citolab/qti-components 7.0.3 → 7.0.4

package/dist/custom-element-eslint-rules.js

@@ -83,6 +83,14 @@ export const rules = {
       tag: "qti-choice-interaction",
       attr: "readonly",
     },
+    {
+      tag: "qti-upload-interaction",
+      attr: "disabled",
+    },
+    {
+      tag: "qti-upload-interaction",
+      attr: "readonly",
+    },
     {
       tag: "qti-portable-custom-interaction",
       attr: "disabled",
@@ -207,22 +215,6 @@ export const rules = {
       tag: "qti-select-point-interaction",
       attr: "readonly",
     },
-    {
-      tag: "qti-slider-interaction",
-      attr: "step-label",
-    },
-    {
-      tag: "qti-slider-interaction",
-      attr: "reverse",
-    },
-    {
-      tag: "qti-slider-interaction",
-      attr: "disabled",
-    },
-    {
-      tag: "qti-slider-interaction",
-      attr: "readonly",
-    },
     {
       tag: "qti-gap-text",
       attr: "aria-disabled",

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { Q as QtiRule, a as QtiRuleBase, b as QtiExpressionBase, c as QtiExpression, B as BaseType, d as QtiConditionExpression, R as ResponseVariable, V as VariableDeclaration, I as ItemContext, e as QtiAssessmentItem } from './qti-simple-choice-UTrFa_RQ.js';
-export { s as ActiveElementMixin, A as ActiveElementMixinInterface, C as Calculate, n as Cardinality, r as ChoiceInterface, ai as Interaction, f as InteractionChangedDetails, M as Multiple, m as Ordered, N as Orientation, O as OutcomeChangedDetails, p as OutcomeVariable, X as QtiAnd, q as QtiAssessmentStimulusRef, aj as QtiAssociableHotspot, a1 as QtiAssociateInteraction, P as QtiChoiceInteraction, y as QtiCompanionMaterialsInfo, z as QtiContentBody, a2 as QtiCustomInteraction, ah as QtiCustomOperator, a3 as QtiEndAttemptInteraction, H as QtiExtendedTextInteraction, E as QtiFeedbackBlock, F as QtiFeedbackInline, ak as QtiGap, al as QtiGapImg, a4 as QtiGapMatchInteraction, am as QtiGapText, a5 as QtiGraphicAssociateInteraction, a6 as QtiGraphicGapMatchInteraction, a7 as QtiGraphicOrderInteraction, an as QtiHotspotChoice, a8 as QtiHotspotInteraction, ao as QtiHottext, K as QtiHottextInteraction, ap as QtiInlineChoice, L as QtiInlineChoiceInteraction, g as QtiInteractionChanged, t as QtiItemBody, W as QtiLookupOutcomeValue, Z as QtiMapping, a9 as QtiMatchInteraction, aa as QtiMediaInteraction, G as QtiModalFeedback, ab as QtiOrderInteraction, h as QtiOutcomeChanged, w as QtiOutcomeDeclaration, S as QtiOutcomeProcessing, T as QtiOutcomeProcessingProcessor, a0 as QtiPortableCustomInteraction, ac as QtiPositionObjectStage, u as QtiPrompt, x as QtiResponseDeclaration, U as QtiResponseProcessing, D as QtiRubricBlock, ad as QtiSelectPointInteraction, aq as QtiSimpleAssociableChoice, ar as QtiSimpleChoice, ae as QtiSliderInteraction, v as QtiStylesheet, _ as QtiSubtract, J as QtiTextEntryInteraction, j as ResponseInteraction, o as VariableValue, i as directedPair, k as float, l as integer, ag as itemContext, af as itemContextVariables, Y as qtiAndMixin, $ as qtiSubtractMixin } from './qti-simple-choice-UTrFa_RQ.js';
+import { Q as QtiRule, a as QtiRuleBase, b as QtiExpressionBase, c as QtiExpression, B as BaseType, d as QtiConditionExpression, R as ResponseVariable, V as VariableDeclaration, I as ItemContext, e as QtiAssessmentItem } from './qti-simple-choice-D0GiMrqD.js';
+export { s as ActiveElementMixin, A as ActiveElementMixinInterface, C as Calculate, n as Cardinality, r as ChoiceInterface, aj as Interaction, f as InteractionChangedDetails, M as Multiple, m as Ordered, N as Orientation, O as OutcomeChangedDetails, p as OutcomeVariable, Y as QtiAnd, q as QtiAssessmentStimulusRef, ak as QtiAssociableHotspot, a2 as QtiAssociateInteraction, P as QtiChoiceInteraction, y as QtiCompanionMaterialsInfo, z as QtiContentBody, a3 as QtiCustomInteraction, ai as QtiCustomOperator, a4 as QtiEndAttemptInteraction, H as QtiExtendedTextInteraction, E as QtiFeedbackBlock, F as QtiFeedbackInline, al as QtiGap, am as QtiGapImg, a5 as QtiGapMatchInteraction, an as QtiGapText, a6 as QtiGraphicAssociateInteraction, a7 as QtiGraphicGapMatchInteraction, a8 as QtiGraphicOrderInteraction, ao as QtiHotspotChoice, a9 as QtiHotspotInteraction, ap as QtiHottext, K as QtiHottextInteraction, aq as QtiInlineChoice, L as QtiInlineChoiceInteraction, g as QtiInteractionChanged, t as QtiItemBody, X as QtiLookupOutcomeValue, _ as QtiMapping, aa as QtiMatchInteraction, ab as QtiMediaInteraction, G as QtiModalFeedback, ac as QtiOrderInteraction, h as QtiOutcomeChanged, w as QtiOutcomeDeclaration, T as QtiOutcomeProcessing, U as QtiOutcomeProcessingProcessor, a1 as QtiPortableCustomInteraction, ad as QtiPositionObjectStage, u as QtiPrompt, x as QtiResponseDeclaration, W as QtiResponseProcessing, D as QtiRubricBlock, ae as QtiSelectPointInteraction, ar as QtiSimpleAssociableChoice, as as QtiSimpleChoice, af as QtiSliderInteraction, v as QtiStylesheet, $ as QtiSubtract, J as QtiTextEntryInteraction, S as QtiUploadInteraction, j as ResponseInteraction, o as VariableValue, i as directedPair, k as float, l as integer, ah as itemContext, ag as itemContextVariables, Z as qtiAndMixin, a0 as qtiSubtractMixin } from './qti-simple-choice-D0GiMrqD.js';
 import 'lit-html/directives/ref.js';
 
 declare class QtiResponseCondition extends QtiRule {
@@ -256,41 +256,46 @@ declare const QtiTest_base: (abstract new (...args: any[]) => {}) & (abstract ne
  *
  * ### Example Usage
  *
- * Minimal markup:
- * ```html
- * <qti-test test="./path/to/assessment.xml">
- *   <test-container></test-container>
- * </qti-test>
- * ```
+ * Minimal example including navigation:
  *
- * With navigation buttons:
  * ```html
- * <qti-test >
+ * <qti-test>
  *   <test-container test-url="./path/to/assessment.xml"></test-container>
- *   <div class="flex">
+ *   <nav class="flex">
  *      <test-prev></test-prev>
  *      <test-next></test-next>
- *   </div>
+ *   </nav>
  * </qti-test>
  * ```
  *
- * You can use normal class names to style the elements.
- * And you can use the `test-prev` and `test-next` elements to navigate through the test.
+ * Use the following file structure
+ * A qti-test loads a QTI3.0 assessmenttest.xml file from a package folder.
+ *
+ * ```plaintext
+ * Root/
+ * ├── index.html
+ * └── /assets/api/examples/
+ *     ├── assessmenttest.xml
+ *     └── imsmanifest.xml
  *
- * @attr {string} testURL - the relative location to the QTI assessment.xml file
+ * ```
  *
- * ### Features
+ * ### Test components
+ *
+ * Use test components inside the qti-test component for added functionality.
+ * ### Test next
+ * `<test-next> | TestNext`
+ *
+ * ### Test prev
+ *
+ * `<test-prev> | TestPrev`
+ * ### Test components
+ *
+ * You can use normal class names to style the elements.
+ * And you can use the `test-prev` and `test-next` elements to navigate through the test.
  *
- * - **Dynamic Template Loading**:
- *   If a `<template>` element is included as a child of `<qti-test>`, its content is dynamically appended to the shadow DOM.
  */
 declare class QtiTest extends QtiTest_base {
-    /**
-     * Lifecycle callback invoked when the element is added to the DOM.
-     * Automatically appends the content of a `<template>` element (if present)
-     * to the shadow DOM.
-     */
-    connectedCallback(): void;
     /**
      * Renders the component's template.
      * Provides a default `<slot>` for content projection.
@@ -379,6 +384,7 @@ declare global {
 }
 
 declare class TestItemLink extends TestComponent {
+    static styles: lit.CSSResult;
     private itemId;
     constructor();
     render(): lit_html.TemplateResult<1>;
@@ -390,43 +396,33 @@ declare global {
 }
 
 /**
- * `<test-container>` is a custom element designed for hosting the qti-assessment-test.
+ * `<test-container>` is a custom element designed for hosting the qti-assessment-item.
  * The `qti-assessment-test` will be placed inside the shadow DOM of this element.
+ * The element loads the item from the provided URL and renders it inside the shadow DOM.
  *
- * ### Example Usage
- * The `test-container` element to hosts the visual representation of the items.
- * You can style the container by adding a class to the element.
+ * ### Styling
+ * Add a class to the element for styling.
  *
  * ```html
- * <qti-test testurl="./path/to/assessment.xml">
- *   <test-container class="container bg-white m-2"></test-container>
+ * <qti-test>
+ *   <test-container class="m-4 bg-white" test-url="./path/to/item.xml"></test-container>
  * </qti-test>
  * ```
- *
- * @tag test-container
  */
 declare class TestContainer extends LitElement {
-    /**
-     * Internal state for the dynamically loaded content.
-     * This is a Promise resolving to the content that will be rendered.
-     */
-    private content;
+    /** URL of the item to load */
     testURL: string;
-    /**
-     * Preloaded content from a `<template>` child, if present.
-     */
-    private preContent;
-    /**
-     * Lifecycle callback invoked when the element is added to the DOM.
-     * Handles template preloading and dispatches a `qti-load-test-request` event
-     * if no template is found.
-     */
+    /** A parsed HTML document */
+    testDoc: DocumentFragment;
+    /** The raw XML string */
+    testXML: string;
+    /** Template content if provided */
+    private templateContent;
+    protected handleTestURLChange(): Promise<void>;
+    protected handleTestXMLChange(): void;
     connectedCallback(): Promise<void>;
-    /**
-     * Renders the component content.
-     * Preloaded template content is rendered first, followed by the default slot
-     * and dynamically loaded content.
-     */
+    private initializeTemplateContent;
+    private applyStyles;
     render(): lit_html.TemplateResult<1>;
 }
 declare global {
@@ -448,23 +444,61 @@ declare global {
     }
 }
 
-type Constructor<T = {}> = new (...args: any[]) => T;
-interface QtiItemInterface {
-    identifier?: string;
-    href?: string;
-    xmlDoc: DocumentFragment;
-    assessmentItem: QtiAssessmentItem | null;
+/**
+ * `<qti-item>` is a custom element designed for rendering a single `qti-assessment-item`.
+ * It can also host some functionalities to interact with the item like scoring, showing feedback, etc.
+ * Placing a mandatory `<item-container>` inside '<qti-item>' will load or parse the item and render it.
+ * See `<item-container>` for more details.
+ *
+ * ```html
+ * <qti-item>
+ *   <item-container class="m-4 bg-white" item-url="./path/to/item.xml"></item-container>
+ * </qti-item>
+ * ```
+ */
+declare class QtiItem extends LitElement {
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qti-item': QtiItem;
+    }
 }
-declare function QtiItemMixin<T extends Constructor<LitElement>>(Base: T): Constructor<QtiItemInterface> & T;
 
-declare const QtiItem_base: (new (...args: any[]) => QtiItemInterface) & typeof LitElement;
-declare class QtiItem extends QtiItem_base {
-    connectedCallback(): void;
+/**
+ * `<item-container>` is a custom element designed for hosting the qti-assessment-item.
+ * The `qti-assessment-item` will be placed inside the shadow DOM of this element.
+ * The element loads the item from the provided URL and renders it inside the shadow DOM.
+ *
+ * ### Styling
+ * Add a class to the element for styling.
+ *
+ * ```html
+ * <qti-item>
+ *   <item-container class="m-4 bg-white" item-url="./path/to/item.xml"></item-container>
+ * </qti-item>
+ * ```
+ */
+declare class ItemContainer extends LitElement {
+    /** URL of the item to load */
+    itemURL: string;
+    /** A parsed HTML document */
+    itemDoc: DocumentFragment;
+    /** The raw XML string */
+    itemXML: string;
+    /** Template content if provided */
+    private templateContent;
+    protected handleItemURLChange(): Promise<void>;
+    protected handleItemXMLChange(): void;
+    connectedCallback(): Promise<void>;
+    private initializeTemplateContent;
+    private applyStyles;
+    render(): lit_html.TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'qti-item': QtiItem;
+        'item-container': ItemContainer;
     }
 }
 
-export { BaseType, ItemContext, QtiAssessmentItem, QtiAssessmentItemRef, QtiAssessmentSection, QtiAssessmentTest, QtiBaseValue, QtiConditionExpression, QtiContains, QtiCorrect, QtiEqual, QtiEqualRounded, QtiExpression, QtiExpressionBase, QtiGt, QtiGte, QtiIsNull, QtiItem, type QtiItemInterface, QtiItemMixin, QtiLt, QtiLte, QtiMapResponse, QtiMatch, QtiMember, QtiMultiple, QtiNot, QtiOr, QtiOrdered, QtiPositionObjectInteraction, QtiPrintedVariable, QtiProduct, QtiResponseCondition, QtiResponseElse, QtiResponseElseIf, QtiResponseIf, QtiRule, QtiRuleBase, QtiSetOutcomeValue, QtiSetOutcomeValueRule, QtiStringMatch, QtiSum, QtiSumExpression, QtiTest, QtiTestPart, QtiVariable, ResponseVariable, TestContainer, type TestContext, type TestElement, TestItemLink, TestNext, TestPagingButtonsStamp, TestPrev, TestView, VariableDeclaration, testContext, testElement };
+export { BaseType, ItemContainer, ItemContext, QtiAssessmentItem, QtiAssessmentItemRef, QtiAssessmentSection, QtiAssessmentTest, QtiBaseValue, QtiConditionExpression, QtiContains, QtiCorrect, QtiEqual, QtiEqualRounded, QtiExpression, QtiExpressionBase, QtiGt, QtiGte, QtiIsNull, QtiItem, QtiLt, QtiLte, QtiMapResponse, QtiMatch, QtiMember, QtiMultiple, QtiNot, QtiOr, QtiOrdered, QtiPositionObjectInteraction, QtiPrintedVariable, QtiProduct, QtiResponseCondition, QtiResponseElse, QtiResponseElseIf, QtiResponseIf, QtiRule, QtiRuleBase, QtiSetOutcomeValue, QtiSetOutcomeValueRule, QtiStringMatch, QtiSum, QtiSumExpression, QtiTest, QtiTestPart, QtiVariable, ResponseVariable, TestContainer, type TestContext, type TestElement, TestItemLink, TestNext, TestPagingButtonsStamp, TestPrev, TestView, VariableDeclaration, testContext, testElement };