lido-player 0.0.2-alpha-50-dev → 0.0.2-alpha-51-dev

package/dist/types/components/canvas/lido-canvas.d.ts

@@ -0,0 +1,27 @@
+export declare class WritingPad {
+    el: HTMLElement;
+    bgImage: string;
+    width: string;
+    height: string;
+    x: string;
+    y: string;
+    onEntry: string;
+    private canvas;
+    private ctx;
+    private drawing;
+    style: {
+        [key: string]: string;
+    };
+    updateStyles(): void;
+    componentDidLoad(): void;
+    loadBackground(): void;
+    getPos(e: PointerEvent): {
+        x: number;
+        y: number;
+    };
+    start(e: PointerEvent): void;
+    move(e: PointerEvent): void;
+    stop(): void;
+    clearCanvas(): void;
+    render(): any;
+}

package/dist/types/components/container/lido-container.d.ts

@@ -6,6 +6,8 @@
  * such as dimensions, positioning, visibility, and custom event handlers.
  */
 export declare class LidoContainer {
+    /** Language to apply to all texts */
+    locale: string;
     /**
      * Controls whether the drop zone displays a border; true shows the border, false hides it.
      */
@@ -165,6 +167,9 @@ export declare class LidoContainer {
       * When set to true, disables the speak functionality of long press for this component and its children.
     */
     disableSpeak: boolean;
+    languageChanged(newLang: string): void;
+    componentWillLoad(): void;
+    private resolveLanguage;
     convertToPixels(height: string, parentElement?: HTMLElement): number;
     /**
      * Scales the container based on the window or screen size, maintaining the aspect ratio.
@@ -174,6 +179,7 @@ export declare class LidoContainer {
      */
     scaleContainer(container: HTMLElement): void;
     screenOrientation(): void;
+    private updateChildTextLanguage;
     /**
      * Lifecycle hook that runs after the component is loaded.
      * - It scales the container.

package/dist/types/components/home/lido-home.d.ts

@@ -6,6 +6,12 @@
  * and displays progress indicators (dots) for each container.
  */
 export declare class LidoHome {
+    /** Boolean to show or hide navigation buttons */
+    showNav: boolean;
+    /** Array of active container indexes to be rendered */
+    activeContainerIndexes: number[];
+    /** Language to apply to all texts */
+    locale?: string;
     /**
      * XML data passed to the component, which is parsed and used to render various containers.
      */
@@ -78,6 +84,8 @@ export declare class LidoHome {
      * Stores the list of container-rendering functions parsed from XML.
      */
     containers: (() => any)[];
+    onLangChange(newLang: string): void;
+    private setLanguage;
     /**
      * Event handler for transitioning to the next container in the sequence.
      * If the last container is reached, it shows a completion message.

package/dist/types/components/mathMatrix/lido-math-matrix.d.ts

@@ -55,6 +55,9 @@ export declare class LidoMathMatrix {
     previousFilledSlot: number;
     /** Reference to the previously filled slot element for clearing its text */
     previousFilledSlotElement: HTMLElement | null;
+    onCorrect: string;
+    onInCorrect: string;
+    onEntry: string;
     /** Holds dynamically generated inline styles for the container */
     style: {
         [key: string]: string | undefined;

package/dist/types/components/root/lido-root.d.ts

@@ -6,6 +6,8 @@
  * The XML path can be configured via a prop.
  */
 export declare class LidoRoot {
+    /** Language to apply to all texts */
+    locale?: string;
     /**
      * Prop to hold the XML file path or URL. This can be a relative path or an external URL.
      */
@@ -55,6 +57,9 @@ export declare class LidoRoot {
      * Lifecycle method that runs before the component is loaded.
      * It fetches the XML data from the specified path or URL and sets it to the component's state.
      */
+    connectedCallback(): void;
+    onLangChange(newLang: string): void;
+    setLanguage(lang?: string): void;
     componentWillLoad(): Promise<void>;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -211,6 +211,14 @@ export namespace Components {
          */
         "y": string;
     }
+    interface LidoCanvas {
+        "bgImage": string;
+        "height": string;
+        "onEntry": string;
+        "width": string;
+        "x": string;
+        "y": string;
+    }
     /**
      * @component LidoCell
      * A flexible UI cell component configurable via props like size, position, visibility,
@@ -548,6 +556,10 @@ export namespace Components {
           * Specifies whether the activity should continue automatically upon a correct response. Expected values: "true" or "false".
          */
         "isContinueOnCorrect": boolean;
+        /**
+          * Language to apply to all texts
+         */
+        "locale": string;
         /**
           * CSS margin value applied to each child element inside the container. Accepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.).
          */
@@ -792,6 +804,10 @@ export namespace Components {
      * and displays progress indicators (dots) for each container.
      */
     interface LidoHome {
+        /**
+          * Array of active container indexes to be rendered
+         */
+        "activeContainerIndexes": number[];
         /**
           * URL for the avatar Rive file.
          */
@@ -816,6 +832,10 @@ export namespace Components {
           * Initial index of the container being displayed.
          */
         "initialIndex": number;
+        /**
+          * Language to apply to all texts
+         */
+        "locale"?: string;
         /**
           * Custom URL for the Next button icon. Falls back to the default icon if not provided or invalid.
          */
@@ -824,6 +844,10 @@ export namespace Components {
           * Custom URL for the Previous button icon. Falls back to the default icon if not provided or invalid.
          */
         "prevButtonUrl": string;
+        /**
+          * Boolean to show or hide navigation buttons
+         */
+        "showNav": boolean;
         /**
           * Custom URL for the Speaker button icon. Falls back to the default icon if not provided or invalid.
          */
@@ -1113,6 +1137,9 @@ export namespace Components {
           * Image source used inside the slots
          */
         "matrixImage": string;
+        "onCorrect": string;
+        "onEntry": string;
+        "onInCorrect": string;
         /**
           * Padding inside the matrix container
          */
@@ -1373,6 +1400,10 @@ export namespace Components {
           * Initial index of the container being displayed.
          */
         "initialIndex": number;
+        /**
+          * Language to apply to all texts
+         */
+        "locale"?: string;
         /**
           * CSS margin value applied to each child element inside the container. Accepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.).
          */
@@ -2092,6 +2123,12 @@ declare global {
         prototype: HTMLLidoCalculatorElement;
         new (): HTMLLidoCalculatorElement;
     };
+    interface HTMLLidoCanvasElement extends Components.LidoCanvas, HTMLStencilElement {
+    }
+    var HTMLLidoCanvasElement: {
+        prototype: HTMLLidoCanvasElement;
+        new (): HTMLLidoCanvasElement;
+    };
     /**
      * @component LidoCell
      * A flexible UI cell component configurable via props like size, position, visibility,
@@ -2278,6 +2315,7 @@ declare global {
         "lido-avatar": HTMLLidoAvatarElement;
         "lido-balance": HTMLLidoBalanceElement;
         "lido-calculator": HTMLLidoCalculatorElement;
+        "lido-canvas": HTMLLidoCanvasElement;
         "lido-cell": HTMLLidoCellElement;
         "lido-col": HTMLLidoColElement;
         "lido-container": HTMLLidoContainerElement;
@@ -2505,6 +2543,14 @@ declare namespace LocalJSX {
          */
         "y"?: string;
     }
+    interface LidoCanvas {
+        "bgImage"?: string;
+        "height"?: string;
+        "onEntry"?: string;
+        "width"?: string;
+        "x"?: string;
+        "y"?: string;
+    }
     /**
      * @component LidoCell
      * A flexible UI cell component configurable via props like size, position, visibility,
@@ -2842,6 +2888,10 @@ declare namespace LocalJSX {
           * Specifies whether the activity should continue automatically upon a correct response. Expected values: "true" or "false".
          */
         "isContinueOnCorrect"?: boolean;
+        /**
+          * Language to apply to all texts
+         */
+        "locale"?: string;
         /**
           * CSS margin value applied to each child element inside the container. Accepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.).
          */
@@ -3086,6 +3136,10 @@ declare namespace LocalJSX {
      * and displays progress indicators (dots) for each container.
      */
     interface LidoHome {
+        /**
+          * Array of active container indexes to be rendered
+         */
+        "activeContainerIndexes"?: number[];
         /**
           * URL for the avatar Rive file.
          */
@@ -3110,6 +3164,10 @@ declare namespace LocalJSX {
           * Initial index of the container being displayed.
          */
         "initialIndex"?: number;
+        /**
+          * Language to apply to all texts
+         */
+        "locale"?: string;
         /**
           * Custom URL for the Next button icon. Falls back to the default icon if not provided or invalid.
          */
@@ -3118,6 +3176,10 @@ declare namespace LocalJSX {
           * Custom URL for the Previous button icon. Falls back to the default icon if not provided or invalid.
          */
         "prevButtonUrl"?: string;
+        /**
+          * Boolean to show or hide navigation buttons
+         */
+        "showNav"?: boolean;
         /**
           * Custom URL for the Speaker button icon. Falls back to the default icon if not provided or invalid.
          */
@@ -3407,6 +3469,9 @@ declare namespace LocalJSX {
           * Image source used inside the slots
          */
         "matrixImage"?: string;
+        "onCorrect"?: string;
+        "onEntry"?: string;
+        "onInCorrect"?: string;
         /**
           * Padding inside the matrix container
          */
@@ -3667,6 +3732,10 @@ declare namespace LocalJSX {
           * Initial index of the container being displayed.
          */
         "initialIndex"?: number;
+        /**
+          * Language to apply to all texts
+         */
+        "locale"?: string;
         /**
           * CSS margin value applied to each child element inside the container. Accepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.).
          */
@@ -4347,6 +4416,7 @@ declare namespace LocalJSX {
         "lido-avatar": LidoAvatar;
         "lido-balance": LidoBalance;
         "lido-calculator": LidoCalculator;
+        "lido-canvas": LidoCanvas;
         "lido-cell": LidoCell;
         "lido-col": LidoCol;
         "lido-container": LidoContainer;
@@ -4382,6 +4452,7 @@ declare module "@stencil/core" {
             "lido-avatar": LocalJSX.LidoAvatar & JSXBase.HTMLAttributes<HTMLLidoAvatarElement>;
             "lido-balance": LocalJSX.LidoBalance & JSXBase.HTMLAttributes<HTMLLidoBalanceElement>;
             "lido-calculator": LocalJSX.LidoCalculator & JSXBase.HTMLAttributes<HTMLLidoCalculatorElement>;
+            "lido-canvas": LocalJSX.LidoCanvas & JSXBase.HTMLAttributes<HTMLLidoCanvasElement>;
             /**
              * @component LidoCell
              * A flexible UI cell component configurable via props like size, position, visibility,

package/dist/types/stories/Templates/RocketGame/rocketGame.stories.d.ts

@@ -7,6 +7,7 @@ type RocketArgs = {
     dropImage: string[];
     backgroundImage: string[];
     colors: string[];
+    isAllowOnlyCorrect?: boolean;
 };
 declare const meta: Meta<RocketArgs>;
 export default meta;

package/dist/types/stories/Templates/calculator/calculator.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const calculator: StoryObj;

package/dist/types/stories/Templates/multiplyBeeds/multiplyBeeds.stories.d.ts

@@ -3,6 +3,7 @@ type MultiplyBeedsArgs = {
     number: string;
     multiplicationFactor: string;
     answer: string;
+    isAllowOnlyCorrect?: boolean;
 };
 declare const meta: Meta<MultiplyBeedsArgs>;
 export default meta;

package/dist/types/stories/Templates/openwindow/openwindow.stories.d.ts

@@ -8,6 +8,7 @@ type OpenWindowArgs = {
     choice1ImageUrl: string[];
     choice2Text: string;
     choice2ImageUrl: string[];
+    isAllowOnlyCorrect?: boolean;
 };
 declare const meta: Meta<OpenWindowArgs>;
 export default meta;

package/dist/types/stories/Templates/openwindow/openwindow2.stories.d.ts

@@ -7,6 +7,7 @@ type OpenWindowArgs = {
     choice1ImageUrl: string[];
     choice2Text: string;
     choice2ImageUrl: string[];
+    isAllowOnlyCorrect?: boolean;
 };
 declare const meta: Meta<OpenWindowArgs>;
 export default meta;

package/dist/types/stories/Templates/questionBoard/questionBoard.stories.d.ts

@@ -9,6 +9,7 @@ type QuestionBoardArgs = {
     options: object;
     optionText: string;
     objective: string;
+    isAllowOnlyCorrect?: boolean;
 };
 declare const meta: Meta<QuestionBoardArgs>;
 export default meta;

package/dist/types/stories/Templates/sequenceBox/sequenceBox1.stories.d.ts

@@ -5,6 +5,7 @@ type SequenceBoxArgs = {
     number2: string;
     number4: string;
     options: string[];
+    isAllowOnlyCorrect?: boolean;
 };
 declare const meta: Meta<SequenceBoxArgs>;
 export default meta;

package/dist/types/stories/Templates/sequenceBox/sequenceBox2.stories.d.ts

@@ -5,6 +5,7 @@ type SequenceBoxArgs = {
     number2: string;
     number4: string;
     options: string[];
+    isAllowOnlyCorrect?: boolean;
 };
 declare const meta: Meta<SequenceBoxArgs>;
 export default meta;

package/dist/types/stories/Templates/shapePair/shape-pair.stories.d.ts

@@ -1,4 +1,4 @@
 import { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const NumberPair: StoryObj;
+export declare const ShapePair: StoryObj;

package/dist/types/stories/Templates/sumTogether/sumTogether.stories.d.ts

@@ -5,6 +5,7 @@ type SumTogetherArgs = {
     answer: string;
     sign: string;
     options: string[];
+    isAllowOnlyCorrect?: boolean;
 };
 declare const meta: Meta<SumTogetherArgs>;
 export default meta;

package/dist/types/stories/Templates/writeCard/writeCard.stories.d.ts

@@ -5,6 +5,7 @@ type writeCardArgs = {
     backSlot: 'front' | 'back';
     frontText: string;
     backText: string;
+    isAllowOnlyCorrect?: boolean;
 };
 declare const meta: Meta<writeCardArgs>;
 export default meta;

package/dist/types/stories/Templates/writeLetter/writeLetter.stories.d.ts

@@ -7,6 +7,7 @@ type WriteLetterArgs = {
     backSlot: 'front' | 'back';
     frontText: string;
     backText: string;
+    isAllowOnlyCorrect?: boolean;
 };
 declare const meta: Meta<WriteLetterArgs>;
 export default meta;

package/dist/types/stories/Templates/writeNumber/writeNumber.stories.d.ts

@@ -7,6 +7,7 @@ type WriteNumberArgs = {
     textDisplayImage: string[];
     spanType: 'letters' | 'words';
     stars: number;
+    isAllowOnlyCorrect?: boolean;
 };
 declare const meta: Meta<WriteNumberArgs>;
 export default meta;

package/dist/types/stories/Templates/writeWord/writeWord.stories.d.ts

@@ -8,6 +8,7 @@ type WriteWordArgs = {
     topDisplayImage: string[];
     bottomDisplayImage: string[];
     spanType: 'letters' | 'words';
+    isAllowOnlyCorrect?: boolean;
 };
 declare const meta: Meta<WriteWordArgs>;
 export default meta;

package/dist/types/types/json.d.ts

@@ -0,0 +1,4 @@
+declare module "*.json" {
+  const value: any;
+  export default value;
+}

package/dist/types/utils/audioPlayer.d.ts

@@ -5,4 +5,6 @@ export declare class AudioPlayer {
     static getI(): AudioPlayer;
     stop(): void;
     play(targetElement: HTMLElement): Promise<void>;
+    private registerGlobalStopEvents;
+    destroy(): void;
 }

package/dist/types/utils/constants.d.ts

@@ -16,6 +16,7 @@ export declare const DropHasDrag = "dropHasDrag";
 export declare const DropToAttr = "drop-to";
 export declare const DropTimeAttr = "drop-time";
 export declare const LidoContainer = "lido-container";
+export declare const LangChangeEvent = "languageChanged";
 export declare enum TraceMode {
     NoFlow = "noFlow",
     ShowFlow = "showFlow",

package/dist/types/utils/i18n.d.ts

@@ -0,0 +1,5 @@
+import i18next from 'i18next';
+export declare const t: (key: string, options?: any) => string | import("i18next/typescript/helpers").$SpecialObject | import("i18next").TFunctionDetailedResult<string | import("i18next/typescript/helpers").$SpecialObject, any>;
+export declare const setLanguage: (lang: string) => Promise<import("i18next").TFunction<"translation", undefined>>;
+export declare const getLanguage: () => string;
+export default i18next;

package/dist/types/utils/utils.d.ts

@@ -42,3 +42,4 @@ export declare const HighlightStarsOneByOne: (element: HTMLElement, value: strin
 export declare const animateBoxCells: (element: HTMLElement, value: string) => Promise<void>;
 export declare const questionBoxAnimation: (element: HTMLElement, value: string) => Promise<void>;
 export declare const SumTogetherAnimation: (element: HTMLElement, value: string) => Promise<void>;
+export declare const updatedAnswer: () => void;

package/package.json

@@ -1,69 +1,71 @@
-{
-  "name": "lido-player",
-  "version": "0.0.2-alpha-50-dev",
-  "description": "Stencil Component For  Lido Player",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "types": "dist/types/index.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/lido-player/lido-player.esm.js",
-  "exports": {
-    ".": {
-      "import": "./dist/lido-player/lido-player.esm.js",
-      "require": "./dist/lido-player/lido-player.cjs.js"
-    },
-    "./my-component": {
-      "import": "./dist/components/my-component.js",
-      "types": "./dist/components/my-component.d.ts"
-    },
-    "./loader": {
-      "import": "./loader/index.js",
-      "require": "./loader/index.cjs",
-      "types": "./loader/index.d.ts"
-    }
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/chimple/lido-player.git"
-  },
-  "files": [
-    "dist/",
-    "loader/"
-  ],
-  "scripts": {
-    "build": "stencil build && npm run build-storybook",
-    "start": "stencil build --dev --watch --serve",
-    "dev": "npm run start",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build --output-dir www/storybook"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
-    "@stencil/core": "^4.7.0",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/experimental-addon-test": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@storybook/web-components": "^8.6.12",
-    "@storybook/web-components-vite": "^8.6.12",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^16.18.11",
-    "@types/react": "^19.1.2",
-    "jest": "^29.7.0",
-    "jest-cli": "^29.7.0",
-    "lit": "^3.2.1",
-    "puppeteer": "^21.11.0",
-    "storybook": "^8.6.12"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@rive-app/canvas": "^2.25.7",
-    "css-filter-converter": "^1.0.110",
-    "mathjs": "^14.4.0",
-    "tinycolor2": "^1.6.0"
-  }
-}
+{
+  "name": "lido-player",
+  "version": "0.0.2-alpha-51-dev",
+  "description": "Stencil Component For  Lido Player",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/lido-player/lido-player.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/lido-player/lido-player.esm.js",
+      "require": "./dist/lido-player/lido-player.cjs.js"
+    },
+    "./my-component": {
+      "import": "./dist/components/my-component.js",
+      "types": "./dist/components/my-component.d.ts"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chimple/lido-player.git"
+  },
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build && npm run build-storybook",
+    "start": "stencil build --dev --watch --serve",
+    "dev": "npm run start",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build --output-dir www/storybook"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.6",
+    "@stencil/core": "^4.7.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/experimental-addon-test": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/web-components": "^8.6.12",
+    "@storybook/web-components-vite": "^8.6.12",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^16.18.11",
+    "@types/react": "^19.1.2",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "lit": "^3.2.1",
+    "puppeteer": "^21.11.0",
+    "storybook": "^8.6.12"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@rive-app/canvas": "^2.25.7",
+    "css-filter-converter": "^1.0.110",
+    "i18next": "^25.6.1",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "mathjs": "^14.4.0",
+    "tinycolor2": "^1.6.0"
+  }
+}