lido-player 0.0.2-alpha-50-dev → 0.0.2-alpha-52-dev

package/dist/collection/components/flashCard/lido-flash-card.js

@@ -76,7 +76,7 @@ export class LidoFlash {
     }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: 'df221d302a1e91eb995af2f70aa69957cb769ffe', value: this.value, "tab-index": 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, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: 'd799a3525d9af4ba98d7750a3a76a313dd9cdd76', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'fb7734ca5648e2cf8a91d551b383a5c2c3eae255', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '6071da403b17a079f80f0c5dd576dac7b5a2c357', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+        return (h(Host, { key: 'b8f000d4e9d04d9954f81dc7e05b109dc16cb223', value: this.value, "tab-index": 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, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: 'cea63b67d1b6a925ab0520eaa7c5166288bcd71e', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: '3517e09bb91ac4c6fb2c066539f2d4f51436938f', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '5a14a4ab70898852046f1128c99e5a285c1c37f7', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     static get is() { return "lido-flash-card"; }
     static get originalStyleUrls() {
@@ -409,7 +409,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of child elements that should be displayed inside the row.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\r\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
                 },
                 "attribute": "direction",
                 "reflect": false
@@ -477,7 +477,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the card is flipped (back side visible).\n`mutable` lets the component toggle itself on click;\n`reflect` keeps the `<lido-flash-card flipped>` attribute in sync."
+                    "text": "Whether the card is flipped (back side visible).\r\n`mutable` lets the component toggle itself on click;\r\n`reflect` keeps the `<lido-flash-card flipped>` attribute in sync."
                 },
                 "attribute": "flipped",
                 "reflect": true,
@@ -495,7 +495,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "attribute": "margin",
                 "reflect": false,

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

@@ -1,30 +1,30 @@
-.lido-float {
-  position: relative;
-}
-
-.lido-float > * {
-  position: absolute;
-  cursor: pointer;
-}
-
-@keyframes float-up {
-  from {
-    top: var(--el-top);
-  }
-  to {
-    top: -500px;
-  }
-}
-
-#removeShadow {
-  box-shadow: unset !important;
-}
-
-@keyframes float-lr {
-  from {
-    right: var(--el-left);
-  }
-  to {
-    right: -500px;
-  }
-}
+.lido-float {
+  position: relative;
+}
+
+.lido-float > * {
+  position: absolute;
+  cursor: pointer;
+}
+
+@keyframes float-up {
+  from {
+    top: var(--el-top);
+  }
+  to {
+    top: -500px;
+  }
+}
+
+#removeShadow {
+  box-shadow: unset !important;
+}
+
+@keyframes float-lr {
+  from {
+    right: var(--el-left);
+  }
+  to {
+    right: -500px;
+  }
+}

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

