lido-player 0.0.2-alpha-8 → 0.0.2-alpha-10

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-1697a6b5.js');
+const utils = require('./utils-5b00f27b.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-1697a6b5.js');
+const utils = require('./utils-5b00f27b.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -6619,6 +6619,11 @@ const LidoCol = class {
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
         this.onEntry = undefined;
+        this.childElementsLength = undefined;
+        this.minLength = undefined;
+        this.maxLength = undefined;
+        this.direction = undefined;
+        this.style = {};
     }
     /**
      * This lifecycle hook is called after the component is rendered in the DOM.
@@ -6626,19 +6631,36 @@ 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.
-        const style = {
-            height: this.height,
-            width: this.width,
-            backgroundColor: this.bgColor,
-            top: this.y,
-            left: this.x,
-            display: this.visible ? 'flex' : 'none',
+    /**
+     * Lifecycle method that runs before the component is rendered.
+     * Initializes styles and sets up event listeners for resize and load events.
+     */
+    componentWillLoad() {
+        this.updateStyles();
+        window.addEventListener('resize', this.updateStyles.bind(this));
+        window.addEventListener('load', this.updateStyles.bind(this));
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateStyles.bind(this));
+        window.removeEventListener('load', this.updateStyles.bind(this));
+    }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            height: utils.parseProp(this.height, orientation),
+            width: utils.parseProp(this.width, orientation),
+            backgroundColor: utils.parseProp(this.bgColor, orientation),
+            top: utils.parseProp(this.y, orientation),
+            left: utils.parseProp(this.x, orientation),
             zIndex: this.z,
+            display: this.visible ? 'flex' : 'none', // Toggle visibility
+            flexDirection: !this.direction ? 'column' : utils.parseProp(this.direction, orientation),
         };
