lido-player 0.0.2-beta-25-dev → 0.0.2-beta-26-dev

package/dist/lido-player/readme.md

@@ -1,49 +1,49 @@
-# lido-avatar
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property       | Attribute       | Description                                                                                                             | Type      | Default  |
-| -------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------- | --------- | -------- |
-| `ariaHidden`   | `aria-hidden`   | The ARIA hidden attribute of the container. Used for accessibility to hide the element.                                 | `string`  | `''`     |
-| `ariaLabel`    | `aria-label`    | The ARIA label of the container. Used for accessibility to indicate the purpose of the element.                         | `string`  | `''`     |
-| `audio`        | `audio`         | Audio file URL or identifier for sound that will be associated with the column.                                         | `string`  | `''`     |
-| `bgColor`      | `bg-color`      | The background color of the column (CSS color value, e.g., '#FFFFFF', 'blue').                                          | `string`  | `''`     |
-| `delayVisible` | `delay-visible` | Delay in milliseconds to make the cell visible after mount.                                                             | `string`  | `''`     |
-| `height`       | `height`        | The height of the column component (CSS value, e.g., '100px', '50%').                                                   | `string`  | `''`     |
-| `id`           | `id`            | The unique identifier for the column component.                                                                         | `string`  | `''`     |
-| `onCorrect`    | `on-correct`    | Event handler for a Correct matching action, which can be used to hide the column or trigger other custom logic.        | `string`  | `''`     |
-| `onEntry`      | `on-entry`      | Event handler for when the column is entered, which can be used to initiate specific behaviors on entry.                | `string`  | `''`     |
-| `onInCorrect`  | `on-in-correct` | Event handler for an Incorrect matching action, which can be used to trigger custom logic when the action is incorrect. | `string`  | `''`     |
-| `onTouch`      | `on-touch`      | Event handler for a touch event, where a custom function can be triggered when the column is touched.                   | `string`  | `''`     |
-| `src`          | `src`           | Source URL of the Rive (.riv) file                                                                                      | `string`  | `''`     |
-| `tabIndex`     | `tab-index`     | The tab index value, used to set the tab order of the column for keyboard navigation.                                   | `number`  | `0`      |
-| `type`         | `type`          | Defines the type of the column, which can be used for styling or specific logic handling.                               | `string`  | `''`     |
-| `value`        | `value`         | The value associated with the column component. Typically used for internal logic.                                      | `string`  | `''`     |
-| `visible`      | `visible`       | A boolean that controls whether the column is visible (`true`) or hidden (`false`).                                     | `boolean` | `false`  |
-| `width`        | `width`         | The width of the column component (CSS value, e.g., '100px', '50%').                                                    | `string`  | `'auto'` |
-| `x`            | `x`             | The x-coordinate (left position) of the column within its container (CSS value, e.g., '10px', '5vw').                   | `string`  | `'0px'`  |
-| `y`            | `y`             | The y-coordinate (top position) of the column within its container (CSS value, e.g., '10px', '5vh').                    | `string`  | `'0px'`  |
-| `z`            | `z`             | The z-index of the column to control stacking order.                                                                    | `string`  | `'0'`    |
-
-
-## Dependencies
-
-### Used by
-
- - [lido-home](../home)
-
-### Graph
-```mermaid
-graph TD;
-  lido-home --> lido-avatar
-  style lido-avatar fill:#f9f,stroke:#333,stroke-width:4px
-```
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
+# lido-avatar
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property       | Attribute       | Description                                                                                                             | Type      | Default  |
+| -------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------- | --------- | -------- |
+| `ariaHidden`   | `aria-hidden`   | The ARIA hidden attribute of the container. Used for accessibility to hide the element.                                 | `string`  | `''`     |
+| `ariaLabel`    | `aria-label`    | The ARIA label of the container. Used for accessibility to indicate the purpose of the element.                         | `string`  | `''`     |
+| `audio`        | `audio`         | Audio file URL or identifier for sound that will be associated with the column.                                         | `string`  | `''`     |
+| `bgColor`      | `bg-color`      | The background color of the column (CSS color value, e.g., '#FFFFFF', 'blue').                                          | `string`  | `''`     |
+| `delayVisible` | `delay-visible` | Delay in milliseconds to make the cell visible after mount.                                                             | `string`  | `''`     |
+| `height`       | `height`        | The height of the column component (CSS value, e.g., '100px', '50%').                                                   | `string`  | `''`     |
+| `id`           | `id`            | The unique identifier for the column component.                                                                         | `string`  | `''`     |
+| `onCorrect`    | `on-correct`    | Event handler for a Correct matching action, which can be used to hide the column or trigger other custom logic.        | `string`  | `''`     |
+| `onEntry`      | `on-entry`      | Event handler for when the column is entered, which can be used to initiate specific behaviors on entry.                | `string`  | `''`     |
+| `onInCorrect`  | `on-in-correct` | Event handler for an Incorrect matching action, which can be used to trigger custom logic when the action is incorrect. | `string`  | `''`     |
+| `onTouch`      | `on-touch`      | Event handler for a touch event, where a custom function can be triggered when the column is touched.                   | `string`  | `''`     |
+| `src`          | `src`           | Source URL of the Rive (.riv) file                                                                                      | `string`  | `''`     |
+| `tabIndex`     | `tab-index`     | The tab index value, used to set the tab order of the column for keyboard navigation.                                   | `number`  | `0`      |
+| `type`         | `type`          | Defines the type of the column, which can be used for styling or specific logic handling.                               | `string`  | `''`     |
+| `value`        | `value`         | The value associated with the column component. Typically used for internal logic.                                      | `string`  | `''`     |
+| `visible`      | `visible`       | A boolean that controls whether the column is visible (`true`) or hidden (`false`).                                     | `boolean` | `false`  |
+| `width`        | `width`         | The width of the column component (CSS value, e.g., '100px', '50%').                                                    | `string`  | `'auto'` |
+| `x`            | `x`             | The x-coordinate (left position) of the column within its container (CSS value, e.g., '10px', '5vw').                   | `string`  | `'0px'`  |
+| `y`            | `y`             | The y-coordinate (top position) of the column within its container (CSS value, e.g., '10px', '5vh').                    | `string`  | `'0px'`  |
+| `z`            | `z`             | The z-index of the column to control stacking order.                                                                    | `string`  | `'0'`    |
+
+
+## Dependencies
+
+### Used by
+
+ - [lido-home](../home)
+
+### Graph
+```mermaid
+graph TD;
+  lido-home --> lido-avatar
+  style lido-avatar fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/types/components/flashCard/lido-flash-card.d.ts

@@ -98,6 +98,7 @@ export declare class LidoFlash {
     private static readonly narrationStartGrace;
     private instructionDone;
     private instructionStarted;
+    private shouldPlayTemplateInstruction;
     private onAudioStarted;
     private onAudioPlaying;
     private onAudioEnded;
@@ -138,6 +139,7 @@ export declare class LidoFlash {
     private finishNarration;
     private startNarration;
     private showArrow;
+    replayGoodJobAudio(): Promise<void>;
     private setArrowVisible;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -884,6 +884,7 @@ export namespace Components {
           * @default ''
          */
         "onTouch": string;
+        "replayGoodJobAudio": () => Promise<void>;
         /**
           * Tab index for keyboard navigation.
           * @default 0

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

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

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

@@ -25,7 +25,7 @@ export declare class AudioPlayer {
     private handleVisibilityChange;
     private resolveVisibilityWaiters;
     private getLidoTextElement;
-    play(targetElement: HTMLElement, suppressHighlight?: boolean, playbackContext?: unknown): any;
+    play(targetElement: HTMLElement, suppressHighlight?: boolean, playbackContext?: unknown, fallbackAudio?: string): any;
     private registerGlobalStopEvents;
     private unregisterGlobalStopEvents;
     private registerVisibilityEvents;

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

@@ -20,6 +20,8 @@ export declare const LidoContainer = "lido-container";
 export declare const LangChangeEvent = "languageChanged";
 export declare const LIDO_COMMON_AUDIO_PATH = "__LIDO_COMMON_AUDIO_PATH__";
 export declare const LIDO_COMMON_AUDIO_READY_EVENT = "lidoCommonAudioPathReady";
+export declare const GOOD_JOB_AUDIO_FILE = "goodJob.mp3";
+export declare const resolveCommonAudioPath: (basePath: string | undefined, fileName: string) => string | undefined;
 export declare const LIDO_INTERACTION_CLEANUP_EVENT = "lido:interaction-cleanup";
 export declare const TemplateID = "template-id";
 export declare const CalculatorOk = "calculator-ok";

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

@@ -1,5 +1,9 @@
 import { CalculatorOk } from './constants';
 import type { LessonTrackingParams } from './customEvents';
+export declare const isGoodJobAudioTarget: (element: HTMLElement) => boolean;
+export declare const resetGoodJobAudioTracking: (home: HTMLElement) => void;
+export declare const shouldPlayGoodJobAudio: (element: HTMLElement) => boolean;
+export declare const getGoodJobAudio: (element: HTMLElement) => string | undefined;
 export declare function buildDragSelectedMapFromDOM(): Record<string, string[]>;
 export declare function getSortedValuesArrayFromMap(map: Record<string, string[]>): string[];
 export declare function format(first?: string, middle?: string, last?: string): string;

package/package.json

@@ -1,73 +1,73 @@
-{
-  "name": "lido-player",
-  "version": "0.0.2-beta-25-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.43.5",
-    "@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",
-    "storybook": "^8.6.12"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@rive-app/canvas": "2.32.0",
-    "brotli": "^1.3.3",
-    "css-filter-converter": "^1.0.110",
-    "i18next": "^25.6.1",
-    "i18next-browser-languagedetector": "^8.2.0",
-    "jszip": "^3.10.1",
-    "lido-player": "^0.0.2-alpha-77",
-    "mathjs": "^14.4.0",
-    "tinycolor2": "^1.6.0"
-  }
-}
+{
+  "name": "lido-player",
+  "version": "0.0.2-beta-26-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.43.5",
+    "@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",
+    "storybook": "^8.6.12"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@rive-app/canvas": "2.32.0",
+    "brotli": "^1.3.3",
+    "css-filter-converter": "^1.0.110",
+    "i18next": "^25.6.1",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "jszip": "^3.10.1",
+    "lido-player": "^0.0.2-alpha-77",
+    "mathjs": "^14.4.0",
+    "tinycolor2": "^1.6.0"
+  }
+}

package/readme.md

@@ -1,114 +1,114 @@
-[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
-
-# Stencil Component Starter
-
-This is a starter project for building a standalone Web Component using Stencil.
-
-Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead.
-
-# Stencil
-
-Stencil is a compiler for building fast web apps using Web Components.
-
-Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
-
-Stencil components are just Web Components, so they work in any major framework or with no framework at all.
-
-## Getting Started
-
-To start building a new web component using Stencil, clone this repo to a new directory:
-
-```bash
-git clone https://github.com/ionic-team/stencil-component-starter.git my-component
-cd my-component
-git remote rm origin
-```
-
-and run:
-
-```bash
-npm install
-npm start
-```
-
-To build the component for production, run:
-
-```bash
-npm run build
-```
-
-To run the unit tests for the components, run:
-
-```bash
-npm test
-```
-
-Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
-
-## Naming Components
-
-When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
-
-Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic-generated web components use the prefix `ion`.
-
-## Using this component
-
-There are two strategies we recommend for using web components built with Stencil.
-
-The first step for all two of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
-
-You can read more about these different approaches in the [Stencil docs](https://stenciljs.com/docs/publishing).
-
-### Lazy Loading
-
-If your Stencil project is built with the [`dist`](https://stenciljs.com/docs/distribution) output target, you can import a small bootstrap script that registers all components and allows you to load individual component scripts lazily.
-
-For example, given your Stencil project namespace is called `my-design-system`, to use `my-component` on any website, inject this into your HTML:
-
-```html
-<script type="module" src="https://unpkg.com/my-design-system"></script>
-<!--
-To avoid unpkg.com redirects to the actual file, you can also directly import:
-https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
--->
-<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
-```
-
-This will only load the necessary scripts needed to render `<my-component />`. Once more components of this package are used, they will automatically be loaded lazily.
-
-You can also import the script as part of your `node_modules` in your applications entry file:
-
-```tsx
-import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
-```
-
-Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx).
-
-### Standalone
-
-If you are using a Stencil component library with `dist-custom-elements`, we recommend importing Stencil components individually in those files where they are needed.
-
-To export Stencil components as standalone components make sure you have the [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) output target defined in your `stencil.config.ts`.
-
-For example, given you'd like to use `<my-component />` as part of a React component, you can import the component directly via:
-
-```tsx
-import 'foobar-design-system/my-component';
-
-function App() {
-  return (
-    <>
-      <div>
-        <my-component
-          first="Stencil"
-          last="'Don't call me a framework' JS"
-        ></my-component>
-      </div>
-    </>
-  );
-}
-
-export default App;
-```
-
+[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
+
+# Stencil Component Starter
+
+This is a starter project for building a standalone Web Component using Stencil.
+
+Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead.
+
+# Stencil
+
+Stencil is a compiler for building fast web apps using Web Components.
+
+Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
+
+Stencil components are just Web Components, so they work in any major framework or with no framework at all.
+
+## Getting Started
+
+To start building a new web component using Stencil, clone this repo to a new directory:
+
+```bash
+git clone https://github.com/ionic-team/stencil-component-starter.git my-component
+cd my-component
+git remote rm origin
+```
+
+and run:
+
+```bash
+npm install
+npm start
+```
+
+To build the component for production, run:
+
+```bash
+npm run build
+```
+
+To run the unit tests for the components, run:
+
+```bash
+npm test
+```
+
+Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
+
+## Naming Components
+
+When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
+
+Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic-generated web components use the prefix `ion`.
+
+## Using this component
+
+There are two strategies we recommend for using web components built with Stencil.
+
+The first step for all two of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
+
+You can read more about these different approaches in the [Stencil docs](https://stenciljs.com/docs/publishing).
+
+### Lazy Loading
+
+If your Stencil project is built with the [`dist`](https://stenciljs.com/docs/distribution) output target, you can import a small bootstrap script that registers all components and allows you to load individual component scripts lazily.
+
+For example, given your Stencil project namespace is called `my-design-system`, to use `my-component` on any website, inject this into your HTML:
+
+```html
+<script type="module" src="https://unpkg.com/my-design-system"></script>
+<!--
+To avoid unpkg.com redirects to the actual file, you can also directly import:
+https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
+-->
+<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
+```
+
+This will only load the necessary scripts needed to render `<my-component />`. Once more components of this package are used, they will automatically be loaded lazily.
+
+You can also import the script as part of your `node_modules` in your applications entry file:
+
+```tsx
+import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
+```
+
+Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx).
+
+### Standalone
+
+If you are using a Stencil component library with `dist-custom-elements`, we recommend importing Stencil components individually in those files where they are needed.
+
+To export Stencil components as standalone components make sure you have the [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) output target defined in your `stencil.config.ts`.
+
+For example, given you'd like to use `<my-component />` as part of a React component, you can import the component directly via:
+
+```tsx
+import 'foobar-design-system/my-component';
+
+function App() {
+  return (
+    <>
+      <div>
+        <my-component
+          first="Stencil"
+          last="'Don't call me a framework' JS"
+        ></my-component>
+      </div>
+    </>
+  );
+}
+
+export default App;
+```
+
 Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-b6zuds?file=src%2FApp.tsx).

package/dist/components/p-B-mIxynb.js

@@ -1 +0,0 @@
-import{p as i,H as t,f as s,a as o,A as h,k as e,i as a,h as n,b as d,t as r}from"./index.js";const l=i(class i extends t{constructor(t){super(),!1!==t&&this.__registerHost(),this.value="",this.height="auto",this.width="auto",this.ariaLabel="",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.bgColor="",this.type="",this.tabIndex=0,this.visible=!0,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.flipped=!1,this.autoFlipAfter=4500,this.narrationTarget=null,this.narrationHandled=!1,this.instructionDone=!1,this.instructionStarted=!1,this.onAudioStarted=i=>{var t;const s=null===(t=i.detail)||void 0===t?void 0:t.target;s===this.instructionText()&&(this.instructionStarted=!0),s&&s===this.narrationTarget&&!this.narrationHandled&&(this.narrationGraceTimer&&window.clearTimeout(this.narrationGraceTimer),this.narrationGraceTimer=void 0)},this.onAudioPlaying=i=>{const t=i.detail,s=null==t?void 0:t.target;if("lido-avatar"!==(null==s?void 0:s.id))return;if(t.playbackContext!==this.goodJobPlaybackContext)return;const o=this.nextArrow();o&&this.flipped&&(this.goodJobPlaybackId=t.playbackId,o.classList.add("flash-card-next-glowing"))},this.onAudioEnded=i=>{var t,o,h;const e=null===(t=i.detail)||void 0===t?void 0:t.target,a=this.instructionText();if(e&&(e===a||"lido-avatar"===e.id||this.el.contains(e)))if(e!==this.narrationTarget||this.narrationHandled){if(!this.narrationHandled||e!==this.narrationTarget)if(e===this.instructionText())this.instructionDone=!0,this.frontStartTimer=window.setTimeout((()=>{this.speakFront()}),1200);else if(e===this.frontText()){if(this.flipped)return;this.autoFlipTimer&&window.clearTimeout(this.autoFlipTimer),this.autoFlipTimer=window.setTimeout((()=>{this.flipped||this.handleFlip()}),this.autoFlipAfter)}else if(e===this.backText())this.flipped&&this.showArrow();else if("lido-avatar"===e.id){const t=null===(o=i.detail)||void 0===o?void 0:o.playbackId;if((null===(h=i.detail)||void 0===h?void 0:h.playbackContext)!==this.goodJobPlaybackContext||t!==this.goodJobPlaybackId)return;this.goodJobPlaybackId=void 0,s("this.avatarAnimate='Idle'",e)}}else this.finishNarration(e)},this.margin="",this.disableSpeak=!1,this.style={},this.delayVisible="",this.updateStyles=()=>{const i=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:o(this.height,i)||"200px",width:o(this.width,i)||"200px",backgroundColor:o(this.bgColor,i),top:o(this.y,i),left:o(this.x,i),zIndex:this.z,display:this.visible?this.display?o(this.display,i):"inline-block":"none",flexDirection:this.direction?o(this.direction,i):void 0,margin:o(this.margin,i)}},this.handleFlip=()=>{var i;this.autoFlipTimer&&window.clearTimeout(this.autoFlipTimer),h.getI().stop(),this.clearNarrationTimers();const t=!this.flipped;if(this.flipped=!this.flipped,this.stopGoodJobGlow(),this.setArrowVisible(!1),t){const t=this.backText();t&&(null===(i=t.textContent)||void 0===i?void 0:i.trim())?this.startNarration(t):this.showArrow()}else this.speakFront()},this.instructionText=()=>{const i=this.el.closest("lido-container"),t=null==i?void 0:i.getAttribute("template-id");return t?null==i?void 0:i.querySelector(`[id="${t}"]`):null},this.frontText=()=>this.el.querySelector(".card-front lido-text"),this.backText=()=>this.el.querySelector(".card-back lido-text"),this.nextArrow=()=>{var i;return null===(i=this.el.closest("lido-container"))||void 0===i?void 0:i.querySelector("#arrow")},this.stopGoodJobGlow=()=>{var i;this.goodJobPlaybackId=void 0,this.goodJobPlaybackContext=void 0,null===(i=this.nextArrow())||void 0===i||i.classList.remove("flash-card-next-glowing")},this.speakFront=()=>{var i,t;const s=this.frontText();this.instructionDone&&!this.flipped&&s&&(null===(i=s.textContent)||void 0===i?void 0:i.trim())?this.startNarration(s):!this.instructionDone||this.flipped||s&&(null===(t=s.textContent)||void 0===t?void 0:t.trim())||(this.autoFlipTimer&&window.clearTimeout(this.autoFlipTimer),this.autoFlipTimer=window.setTimeout((()=>{this.flipped||this.handleFlip()}),this.autoFlipAfter))},this.clearNarrationTimers=()=>{this.narrationGraceTimer&&window.clearTimeout(this.narrationGraceTimer),this.narrationGraceTimer=void 0,this.narrationTarget=null,this.narrationHandled=!1},this.continueAfterNarration=i=>{if(i===this.instructionText())this.instructionDone=!0,this.frontStartTimer=window.setTimeout((()=>this.speakFront()),1200);else if(i===this.frontText()){if(this.flipped)return;this.autoFlipTimer&&window.clearTimeout(this.autoFlipTimer),this.autoFlipTimer=window.setTimeout((()=>{this.flipped||this.handleFlip()}),this.autoFlipAfter)}else i===this.backText()&&this.flipped&&this.showArrow()},this.finishNarration=i=>{i!==this.narrationTarget||this.narrationHandled||(this.narrationHandled=!0,this.narrationGraceTimer&&window.clearTimeout(this.narrationGraceTimer),this.narrationGraceTimer=void 0,this.continueAfterNarration(i))},this.startNarration=t=>{this.clearNarrationTimers(),this.narrationTarget=t,this.narrationGraceTimer=window.setTimeout((()=>{this.narrationHandled||this.finishNarration(t)}),i.narrationStartGrace),s("this.speak='true'",t)},this.showArrow=()=>{if(!this.flipped)return;const i=this.el.closest("lido-container");if("flashcardtemplate"!==(null==i?void 0:i.getAttribute("template-id")))return;const t=this.nextArrow();if(!t)return;t.getAttribute("onTouch")||t.setAttribute("onTouch","this.nextBtn='true';");const o=i.querySelector("#lido-avatar"),e=t.getAttribute("audio");o&&e&&o.setAttribute("audio",e),this.setArrowVisible(!0),t.classList.add("flash-card-next-glowing"),o&&(this.goodJobPlaybackContext={},this.goodJobPlaybackId=void 0,s("this.avatarAnimate='Idle speak'",o),h.getI().play(o,!0,this.goodJobPlaybackContext))},this.setArrowVisible=i=>{const t=this.el.closest("lido-container");if("flashcardtemplate"!==(null==t?void 0:t.getAttribute("template-id")))return;const s=t.querySelector("#arrow");if(!s)return;s.visible=i,s.setAttribute("visible",String(i)),s.style.display=i?"block":"none",s.style.visibility=i?"visible":"hidden",s.style.opacity=i?"1":"0",s.style.pointerEvents=i?"auto":"none";const o=s.querySelector("lido-image");o&&(o.style.display=i?"flex":"none",o.style.visibility=i?"visible":"hidden",o.style.opacity=i?"1":"0"),"function"==typeof s.updateStyles&&s.updateStyles()}}handleFlippedChange(){}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.updateStyles),window.addEventListener("load",this.updateStyles)}componentDidLoad(){var i;e(this.el,this.delayVisible),a(this.el,this.type),window.addEventListener("lidoAudioStarted",this.onAudioStarted),window.addEventListener("lidoAudioPlaying",this.onAudioPlaying),window.addEventListener("lidoAudioEnded",this.onAudioEnded);const t=this.el.closest("lido-container");"flashcardtemplate"===(null==t?void 0:t.getAttribute("template-id"))&&(null===(i=t.querySelector("#lido-avatar"))||void 0===i||i.setAttribute("disable-speak","true"),this.instructionStartTimer=window.setTimeout((()=>{if(!this.instructionStarted&&!this.instructionDone){const i=this.instructionText();i&&this.startNarration(i)}}),150))}disconnectedCallback(){window.removeEventListener("lidoAudioEnded",this.onAudioEnded),window.removeEventListener("lidoAudioPlaying",this.onAudioPlaying),window.removeEventListener("lidoAudioStarted",this.onAudioStarted),this.autoFlipTimer&&window.clearTimeout(this.autoFlipTimer),this.instructionStartTimer&&window.clearTimeout(this.instructionStartTimer),this.frontStartTimer&&window.clearTimeout(this.frontStartTimer),this.clearNarrationTimers(),window.removeEventListener("resize",this.updateStyles),window.removeEventListener("load",this.updateStyles)}render(){return n(d,{key:"57b9dc5ecf618dc381a58e107fa2990b84f5517a",value:this.value,"tab-index":this.tabIndex,style:this.style,"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,audio:this.audio,onTouch:this.onTouch,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,onEntry:this.onEntry,type:this.type,onClick:i=>{var t,s;(null===(s=null===(t=i.target)||void 0===t?void 0:t.closest)||void 0===s?void 0:s.call(t,"#lido-avatar"))||this.handleFlip()},"disable-speak":this.disableSpeak},n("div",{key:"3712fc66e33323bdd55e0abb747370ee461dc808",class:"card "+(this.flipped?"flipped":"")},n("div",{key:"eb8af2e445393592c0e8a3e4c5934c71dcab4b4e",class:"card-face card-front"},null!=this.front?this.front:n("slot",{name:"front"})),n("div",{key:"efa14cc7ea506714342151b12a9724bdcdb1eba8",class:"card-face card-back"},null!=this.back?this.back:n("slot",{name:"back"}))))}get el(){return this}static get watchers(){return{flipped:[{handleFlippedChange:0}]}}static get style(){return'.card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.6s ease;cursor:pointer}.card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}.card-back{transform:rotateY(180deg)}lido-container[template-id="flashcardtemplate"] #arrow{position:absolute !important;left:auto !important;top:50% !important;right:13.3% !important;transform:translateY(-50%);z-index:4 !important;overflow:visible;box-sizing:border-box;border:10px solid transparent;box-shadow:0px 8px 0px 0px #8b310f !important}lido-container[template-id="flashcardtemplate"] #arrow.flash-card-next-glowing{animation:flash-card-next-attention 1.4s ease-in-out infinite}@keyframes flash-card-next-attention{0%,100%{border-color:#ffc34d;filter:drop-shadow(0 0 0 rgba(255, 195, 77, 0))}50%{border-color:#fff1a8;filter:drop-shadow(0 0 10px rgba(255, 195, 77, 0.95))}}lido-container[template-id="flashcardtemplate"] #arrow:active{transform:translateY(calc(-50% + 8px)) !important;box-shadow:0px 0px 0px 0px !important}@media (orientation: portrait){lido-container[template-id="flashcardtemplate"] #arrow{right:-4.3% !important}}'}},[260,"lido-flash-card",{value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],bgColor:[1,"bg-color"],type:[1],tabIndex:[2,"tab-index"],visible:[4],audio:[1],onTouch:[1,"on-touch"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],onEntry:[1,"on-entry"],direction:[1],display:[1],front:[8],back:[8],flipped:[1540],autoFlipAfter:[2,"auto-flip-after"],margin:[1],disableSpeak:[4,"disable-speak"],delayVisible:[1,"delay-visible"],style:[32]},void 0,{flipped:[{handleFlippedChange:0}]}]);function c(){"undefined"!=typeof customElements&&["lido-flash-card"].forEach((i=>{"lido-flash-card"===i&&(customElements.get(r(i))||customElements.define(r(i),l))}))}l.narrationStartGrace=800,c();export{l as L,c as d}

package/dist/components/p-CSxwfvl3.js

@@ -1 +0,0 @@
-import{t,p as i,H as s,k as o,i as e,v as a,w as l,a as n,h,b as d}from"./index.js";const r=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.id="",this.value="",this.z="0",this.tabIndex=0,this.visible=!1,this.onEntry="",this.delayVisible="",this.floatDirection="bottomToTop",this.handleWindowResize=()=>this.updateStyles(),this.handleWindowLoad=()=>this.updateStyles()}componentDidLoad(){o(this.el,this.delayVisible),e(this.el,this.type),this.initializeFloatElement()}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.handleWindowResize),window.addEventListener("load",this.handleWindowLoad)}disconnectedCallback(){window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad)}initializeFloatElement(){let t=0;Array.from(this.el.children).forEach((i=>{const s=i;s.style.visibility="hidden",setTimeout((()=>{s.style.visibility="visible",a(s)}),t),t+=1e3,i.addEventListener("click",(()=>{l(s)}))}))}updateStyles(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:"leftToRight"!==this.floatDirection?"100%":n(this.height,t),width:"leftToRight"===this.floatDirection?"100%":n(this.width,t),backgroundColor:n(this.bgColor,t),zIndex:this.z,display:this.visible?"flex":"none"}}render(){return h(d,{key:"26ada4c2834a58fe1f45348a32f9d1dcecb79a14",class:"lido-float","float-direction":this.floatDirection,id:this.id,"tab-index":this.tabIndex,style:this.style,onEntry:this.onEntry},h("slot",{key:"6f4ca358f564e268390f221cc1f84af1f303761b"}))}get el(){return this}static get style(){return".lido-float{position:relative}.lido-float>*{position:absolute;cursor:pointer}@keyframes float-up{from{top:var(--el-top)}to{top:-500px}}#removeShadow{box-shadow:unset !important}@keyframes float-lr{from{right:var(--el-left)}to{right:-500px}}"}},[260,"lido-float",{id:[1],value:[1],z:[1],tabIndex:[2,"tab-index"],visible:[4],onEntry:[1,"on-entry"],width:[1],height:[1],bgColor:[1,"bg-color"],type:[1],delayVisible:[1,"delay-visible"],floatDirection:[1,"float-direction"],style:[32]}]);function c(){"undefined"!=typeof customElements&&["lido-float"].forEach((i=>{"lido-float"===i&&(customElements.get(t(i))||customElements.define(t(i),r))}))}c();export{r as L,c as d}

package/dist/components/p-DONbWJGn.js

@@ -1 +0,0 @@
-import{t,p as i,H as s,m as o,h as e,b as h}from"./index.js";const n=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.showSpeakIcon=!1,this.id="",this.value="",this.height="auto",this.width="auto",this.ariaLabel="",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.bgColor="",this.type="",this.tabIndex=0,this.visible=!1,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.minDrops=1,this.maxDrops=1,this.margin=""}componentDidLoad(){setTimeout((()=>{const t=this.el.parentElement;if(!t)return;const i=t.offsetWidth,s=t.offsetHeight;Array.from(this.el.children).forEach((t=>{const o=i-t.offsetWidth,e=s-t.offsetHeight,h=Math.random()*o,n=Math.random()*e;t.style.position="absolute",t.style.left=`${h}px`,t.style.top=`${n}px`}))}),50),this.showSpeakIcon&&o(this.el)}render(){return e(h,{key:"e0ed354e54ea3c5112d0e068b2a94356ef437874",class:"lido-random",type:this.type,"tab-index":this.tabIndex,value:this.value,style:{height:this.height,width:this.width,top:this.y,left:this.x,display:this.visible?"block":"none",zIndex:this.z,backgroundColor:this.bgColor,margin:this.margin},"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,audio:this.audio,onTouch:this.onTouch,onCorrect:this.onCorrect,minDrops:this.minDrops,maxDrops:this.maxDrops,onInCorrect:this.onInCorrect,onEntry:this.onEntry},e("slot",{key:"ed0386cda3ba55d89fb08607775a49a4180f08b3"}))}get el(){return this}static get style(){return".lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}"}},[260,"lido-random",{showSpeakIcon:[4,"show-speak-icon"],id:[1],value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],bgColor:[1,"bg-color"],type:[1],tabIndex:[2,"tab-index"],visible:[4],audio:[1],onTouch:[1,"on-touch"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],onEntry:[1,"on-entry"],minDrops:[2,"min-drops"],maxDrops:[2,"max-drops"],margin:[1]}]);function a(){"undefined"!=typeof customElements&&["lido-random"].forEach((i=>{"lido-random"===i&&(customElements.get(t(i))||customElements.define(t(i),n))}))}a();export{n as L,a as d}