lido-player 0.0.2-beta-14 → 0.0.2-beta-15-dev

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CS8kGcZo.js');
+var index = require('./index-Dy19zuTX.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"lido-avatar_22.cjs\",[[0,\"lido-root\",{\"Lang\":[1,\"lang\"],\"xmlPath\":[1,\"xml-path\"],\"initialIndex\":[2,\"initial-index\"],\"margin\":[1],\"canplay\":[4],\"baseUrl\":[1,\"base-url\"],\"zipUrl\":[1,\"zip-url\"],\"exitButtonUrl\":[1,\"exit-button-url\"],\"prevButtonUrl\":[1,\"prev-button-url\"],\"nextButtonUrl\":[1,\"next-button-url\"],\"speakerButtonUrl\":[1,\"speaker-button-url\"],\"xmlData\":[32]},null,{\"Lang\":[{\"onLangChange\":0}]}],[0,\"lido-home\",{\"commonAudioPath\":[1,\"common-audio-path\"],\"showNav\":[4,\"show-nav\"],\"activeContainerIndexes\":[16],\"Lang\":[1,\"lang\"],\"xmlData\":[1,\"xml-data\"],\"initialIndex\":[2,\"initial-index\"],\"canplay\":[4],\"baseUrl\":[1,\"base-url\"],\"height\":[1],\"exitButtonUrl\":[1,\"exit-button-url\"],\"prevButtonUrl\":[1,\"prev-button-url\"],\"nextButtonUrl\":[1,\"next-button-url\"],\"speakerButtonUrl\":[1,\"speaker-button-url\"],\"avatarUrl\":[1,\"avatar-url\"],\"uuid\":[1],\"zipUrl\":[513,\"zip-url\"],\"navBarIcons\":[32],\"currentContainerIndex\":[32],\"resizeTrigger\":[32],\"exitFlag\":[32],\"containers\":[32],\"templateData\":[32],\"showDotsandbtn\":[32]},null,{\"commonAudioPath\":[{\"onCommonAudioPathChange\":0}],\"xmlData\":[{\"onXmlDataChange\":0}]}],[0,\"lido-calculator\",{\"width\":[1],\"visible\":[8],\"height\":[1],\"objective\":[1],\"onEntry\":[1,\"on-entry\"],\"x\":[1],\"y\":[1],\"bgColor\":[1,\"bg-color\"],\"penIcon\":[1,\"pen-icon\"],\"displayValue\":[32],\"style\":[32]}],[260,\"lido-container\",{\"Lang\":[1,\"lang\"],\"showDropBorder\":[4,\"show-drop-border\"],\"appendToDropOnCompletion\":[4,\"append-to-drop-on-completion\"],\"id\":[1],\"objective\":[1],\"customStyle\":[1,\"custom-style\"],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"bgImage\":[1,\"bg-image\"],\"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\"],\"canplay\":[4],\"showCheck\":[4,\"show-check\"],\"isContinueOnCorrect\":[4,\"is-continue-on-correct\"],\"isAllowOnlyCorrect\":[4,\"is-allow-only-correct\"],\"baseUrl\":[1,\"base-url\"],\"margin\":[1],\"exitButtonUrl\":[1,\"exit-button-url\"],\"prevButtonUrl\":[1,\"prev-button-url\"],\"nextButtonUrl\":[1,\"next-button-url\"],\"speakerButtonUrl\":[1,\"speaker-button-url\"],\"showPrevButton\":[1,\"show-prev-button\"],\"showNextButton\":[1,\"show-next-button\"],\"delayVisible\":[1,\"delay-visible\"],\"disableSpeak\":[4,\"disable-speak\"],\"templateId\":[1,\"template-id\"],\"highlightWordByWord\":[4,\"highlight-word-by-word\"],\"instructName\":[32],\"speakFlag\":[32]},null,{\"Lang\":[{\"languageChanged\":0}]}],[0,\"lido-keyboard\",{\"keys\":[1],\"width\":[1],\"height\":[1],\"fontSize\":[1,\"font-size\"],\"fontColor\":[1,\"font-color\"],\"fontFamily\":[1,\"font-family\"],\"gap\":[1],\"bgColor\":[1,\"bg-color\"],\"borderRadius\":[1,\"border-radius\"],\"y\":[1],\"x\":[1],\"z\":[1],\"margin\":[1],\"padding\":[1],\"visible\":[1],\"onEntry\":[1,\"on-entry\"],\"type\":[1],\"keyboardInput\":[4,\"keyboard-input\"],\"columns\":[1],\"letterLength\":[2,\"letter-length\"],\"disableSpeak\":[4,\"disable-speak\"],\"numberOfClick\":[32],\"inputString\":[32],\"style\":[32]}],[0,\"lido-avatar\",{\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[4],\"audio\":[1],\"src\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"onEntry\":[1,\"on-entry\"],\"delayVisible\":[1,\"delay-visible\"]}],[0,\"lido-balance\",{\"pivotimage\":[1],\"scaleimage\":[1],\"handlerimage\":[1],\"fill\":[1],\"tilt\":[2],\"maxTilt\":[2,\"max-tilt\"],\"onEntry\":[1,\"on-entry\"],\"height\":[1],\"width\":[1],\"x\":[1],\"y\":[1],\"z\":[1],\"visible\":[8],\"margin\":[1],\"padding\":[1],\"balanceSymbol\":[1537,\"balance-symbol\"],\"showSymbol\":[1540,\"show-symbol\"],\"operation\":[1],\"pivotSvg\":[32],\"scaleSvg\":[32],\"handlerSvg\":[32],\"style\":[32],\"tiltf\":[32],\"leftVal\":[32],\"rightVal\":[32],\"revealSymbol\":[64],\"hideSymbol\":[64],\"updateTilt\":[64]},null,{\"tilt\":[{\"tiltChanged\":0}]}],[1,\"lido-canvas\",{\"bgImage\":[1,\"bg-image\"],\"width\":[1],\"height\":[1],\"visible\":[8],\"z\":[1],\"x\":[1],\"y\":[1],\"onEntry\":[1,\"on-entry\"],\"style\":[32]}],[260,\"lido-col\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[4],\"audio\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"onEntry\":[1,\"on-entry\"],\"childElementsLength\":[2,\"child-elements-length\"],\"minLength\":[2,\"min-length\"],\"maxLength\":[2,\"max-length\"],\"direction\":[1],\"borderImage\":[1,\"border-image\"],\"boxShadow\":[1,\"box-shadow\"],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"margin\":[1],\"style\":[32]}],[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],\"margin\":[1],\"disableSpeak\":[4,\"disable-speak\"],\"delayVisible\":[1,\"delay-visible\"],\"style\":[32]},null,{\"flipped\":[{\"handleFlippedChange\":0}]}],[260,\"lido-float\",{\"id\":[1],\"value\":[1],\"z\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[4],\"onEntry\":[1,\"on-entry\"],\"width\":[1],\"height\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"delayVisible\":[1,\"delay-visible\"],\"floatDirection\":[1,\"float-direction\"],\"style\":[32]}],[0,\"lido-image\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[8],\"audio\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"onEntry\":[1,\"on-entry\"],\"src\":[1],\"isSlice\":[1,\"is-slice\"],\"sliceWidth\":[1,\"slice-width\"],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"margin\":[1],\"padding\":[1],\"filter\":[1],\"borderRadius\":[1,\"border-radius\"],\"transform\":[1],\"delayVisible\":[1,\"delay-visible\"],\"disableSpeak\":[4,\"disable-speak\"],\"style\":[32]}],[0,\"lido-math-matrix\",{\"rows\":[1],\"cols\":[1],\"defualtFill\":[1538,\"defualt-fill\"],\"leftIndex\":[4,\"left-index\"],\"topIndex\":[4,\"top-index\"],\"bottomIndex\":[4,\"bottom-index\"],\"clickable\":[4],\"activeOnlyVisible\":[4,\"active-only-visible\"],\"matrixImage\":[1,\"matrix-image\"],\"activeBgColor\":[1537,\"active-bg-color\"],\"deactiveBgColor\":[1537,\"deactive-bg-color\"],\"border\":[1537],\"height\":[1537],\"width\":[1537],\"borderRadius\":[1,\"border-radius\"],\"z\":[1],\"margin\":[1],\"padding\":[1],\"visible\":[1],\"text\":[1],\"type\":[1],\"value\":[1],\"tabIndex\":[2,\"tab-index\"],\"x\":[1],\"y\":[1],\"fontColor\":[1,\"font-color\"],\"onCorrect\":[1,\"on-correct\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onEntry\":[1,\"on-entry\"],\"previousFilledSlot\":[32],\"previousFilledSlotElement\":[32],\"style\":[32]}],[260,\"lido-pos\",{\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[8],\"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],\"style\":[32]}],[260,\"lido-random\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[4],\"audio\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"onEntry\":[1,\"on-entry\"],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"margin\":[1]}],[260,\"lido-row\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"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\"],\"childElementsLength\":[2,\"child-elements-length\"],\"minLength\":[2,\"min-length\"],\"maxLength\":[2,\"max-length\"],\"direction\":[1],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"display\":[1],\"margin\":[1],\"disableSpeak\":[4,\"disable-speak\"],\"style\":[32]}],[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]}],[0,\"lido-slide-fill\",{\"id\":[1],\"width\":[1],\"height\":[1],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"visible\":[8],\"margin\":[1],\"padding\":[1],\"borderRadius\":[1,\"border-radius\"],\"fill\":[1],\"numberType\":[1,\"number-type\"],\"min\":[2],\"division\":[2],\"max\":[2],\"slider\":[4],\"src\":[1],\"fillDirection\":[1,\"fill-direction\"],\"type\":[1],\"onEntry\":[1,\"on-entry\"],\"delayVisible\":[1,\"delay-visible\"],\"disableSpeak\":[4,\"disable-speak\"],\"svgContent\":[32],\"style\":[32]},null,{\"src\":[{\"onSrcChange\":0}],\"fill\":[{\"onPropChange\":0}],\"division\":[{\"onPropChange\":0}],\"fillDirection\":[{\"onPropChange\":0}],\"numberType\":[{\"onPropChange\":0}],\"min\":[{\"onPropChange\":0}],\"max\":[{\"onPropChange\":0}]}],[0,\"lido-trace\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"id\":[1],\"svgSource\":[1,\"svg-source\"],\"value\":[1],\"height\":[1],\"width\":[1],\"audio\":[1],\"x\":[1],\"y\":[1],\"z\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"tabIndex\":[2,\"tab-index\"],\"mode\":[1],\"fingerHintUrl\":[1,\"finger-hint-url\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"highlightTextId\":[1,\"highlight-text-id\"],\"animationTrace\":[4,\"animation-trace\"],\"delayVisible\":[1,\"delay-visible\"],\"disableSpeak\":[4,\"disable-speak\"],\"svgUrls\":[32],\"audioUrls\":[32],\"currentSvgIndex\":[32],\"moving\":[32],\"style\":[32],\"fileIndex\":[32],\"isDragging\":[32],\"activePointerId\":[32],\"freeTraceUpdateCounter\":[32],\"idleTimer\":[32],\"fingerImg\":[32]},null,{\"svgSource\":[{\"initializeSVG\":0}],\"mode\":[{\"initializeSVG\":0}]}],[260,\"lido-wrap\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[4],\"audio\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"onEntry\":[1,\"on-entry\"],\"childElementsLength\":[2,\"child-elements-length\"],\"minLength\":[2,\"min-length\"],\"maxLength\":[2,\"max-length\"],\"flex\":[1],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"margin\":[1],\"disableSpeak\":[4,\"disable-speak\"],\"style\":[32]}],[260,\"lido-cell\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"scrollbarWidth\":[1,\"scrollbar-width\"],\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"gap\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[1],\"audio\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"onEntry\":[1,\"on-entry\"],\"childElementsLength\":[2,\"child-elements-length\"],\"minLength\":[2,\"min-length\"],\"maxLength\":[2,\"max-length\"],\"layout\":[1],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"margin\":[1],\"padding\":[1],\"alignItems\":[1,\"align-items\"],\"borderRadius\":[1,\"border-radius\"],\"flexDirection\":[1,\"flex-direction\"],\"delayVisible\":[1,\"delay-visible\"],\"disableSpeak\":[4,\"disable-speak\"],\"style\":[32]}],[0,\"lido-text\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"id\":[1],\"value\":[1],\"string\":[1],\"fontFamily\":[1,\"font-family\"],\"fontSize\":[1,\"font-size\"],\"fontColor\":[1,\"font-color\"],\"highlightWhileSpeaking\":[4,\"highlight-while-speaking\"],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"borderImage\":[1,\"border-image\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[8],\"audio\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"onEntry\":[1,\"on-entry\"],\"margin\":[1],\"padding\":[1],\"borderRadius\":[1,\"border-radius\"],\"spanType\":[1,\"span-type\"],\"delayVisible\":[1,\"delay-visible\"],\"disableSpeak\":[4,\"disable-speak\"],\"style\":[32]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"lido-avatar_22.cjs\",[[0,\"lido-root\",{\"Lang\":[1,\"lang\"],\"xmlPath\":[1,\"xml-path\"],\"initialIndex\":[2,\"initial-index\"],\"margin\":[1],\"canplay\":[4],\"baseUrl\":[1,\"base-url\"],\"zipUrl\":[1,\"zip-url\"],\"exitButtonUrl\":[1,\"exit-button-url\"],\"prevButtonUrl\":[1,\"prev-button-url\"],\"nextButtonUrl\":[1,\"next-button-url\"],\"speakerButtonUrl\":[1,\"speaker-button-url\"],\"xmlData\":[32]},null,{\"Lang\":[{\"onLangChange\":0}]}],[0,\"lido-home\",{\"commonAudioPath\":[1,\"common-audio-path\"],\"showNav\":[4,\"show-nav\"],\"activeContainerIndexes\":[16],\"Lang\":[1,\"lang\"],\"xmlData\":[1,\"xml-data\"],\"initialIndex\":[2,\"initial-index\"],\"canplay\":[4],\"baseUrl\":[1,\"base-url\"],\"height\":[1],\"exitButtonUrl\":[1,\"exit-button-url\"],\"prevButtonUrl\":[1,\"prev-button-url\"],\"nextButtonUrl\":[1,\"next-button-url\"],\"speakerButtonUrl\":[1,\"speaker-button-url\"],\"avatarUrl\":[1,\"avatar-url\"],\"uuid\":[1],\"zipUrl\":[513,\"zip-url\"],\"navBarIcons\":[32],\"currentContainerIndex\":[32],\"resizeTrigger\":[32],\"exitFlag\":[32],\"containers\":[32],\"templateData\":[32],\"showDotsandbtn\":[32]},null,{\"commonAudioPath\":[{\"onCommonAudioPathChange\":0}],\"xmlData\":[{\"onXmlDataChange\":0}]}],[0,\"lido-calculator\",{\"width\":[1],\"visible\":[8],\"height\":[1],\"objective\":[1],\"onEntry\":[1,\"on-entry\"],\"x\":[1],\"y\":[1],\"bgColor\":[1,\"bg-color\"],\"penIcon\":[1,\"pen-icon\"],\"displayValue\":[32],\"style\":[32]}],[260,\"lido-container\",{\"Lang\":[1,\"lang\"],\"showDropBorder\":[4,\"show-drop-border\"],\"appendToDropOnCompletion\":[4,\"append-to-drop-on-completion\"],\"id\":[1],\"objective\":[1],\"customStyle\":[1,\"custom-style\"],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"bgImage\":[1,\"bg-image\"],\"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\"],\"canplay\":[4],\"showCheck\":[4,\"show-check\"],\"isContinueOnCorrect\":[4,\"is-continue-on-correct\"],\"isAllowOnlyCorrect\":[4,\"is-allow-only-correct\"],\"baseUrl\":[1,\"base-url\"],\"margin\":[1],\"exitButtonUrl\":[1,\"exit-button-url\"],\"prevButtonUrl\":[1,\"prev-button-url\"],\"nextButtonUrl\":[1,\"next-button-url\"],\"speakerButtonUrl\":[1,\"speaker-button-url\"],\"showPrevButton\":[1,\"show-prev-button\"],\"showNextButton\":[1,\"show-next-button\"],\"delayVisible\":[1,\"delay-visible\"],\"disableSpeak\":[4,\"disable-speak\"],\"templateId\":[1,\"template-id\"],\"highlightWordByWord\":[4,\"highlight-word-by-word\"],\"instructName\":[32],\"speakFlag\":[32]},null,{\"Lang\":[{\"languageChanged\":0}]}],[0,\"lido-keyboard\",{\"keys\":[1],\"width\":[1],\"height\":[1],\"fontSize\":[1,\"font-size\"],\"fontColor\":[1,\"font-color\"],\"fontFamily\":[1,\"font-family\"],\"gap\":[1],\"bgColor\":[1,\"bg-color\"],\"borderRadius\":[1,\"border-radius\"],\"y\":[1],\"x\":[1],\"z\":[1],\"margin\":[1],\"padding\":[1],\"visible\":[1],\"onEntry\":[1,\"on-entry\"],\"type\":[1],\"keyboardInput\":[4,\"keyboard-input\"],\"columns\":[1],\"letterLength\":[2,\"letter-length\"],\"disableSpeak\":[4,\"disable-speak\"],\"numberOfClick\":[32],\"inputString\":[32],\"style\":[32]}],[0,\"lido-avatar\",{\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[4],\"audio\":[1],\"src\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"onEntry\":[1,\"on-entry\"],\"delayVisible\":[1,\"delay-visible\"]}],[0,\"lido-balance\",{\"pivotimage\":[1],\"scaleimage\":[1],\"handlerimage\":[1],\"fill\":[1],\"tilt\":[2],\"maxTilt\":[2,\"max-tilt\"],\"onEntry\":[1,\"on-entry\"],\"height\":[1],\"width\":[1],\"x\":[1],\"y\":[1],\"z\":[1],\"visible\":[8],\"margin\":[1],\"padding\":[1],\"balanceSymbol\":[1537,\"balance-symbol\"],\"showSymbol\":[1540,\"show-symbol\"],\"operation\":[1],\"pivotSvg\":[32],\"scaleSvg\":[32],\"handlerSvg\":[32],\"style\":[32],\"tiltf\":[32],\"leftVal\":[32],\"rightVal\":[32],\"revealSymbol\":[64],\"hideSymbol\":[64],\"updateTilt\":[64]},null,{\"tilt\":[{\"tiltChanged\":0}]}],[1,\"lido-canvas\",{\"bgImage\":[1,\"bg-image\"],\"width\":[1],\"height\":[1],\"visible\":[8],\"z\":[1],\"x\":[1],\"y\":[1],\"onEntry\":[1,\"on-entry\"],\"style\":[32]}],[260,\"lido-col\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[4],\"audio\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"onEntry\":[1,\"on-entry\"],\"childElementsLength\":[2,\"child-elements-length\"],\"minLength\":[2,\"min-length\"],\"maxLength\":[2,\"max-length\"],\"direction\":[1],\"borderImage\":[1,\"border-image\"],\"boxShadow\":[1,\"box-shadow\"],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"margin\":[1],\"style\":[32]}],[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],\"margin\":[1],\"disableSpeak\":[4,\"disable-speak\"],\"delayVisible\":[1,\"delay-visible\"],\"style\":[32]},null,{\"flipped\":[{\"handleFlippedChange\":0}]}],[260,\"lido-float\",{\"id\":[1],\"value\":[1],\"z\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[4],\"onEntry\":[1,\"on-entry\"],\"width\":[1],\"height\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"delayVisible\":[1,\"delay-visible\"],\"floatDirection\":[1,\"float-direction\"],\"style\":[32]}],[0,\"lido-image\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[8],\"audio\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"onEntry\":[1,\"on-entry\"],\"src\":[1],\"isSlice\":[1,\"is-slice\"],\"sliceWidth\":[1,\"slice-width\"],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"margin\":[1],\"padding\":[1],\"filter\":[1],\"borderRadius\":[1,\"border-radius\"],\"transform\":[1],\"delayVisible\":[1,\"delay-visible\"],\"disableSpeak\":[4,\"disable-speak\"],\"style\":[32]}],[0,\"lido-math-matrix\",{\"rows\":[1],\"cols\":[1],\"defualtFill\":[1538,\"defualt-fill\"],\"leftIndex\":[4,\"left-index\"],\"topIndex\":[4,\"top-index\"],\"bottomIndex\":[4,\"bottom-index\"],\"clickable\":[4],\"activeOnlyVisible\":[4,\"active-only-visible\"],\"matrixImage\":[1,\"matrix-image\"],\"activeBgColor\":[1537,\"active-bg-color\"],\"deactiveBgColor\":[1537,\"deactive-bg-color\"],\"border\":[1537],\"height\":[1537],\"width\":[1537],\"borderRadius\":[1,\"border-radius\"],\"z\":[1],\"margin\":[1],\"padding\":[1],\"visible\":[1],\"text\":[1],\"type\":[1],\"value\":[1],\"tabIndex\":[2,\"tab-index\"],\"x\":[1],\"y\":[1],\"fontColor\":[1,\"font-color\"],\"onCorrect\":[1,\"on-correct\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onEntry\":[1,\"on-entry\"],\"previousFilledSlot\":[32],\"previousFilledSlotElement\":[32],\"style\":[32]}],[260,\"lido-pos\",{\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[8],\"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],\"style\":[32]}],[260,\"lido-random\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[4],\"audio\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"onEntry\":[1,\"on-entry\"],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"margin\":[1]}],[260,\"lido-row\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"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\"],\"childElementsLength\":[2,\"child-elements-length\"],\"minLength\":[2,\"min-length\"],\"maxLength\":[2,\"max-length\"],\"direction\":[1],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"display\":[1],\"margin\":[1],\"disableSpeak\":[4,\"disable-speak\"],\"style\":[32]}],[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]}],[0,\"lido-slide-fill\",{\"id\":[1],\"width\":[1],\"height\":[1],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"visible\":[8],\"margin\":[1],\"padding\":[1],\"borderRadius\":[1,\"border-radius\"],\"fill\":[1],\"numberType\":[1,\"number-type\"],\"min\":[2],\"division\":[2],\"max\":[2],\"slider\":[4],\"src\":[1],\"fillDirection\":[1,\"fill-direction\"],\"type\":[1],\"onEntry\":[1,\"on-entry\"],\"delayVisible\":[1,\"delay-visible\"],\"disableSpeak\":[4,\"disable-speak\"],\"svgContent\":[32],\"style\":[32]},null,{\"src\":[{\"onSrcChange\":0}],\"fill\":[{\"onPropChange\":0}],\"division\":[{\"onPropChange\":0}],\"fillDirection\":[{\"onPropChange\":0}],\"numberType\":[{\"onPropChange\":0}],\"min\":[{\"onPropChange\":0}],\"max\":[{\"onPropChange\":0}]}],[0,\"lido-trace\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"id\":[1],\"svgSource\":[1,\"svg-source\"],\"value\":[1],\"height\":[1],\"width\":[1],\"audio\":[1],\"x\":[1],\"y\":[1],\"z\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"tabIndex\":[2,\"tab-index\"],\"mode\":[1],\"fingerHintUrl\":[1,\"finger-hint-url\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"highlightTextId\":[1,\"highlight-text-id\"],\"animationTrace\":[4,\"animation-trace\"],\"delayVisible\":[1,\"delay-visible\"],\"disableSpeak\":[4,\"disable-speak\"],\"svgUrls\":[32],\"audioUrls\":[32],\"currentSvgIndex\":[32],\"moving\":[32],\"style\":[32],\"fileIndex\":[32],\"isDragging\":[32],\"activePointerId\":[32],\"freeTraceUpdateCounter\":[32],\"idleTimer\":[32],\"fingerImg\":[32]},null,{\"svgSource\":[{\"initializeSVG\":0}],\"mode\":[{\"initializeSVG\":0}]}],[260,\"lido-wrap\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[4],\"audio\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"onEntry\":[1,\"on-entry\"],\"childElementsLength\":[2,\"child-elements-length\"],\"minLength\":[2,\"min-length\"],\"maxLength\":[2,\"max-length\"],\"flex\":[1],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"margin\":[1],\"disableSpeak\":[4,\"disable-speak\"],\"style\":[32]}],[260,\"lido-cell\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"scrollbarWidth\":[1,\"scrollbar-width\"],\"id\":[1],\"value\":[1],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"x\":[1],\"y\":[1],\"z\":[1],\"gap\":[1],\"bgColor\":[1,\"bg-color\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[1],\"audio\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"onEntry\":[1,\"on-entry\"],\"childElementsLength\":[2,\"child-elements-length\"],\"minLength\":[2,\"min-length\"],\"maxLength\":[2,\"max-length\"],\"layout\":[1],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"margin\":[1],\"padding\":[1],\"alignItems\":[1,\"align-items\"],\"borderRadius\":[1,\"border-radius\"],\"flexDirection\":[1,\"flex-direction\"],\"delayVisible\":[1,\"delay-visible\"],\"disableSpeak\":[4,\"disable-speak\"],\"style\":[32]}],[0,\"lido-text\",{\"showSpeakIcon\":[4,\"show-speak-icon\"],\"id\":[1],\"value\":[1],\"string\":[1],\"fontFamily\":[1,\"font-family\"],\"fontSize\":[1,\"font-size\"],\"fontColor\":[1,\"font-color\"],\"highlightWhileSpeaking\":[4,\"highlight-while-speaking\"],\"height\":[1],\"width\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaHidden\":[1,\"aria-hidden\"],\"move\":[1],\"x\":[1],\"y\":[1],\"z\":[1],\"bgColor\":[1,\"bg-color\"],\"borderImage\":[1,\"border-image\"],\"type\":[1],\"tabIndex\":[2,\"tab-index\"],\"visible\":[8],\"audio\":[1],\"onTouch\":[1,\"on-touch\"],\"onInCorrect\":[1,\"on-in-correct\"],\"onCorrect\":[1,\"on-correct\"],\"minDrops\":[2,\"min-drops\"],\"maxDrops\":[2,\"max-drops\"],\"onEntry\":[1,\"on-entry\"],\"margin\":[1],\"padding\":[1],\"borderRadius\":[1,\"border-radius\"],\"spanType\":[1,\"span-type\"],\"delayVisible\":[1,\"delay-visible\"],\"disableSpeak\":[4,\"disable-speak\"],\"style\":[32]}]]]]"), options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -1,4 +1,4 @@
-.lido-canvas {
-  height: 100%;
-  width: 100%;
-}
+.lido-canvas {
+  height: 100%;
+  width: 100%;
+}

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

@@ -138,7 +138,7 @@ export class LidoAvatar {
             display: this.visible ? 'flex' : 'none',
             zIndex: this.z,
         };
-        return (h(Host, { key: 'bb967cb7f353a454adce62c2bb18590f47697110', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, src: this.src }, h("canvas", { key: '09824386b4f1c3622111abc86d66ddedb5980bc6', class: "lido-canvas" })));
+        return (h(Host, { key: '14599bbd626e766d35b9611f80dd401ee76717b4', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, src: this.src }, h("canvas", { key: '6f128e61bee6797c0cf83c15b3fd3ba4d1d7b1ea', class: "lido-canvas" })));
     }
     static get is() { return "lido-avatar"; }
     static get originalStyleUrls() {

package/dist/collection/components/avatar/lido-avatar.tsx

@@ -1,207 +1,207 @@
-import { Component, Host, h, Prop, Element } from '@stencil/core';
-import { Rive, RuntimeLoader } from '@rive-app/canvas';
-import { RiveService } from '../../utils/rive-service';
-import { convertUrlToRelative, initEventsForElement, setVisibilityWithDelay} from '../../utils/utils';
-
-/**
- * @component LidoAvatar
- *
- * The `LidoAvatar` component is a customizable avatar that integrates with Rive animations.
- * It allows for configurable properties such as size, position, visibility, background color,
- * and event handlers. The component supports accessibility attributes and can trigger various
- * events based on user interactions.
- *
- * This component initializes and manages a Rive animation inside a canvas element.
- */
-
-@Component({
-  tag: 'lido-avatar',
-  styleUrl: 'lido-avatar.css',
-  shadow: false,
-  assetsDirs: ['.'],
-})
-export class LidoAvatar {
-  private static readonly RIVE_WASM_URL = 'https://unpkg.com/@rive-app/canvas@2.32.0/rive.wasm';
-
-  /**
-   * The unique identifier for the column component.
-   */
-  @Prop() id: string = '';
-
-  /**
-   * The value associated with the column component. Typically used for internal logic.
-   */
-  @Prop() value: string = '';
-
-  /**
-   * The height of the column component (CSS value, e.g., '100px', '50%').
-   */
-  @Prop() height: string = '';
-
-  /**
-   * The width of the column component (CSS value, e.g., '100px', '50%').
-   */
-  @Prop() width: string = 'auto';
-
-  /**
-   * The ARIA label of the container. Used for accessibility to indicate the purpose of the element.
-   */
-  @Prop() ariaLabel: string = '';
-
-  /**
-   * The ARIA hidden attribute of the container. Used for accessibility to hide the element.
-   */
-  @Prop() ariaHidden: string = '';
-
-  /**
-   * The x-coordinate (left position) of the column within its container (CSS value, e.g., '10px', '5vw').
-   */
-  @Prop() x: string = '0px';
-
-  /**
-   * The y-coordinate (top position) of the column within its container (CSS value, e.g., '10px', '5vh').
-   */
-  @Prop() y: string = '0px';
-
-  /**
-   * The z-index of the column to control stacking order.
-   */
-  @Prop() z: string = '0';
-
-  /**
-   * The background color of the column (CSS color value, e.g., '#FFFFFF', 'blue').
-   */
-  @Prop() bgColor: string = '';
-
-  /**
-   * Defines the type of the column, which can be used for styling or specific logic handling.
-   */
-  @Prop() type: string = '';
-
-  /**
-   * The tab index value, used to set the tab order of the column for keyboard navigation.
-   */
-  @Prop() tabIndex: number = 0;
-
-  /**
-   * A boolean that controls whether the column is visible (`true`) or hidden (`false`).
-   */
-  @Prop() visible: boolean = false;
-
-  /**
-   * Audio file URL or identifier for sound that will be associated with the column.
-   */
-  @Prop() audio: string = '';
-
-  /**
-   * Instance of the Rive animation
-   */
-  private riveInstance: any;
-
-  /**
-   * Source URL of the Rive (.riv) file
-   */
-  @Prop() src: string = '';
-
-  /**
-   * Event handler for a touch event, where a custom function can be triggered when the column is touched.
-   */
-  @Prop() onTouch: string = '';
-
-  /**
-   * Event handler for an Incorrect matching action, which can be used to trigger custom logic when the action is incorrect.
-   */
-  @Prop() onInCorrect: string = '';
-
-  /**
-   * Event handler for a Correct matching action, which can be used to hide the column or trigger other custom logic.
-   */
-  @Prop() onCorrect: string = '';
-
-
-  /**
-   * Event handler for when the column is entered, which can be used to initiate specific behaviors on entry.
-   */
-  @Prop() onEntry: string = '';
-
-  /**
-   * Reference to the HTML element that represents this component.
-   */
-  @Element() el: HTMLElement;
-
-  /**
-    * Delay in milliseconds to make the cell visible after mount.
-    */
-  @Prop() delayVisible: string = '';
-
-  /**
-   * This lifecycle hook is called after the component is rendered in the DOM.
-   * It initializes events for the column based on the provided type.
-   */
-  async componentDidLoad() {
-    RuntimeLoader.setWasmUrl(LidoAvatar.RIVE_WASM_URL);
-
-    setVisibilityWithDelay(this.el, this.delayVisible);
-
-    initEventsForElement(this.el, this.type);
-
-    // const resolvedPath = this.src.startsWith('http')
-    //   ? this.src // Use the provided URL if it's an HTTP/HTTPS link
-    //   : getAssetPath(this.src); // Otherwise, resolve it as an asset path
-
-    this.initializeRive(convertUrlToRelative(this.src));
-  }
-
-  /**
-   * Initializes the Rive animation instance after the component is rendered.
-   * It selects the canvas element, loads the Rive file, and starts the animation.
-   * The animation surface is resized to fit the canvas, and the instance is stored in the service.
-   */
-  initializeRive = rivSrc => {
-    const riveService = RiveService.getInstance();
-    const canvas = this.el.querySelector('canvas');
-    this.riveInstance = new Rive({
-      src: rivSrc,
-      canvas: canvas,
-      stateMachines: 'Idle',
-      autoplay: true,
-      onLoad: () => {
-        this.riveInstance.resizeDrawingSurfaceToCanvas();
-        riveService.setRiveInstance(this.riveInstance);
-      },
-    });
-  };
-
-  render() {
-    // Inline styles applied to the column, mainly for positioning and background.
-    const style = {
-      height: this.height,
-      width: this.width,
-      backgroundColor: this.bgColor,
-      top: this.y,
-      left: this.x,
-      display: this.visible ? 'flex' : 'none',
-      zIndex: this.z,
-    };
-
-    return (
-      <Host
-        id={this.id}
-        type={this.type}
-        tab-index={this.tabIndex}
-        value={this.value}
-        style={style}
-        aria-label={this.ariaLabel}
-        aria-hidden={this.ariaHidden}
-        audio={this.audio}
-        onTouch={this.onTouch}
-        onCorrect={this.onCorrect}
-        onInCorrect={this.onInCorrect}
-        onEntry={this.onEntry}
-        src={this.src}
-      >
-        <canvas class="lido-canvas"></canvas>
-      </Host>
-    );
-  }
-}
+import { Component, Host, h, Prop, Element } from '@stencil/core';
+import { Rive, RuntimeLoader } from '@rive-app/canvas';
+import { RiveService } from '../../utils/rive-service';
+import { convertUrlToRelative, initEventsForElement, setVisibilityWithDelay} from '../../utils/utils';
+
+/**
+ * @component LidoAvatar
+ *
+ * The `LidoAvatar` component is a customizable avatar that integrates with Rive animations.
+ * It allows for configurable properties such as size, position, visibility, background color,
+ * and event handlers. The component supports accessibility attributes and can trigger various
+ * events based on user interactions.
+ *
+ * This component initializes and manages a Rive animation inside a canvas element.
+ */
+
+@Component({
+  tag: 'lido-avatar',
+  styleUrl: 'lido-avatar.css',
+  shadow: false,
+  assetsDirs: ['.'],
+})
+export class LidoAvatar {
+  private static readonly RIVE_WASM_URL = 'https://unpkg.com/@rive-app/canvas@2.32.0/rive.wasm';
+
+  /**
+   * The unique identifier for the column component.
+   */
+  @Prop() id: string = '';
+
+  /**
+   * The value associated with the column component. Typically used for internal logic.
+   */
+  @Prop() value: string = '';
+
+  /**
+   * The height of the column component (CSS value, e.g., '100px', '50%').
+   */
+  @Prop() height: string = '';
+
+  /**
+   * The width of the column component (CSS value, e.g., '100px', '50%').
+   */
+  @Prop() width: string = 'auto';
+
+  /**
+   * The ARIA label of the container. Used for accessibility to indicate the purpose of the element.
+   */
+  @Prop() ariaLabel: string = '';
+
+  /**
+   * The ARIA hidden attribute of the container. Used for accessibility to hide the element.
+   */
+  @Prop() ariaHidden: string = '';
+
+  /**
+   * The x-coordinate (left position) of the column within its container (CSS value, e.g., '10px', '5vw').
+   */
+  @Prop() x: string = '0px';
+
+  /**
+   * The y-coordinate (top position) of the column within its container (CSS value, e.g., '10px', '5vh').
+   */
+  @Prop() y: string = '0px';
+
+  /**
+   * The z-index of the column to control stacking order.
+   */
+  @Prop() z: string = '0';
+
+  /**
+   * The background color of the column (CSS color value, e.g., '#FFFFFF', 'blue').
+   */
+  @Prop() bgColor: string = '';
+
+  /**
+   * Defines the type of the column, which can be used for styling or specific logic handling.
+   */
+  @Prop() type: string = '';
+
+  /**
+   * The tab index value, used to set the tab order of the column for keyboard navigation.
+   */
+  @Prop() tabIndex: number = 0;
+
+  /**
+   * A boolean that controls whether the column is visible (`true`) or hidden (`false`).
+   */
+  @Prop() visible: boolean = false;
+
+  /**
+   * Audio file URL or identifier for sound that will be associated with the column.
+   */
+  @Prop() audio: string = '';
+
+  /**
+   * Instance of the Rive animation
+   */
+  private riveInstance: any;
+
+  /**
+   * Source URL of the Rive (.riv) file
+   */
+  @Prop() src: string = '';
+
+  /**
+   * Event handler for a touch event, where a custom function can be triggered when the column is touched.
+   */
+  @Prop() onTouch: string = '';
+
+  /**
+   * Event handler for an Incorrect matching action, which can be used to trigger custom logic when the action is incorrect.
+   */
+  @Prop() onInCorrect: string = '';
+
+  /**
+   * Event handler for a Correct matching action, which can be used to hide the column or trigger other custom logic.
+   */
+  @Prop() onCorrect: string = '';
+
+
+  /**
+   * Event handler for when the column is entered, which can be used to initiate specific behaviors on entry.
+   */
+  @Prop() onEntry: string = '';
+
+  /**
+   * Reference to the HTML element that represents this component.
+   */
+  @Element() el: HTMLElement;
+
+  /**
+    * Delay in milliseconds to make the cell visible after mount.
+    */
+  @Prop() delayVisible: string = '';
+
+  /**
+   * This lifecycle hook is called after the component is rendered in the DOM.
+   * It initializes events for the column based on the provided type.
+   */
+  async componentDidLoad() {
+    RuntimeLoader.setWasmUrl(LidoAvatar.RIVE_WASM_URL);
+
+    setVisibilityWithDelay(this.el, this.delayVisible);
+
+    initEventsForElement(this.el, this.type);
+
+    // const resolvedPath = this.src.startsWith('http')
+    //   ? this.src // Use the provided URL if it's an HTTP/HTTPS link
+    //   : getAssetPath(this.src); // Otherwise, resolve it as an asset path
+
+    this.initializeRive(convertUrlToRelative(this.src));
+  }
+
+  /**
+   * Initializes the Rive animation instance after the component is rendered.
+   * It selects the canvas element, loads the Rive file, and starts the animation.
+   * The animation surface is resized to fit the canvas, and the instance is stored in the service.
+   */
+  initializeRive = rivSrc => {
+    const riveService = RiveService.getInstance();
+    const canvas = this.el.querySelector('canvas');
+    this.riveInstance = new Rive({
+      src: rivSrc,
+      canvas: canvas,
+      stateMachines: 'Idle',
+      autoplay: true,
+      onLoad: () => {
+        this.riveInstance.resizeDrawingSurfaceToCanvas();
+        riveService.setRiveInstance(this.riveInstance);
+      },
+    });
+  };
+
+  render() {
+    // Inline styles applied to the column, mainly for positioning and background.
+    const style = {
+      height: this.height,
+      width: this.width,
+      backgroundColor: this.bgColor,
+      top: this.y,
+      left: this.x,
+      display: this.visible ? 'flex' : 'none',
+      zIndex: this.z,
+    };
+
+    return (
+      <Host
+        id={this.id}
+        type={this.type}
+        tab-index={this.tabIndex}
+        value={this.value}
+        style={style}
+        aria-label={this.ariaLabel}
+        aria-hidden={this.ariaHidden}
+        audio={this.audio}
+        onTouch={this.onTouch}
+        onCorrect={this.onCorrect}
+        onInCorrect={this.onInCorrect}
+        onEntry={this.onEntry}
+        src={this.src}
+      >
+        <canvas class="lido-canvas"></canvas>
+      </Host>
+    );
+  }
+}