-        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' })));
+    }
+    render() {
+        return (index.h(index.Host, { key: '0599d6f5fffdbd11b278ba25d7eb8e6d63f66709', id: this.id, class: "lido-col", type: this.type, tabindex: this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '898ed8cc2829a5c6b30387de49c46ffe3398631a' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -6662,6 +6684,7 @@ const LidoContainer = class {
         this.y = undefined;
         this.z = undefined;
         this.bgColor = undefined;
+        this.bgImage = undefined;
         this.type = undefined;
         this.tabIndex = undefined;
         this.visible = undefined;
@@ -6702,18 +6725,43 @@ const LidoContainer = class {
     scaleContainer(container) {
         var _a;
         const widths = [window.innerWidth];
-        // const heights = [window.innerHeight];
+        const heights = [window.innerHeight];
         if ((_a = window.screen) === null || _a === void 0 ? void 0 : _a.width) {
             widths.push(window.screen.width);
-            // heights.push(window.screen.height);
+            heights.push(window.screen.height);
         }
         const width = Math.min(...widths);
-        const height = this.height ? this.convertToPixels(this.height) : document.documentElement.clientHeight;
-        const scaleX = width / 1600; // Scale based on a reference width of 1600px
-        const scaleY = height / 900; // Scale based on a reference height of 900px
-        const scale = Math.min(scaleX, scaleY);
+        const height = Math.min(...heights); // Get the smallest height
+        const isPortrait = height > width; // Check if the device is in portrait mode
+        let scaleX;
+        let scaleY;
+        if (isPortrait) {
+            // Portrait Mode: Scale based on portrait reference size (e.g., 900x1600)
+            scaleX = width / 900;
+            scaleY = height / 1600;
+        }
+        else {
+            // Landscape Mode: Scale based on landscape reference size (e.g., 1600x900)
+            scaleX = width / 1600;
+            scaleY = height / 900;
+        }
+        const scale = Math.min(scaleX, scaleY); // Ensure uniform scaling
         // Center the container and apply scaling
         container.style.transform = `translate(-50%, -50%) scale(${scale})`;
+        container.style.left = '50%';
+        container.style.top = '50%';
+        container.style.position = 'absolute'; // Ensure proper positioning
+        this.screenOrientation();
+    }
+    screenOrientation() {
+        if (window.innerHeight > window.innerWidth) {
+            this.el.style.height = '1600px';
+            this.el.style.width = '900px';
+        }
+        else {
+            this.el.style.height = '900px';
+            this.el.style.width = '1600px';
+        }
     }
     /**
      * Lifecycle hook that runs after the component is loaded.
@@ -6723,7 +6771,9 @@ const LidoContainer = class {
      */
     componentDidLoad() {
         this.scaleContainer(this.el);
+        const backGroundImage = this.bgImage ? utils.convertUrlToRelative(this.bgImage) : '';
         document.body.style.backgroundColor = this.bgColor;
+        document.body.style.backgroundImage = `url(${backGroundImage})`;
         // Re-scale the container on window resize or load events
         window.addEventListener('resize', () => this.scaleContainer(this.el));
         window.addEventListener('load', () => this.scaleContainer(this.el));
@@ -6734,25 +6784,29 @@ const LidoContainer = class {
             document.head.appendChild(styleElement);
         }
     }
+    disconnectedCallback() {
+        window.removeEventListener('resize', () => this.scaleContainer(this.el));
+        window.removeEventListener('load', () => this.scaleContainer(this.el));
+        document.body.style.backgroundColor = '';
+        document.body.style.backgroundImage = '';
+    }
     render() {
         // Define the styles for the container element
         const style = {
             backgroundColor: this.bgColor,
-            width: '1600px', // Fixed width of the container
-            height: '900px', // Fixed height of the container
             position: 'absolute',
             top: '50%',
             left: '50%',
             transform: 'translate(-50%, -50%)', // Centering the container
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        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' })));
+        return (index.h(index.Host, { key: '851efc3f3b6a305b11bfe925bf51c68e76b21dc6', 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: 'ba028100b8a97ff1496d8dc650111efa8e93447b' })));
     }
     get el() { return index.getElement(this); }
 };
 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 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;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}.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{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)}}";
@@ -6972,6 +7026,7 @@ const LidoImage = class {
         this.onCorrect = undefined;
         this.onEntry = undefined;
         this.src = undefined;
+        this.style = undefined;
     }
     /**
      * Lifecycle method that runs after the component has been loaded into the DOM.
@@ -6980,20 +7035,35 @@ const LidoImage = class {
     componentDidLoad() {
         utils.initEventsForElement(this.el, this.type);
     }
-    render() {
-        // Inline styles for the image, including dimensions, positioning, and visibility
-        const style = {
-            height: this.height,
-            width: this.width,
-            backgroundColor: this.bgColor,
-            top: this.y,
-            left: this.x,
+    /**
+     * Lifecycle method that runs before the component is rendered.
+     * Initializes styles and sets up event listeners for resize and load events.
+     */
+    componentWillLoad() {
+        this.updateStyles();
+        window.addEventListener('resize', this.updateStyles.bind(this)); // Update on screen rotation
+        window.addEventListener('load', this.updateStyles.bind(this)); // Update on screen rotation
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateStyles.bind(this));
+        window.removeEventListener('load', this.updateStyles.bind(this));
+    }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            height: utils.parseProp(this.height, orientation),
+            width: utils.parseProp(this.width, orientation),
+            backgroundColor: utils.parseProp(this.bgColor, orientation),
+            top: utils.parseProp(this.y, orientation),
+            left: utils.parseProp(this.x, orientation),
             zIndex: this.z,
-            display: this.visible ? 'flex' : 'none',
+            display: JSON.parse(utils.parseProp(`${this.visible}`, orientation)) ? 'flex' : 'none', // Toggle visibility
             alignItems: 'center', // Vertically center the image
             justifyContent: 'center', // Horizontally center the image
         };
-        return (index.h(index.Host, { key: '00ef3128ad8afdc11d69d009e4206dbd98ad4c6f', type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("img", { key: 'c2e92db1a085fe6f951a7baea8bcd6392a6b469b', class: "lido-image", src: utils.convertUrlToRelative(this.src), alt: "", style: style })));
+    }
+    render() {
+        return (index.h(index.Host, { key: '430e4b71153836e73fb4611f2b5b0630a39624a2', type: this.type, tabindex: this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("img", { key: '35709cfa8a2975e1f0cd326c5d7acc0f5a4ea711', class: "lido-image", src: utils.convertUrlToRelative(this.src), alt: "", style: this.style })));
     }
     get el() { return index.getElement(this); }
 };
