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

package/dist/components/{p-9be56729.js → p-e9548986.js}

@@ -1,4 +1,5 @@
-import { p as proxyCustomElement, H, t as calculateScale, e as convertUrlToRelative, i as initEventsForElement, h, j as Host } from './p-bed94c37.js';
+import { p as proxyCustomElement, H, t as calculateScale, e as convertUrlToRelative, i as initEventsForElement, h, j as Host } from './p-d0131159.js';
+import { i as instance } from './p-0fbeb3a1.js';
 
 const lidoContainerCss = ".lido-container{position:relative;height:100%;width:100%;background-color:var(--bgColor, transparent);display:flex;flex-direction:column;justify-content:center;align-items:center}";
 const LidoContainerStyle0 = lidoContainerCss;
@@ -7,6 +8,7 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
     constructor() {
         super();
         this.__registerHost();
+        this.locale = '';
         this.showDropBorder = true;
         this.appendToDropOnCompletion = false;
         this.id = '';
@@ -45,6 +47,31 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
         this.delayVisible = '';
         this.disableSpeak = false;
     }
+    languageChanged(newLang) {
+        const langToApply = newLang || this.resolveLanguage();
+        this.updateChildTextLanguage(langToApply);
+    }
+    componentWillLoad() {
+        const langToApply = this.resolveLanguage();
+        this.updateChildTextLanguage(langToApply);
+    }
+    resolveLanguage() {
+        var _a, _b;
+        const rootEl = this.el.closest('lido-root');
+        const rootLang = (rootEl === null || rootEl === void 0 ? void 0 : rootEl.locale) || '';
+        if (rootLang === null || rootLang === void 0 ? void 0 : rootLang.trim())
+            return rootLang;
+        const homeEl = this.el.closest('lido-home');
+        const homeLang = (homeEl === null || homeEl === void 0 ? void 0 : homeEl.locale) || '';
+        if (homeLang === null || homeLang === void 0 ? void 0 : homeLang.trim())
+            return homeLang;
+        if ((_a = this.locale) === null || _a === void 0 ? void 0 : _a.trim())
+            return this.locale;
+        const xmlLang = this.el.getAttribute('locale');
+        if (xmlLang === null || xmlLang === void 0 ? void 0 : xmlLang.trim())
+            return xmlLang;
+        return (_b = this.el.textContent) === null || _b === void 0 ? void 0 : _b.trim();
+    }
     convertToPixels(height, parentElement = document.body) {
         if (!height)
             return 0; // Handle empty or invalid input
@@ -86,6 +113,15 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
             this.el.style.width = '1600px';
         }
     }
+    updateChildTextLanguage(lang) {
+        const appliedLang = lang || instance.language || 'en';
+        instance.changeLanguage(appliedLang);
+        const texts = this.el.querySelectorAll('lido-text');
+        texts.forEach((textEl) => {
+            textEl.locale = appliedLang;
+            textEl.dispatchEvent(new CustomEvent('languageChanged', { bubbles: true }));
+        });
+    }
     /**
      * Lifecycle hook that runs after the component is loaded.
      * - It scales the container.
@@ -107,6 +143,8 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
             styleElement.innerHTML = this.customStyle;
             document.head.appendChild(styleElement);
         }
+        const langToApply = this.resolveLanguage();
+        this.updateChildTextLanguage(langToApply);
     }
     disconnectedCallback() {
         window.removeEventListener('resize', () => this.scaleContainer(this.el));
@@ -126,11 +164,15 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: '1f61c4443b96466e2802b5550e8d999319b41ce7', id: "lido-container", "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak }, h("slot", { key: '2df61e731d3a9de3fd9cdb23f47035ee2e35c30a' })));
+        return (h(Host, { key: '5d7f2f02c5a231a18897942ea0d2f3a200efa502', id: "lido-container", locale: this.locale, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak }, h("slot", { key: 'b82aff47d621fc4f9d6abe5b7add974853f69219' })));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "locale": ["languageChanged"]
+    }; }
     static get style() { return LidoContainerStyle0; }
 }, [4, "lido-container", {
+        "locale": [1],
         "showDropBorder": [4, "show-drop-border"],
         "appendToDropOnCompletion": [4, "append-to-drop-on-completion"],
         "id": [1],
@@ -168,6 +210,8 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
         "showNextButton": [1, "show-next-button"],
         "delayVisible": [1, "delay-visible"],
         "disableSpeak": [4, "disable-speak"]
+    }, undefined, {
+        "locale": ["languageChanged"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/esm/{index-170e58c7.js → index-37c2ad2d.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'lido-player';
-const BUILD = /* lido-player */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* lido-player */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /*
  Stencil Client Platform v4.20.0 | MIT Licensed | https://stenciljs.com
@@ -52,10 +52,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'lido-avatar_21':
+                case 'lido-avatar_22':
                     return import(
                       /* webpackMode: "lazy" */
