lido-player 0.0.2-alpha-7 → 0.0.2-alpha-9

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-2740b263.js');
+const utils = require('./utils-0bfc0d99.js');
 require('./index-0d28e716.js');
 
 

package/dist/cjs/lido-avatar_13.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d28e716.js');
-const utils = require('./utils-2740b263.js');
+const utils = require('./utils-0bfc0d99.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -6619,6 +6619,9 @@ const LidoCol = class {
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
         this.onEntry = undefined;
+        this.childElementsLength = undefined;
+        this.minLength = undefined;
+        this.maxLength = undefined;
     }
     /**
      * This lifecycle hook is called after the component is rendered in the DOM.
@@ -6626,6 +6629,7 @@ const LidoCol = class {
      */
     componentDidLoad() {
         utils.initEventsForElement(this.el, this.type);
+        utils.handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength, "flex");
     }
     render() {
         // Inline styles applied to the column, mainly for positioning and background.
@@ -6638,7 +6642,7 @@ const LidoCol = class {
             display: this.visible ? 'flex' : 'none',
             zIndex: this.z,
         };
-        return (index.h(index.Host, { key: 'c0615aafb8bef4afbada7be8dbbd9630c4a089c6', id: this.id, class: "lido-col", type: this.type, tabindex: 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 }, index.h("slot", { key: '9d3ec68dc577b7b68a8f20be71f49b7831e4a4bc' })));
+        return (index.h(index.Host, { key: 'a91a0219b86fca7c5b979ba19451d554c12e3236', id: this.id, class: "lido-col", type: this.type, tabindex: 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 }, index.h("slot", { key: 'dc46259db21b1675e4e2595312d539df66931fd3' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -6652,6 +6656,7 @@ const LidoContainer = class {
         index.registerInstance(this, hostRef);
         this.id = undefined;
         this.objective = undefined;
+        this.customStyle = undefined;
         this.value = undefined;
         this.height = undefined;
         this.width = undefined;
@@ -6727,6 +6732,11 @@ const LidoContainer = class {
         window.addEventListener('resize', () => this.scaleContainer(this.el));
         window.addEventListener('load', () => this.scaleContainer(this.el));
         utils.initEventsForElement(this.el, this.type);
+        if (this.customStyle) {
+            const styleElement = document.createElement('style');
+            styleElement.innerHTML = this.customStyle;
+            document.head.appendChild(styleElement);
+        }
     }
     render() {
         // Define the styles for the container element
@@ -6740,7 +6750,7 @@ const LidoContainer = class {
             transform: 'translate(-50%, -50%)', // Centering the container
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (index.h(index.Host, { key: '96c4e07b2e62aa2071d386da3d56d20b35778bd4', id: "lido-container", tabindex: 0, class: "lido-container", objective: this.objective, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, showCheck: `${this.showCheck}`, isContinueOnCorrect: `${this.isContinueOnCorrect}`, isAllowOnlyCorrect: `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}` }, index.h("slot", { key: '30c3337dbd0d963c0d0a308f5b2a6d3e5514e15b' })));
+        return (index.h(index.Host, { key: 'be7c50232bd0362f217b44d7f4d723f1ed5c40ec', id: "lido-container", tabindex: 0, class: "lido-container", objective: this.objective, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, showCheck: `${this.showCheck}`, isContinueOnCorrect: `${this.isContinueOnCorrect}`, isAllowOnlyCorrect: `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}` }, index.h("slot", { key: '8ce427c8388574aa7019b83cddae13a182db47ab' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -6749,7 +6759,7 @@ LidoContainer.style = LidoContainerStyle0;
 const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); body{overflow:hidden}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}";
 const LidoHomeStyle0 = indexCss;
 
-const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{left:0}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}";
+const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{transform:translateX(0)}}@keyframes topToPlace{from{transform:translateY(-1000px)}to{transform:translateY(0)}}@keyframes bottomToPlace{from{transform:translateY(1000px)}to{transform:translateY(0)}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes leftToPlace{from{transform:translateX(-2000px)}to{transform:translateX(0)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}";
 const LidoHomeStyle1 = animationCss;
 
 const lidoHomeCss = ".lido-snackbar{visibility:visible;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;bottom:30px;left:50%;transform:translateX(-50%);font-size:17px}.lido-dot-container{text-align:center;position:fixed;z-index:1;width:fit-content;top:1%;left:50%;transform:translate(-50%)}.lido-dot{height:15px;width:15px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer}.lido-dot.completed{background-color:grey}.lido-dot.current{background-color:green}.lido-dot:not(.completed):not(.current){background-color:#bbb}";
@@ -6799,7 +6809,7 @@ const LidoHome = class {
         this.initialIndex = 0;
         this.canplay = true;
         this.baseUrl = '';
-        this.height = '200px';
+        this.height = '';
         this.currentContainerIndex = this.initialIndex;
         this.showCompletionMessage = false;
         this.containers = [];
@@ -7156,7 +7166,7 @@ const LidoRoot = class {
     static get assetsDirs() { return ["assets"]; }
 };
 
-const lidoRowCss = ".lido-row{display:flex;justify-content:space-between;align-items:center;}.lido-row>*{}";
+const lidoRowCss = ".lido-row{display:flex;justify-content:space-around;align-items:center;}.lido-row>*{}";
 const LidoRowStyle0 = lidoRowCss;
 
 const LidoRow = class {
@@ -7179,6 +7189,9 @@ const LidoRow = class {
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
         this.onEntry = undefined;
+        this.childElementsLength = undefined;
+        this.minLength = undefined;
+        this.maxLength = undefined;
     }
     /**
      * Lifecycle hook that runs after the component is loaded into the DOM.
@@ -7186,6 +7199,7 @@ const LidoRow = class {
      */
     componentDidLoad() {
         utils.initEventsForElement(this.el, this.type);
+        utils.handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength, "flex");
     }
     render() {
         // Inline styles to position and size the row component
@@ -7198,7 +7212,7 @@ const LidoRow = class {
             zIndex: this.z,
             backgroundColor: this.bgColor, // Apply background color if provided
         };
-        return (index.h(index.Host, { key: '81728e5492a63bbdce29e3a18785e4cd2951f92e', class: "lido-row", type: this.type, tabindex: 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 }, index.h("slot", { key: '6ecd0f63f4a0960bd898b6b2994246caf6e7c638' })));
+        return (index.h(index.Host, { key: '6b9543d3dea5b46f31b8709e6b2cbb4adac318fb', class: "lido-row", type: this.type, tabindex: 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 }, index.h("slot", { key: '51412c74fad69cc788d673846410b9b45aeef62d' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -7821,6 +7835,9 @@ const LidoWrap = class {
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
         this.onEntry = undefined;
+        this.childElementsLength = undefined;
+        this.minLength = undefined;
+        this.maxLength = undefined;
     }
     /**
      * Lifecycle hook that runs after the component is rendered in the DOM.
@@ -7828,6 +7845,7 @@ const LidoWrap = class {
      */
     componentDidLoad() {
         utils.initEventsForElement(this.el, this.type);
+        utils.handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength, "grid");
     }
     render() {
         // Inline styles to position and size the wrap container, with grid layout applied
@@ -7840,7 +7858,7 @@ const LidoWrap = class {
             zIndex: this.z,
             backgroundColor: this.bgColor,
         };
-        return (index.h(index.Host, { key: '01d99920831e63b5fe6ae9d8c701fb9c87c7873e', class: "lido-wrap", value: this.value, type: this.type, tabindex: this.tabIndex, 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 }, index.h("slot", { key: '32047fafcbe079aab8f8fb0104142abe0588db30' })));
+        return (index.h(index.Host, { key: '917fef997c58f2590f803ae4641d10557def0a24', class: "lido-wrap", value: this.value, type: this.type, tabindex: this.tabIndex, 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 }, index.h("slot", { key: '24b14fcac75fb78c960ee0a50aefb54145ff760b' })));
     }
     get el() { return index.getElement(this); }
 };