lido-player 0.0.2-beta-22-dev → 0.0.2-beta-24-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/container/lido-container.d.ts

@@ -185,6 +185,10 @@ export declare class LidoContainer {
     speakFlag: boolean;
     private handleWindowResize;
     private handleWindowLoad;
+    private writeCardArrowObserver?;
+    private isWriteCardContainer;
+    private syncWriteCardArrowHighlight;
+    private observeWriteCardArrow;
     private cleanupInteractionHandlers;
     languageChanged(newLang: string): void;
     componentWillLoad(): void;

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

@@ -88,7 +88,18 @@ export declare class LidoFlash {
     flipped: boolean;
     autoFlipAfter: number;
     private autoFlipTimer?;
+    private instructionStartTimer?;
+    private frontStartTimer?;
+    private narrationGraceTimer?;
+    private narrationTarget;
+    private narrationHandled;
+    private goodJobPlaybackId?;
+    private goodJobPlaybackContext?;
+    private static readonly narrationStartGrace;
     private instructionDone;
+    private instructionStarted;
+    private onAudioStarted;
+    private onAudioPlaying;
     private onAudioEnded;
     /**
      * CSS margin value applied to each child element inside the container.
@@ -119,7 +130,13 @@ export declare class LidoFlash {
     private instructionText;
     private frontText;
     private backText;
+    private nextArrow;
+    private stopGoodJobGlow;
     private speakFront;
+    private clearNarrationTimers;
+    private continueAfterNarration;
+    private finishNarration;
+    private startNarration;
     private showArrow;
     private setArrowVisible;
     render(): any;

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

@@ -4,6 +4,7 @@ export declare class AudioPlayer {
     private currentTargetElement;
     private pendingReplayElement;
     private playbackHasStarted;
+    private playbackSequence;
     private highlightOverlay;
     private wordRects;
     private activeWordIndex;
@@ -24,7 +25,7 @@ export declare class AudioPlayer {
     private handleVisibilityChange;
     private resolveVisibilityWaiters;
     private getLidoTextElement;
-    play(targetElement: HTMLElement, suppressHighlight?: boolean): any;
+    play(targetElement: HTMLElement, suppressHighlight?: boolean, playbackContext?: unknown): any;
     private registerGlobalStopEvents;
     private unregisterGlobalStopEvents;
     private registerVisibilityEvents;

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

@@ -3,8 +3,11 @@ import type { LessonTrackingParams } from './customEvents';
 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;
+type ActionExecutionOptions = {
+    visualOnly?: boolean;
+};
 export declare const initEventsForElement: (element: HTMLElement, type?: string) => Promise<void>;
-export declare const executeActions: (actionsString: string, thisElement: HTMLElement, element?: HTMLElement) => Promise<void>;
+export declare const executeActions: (actionsString: string, thisElement: HTMLElement, element?: HTMLElement, options?: ActionExecutionOptions) => Promise<void>;
 export declare const matchStringPattern: (pattern: string, arr: string[]) => boolean;
 export declare const countPatternWords: (pattern: string) => number;
 export declare let countOfMistakes: number;
@@ -49,3 +52,4 @@ export declare const animateBoxCells: (element: HTMLElement, value: string) => P
 export declare const questionBoxAnimation: (element: HTMLElement, value: string) => Promise<void>;
 export declare const SumTogetherAnimation: (element: HTMLElement, value: string) => Promise<void>;
 export declare const updateCalculatorAnswer: (el: HTMLElement) => void;
+export {};

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

@@ -1,2 +1,3 @@
 export declare function onTouchListenerForOnTouch(element: HTMLElement): void;
 export declare function addClickListenerForClickType(element: HTMLElement): void;
+export declare const initializeClickableElementStyle: (element: HTMLElement) => void;

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

@@ -1,6 +1,6 @@
+export declare const getSlideValuesForValidation: (container: HTMLElement, slideElements: HTMLElement[]) => string[];
 export declare const slideAnimation: () => Promise<void>;
 export declare function slidingWithScaling(element: HTMLElement): void;
-export declare const getSlideValuesForValidation: (container: HTMLElement, slideElements: HTMLElement[]) => string[];
 export declare const updateArrangeLettersCorrectness: (container: HTMLElement, slideValues: string[], objectiveValues: string[]) => void;
 export declare const isArrangeLettersComplete: (slideValues: string[], objectiveString: string) => boolean;
 export declare const updateReorderCorrectness: (container: HTMLElement, slideValues: string[], objectiveValues: string[]) => void;

package/package.json

@@ -1,74 +1,73 @@
-{
-  "name": "lido-player",
-  "version": "0.0.2-beta-22-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",
-    "puppeteer": "^21.11.0",
-    "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-24-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-BUfCIPRa.js

@@ -1 +0,0 @@
-import{t,p as i,H as s,f as e,a,A as o,k as n,i as h,h as d,b as r}from"./index.js";const l=i(class extends s{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.instructionDone=!1,this.onAudioEnded=t=>{var i;const s=null===(i=t.detail)||void 0===i?void 0:i.target,a=this.instructionText();if(s&&(s===a||"lido-avatar"===s.id||this.el.contains(s)))if(s===this.instructionText())this.instructionDone=!0,window.setTimeout((()=>{this.speakFront()}),1200);else if(s===this.frontText()){if(this.flipped)return;this.autoFlipTimer&&window.clearTimeout(this.autoFlipTimer),this.autoFlipTimer=window.setTimeout((()=>{this.flipped||this.handleFlip()}),this.autoFlipAfter)}else s===this.backText()?this.flipped&&this.showArrow():"lido-avatar"===s.id&&e("this.avatarAnimate='Idle'",s)},this.margin="",this.disableSpeak=!1,this.style={},this.delayVisible="",this.updateStyles=()=>{const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:a(this.height,t)||"200px",width:a(this.width,t)||"200px",backgroundColor:a(this.bgColor,t),top:a(this.y,t),left:a(this.x,t),zIndex:this.z,display:this.visible?this.display?a(this.display,t):"inline-block":"none",flexDirection:this.direction?a(this.direction,t):void 0,margin:a(this.margin,t)}},this.handleFlip=()=>{var t;this.autoFlipTimer&&window.clearTimeout(this.autoFlipTimer),o.getI().stop();const i=!this.flipped;if(this.flipped=!this.flipped,this.setArrowVisible(!1),i){const i=this.backText();i&&(null===(t=i.textContent)||void 0===t?void 0:t.trim())?e("this.speak='true'",i):this.showArrow()}else this.speakFront()},this.instructionText=()=>{var t;return document.getElementById((null===(t=this.el.closest("lido-container"))||void 0===t?void 0:t.getAttribute("template-id"))||"")},this.frontText=()=>this.el.querySelector(".card-front lido-text"),this.backText=()=>this.el.querySelector(".card-back lido-text"),this.speakFront=()=>{var t;const i=this.frontText();this.instructionDone&&!this.flipped&&i&&(null===(t=i.textContent)||void 0===t?void 0:t.trim())&&e("this.speak='true'",i)},this.showArrow=()=>{if(!this.flipped)return;const t=document.getElementById("arrow");if(!t)return;t.getAttribute("onTouch")||t.setAttribute("onTouch","this.nextBtn='true';");const i=document.getElementById("lido-avatar"),s=t.getAttribute("audio");i&&s&&(i.setAttribute("audio",s),t.removeAttribute("audio")),this.setArrowVisible(!0),i&&(e("this.avatarAnimate='Idle speak'",i),o.getI().play(i,!0))},this.setArrowVisible=t=>{const i=document.getElementById("arrow");if(!i)return;i.visible=t,i.setAttribute("visible",String(t)),i.style.display=t?"block":"none",i.style.visibility=t?"visible":"hidden",i.style.opacity=t?"1":"0";const s=i.querySelector("lido-image");s&&(s.style.display=t?"flex":"none",s.style.visibility=t?"visible":"hidden",s.style.opacity=t?"1":"0"),"function"==typeof i.updateStyles&&i.updateStyles()}}handleFlippedChange(){}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.updateStyles),window.addEventListener("load",this.updateStyles)}componentDidLoad(){n(this.el,this.delayVisible),h(this.el,this.type),window.addEventListener("lidoAudioEnded",this.onAudioEnded)}disconnectedCallback(){window.removeEventListener("lidoAudioEnded",this.onAudioEnded),this.autoFlipTimer&&window.clearTimeout(this.autoFlipTimer),window.removeEventListener("resize",this.updateStyles),window.removeEventListener("load",this.updateStyles)}render(){return d(r,{key:"8d65b494352e0c0aefb3815c87a798967ccb65aa",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:this.handleFlip,"disable-speak":this.disableSpeak},d("div",{key:"db3d4fce4f9f54437485ab1274b1f9bd3b3486bc",class:"card "+(this.flipped?"flipped":"")},d("div",{key:"d37770b0b08eac533265d7f8049c598df047aa37",class:"card-face card-front"},null!=this.front?this.front:d("slot",{name:"front"})),d("div",{key:"2f8431017cfed9f9adb679442be833a65704d41e",class:"card-face card-back"},null!=this.back?this.back:d("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}@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(t(i))||customElements.define(t(i),l))}))}c();export{l as L,c as d}

package/dist/components/p-DP6jQ5ML.js

@@ -1 +0,0 @@
-import{t,p as a,H as i,k as r,i as e,a as o,h,b as s}from"./index.js";const d=a(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),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.shapeType="circle",this.visible=!1,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.minDrops=1,this.maxDrops=1,this.margin="",this.delayVisible="",this.disableSpeak=!1,this.style={}}componentDidLoad(){r(this.el,this.delayVisible),e(this.el,this.type),this.updateStyles(),this.lido3DShapes()}updateStyles(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={x:o(`${this.x}`,t),y:o(`${this.y}`,t),height:o(`${this.height}`,t),width:o(`${this.width}`,t)}}lido3DShapes(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";"lido-cube"===this.shapeType&&this.el.querySelectorAll(".face").forEach((a=>{const i=a;i.style.setProperty("--face-width",o(`${this.width}`,t));const r=parseInt(o(`${this.width}`,t))/2;i.style.setProperty("--face-translate",`${r}px`),i.style.setProperty("--face-bg-color",this.bgColor)}))}render(){return h(s,{key:"90b323eacac8b702168f612f79000da757109ec1",class:`lido-shape ${this.shapeType}`,value:this.value,type:this.type,"tab-index":this.tabIndex,style:{height:"polygon"!==this.shapeType?this.style.height:void 0,width:"polygon"!==this.shapeType?this.style.width:void 0,top:this.style.y,left:this.style.x,display:this.visible?"block":"none",zIndex:this.z,backgroundColor:"polygon"!==this.shapeType?this.bgColor:"transparent",margin:this.margin},"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,audio:this.audio,minDrops:this.minDrops,maxDrops:this.maxDrops,onTouch:this.onTouch,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,onEntry:this.onEntry,"disable-speak":this.disableSpeak},"lido-cube"===this.shapeType&&h("div",{key:"16b4a96f302cd6b1c80023a29253e85fe0937622",class:"cube"},h("div",{key:"9ce4dfa0021b463aa5dba4c0651d144f844c2db0",class:"face top"}),h("div",{key:"f10410ef05cbde0a024ccbdbfb4fb7099c1bd9d3",class:"face bottom"}),h("div",{key:"2a08b1857613efd1db596d72a9324ac5b3379628",class:"face left"}),h("div",{key:"4922b4b63dc9538e68d143109bfa12782382ee48",class:"face right"}),h("div",{key:"983bc6815a3b5e6023d76394e0bdeb12c493b771",class:"face front"}),h("div",{key:"eab0224f427b8a345d3c3285d8d2828b39871eaa",class:"face back"})))}get el(){return this}static get style(){return".lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z);justify-content:center;align-items:center}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-trapezium{width:var(--trapeziumWidth);height:var(--trapeziumHeight);background-color:var(--bgColor);clip-path:polygon(      20% 0%,         80% 0%,         100% 100%,      0% 100%      )}.lido-hexagon{width:var(--hexagonWidth);height:var(--hexagonHeight);background-color:var(--bgColor);clip-path:polygon(      25% 0%,         75% 0%,         100% 50%,       75% 100%,       25% 100%,       0% 50%       )}.lido-cone{width:var(--coneWidth);height:var(--coneHeight);background-color:var(--bgColor);clip-path:polygon(            15% 10%,      25% 4%,      35% 1%,      50% 0%,      65% 1%,      75% 4%,      85% 10%,              50% 100%    )}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(45deg)}.face{position:absolute;width:var(--face-width,150px);height:var(--face-width,150px);background:var(--face-bg-color,150px);box-shadow:inset -20px -20px 40px rgba(0,0,0,0.3)}.front{transform:rotateY(  0deg) translateZ(var(--face-translate, 75px))}.back{transform:rotateY(180deg) translateZ(var(--face-translate, 75px))}.right{transform:rotateY( 90deg) translateZ(var(--face-translate, 75px))}.left{transform:rotateY(-90deg) translateZ(var(--face-translate, 75px))}.top{transform:rotateX( 90deg) translateZ(var(--face-translate, 75px))}.bottom{transform:rotateX(-90deg) translateZ(var(--face-translate, 75px))}.lido-cylinder{width:var(--width);height:var(--height);border-radius:100% / 80px;background:radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0),      radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0),      red}.lido-sphere{position:relative;width:var(--width);height:var(--width);border-radius:50%;background:radial-gradient(circle at 30% 18%, #22d4ff 0%, #18c2f4 9%, rgba(24, 194, 244, 0.2) 18%, transparent 30%),      radial-gradient(circle at 36% 26%, #0f8fff 0%, #0b67e6 30%, #083fbe 62%, #120084 100%);box-shadow:inset -22px -26px 40px rgba(5, 0, 70, 0.38),      inset 14px 14px 24px rgba(255, 255, 255, 0.05),      0 4px 2px rgba(0, 0, 0, 0.78);overflow:visible}.lido-sphere::after{content:'';position:absolute;top:50%;left:50%;width:100%;height:16%;border-radius:50%;border-top:2px dashed rgba(0, 0, 0, 0.65);border-bottom:3px solid rgba(0, 0, 0, 0.85);box-sizing:border-box;transform:translate(-50%, -50%);pointer-events:none}"}},[0,"lido-shape",{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"],shapeType:[1,"shape-type"],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],delayVisible:[1,"delay-visible"],disableSpeak:[4,"disable-speak"],style:[32]}]);function l(){"undefined"!=typeof customElements&&["lido-shape"].forEach((a=>{"lido-shape"===a&&(customElements.get(t(a))||customElements.define(t(a),d))}))}l();export{d as L,l as d}