@@ -7023,6 +7093,7 @@ const LidoPos = class {
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
         this.onEntry = undefined;
+        this.style = undefined;
     }
     /**
      * Lifecycle hook that is called after the component has been rendered in the DOM.
@@ -7031,18 +7102,33 @@ const LidoPos = class {
     componentDidLoad() {
         utils.initEventsForElement(this.el, this.type);
     }
-    render() {
-        // Inline styles to position and size the component
-        const style = {
-            height: this.height,
-            width: this.width,
-            backgroundColor: this.bgColor,
-            top: this.y,
-            left: this.x,
+    /**
+     * Lifecycle method that runs before the component is rendered.
+     * Initializes styles and sets up event listeners for resize and load events.
+     */
+    componentWillLoad() {
+        this.updateStyles();
+        window.addEventListener('resize', this.updateStyles.bind(this)); // Update on screen rotation
+        window.addEventListener('load', this.updateStyles.bind(this)); // Update on screen rotation
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateStyles.bind(this));
+        window.removeEventListener('load', this.updateStyles.bind(this));
+    }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            height: utils.parseProp(this.height, orientation),
+            width: utils.parseProp(this.width, orientation),
+            backgroundColor: utils.parseProp(this.bgColor, orientation),
+            top: utils.parseProp(this.y, orientation),
+            left: utils.parseProp(this.x, orientation),
             zIndex: this.z,
-            display: this.visible ? 'block' : 'none', // Toggle visibility
+            display: JSON.parse(utils.parseProp(`${this.visible}`, orientation)) ? 'block' : 'none', // Toggle visibility
         };
-        return (index.h(index.Host, { key: '174d8e67c07e79e2353fd3fffbf750da3f69185d', id: this.id, class: "lido-pos", type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '30af72d77bc81e8b643d7346797dd69eea0d96b4' })));
+    }
+    render() {
+        return (index.h(index.Host, { key: '26efb5dae4a9b1de11909d09b70045cf53069221', id: this.id, class: "lido-pos", type: this.type, tabindex: this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '069bac1f8b83b603f6c5fef9c584a788f5e61d82' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -7162,7 +7248,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 {
@@ -7185,6 +7271,11 @@ const LidoRow = class {
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
         this.onEntry = undefined;
+        this.childElementsLength = undefined;
+        this.minLength = undefined;
+        this.maxLength = undefined;
+        this.direction = undefined;
+        this.style = {};
     }
     /**
      * Lifecycle hook that runs after the component is loaded into the DOM.
@@ -7192,19 +7283,36 @@ 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
-        const style = {
-            height: this.height,
-            width: this.width,
-            top: this.y,
-            left: this.x,
-            display: this.visible ? 'flex' : 'none', // Flexbox for row layout
+    /**
+     * Lifecycle method that runs before the component is rendered.
+     * Initializes styles and sets up event listeners for resize and load events.
+     */
+    componentWillLoad() {
+        this.updateStyles();
+        window.addEventListener('resize', this.updateStyles.bind(this));
+        window.addEventListener('load', this.updateStyles.bind(this));
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateStyles.bind(this));
+        window.removeEventListener('load', this.updateStyles.bind(this));
+    }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            height: utils.parseProp(this.height, orientation),
+            width: utils.parseProp(this.width, orientation),
+            backgroundColor: utils.parseProp(this.bgColor, orientation),
+            top: utils.parseProp(this.y, orientation),
+            left: utils.parseProp(this.x, orientation),
             zIndex: this.z,
-            backgroundColor: this.bgColor, // Apply background color if provided
+            display: this.visible ? 'flex' : 'none', // Toggle visibility
+            flexDirection: !this.direction ? 'row' : utils.parseProp(this.direction, orientation),
         };
-        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' })));
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f8b0bdf59e07c2247a0369a0078f8142f09c404b', class: "lido-row", type: this.type, tabindex: this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'bce3362f3c323be80ac5973f31f9bbd0d1afceca' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -7291,6 +7399,7 @@ const LidoText = class {
         this.onCorrect = undefined;
         this.onEntry = undefined;
         this.isAllowOnlyOneDrop = false;
+        this.style = {};
     }
     /**
      * Lifecycle hook that runs after the component is rendered in the DOM.
@@ -7299,23 +7408,38 @@ const LidoText = class {
     componentDidLoad() {
         utils.initEventsForElement(this.el, this.type);
     }
-    render() {
-        const backgroundImg = this.bgImage ? utils.convertUrlToRelative(this.bgImage) : "";
-        // Inline styles to customize the appearance and positioning of the text component
-        const style = {
-            height: this.height,
-            width: this.width,
-            backgroundColor: this.bgColor,
-            top: this.y,
-            left: this.x,
+    /**
+     * Lifecycle method that runs before the component is rendered.
+     * Initializes styles and sets up event listeners for resize and load events.
+     */
+    componentWillLoad() {
+        this.updateStyles();
+        window.addEventListener('resize', this.updateStyles.bind(this));
+        window.addEventListener('load', this.updateStyles.bind(this));
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateStyles.bind(this));
+        window.removeEventListener('load', this.updateStyles.bind(this));
+    }
+    updateStyles() {
+        const backgroundImg = this.bgImage ? utils.convertUrlToRelative(this.bgImage) : '';
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            height: utils.parseProp(this.height, orientation),
+            width: utils.parseProp(this.width, orientation),
+            backgroundColor: utils.parseProp(this.bgColor, orientation),
+            top: utils.parseProp(this.y, orientation),
+            left: utils.parseProp(this.x, orientation),
             zIndex: this.z,
-            fontSize: this.fontSize,
+            fontSize: utils.parseProp(this.fontSize, orientation),
             fontFamily: this.font,
-            color: this.fontColor,
-            display: this.visible ? 'flex' : 'none', // Show or hide based on visibility prop
-            backgroundImage: `url(${backgroundImg})`
+            color: utils.parseProp(this.fontColor, orientation),
+            display: JSON.parse(utils.parseProp(`${this.visible}`, orientation)) ? 'flex' : 'none', // Toggle visibility
+            backgroundImage: `url(${utils.parseProp(backgroundImg, orientation)})`,
         };
-        return (index.h(index.Host, { key: '904c57cd3b57539e0ca22e3c8f3d9a95c8654810', class: "lido-text", value: this.value, type: this.type, tabindex: this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, id: this.id, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, isAllowOnlyOneDrop: `${this.isAllowOnlyOneDrop}` }, this.string));
+    }
+    render() {
+        return (index.h(index.Host, { key: '84c017e4c232307fda917a9da133629dbccf443c', class: "lido-text", value: this.value, type: this.type, tabindex: this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, isAllowOnlyOneDrop: `${this.isAllowOnlyOneDrop}` }, this.string));
     }
     get el() { return index.getElement(this); }
 };
