lido-player 0.0.2-beta-16-dev → 0.0.2-beta-17

package/dist/collection/components/text/lido-text.css

@@ -1,53 +1,53 @@
-.lido-text {
-  /* background-color: #fff; */
-  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
-  transition: background-color 0.3s ease;
-  user-select: none;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  border-radius: 24px;
-  color: #333;
-  cursor: pointer;
-  font-family: 'Baloo Bhai 2', serif;
-}
-
-.text-letters {
-  transition: color 0.3s, text-shadow 0.3s;
-  display: inline-block;
-  padding: 0 2px;  
-}
-
-.text-letters.letter-highlight {
-  color: #8e24aa;
-  background: none;
-  border-radius: 0;
-  text-shadow: 0 2px 8px #8e24aa88;
-  animation: text-letter-bounce 0.4s;
-}
-
-.text-words {
-  transition: color 0.3s, text-shadow 0.3s;
-  display: inline-block;
-  padding: 0 2px;  
-}
-
-.text-words.word-highlight {
-  color: #8e24aa;
-  background: none;
-  border-radius: 0;
-  text-shadow: 0 2px 8px #8e24aa88;
-  animation: text-word-bounce 0.4s;
-}
-
-@keyframes text-letter-bounce {
-  0% { transform: scale(1); }
-  60% { transform: scale(1.4); }
-  100% { transform: scale(1); }
-}
-
-@keyframes text-word-bounce {
-  0% { transform: scale(1); }
-  60% { transform: scale(1.3); }
-  100% { transform: scale(1); }
-}
+.lido-text {
+  /* background-color: #fff; */
+  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
+  transition: background-color 0.3s ease;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border-radius: 24px;
+  color: #333;
+  cursor: pointer;
+  font-family: 'Baloo Bhai 2', serif;
+}
+
+.text-letters {
+  transition: color 0.3s, text-shadow 0.3s;
+  display: inline-block;
+  padding: 0 2px;  
+}
+
+.text-letters.letter-highlight {
+  color: #8e24aa;
+  background: none;
+  border-radius: 0;
+  text-shadow: 0 2px 8px #8e24aa88;
+  animation: text-letter-bounce 0.4s;
+}
+
+.text-words {
+  transition: color 0.3s, text-shadow 0.3s;
+  display: inline-block;
+  padding: 0 2px;  
+}
+
+.text-words.word-highlight {
+  color: #8e24aa;
+  background: none;
+  border-radius: 0;
+  text-shadow: 0 2px 8px #8e24aa88;
+  animation: text-word-bounce 0.4s;
+}
+
+@keyframes text-letter-bounce {
+  0% { transform: scale(1); }
+  60% { transform: scale(1.4); }
+  100% { transform: scale(1); }
+}
+
+@keyframes text-word-bounce {
+  0% { transform: scale(1); }
+  60% { transform: scale(1.3); }
+  100% { transform: scale(1); }
+}

package/dist/collection/components/text/lido-text.js

