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

@@ -185,8 +185,15 @@ export declare class LidoContainer {
     speakFlag: boolean;
     private handleWindowResize;
     private handleWindowLoad;
+    private writeCardArrowObserver?;
+    private shouldInitializePlayModeDragDrop;
+    private isWriteCardContainer;
+    private syncWriteCardArrowHighlight;
+    private observeWriteCardArrow;
     private cleanupInteractionHandlers;
     languageChanged(newLang: string): void;
+    canplayChanged(newValue: boolean, oldValue: boolean): void;
+    componentDidRender(): void;
     componentWillLoad(): void;
     private resolveInstructionAudio;
     private resolveLanguage;

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;
@@ -7,6 +11,13 @@ type ActionExecutionOptions = {
     visualOnly?: boolean;
 };
 export declare const initEventsForElement: (element: HTMLElement, type?: string) => Promise<void>;
+/**
+ * Re-enable the gameplay handlers for interactive children that were created
+ * while the player was in edit mode. This is intentionally limited to the
+ * drag/drop elements used by Food Jar; other templates retain their existing
+ * component-load initialization path.
+ */
+export declare const initializePlayModeDragDropElements: (root: 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;

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

@@ -3,5 +3,5 @@ export declare const slideAnimation: () => Promise<void>;
 export declare function slidingWithScaling(element: HTMLElement): void;
 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;
+export declare const updateReorderCorrectness: (container: HTMLElement, slideElement: HTMLElement, overlappedElement: HTMLElement) => void;
 export declare const isReorderComplete: (slideValues: string[], objectiveString: string) => boolean;

package/package.json

@@ -1,73 +1,73 @@
-{
-  "name": "lido-player",
-  "version": "0.0.2-beta-24",
-  "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).