@@ -7827,6 +7951,10 @@ const LidoWrap = class {
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
         this.onEntry = undefined;
+        this.childElementsLength = undefined;
+        this.minLength = undefined;
+        this.maxLength = undefined;
+        this.style = undefined;
     }
     /**
      * Lifecycle hook that runs after the component is rendered in the DOM.
@@ -7834,19 +7962,35 @@ 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
-        const style = {
-            height: this.height,
-            width: this.width,
-            top: this.y,
-            left: this.x,
-            display: this.visible ? 'grid' : 'none', // Use grid layout
+    /**
+     * Lifecycle method that runs before the component is rendered.
+     * Initializes styles and sets up event listeners for resize and load events.
+     */
+    componentWillLoad() {
+        this.updateStyles();
+        window.addEventListener('resize', this.updateStyles.bind(this)); // Update on screen rotation
+        window.addEventListener('load', this.updateStyles.bind(this)); // Update on screen rotation
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateStyles.bind(this));
+        window.removeEventListener('load', this.updateStyles.bind(this));
+    }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            height: utils.parseProp(this.height, orientation),
+            width: utils.parseProp(this.width, orientation),
+            backgroundColor: utils.parseProp(this.bgColor, orientation),
+            top: utils.parseProp(this.y, orientation),
+            left: utils.parseProp(this.x, orientation),
             zIndex: this.z,
-            backgroundColor: this.bgColor,
+            display: JSON.parse(utils.parseProp(`${this.visible}`, orientation)) ? 'grid' : 'none', // Toggle visibility
         };
-        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' })));
+    }
+    render() {
+        return (index.h(index.Host, { key: '743df51a1d832b87cd17ad840e9b2497b48d9b72', class: "lido-wrap", value: this.value, type: this.type, tabindex: this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '527bd48b5d85bf8e51133c2e6d29db541d82ae48' })));
     }
     get el() { return index.getElement(this); }
 };