@@ -260,7 +260,8 @@ export class LidoText {
         }
     }
     render() {
-        return (h(Host, { key: '30e77a008aba08f90f88541574f70588bb8a2cd6', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, move: this.move, "span-type": this.spanType, "disable-speak": `${this.disableSpeak}` }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", i18next.t(this.string)) : i18next.t(this.string)));
+        const displayText = i18next.t(this.string).replace(/_phonics?/gi, '');
+        return (h(Host, { key: 'ff07be0272e5b035a5378e5108bc86ea03ac49aa', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, move: this.move, "span-type": this.spanType, "disable-speak": `${this.disableSpeak}` }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", displayText) : displayText));
     }
     static get is() { return "lido-text"; }
     static get originalStyleUrls() {
@@ -847,7 +848,7 @@ export class LidoText {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -867,7 +868,7 @@ export class LidoText {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS padding value applied to each child element inside the container.\r\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS padding value applied to each child element inside the container.\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -887,7 +888,7 @@ export class LidoText {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS filter to apply border radius to the image.\r\nExample: '10px' for  images."
+                    "text": "CSS filter to apply border radius to the image.\nExample: '10px' for  images."
                 },
                 "getter": false,
                 "setter": false,
@@ -907,7 +908,7 @@ export class LidoText {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether to wrap each letter or each word of the text in a span element.\r\nThis can be useful for animations or styling individual letters."
+                    "text": "Indicates whether to wrap each letter or each word of the text in a span element.\nThis can be useful for animations or styling individual letters."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/trace/assets/Tracing-hand.svg

@@ -0,0 +1,8 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M39 16C42.314 16 45 18.686 45 22V44H48V14C48 10.686 50.686 8 54 8C57.314 8 60 10.686 60 14V44H63V20C63 16.686 65.686 14 69 14C72.314 14 75 16.686 75 20V50C75 62.703 64.703 73 52 73H40C31.163 73 24 65.837 24 57V40C24 36.686 26.686 34 30 34C33.314 34 36 36.686 36 40V22C36 18.686 38.686 16 42 16H39Z" fill="#F4C7A1"/>
+  <path d="M27 57C27 69.703 37.297 80 50 80H59C69.493 80 78 71.493 78 61V50" stroke="#C77E55" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M30 43C30 39.686 32.686 37 36 37C39.314 37 42 39.686 42 43V55" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
+  <path d="M45 22C45 18.686 47.686 16 51 16C54.314 16 57 18.686 57 22V49" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
+  <path d="M60 14C60 10.686 62.686 8 66 8C69.314 8 72 10.686 72 14V48" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
+  <path d="M75 20C75 16.686 77.686 14 81 14C84.314 14 87 16.686 87 20V43" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
+</svg>

package/dist/collection/components/trace/lido-trace.css

@@ -1,98 +1,98 @@
-:host {
-  display: block;
-  position: relative;
-}
-
-#lido-svgContainer {
-  /* position: absolute; */
-  /* top: 0; */
-  /* left: 0; */
-  /* right: 0; */
-  /* bottom: 50px; */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
-
-.lido-trace-svg {
-  width: 100%;
-  height: 100%;
-  /* max-height: calc(100vh - 50px); */
-  /* border: 1px solid black; */
-  touch-action: none;
-}
-
-#lido-draggableCircle {
-  cursor: pointer;
-  fill: #CF1565;
-  transition: fill 0.2s, r 0.2s;
-}
-
-.lido-blindTracing {
-  stroke: none !important;
-}
-
-.lido-blindFreeTrace {
-  stroke: none !important;
-}
-
-.lido-hovered {
-  cursor: grab;
-  fill: darkred;
-}
-
-#lido-controls {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: space-between;
-  padding: 10px;
-  background-color: #f0f0f0;
-  border-top: 1px solid #ccc;
-}
-
-button {
-  padding: 10px;
-  font-size: 16px;
-}
-
-@media (max-width: 600px) {
-  button {
-    padding: 8px;
-    font-size: 14px;
-  }
-}
-
-.lido-trace-path-green {
-  /* stroke: green !important; */
-}
-
-.lido-flow-indicator {
-  stroke: blue;
-  stroke-width: 2;
-  stroke-dasharray: 6, 6; /* Uniform dotted line */
-  fill: none;
-}
-
-.lido-trace {
-  height: 700px;
-  width: 700px;
-  z-index: 1;
-  /* position: absolute; */
-  justify-items: center;
-  /* align-items: center; */
-  align-content: center;
-}
-
-.trace-animate {
-  animation: trace-bounce 0.5s;
-}
-@keyframes trace-bounce {
-  0%   { transform: scale(1); }
-  30%  { transform: scale(1.05); }
-  60%  { transform: scale(0.95); }
-  100% { transform: scale(1); }
+:host {
+  display: block;
+  position: relative;
+}
+
+#lido-svgContainer {
+  /* position: absolute; */
+  /* top: 0; */
+  /* left: 0; */
+  /* right: 0; */
+  /* bottom: 50px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.lido-trace-svg {
+  width: 100%;
+  height: 100%;
+  /* max-height: calc(100vh - 50px); */
+  /* border: 1px solid black; */
+  touch-action: none;
+}
+
+#lido-draggableCircle {
+  cursor: pointer;
+  fill: #CF1565;
+  transition: fill 0.2s, r 0.2s;
+}
+
+.lido-blindTracing {
+  stroke: none !important;
+}
+
+.lido-blindFreeTrace {
+  stroke: none !important;
+}
+
+.lido-hovered {
+  cursor: grab;
+  fill: darkred;
+}
+
+#lido-controls {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  background-color: #f0f0f0;
+  border-top: 1px solid #ccc;
+}
+
+button {
+  padding: 10px;
+  font-size: 16px;
+}
+
+@media (max-width: 600px) {
+  button {
+    padding: 8px;
+    font-size: 14px;
+  }
+}
+
+.lido-trace-path-green {
+  /* stroke: green !important; */
+}
+
+.lido-flow-indicator {
+  stroke: blue;
+  stroke-width: 2;
+  stroke-dasharray: 6, 6; /* Uniform dotted line */
+  fill: none;
+}
+
+.lido-trace {
+  height: 700px;
+  width: 700px;
+  z-index: 1;
+  /* position: absolute; */
+  justify-items: center;
+  /* align-items: center; */
+  align-content: center;
+}
+
+.trace-animate {
+  animation: trace-bounce 0.5s;
+}
+@keyframes trace-bounce {
+  0%   { transform: scale(1); }
+  30%  { transform: scale(1.05); }
+  60%  { transform: scale(0.95); }
+  100% { transform: scale(1); }
 }

package/dist/collection/components/trace/lido-trace.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, getAssetPath } from "@stencil/core";
 import { convertUrlToRelative, executeActions, triggerNextContainer, speakIcon, setVisibilityWithDelay, parseProp, storingEachActivityScore, calculateScore, } from "../../utils/utils";
 import { fingerUrl, LidoContainer, TraceMode } from "../../utils/constants";
 // Enum for different tracing modes
@@ -88,7 +88,7 @@ export class LidoTrace {
         /**
          * URL for the finger hint image
          */
-        this.fingerHintUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg';
+        this.fingerHintUrl = getAssetPath('assets/Tracing-hand.svg');
         /**
          * Indicates whether to highlight the text associated with the SVG when the trace is completed.
          */
@@ -1047,7 +1047,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: '31f7f62d73ed98ce0a3b224435e7b64574cf506c', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '6cf11b7d5f9aeb3c58cbb462e63d3f340384a403', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '0877050db2c93ff5ca0795ea8a209e2bb2c3e1b3', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: 'c0fa2b7c825a4bbbb3b0a95cc700a6f01b873943', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {
@@ -1060,7 +1060,7 @@ export class LidoTrace {
             "$": ["lido-trace.css"]
         };
     }
-    static get assetsDirs() { return ["svg", "images"]; }
+    static get assetsDirs() { return ["assets"]; }
     static get properties() {
         return {
             "showSpeakIcon": {
@@ -1335,7 +1335,7 @@ export class LidoTrace {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Mode for the tracing interaction, defining how users interact with the SVG paths.\r\nOptions may include `\"noFlow\"`, `\"showFlow\"`, `\"freeTrace\"`, `\"blindTracing\"`, and `\"blindFreeTrace\"`"
+                    "text": "Mode for the tracing interaction, defining how users interact with the SVG paths.\nOptions may include `\"noFlow\"`, `\"showFlow\"`, `\"freeTrace\"`, `\"blindTracing\"`, and `\"blindFreeTrace\"`"
                 },
                 "getter": false,
                 "setter": false,
@@ -1361,7 +1361,7 @@ export class LidoTrace {
                 "setter": false,
                 "reflect": false,
                 "attribute": "finger-hint-url",
-                "defaultValue": "'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg'"
+                "defaultValue": "getAssetPath('assets/Tracing-hand.svg')"
             },
             "onInCorrect": {
                 "type": "string",

package/dist/collection/components/wrap/lido-wrap.css

@@ -1,18 +1,18 @@
-.lido-wrap {
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(186px, auto));
-}
-
-.lido-wrap > * {
-  padding: 10px;
-  background-color: var(--child-bg-color, #f0f0f0);
-  box-sizing: border-box;
-}
-
-.lido-flex {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 10px;
-}
+.lido-wrap {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(186px, auto));
+}
+
+.lido-wrap > * {
+  padding: 10px;
+  background-color: var(--child-bg-color, #f0f0f0);
+  box-sizing: border-box;
+}
+
+.lido-flex {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 10px;
+}

package/dist/collection/components/wrap/lido-wrap.js

@@ -75,7 +75,7 @@ export class LidoWrap {
         };
     }
     render() {
-        return (h(Host, { key: '58b1e37a1787349d3ccd2bc6952d94a7d945e234', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "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, disableSpeak: this.disableSpeak }, h("slot", { key: '44389fcc3d2e86faf291b74bfe50b55d467a7278' })));
+        return (h(Host, { key: '1b5a62590f56ae5623770a4333fe84fdffd5617f', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "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, disableSpeak: this.disableSpeak }, h("slot", { key: '081252d2c1074c0e1635b583f697d7d44aec1333' })));
     }
     static get is() { return "lido-wrap"; }
     static get originalStyleUrls() {
@@ -464,7 +464,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of child elements that should be displayed inside the row.\r\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
                 },
                 "getter": false,
                 "setter": false,
@@ -483,7 +483,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The minimum number of child elements that must be displayed inside the row.\r\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
+                    "text": "The minimum number of child elements that must be displayed inside the row.\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
                 },
                 "getter": false,
                 "setter": false,
@@ -502,7 +502,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The maximum number of child elements that can be displayed inside the row.\r\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
+                    "text": "The maximum number of child elements that can be displayed inside the row.\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
                 },
                 "getter": false,
                 "setter": false,
@@ -521,7 +521,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enables flex layout mode for the container.\r\nIf set to `\"true\"`, the component will use a flex layout (`display: flex`) instead of the default grid layout (`display: grid`).\r\nAdditionally, the `lido-wrap` class will be replaced with `lido-flex` to allow custom flex-specific styling."
+                    "text": "Enables flex layout mode for the container.\nIf set to `\"true\"`, the component will use a flex layout (`display: flex`) instead of the default grid layout (`display: grid`).\nAdditionally, the `lido-wrap` class will be replaced with `lido-flex` to allow custom flex-specific styling."
                 },
                 "getter": false,
                 "setter": false,
@@ -580,7 +580,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,