@citolab/qti-components 6.9.1-beta.81 → 7.0.1

package/dist/qti-components-jsx.d.ts

@@ -206,6 +206,8 @@ export type QtiProductProps = {
   getVariables?: string;
 };
 
+export type QtiSubtractProps = {};
+
 export type QtiStringMatchProps = {
   /**  */
   "case-sensitive"?: string;
@@ -366,9 +368,9 @@ export type QtiExtendedTextInteractionProps = {
   class?: string;
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   value?: string | string[];
@@ -391,9 +393,9 @@ export type QtiTextEntryInteractionProps = {
   "data-patternmask-message"?: string;
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   inputRef?: string;
@@ -414,9 +416,9 @@ export type QtiHottextInteractionProps = {
   "max-choices"?: number;
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   value?: string | string[];
@@ -433,9 +435,9 @@ export type QtiInlineChoiceInteractionProps = {
   "data-prompt"?: string;
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   options?: OptionType[];
@@ -471,21 +473,21 @@ export type QtiSimpleChoiceProps = {
 };
 
 export type QtiChoiceInteractionProps = {
-  /** orientation of choices */
+  /** @deprecated , use 'qti-orientation-horizontal' or 'qti-orientation-vertical' instead */
   orientation?: Orientation;
   /**  */
   class?: string;
-  /**  */
-  shuffle?: boolean;
+  /** <span style="color:blue">some *blue* text</span>. Does not work in storybook */
+  shuffle?: "true" | "false";
   /**  */
   "min-choices"?: number;
   /**  */
   "max-choices"?: number;
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   role?: string;
@@ -508,9 +510,9 @@ export type QtiPortableCustomInteractionProps = {
   "custom-interaction-type-identifier"?: string;
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   value?: string | string[];
@@ -554,11 +556,11 @@ export type QtiAssociateInteractionProps = {
   "min-associations"?: number;
   /**  */
   "max-associations"?: number;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
   /**  */
   "response-identifier"?: string;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   dragDropApi?: TouchDragAndDrop;
@@ -585,9 +587,9 @@ export type QtiCustomInteractionProps = {
   id?: string;
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   manifest?: {
@@ -612,9 +614,9 @@ export type QtiEndAttemptInteractionProps = {
   title?: "end attempt";
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   value?: string | string[];
@@ -633,11 +635,11 @@ export type QtiGapMatchInteractionProps = {
   "min-associations"?: number;
   /**  */
   "max-associations"?: number;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
   /**  */
   "response-identifier"?: string;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   correctResponse?: string | string[];
@@ -673,9 +675,9 @@ export type QtiHotspotChoiceProps = {
 export type QtiGraphicAssociateInteractionProps = {
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   choiceOrdering?: boolean;
@@ -712,11 +714,11 @@ export type QtiGraphicGapMatchInteractionProps = {
   "min-associations"?: number;
   /**  */
   "max-associations"?: number;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
   /**  */
   "response-identifier"?: string;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   dragDropApi?: TouchDragAndDrop;
@@ -739,9 +741,9 @@ export type QtiGraphicOrderInteractionProps = {
   "max-choices"?: number;
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   choiceOrdering?: boolean;
@@ -762,9 +764,9 @@ export type QtiHotspotInteractionProps = {
   "max-choices"?: number;
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   value?: string | string[];
@@ -783,9 +785,9 @@ export type QtiMatchInteractionProps = {
   "min-associations"?: number;
   /**  */
   "max-associations"?: number;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   rows?: QtiSimpleAssociableChoice[];
@@ -818,9 +820,9 @@ export type QtiMatchInteractionProps = {
 export type QtiMediaInteractionProps = {
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   value?: string | string[];
@@ -835,17 +837,17 @@ export type QtiMediaInteractionProps = {
 export type QtiOrderInteractionProps = {
   /** orientation of choices */
   orientation?: "horizontal" | "vertical";
-  /**  */
-  shuffle?: boolean;
+  /** <span style="color:blue">some *blue* text</span>. Does not work in storybook */
+  shuffle?: "true" | "false";
   /**  */
   "min-associations"?: number;
   /**  */
   "max-associations"?: number;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
   /**  */
   "response-identifier"?: string;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   childrenMap?: Element[];
@@ -869,7 +871,7 @@ export type QtiOrderInteractionProps = {
   "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-export type QtiSPositionObjectInteractionProps = {};
+export type QtiPositionObjectInteractionProps = {};
 
 export type QtiPositionObjectStageProps = {
   /**  */
@@ -889,9 +891,9 @@ export type QtiSelectPointInteractionProps = {
   "min-choices"?: number;
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   value?: string | string[];
@@ -916,9 +918,9 @@ export type QtiSliderInteractionProps = {
   step?: number;
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   csLive?: CSSStyleDeclaration;
@@ -1001,15 +1003,13 @@ export type QtiInlineChoiceProps = {
 };
 
 export type TestElementProps = {
-  /**  */
-  class?: string;
-  /**  */
-  shuffle?: boolean;
+  /** <span style="color:blue">some *blue* text</span>. Does not work in storybook */
+  shuffle?: "true" | "false";
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   value?: string | string[];
@@ -1022,17 +1022,17 @@ export type TestElementProps = {
 };
 
 export type TestElementProps = {
-  /**  */
-  class?: string;
-  /**  */
-  shuffle?: boolean;
+  /** <span style="color:blue">some *blue* text</span>. Does not work in storybook */
+  shuffle?: "true" | "false";
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
+  class?: string;
+  /**  */
   value?: string | string[];
   /**  */
   correctResponse?: string | string[];
@@ -1043,15 +1043,13 @@ export type TestElementProps = {
 };
 
 export type TestElementProps = {
-  /**  */
-  class?: string;
-  /**  */
-  shuffle?: boolean;
+  /** <span style="color:blue">some *blue* text</span>. Does not work in storybook */
+  shuffle?: "true" | "false";
   /**  */
   "response-identifier"?: string;
-  /** disabled should be exposed to the attributes and accessible as property */
+  /**  */
   disabled?: boolean;
-  /** readonly should be exposed to the attributes and accessible as property */
+  /**  */
   readonly?: boolean;
   /**  */
   value?: string | string[];
@@ -1076,6 +1074,174 @@ export type QtiItemProps = {
   "onqti-item-connected"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+export type QtiAssessmentItemRefProps = {
+  /**  */
+  category?: string | undefined;
+  /**  */
+  identifier?: string | undefined;
+  /**  */
+  required?: boolean | undefined;
+  /**  */
+  fixed?: boolean | undefined;
+  /**  */
+  href?: string | undefined;
+  /**  */
+  _testContext?: TestContext | undefined;
+  /**  */
+  weigths?: Map<string, number>;
+  /**  */
+  xmlDoc?: DocumentFragment;
+  /**  */
+  assessmentItem?: QtiAssessmentItem | null;
+  /**  */
+  "onqti-assessment-item-ref-connected"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export type QtiAssessmentSectionProps = {
+  /**  */
+  identifier?: string;
+  /**  */
+  required?: string;
+  /**  */
+  fixed?: boolean;
+  /**  */
+  title?: string;
+  /**  */
+  visible?: boolean;
+  /**  */
+  "keep-together"?: boolean;
+  /**  */
+  _testContext?: TestContext | undefined;
+  /**  */
+  "onqti-assessment-section-connected"?: (e: CustomEvent<Event>) => void;
+};
+
+export type QtiAssessmentTestProps = {
+  /**  */
+  identifier?: string;
+  /**  */
+  title?: string;
+  /**  */
+  _testContext?: TestContext | undefined;
+  /**  */
+  "onqti-assessment-test-connected"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export type QtiTestPartProps = {
+  /**  */
+  identifier?: string;
+  /**  */
+  title?: string;
+  /**  */
+  class?: string;
+  /**  */
+  "navigation-mode"?: "linear" | "nonlinear";
+  /**  */
+  "submission-mode"?: "individual" | "simultaneous";
+
+  /**  */
+  "onqti-test-part-connected"?: (e: CustomEvent<Event>) => void;
+};
+
+export type QtiTestProps = {
+  /** the relative location to the QTI assessment.xml file */
+  testURL?: string;
+  /**  */
+  context?: TestContext;
+};
+
+export type TestNextProps = {
+  /**  */
+  role?: string;
+  /**  */
+  ariaLabel?: string;
+  /**  */
+  disabled?: boolean;
+  /**  */
+  _testContext?: TestContext | undefined;
+  /**  */
+  _testElement?: TestElement | undefined;
+  /**  */
+  "onon-test-switch-view"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onqti-request-test-item"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export type TestPrevProps = {
+  /**  */
+  role?: string;
+  /**  */
+  ariaLabel?: string;
+  /**  */
+  disabled?: boolean;
+  /**  */
+  _testContext?: TestContext | undefined;
+  /**  */
+  _testElement?: TestElement | undefined;
+  /**  */
+  "onon-test-switch-view"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onqti-request-test-item"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export type TestViewProps = {
+  /**  */
+  label?: string;
+  /**  */
+  "view-options"?: string;
+  /**  */
+  _handleViewOptionsChange?: string;
+  /**  */
+  disabled?: boolean;
+  /**  */
+  _testContext?: TestContext | undefined;
+  /**  */
+  _testElement?: TestElement | undefined;
+  /**  */
+  "onon-test-switch-view"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onqti-request-test-item"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export type TestItemLinkProps = {
+  /**  */
+  "item-id"?: string;
+  /**  */
+  disabled?: boolean;
+  /**  */
+  _testContext?: TestContext | undefined;
+  /**  */
+  _testElement?: TestElement | undefined;
+  /**  */
+  "onon-test-switch-view"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onqti-request-test-item"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export type TestContainerProps = {
+  /**  */
+  "test-url"?: string;
+};
+
+export type TestPagingButtonsStampProps = {
+  /**  */
+  "max-displayed-items"?: number;
+  /**  */
+  "skip-on-category"?: string;
+  /**  */
+  ariaLabel?: string;
+  /**  */
+  disabled?: boolean;
+  /**  */
+  _testContext?: TestContext | undefined;
+  /**  */
+  _testElement?: TestElement | undefined;
+  /**  */
+  "onon-test-switch-view"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onqti-request-test-item"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 export type CustomElements = {
   /**
    *
@@ -1288,6 +1454,13 @@ export type CustomElements = {
    */
   "qti-product": Partial<QtiProductProps & BaseProps & BaseEvents>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "qti-subtract": Partial<QtiSubtractProps & BaseProps & BaseEvents>;
+
   /**
    *
    * ---
@@ -1494,13 +1667,29 @@ export type CustomElements = {
   "qti-simple-choice": Partial<QtiSimpleChoiceProps & BaseProps & BaseEvents>;
 
   /**
-   *
+   * An sample element.
    * ---
    *
    *
    * ### **Events:**
    *  - **qti-register-interaction**
    * - **qti-interaction-response**
+   *
+   * ### **Slots:**
+   *  - _default_ - default slot of the choices
+   * - **prompt** - slot of the prompt
+   *
+   * ### **CSS Properties:**
+   *  - **--qti-bg-active** - The active background color _(default: #ffecec)_
+   * - **--qti-border-active** - The active border color _(default: #f86d70)_
+   * - **--qti-padding-horizontal** - The option horizontal padding _(default: 1px)_
+   * - **--qti-padding-vertical** - The option vertical padding _(default: solid)_
+   * - **--qti-border-radius** - The option border radius _(default: 8px)_
+   *
+   * ### **CSS Parts:**
+   *  - **slot** - The choice elements
+   * - **prompt** - The prompt
+   * - **message** - The validation message
    */
   "qti-choice-interaction": Partial<QtiChoiceInteractionProps & BaseProps & BaseEvents>;
 
@@ -1669,7 +1858,7 @@ export type CustomElements = {
    * ---
    *
    */
-  "qti-position-object-interaction": Partial<QtiSPositionObjectInteractionProps & BaseProps & BaseEvents>;
+  "qti-position-object-interaction": Partial<QtiPositionObjectInteractionProps & BaseProps & BaseEvents>;
 
   /**
    *
@@ -1833,4 +2022,149 @@ export type CustomElements = {
    *  - **qti-item-connected**
    */
   "qti-item": Partial<QtiItemProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **qti-assessment-item-ref-connected**
+   */
+  "qti-assessment-item-ref": Partial<QtiAssessmentItemRefProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **qti-assessment-section-connected**
+   */
+  "qti-assessment-section": Partial<QtiAssessmentSectionProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **qti-assessment-test-connected**
+   */
+  "qti-assessment-test": Partial<QtiAssessmentTestProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **qti-test-part-connected**
+   */
+  "qti-test-part": Partial<QtiTestPartProps & BaseProps & BaseEvents>;
+
+  /**
+   * `<qti-test>` is a custom element designed for rendering and interacting with QTI (Question and Test Interoperability) tests.
+   *
+   * This component leverages several mixins to provide functionality for loading, navigating, processing, and displaying QTI test assessments.
+   *
+   * ### Example Usage
+   *
+   * Minimal markup:
+   * ```html
+   * <qti-test test="./path/to/assessment.xml">
+   *   <test-container></test-container>
+   * </qti-test>
+   * ```
+   *
+   * With navigation buttons:
+   * ```html
+   * <qti-test >
+   *   <test-container test-url="./path/to/assessment.xml"></test-container>
+   *   <div class="flex">
+   *      <test-prev></test-prev>
+   *      <test-next></test-next>
+   *   </div>
+   * </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.
+   * ---
+   *
+   */
+  "qti-player": Partial<QtiTestProps & BaseProps & BaseEvents>;
+
+  /**
+   * Represents a custom element for navigating to the next test item.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **on-test-switch-view**
+   * - **qti-request-test-item**
+   */
+  "test-next": Partial<TestNextProps & BaseProps & BaseEvents>;
+
+  /**
+   * Represents a custom element for navigating to the previous test item.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **on-test-switch-view**
+   * - **qti-request-test-item**
+   */
+  "test-prev": Partial<TestPrevProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **on-test-switch-view**
+   * - **qti-request-test-item**
+   */
+  "test-view": Partial<TestViewProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **on-test-switch-view**
+   * - **qti-request-test-item**
+   */
+  "test-item-link": Partial<TestItemLinkProps & BaseProps & BaseEvents>;
+
+  /**
+   * `<test-container>` is a custom element designed for hosting the qti-assessment-test.
+   * The `qti-assessment-test` will be placed inside the shadow DOM of this element.
+   *
+   * ### 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.
+   *
+   * ```html
+   * <qti-test testurl="./path/to/assessment.xml">
+   *   <test-container class="container bg-white m-2"></test-container>
+   * </qti-test>
+   * ```
+   * ---
+   *
+   */
+  "test-container": Partial<TestContainerProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **on-test-switch-view**
+   * - **qti-request-test-item**
+   */
+  "test-paging-buttons-stamp": Partial<TestPagingButtonsStampProps & BaseProps & BaseEvents>;
 };