@@ -57,7 +57,7 @@ export class LidoFloat {
         };
     }
     render() {
-        return (h(Host, { key: 'b4c271689b52272251d5623e53b67ef78389c012', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '852149328b2a8e85e84fdf9e2a4a64bb2ec8ad3a' })));
+        return (h(Host, { key: 'e8bc37c1220b708872748bd49c2d7fc448bdd01c', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '991afa719c6fc35f489fae30f77bad81cf2b4c3e' })));
     }
     static get is() { return "lido-float"; }
     static get originalStyleUrls() {
@@ -278,7 +278,7 @@ export class LidoFloat {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Direction of the float element's movement (e.g., 'leftToRight', 'bottomToTop').\nThis can be used to control the animation or positioning of the float elements."
+                    "text": "Direction of the float element's movement (e.g., 'leftToRight', 'bottomToTop').\r\nThis can be used to control the animation or positioning of the float elements."
                 },
                 "attribute": "float-direction",
                 "reflect": false,

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

@@ -1,279 +1,279 @@
-.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 {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  visibility: hidden;
-  position: absolute;
-  left: 50%;
-  padding: 0 5px; /* Small safe padding from viewport edges */
-  z-index: 1;
-  width: 100vw;
-  max-width: 100vw;
-  box-sizing: border-box;
-  height: 0px;
-}
-
-.lido-dot {
-  height: 18px; /* Default dot size */
-  width: 18px;  /* Default dot size */
-  margin: 0 4px; /* Default dot margin */
-  background-color: #bbb;
-  border-radius: 50%;
-  display: inline-block;
-  transition: background-color 0.3s;
-  cursor: pointer;
-  z-index: 1;
-}
-.lido-btn-dot-container {
-  flex-shrink: 1;
-  flex-grow: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  z-index: 1;
-  min-width: 0;
-  height: 0px;
-}
-
-.lido-dot.completed {
-  background-color: grey;
-}
-
-.lido-dot.current {
-  background-color: green;
-}
-
-.lido-dot:not(.completed):not(.current) {
-  background-color: #bbb;
-}
-
-#lido-arrow-left,
-#lido-arrow-right {
-  width: 88px;
-  height: 88px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* margin: 0 12px; */
-  border-radius: 12px;
-  z-index: 1000;
-  box-shadow: 0px 8px 0px 0px #8b310f;
-  background-color: #f34d08;
-  cursor: pointer;
-  visibility: hidden;
-  flex-shrink: 0;
-}
-
-#lido-arrow-left:active,
-#lido-arrow-right:active {
-  transform: translateY(8px);
-  box-shadow: 0px 0px 0px 0px;
-}
-.navbar {
-  display: flex;
-  justify-content: center;
-}
-
-.lido-exit-button,
-#main-audio {
-  width: 80px;
-  height: 80px;
-  z-index: 1000;
-  cursor: pointer;
-  background-color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 4px solid #f34d08;
-  border-radius: 16px;
-  box-shadow: 0px 8px #f34d08;
-  flex-shrink: 0;
-  /* margin: 0 10px; Default margin for these */
-}
-#main-audio:active,.popup-button:active
-.lido-exit-button:active {
-  margin-bottom: -8px;
-  box-shadow: 0px 0px 0px 0px !important;
-}
-
-.lido-alert-popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-
-/* Tablet Portrait / Large Mobile Landscape */
-@media (max-width: 768px) {
-  #lido-arrow-left,
-  #lido-arrow-right {
-    width: 70px; 
-    height: 70px;
-    margin: 0 8px; 
-  }
-  .lido-exit-button,
-  #main-audio {
-    width: 65px; 
-    height: 65px;
-    margin: 0 8px; 
-  }
-  .lido-dot {
-    height: 16px; 
-    width: 16px;
-    margin: 0 2.5px; 
-  }
-}
-
-/* Common Mobile Portrait */
-@media (max-width: 480px) {
-  #lido-arrow-left,
-  #lido-arrow-right {
-    width: 74px; 
-    height: 74px;
-    margin: 0px 5px; 
-  }
-  .lido-exit-button,
-  #main-audio {
-    width: 65px; 
-    height: 65px;
-    margin: 0px 5px; 
-  }
-  .lido-dot {
-    height: 15px;
-    width: 15px;
-    margin: 0 1.5px; 
-  }
-  .lido-dot-container {
-      padding: 0 3px; 
-  }
-}
-
-/* for mobile device*/
-@media (max-width: 375px) {
-  #lido-arrow-left,
-  #lido-arrow-right {
-    width: 70px; 
-    height: 70px;
-    margin: 0px 3px;
-  }
-  .lido-exit-button,
-  #main-audio {
-    width: 70px; 
-    height: 70px;
-    margin: 0px 3px;
-  }
-  .lido-dot {
-    height: 14px; 
-    width: 14px;
-    margin: 0 1px; 
-  }
-  .lido-dot-container {
-      padding: 0 2px; 
-  }
-}
-
-/* Smallest Mobile Portrait  */
-@media (max-width: 320px) {
-  #lido-arrow-left,
-  #lido-arrow-right,
-  .lido-exit-button,
-  #main-audio {
-    width: 70px;
-    height: 70px;
-    margin: 0px 2px; 
-  }
-  .lido-dot {
-    height: 12px;
-    width: 12px;
-    margin: 0 0.5px; 
-  }
-  .lido-dot-container {
-      padding: 0 2px; 
-  }
-}
-
-/* Landscape orientation */
-@media (max-width: 900px) and (orientation: landscape) {
-    #lido-arrow-left,
-    #lido-arrow-right {
-        width: 70px;
-        height: 70px;
-        margin: 0px 5px;
-    }
-    .lido-exit-button,
-    #main-audio {
-        width: 70px;
-        height: 70px;
-        margin: 0px 5px;
-    }
-    .lido-dot {
-        height: 14px;
-        width: 14px;
-        margin: 0 1px;
-    }
-    .lido-dot-container {
-        padding: 0 5px;
-    }
-}
-
-
-.popup-exit-text{
-     white-space: nowrap;
-     font-size: 22px;
-     font-weight: 600;
-    margin-top: -8%;
-}
-  
-.lido-alert-parent{
-  z-index: 10000 !important;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.popup-button{
-  width: 80px;
-  height: 80px;
-  z-index: 1000;
-  cursor: pointer;
-  /* background-color: white !important; */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 4px solid #F34D08;
-  border-radius: 16px;
-  box-shadow: 0 8px 0 #F34D08;
-}
-.nav-for-lanai{
-  position: absolute;
-  top: 0%;
-  left: 0%;
-  max-width: none;
-  width: 100%;
-  height: auto;
-  visibility: visible;
+.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 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  visibility: hidden;
+  position: absolute;
+  left: 50%;
+  padding: 0 5px; /* Small safe padding from viewport edges */
+  z-index: 1;
+  width: 100vw;
+  max-width: 100vw;
+  box-sizing: border-box;
+  height: 0px;
+}
+
+.lido-dot {
+  height: 18px; /* Default dot size */
+  width: 18px;  /* Default dot size */
+  margin: 0 4px; /* Default dot margin */
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+  transition: background-color 0.3s;
+  cursor: pointer;
+  z-index: 1;
+}
+.lido-btn-dot-container {
+  flex-shrink: 1;
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  z-index: 1;
+  min-width: 0;
+  height: 0px;
+}
+
+.lido-dot.completed {
+  background-color: grey;
+}
+
+.lido-dot.current {
+  background-color: green;
+}
+
+.lido-dot:not(.completed):not(.current) {
+  background-color: #bbb;
+}
+
+#lido-arrow-left,
+#lido-arrow-right {
+  width: 88px;
+  height: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* margin: 0 12px; */
+  border-radius: 12px;
+  z-index: 1000;
+  box-shadow: 0px 8px 0px 0px #8b310f;
+  background-color: #f34d08;
+  cursor: pointer;
+  visibility: hidden;
+  flex-shrink: 0;
+}
+
+#lido-arrow-left:active,
+#lido-arrow-right:active {
+  transform: translateY(8px);
+  box-shadow: 0px 0px 0px 0px;
+}
+.navbar {
+  display: flex;
+  justify-content: center;
+}
+
+.lido-exit-button,
+#main-audio {
+  width: 80px;
+  height: 80px;
+  z-index: 1000;
+  cursor: pointer;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 4px solid #f34d08;
+  border-radius: 16px;
+  box-shadow: 0px 8px #f34d08;
+  flex-shrink: 0;
+  /* margin: 0 10px; Default margin for these */
+}
+#main-audio:active,.popup-button:active
+.lido-exit-button:active {
+  margin-bottom: -8px;
+  box-shadow: 0px 0px 0px 0px !important;
+}
+
+.lido-alert-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+
+/* Tablet Portrait / Large Mobile Landscape */
+@media (max-width: 768px) {
+  #lido-arrow-left,
+  #lido-arrow-right {
+    width: 70px; 
+    height: 70px;
+    margin: 0 8px; 
+  }
+  .lido-exit-button,
+  #main-audio {
+    width: 65px; 
+    height: 65px;
+    margin: 0 8px; 
+  }
+  .lido-dot {
+    height: 16px; 
+    width: 16px;
+    margin: 0 2.5px; 
+  }
+}
+
+/* Common Mobile Portrait */
+@media (max-width: 480px) {
+  #lido-arrow-left,
+  #lido-arrow-right {
+    width: 74px; 
+    height: 74px;
+    margin: 0px 5px; 
+  }
+  .lido-exit-button,
+  #main-audio {
+    width: 65px; 
+    height: 65px;
+    margin: 0px 5px; 
+  }
+  .lido-dot {
+    height: 15px;
+    width: 15px;
+    margin: 0 1.5px; 
+  }
+  .lido-dot-container {
+      padding: 0 3px; 
+  }
+}
+
+/* for mobile device*/
+@media (max-width: 375px) {
+  #lido-arrow-left,
+  #lido-arrow-right {
+    width: 70px; 
+    height: 70px;
+    margin: 0px 3px;
+  }
+  .lido-exit-button,
+  #main-audio {
+    width: 70px; 
+    height: 70px;
+    margin: 0px 3px;
+  }
+  .lido-dot {
+    height: 14px; 
+    width: 14px;
+    margin: 0 1px; 
+  }
+  .lido-dot-container {
+      padding: 0 2px; 
+  }
+}
+
+/* Smallest Mobile Portrait  */
+@media (max-width: 320px) {
+  #lido-arrow-left,
+  #lido-arrow-right,
+  .lido-exit-button,
+  #main-audio {
+    width: 70px;
+    height: 70px;
+    margin: 0px 2px; 
+  }
+  .lido-dot {
+    height: 12px;
+    width: 12px;
+    margin: 0 0.5px; 
+  }
+  .lido-dot-container {
+      padding: 0 2px; 
+  }
+}
+
+/* Landscape orientation */
+@media (max-width: 900px) and (orientation: landscape) {
+    #lido-arrow-left,
+    #lido-arrow-right {
+        width: 70px;
+        height: 70px;
+        margin: 0px 5px;
+    }
+    .lido-exit-button,
+    #main-audio {
+        width: 70px;
+        height: 70px;
+        margin: 0px 5px;
+    }
+    .lido-dot {
+        height: 14px;
+        width: 14px;
+        margin: 0 1px;
+    }
+    .lido-dot-container {
+        padding: 0 5px;
+    }
+}
+
+
+.popup-exit-text{
+     white-space: nowrap;
+     font-size: 22px;
+     font-weight: 600;
+    margin-top: -8%;
+}
+  
+.lido-alert-parent{
+  z-index: 10000 !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.popup-button{
+  width: 80px;
+  height: 80px;
+  z-index: 1000;
+  cursor: pointer;
+  /* background-color: white !important; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 4px solid #F34D08;
+  border-radius: 16px;
+  box-shadow: 0 8px 0 #F34D08;
+}
+.nav-for-lanai{
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  max-width: none;
+  width: 100%;
+  height: auto;
+  visibility: visible;
 }