-                      './lido-avatar_21.entry.js').then(processMod, consoleError);
+                      './lido-avatar_22.entry.js').then(processMod, consoleError);
           }
       }
   return import(
@@ -88,7 +88,6 @@ var plt = {
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
   ce: (eventName, opts) => new CustomEvent(eventName, opts)
 };
-var supportsShadow = BUILD.shadowDom;
 var promiseResolve = (v) => Promise.resolve(v);
 var supportsConstructableStylesheets = /* @__PURE__ */ (() => {
   try {
@@ -393,10 +392,15 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
 var attachStyles = (hostRef) => {
   const cmpMeta = hostRef.$cmpMeta$;
   const elm = hostRef.$hostElement$;
+  const flags = cmpMeta.$flags$;
   const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
-  addStyle(
-    elm.getRootNode(),
+  const scopeId2 = addStyle(
+    elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
     cmpMeta);
+  if (flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
+    elm["s-sc"] = scopeId2;
+    elm.classList.add(scopeId2 + "-h");
+  }
   endAttachStyles();
 };
 var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
@@ -545,6 +549,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
   if (!useNativeShadowDom) {
     checkSlotRelocate = true;
     if (newVNode2.$tag$ === "slot") {
+      if (scopeId) {
+        parentElm.classList.add(scopeId + "-s");
+      }
       newVNode2.$flags$ |= newVNode2.$children$ ? (
         // slot element has fallback content
         // still create an element that "mocks" the slot element
@@ -575,7 +582,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     if (newVNode2.$children$) {
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
-        childNode = createElm(oldParentVNode, newVNode2, i2);
+        childNode = createElm(oldParentVNode, newVNode2, i2, elm);
         if (childNode) {
           elm.appendChild(childNode);
         }
@@ -628,9 +635,12 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
 var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
   let containerElm = parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
   let childNode;
+  if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
+    containerElm = containerElm.shadowRoot;
+  }
   for (; startIdx <= endIdx; ++startIdx) {
     if (vnodes[startIdx]) {
-      childNode = createElm(null, parentVNode, startIdx);
+      childNode = createElm(null, parentVNode, startIdx, parentElm);
       if (childNode) {
         vnodes[startIdx].$elm$ = childNode;
         insertBefore(containerElm, childNode, referenceNode(before) );
@@ -717,7 +727,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       if (idxInOld >= 0) {
         elmToMove = oldCh[idxInOld];
         if (elmToMove.$tag$ !== newStartVnode.$tag$) {
-          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
+          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld, parentElm);
         } else {
           patch(elmToMove, newStartVnode, isInitialRender);
           oldCh[idxInOld] = void 0;
@@ -725,7 +735,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         }
         newStartVnode = newCh[++newStartIdx];
       } else {
-        node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
+        node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx, parentElm);
         newStartVnode = newCh[++newStartIdx];
       }
       if (node) {
@@ -929,8 +939,11 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   rootVnode.$tag$ = null;
   rootVnode.$flags$ |= 4 /* isHost */;
   hostRef.$vnode$ = rootVnode;
-  rootVnode.$elm$ = oldVNode.$elm$ = hostElm;
-  useNativeShadowDom = supportsShadow ;
+  rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
+  {
+    scopeId = hostElm["s-sc"];
+  }
+  useNativeShadowDom = (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
   {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
@@ -1314,6 +1327,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
+      fireConnectedCallback(hostRef.$lazyInstance$);
     } else {
       Cstr = elm.constructor;
       const cmpTag = elm.localName;
@@ -1341,6 +1355,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   }
 };
 var fireConnectedCallback = (instance) => {
+  {
+    safeCall(instance, "connectedCallback");
+  }
 };
 
 // src/runtime/connected-callback.ts
@@ -1379,8 +1396,10 @@ var connectedCallback = (elm) => {
         initializeComponent(elm, hostRef, cmpMeta);
       }
     } else {
-      if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
-        hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
+      if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
+        fireConnectedCallback(hostRef.$lazyInstance$);
+      } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
+        hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$));
       }
     }
     endConnected();
@@ -1454,6 +1473,21 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           this.hasRegisteredEventListeners = false;
           self = this;
           registerHost(self, cmpMeta);
+          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            {
+              if (!self.shadowRoot) {
+                {
+                  self.attachShadow({ mode: "open" });
+                }
+              } else {
+                if (self.shadowRoot.mode !== "open") {
+                  throw new Error(
+                    `Unable to re-use existing shadow root for ${cmpMeta.$tagName$}! Mode is set to ${self.shadowRoot.mode} but Stencil only supports open shadow roots.`
+                  );
+                }
+              }
+            }
+          }
         }
         connectedCallback() {
           getHostRef(this);

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { f as format } from './utils-5df09162.js';
-import './index-170e58c7.js';
+export { f as format } from './utils-b5eb2360.js';
+import './index-37c2ad2d.js';