@everymatrix/casino-play-random-game 1.76.13 → 1.76.14

package/dist/casino-play-random-game/casino-play-random-game.esm.js

@@ -1 +1 @@
-import{p as n,b as i}from"./index-328e660d.js";export{s as setNonce}from"./index-328e660d.js";import{g as a}from"./app-globals-0f993ce5.js";(()=>{const i=import.meta.url,a={};return""!==i&&(a.resourcesUrl=new URL(".",i).href),n(a)})().then((async n=>(await a(),i([["casino-play-random-game_2",[[1,"casino-play-random-game",{endpoint:[513],datasource:[513],language:[513],specificCategory:[513,"specific-category"],iconVisible:[513,"icon-visible"],iconVisibleOnAnim:[513,"icon-visible-on-anim"],launchByGameCard:[513,"launch-by-game-card"],mbSource:[513,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],hasErrors:[32],isLoading:[32],gamesToShow:[32],selectedGame:[32],animationDone:[32],animationStarted:[32]},null,{endpoint:["watchEndpoint"],datasource:["watchEndpoint"],language:["watchEndpoint"],translationUrl:["handleNewTranslations"],iconVisible:["handleIsIconVisible"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}],[0,"ui-skeleton",{structure:[1],width:[1],height:[1],borderRadius:[8,"border-radius"],marginBottom:[8,"margin-bottom"],marginTop:[8,"margin-top"],marginLeft:[8,"margin-left"],marginRight:[8,"margin-right"],animation:[4],rows:[2],size:[1]},null,{structure:["handleStructureChange"]}]]]],n))));
+import{p as n,b as i}from"./index-27b314b8.js";export{s as setNonce}from"./index-27b314b8.js";import{g as a}from"./app-globals-0f993ce5.js";(()=>{const i=import.meta.url,a={};return""!==i&&(a.resourcesUrl=new URL(".",i).href),n(a)})().then((async n=>(await a(),i([["casino-play-random-game_3",[[1,"casino-play-random-game",{endpoint:[513],datasource:[513],language:[513],specificCategory:[513,"specific-category"],iconVisible:[513,"icon-visible"],iconVisibleOnAnim:[513,"icon-visible-on-anim"],launchByGameCard:[513,"launch-by-game-card"],mbSource:[513,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],hasErrors:[32],isLoading:[32],gamesToShow:[32],selectedGame:[32],animationDone:[32],animationStarted:[32],imageLoadingType:[32],detectDistance:[32]},null,{endpoint:["watchEndpoint"],datasource:["watchEndpoint"],language:["watchEndpoint"],translationUrl:["handleNewTranslations"],iconVisible:["handleIsIconVisible"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}],[0,"ui-image",{src:[1],width:[1],height:[1],alt:[1],styles:[8],detectDistance:[1,"detect-distance"],loading:[1],imgLoaded:[32]},null,{src:["onSrcChange"],loading:["onLoadingChange"]}],[0,"ui-skeleton",{structure:[1],width:[1],height:[1],borderRadius:[8,"border-radius"],marginBottom:[8,"margin-bottom"],marginTop:[8,"margin-top"],marginLeft:[8,"margin-left"],marginRight:[8,"margin-right"],animation:[4],rows:[2],size:[1]},null,{structure:["handleStructureChange"]}]]]],n))));

package/dist/casino-play-random-game/casino-play-random-game_3.entry.js

@@ -0,0 +1 @@
+import{r as n,c as e,h as t,g as i,H as a}from"./index-27b314b8.js";const o={en:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},ro:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},fr:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},hr:{error:"Greška",randomGameLoading:"Učitavanje ...",playRandomGame:"Igraj nasumičnu igru",playNowRandomGame:"Igraj sada",spinRandomGame:"Zavrti"},hu:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},tr:{error:"Hata",randomGameLoading:"Yükleniyor...",playRandomGame:"Rastgele Bir Oyun Oyna",playNowRandomGame:"Şimdi Oyna",spinRandomGame:"DEĞİŞTİR"}},r=n=>new Promise((e=>{fetch(n).then((n=>n.json())).then((n=>{Object.keys(n).forEach((e=>{o[e]||(o[e]={});for(let t in n[e])o[e][t]=n[e][t]})),e(!0)}))})),s=(n,e)=>o[void 0!==e&&e in o?e:"en"][n];function l(n,e){if(n){const t=document.createElement("style");t.innerHTML=e,n.appendChild(t)}}function h(n,e){const t=new URL(e);fetch(t.href).then((n=>n.text())).then((e=>{const t=document.createElement("style");t.innerHTML=e,n&&n.appendChild(t)})).catch((n=>{console.error("There was an error while trying to load client styling from URL",n)}))}const d=class{constructor(t){n(this,t),this.dataLoaded=e(this,"data-loaded",7),this.animation=null,this.selectedGameIndex=null,this.selectedGameEl=null,this.iconVisibility=null,this.shuffle=n=>{let e,t=n.length;for(;0!==t;)e=Math.floor(Math.random()*t),t--,[n[t],n[e]]=[n[e],n[t]];return n},this.endpoint=void 0,this.datasource=void 0,this.language="en",this.specificCategory="",this.iconVisible="",this.iconVisibleOnAnim="",this.launchByGameCard="",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.hasErrors=!1,this.isLoading=!0,this.gamesToShow=void 0,this.selectedGame=null,this.animationDone=!1,this.animationStarted=!1,this.imageLoadingType="lazy",this.detectDistance="200px"}watchEndpoint(n,e){n&&n!=e&&this.endpoint&&this.fetchGameList()}handleNewTranslations(){this.isLoading=!0,r(this.translationUrl).then((()=>{this.isLoading=!1}))}handleIsIconVisible(){this.iconVisibility="true"===this.iconVisible}handleClientStylingChange(n,e){n!=e&&l(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(n,e){n!=e&&this.clientStylingUrl&&h(this.stylingContainer,this.clientStylingUrl)}connectedCallback(){this.handleIsIconVisible()}componentWillLoad(){if(this.translationUrl.length>2&&r(this.translationUrl),this.endpoint&&this.language&&this.datasource)return this.fetchGameList()}componentDidLoad(){"IntersectionObserver"in window&&(this.io=new IntersectionObserver((n=>{n.forEach((n=>{var e;n.isIntersecting&&(this.imageLoadingType="eager",null===(e=this.io)||void 0===e||e.unobserve(n.target))}))}),{root:null,rootMargin:this.detectDistance}),this.io.observe(this.host)),null!=window.emMessageBus?function(n,e){if(window.emMessageBus){const t=document.createElement("style");window.emMessageBus.subscribe(e,(e=>{t.innerHTML=e,n&&n.appendChild(t)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&l(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&h(this.stylingContainer,this.clientStylingUrl))}disconnectedCallback(){var n;null===(n=this.io)||void 0===n||n.disconnect(),this.stylingSubscription&&this.stylingSubscription.unsubscribe()}fetchGameList(){let n=new URL(`${this.endpoint}/v1/casino/games`);return n.searchParams.append("platform",(()=>{let n=window.navigator.userAgent;return n.toLowerCase().match(/android/i)?"Android":n.toLowerCase().match(/iphone/i)?"iPhone":n.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})()),n.searchParams.append("datasource",this.datasource),n.searchParams.append("fields","gId,id,href,thumbnail,name,vendor,launchUrl,subVendor"),n.searchParams.append("expand","vendor"),n.searchParams.append("pagination","offset=0,limit=423"),n.searchParams.append("language",this.language),this.specificCategory&&n.searchParams.append("filter",`categories(id=${this.specificCategory})`),new Promise(((e,t)=>{this.isLoading=!0,fetch(n.href).then((n=>n.json())).then((n=>{this.gamesToShow=this.setUpGames(null==n?void 0:n.items),e(!0)})).catch((n=>{console.error(n),this.hasErrors=!0,t(n)})).finally((()=>{this.isLoading=!1,this.dataLoaded.emit({target:this.host})}))}))}setUpGames(n){const e=this.shuffle(n).slice(0,40);return e.concat(e)}selectRandomGame(){const n=this.gamesToShow.length/2;this.selectedGameIndex=Math.floor(Math.random()*(n-3)),this.selectedGameIndex+=n,this.selectedGameEl=this.gameContainer.children[this.selectedGameIndex]}playRandomGame(){this.animateGames(),"function"==typeof gtag&&gtag("event","PlayRandomGame",{context:"CasinoPlayRandomGame"})}respin(){this.animateGames(),"function"==typeof gtag&&gtag("event","RespinRandomGame",{context:"CasinoPlayRandomGame"})}animateGames(){this.iconVisibility="true"===this.iconVisibleOnAnim,this.animationStarted=!0,this.animationDone=!1,this.animation&&this.animation.cancel(),this.selectedGameEl&&(this.selectedGameEl.classList.remove("TheRandomGame"),this.selectedGame=null,this.selectedGameIndex=null),this.selectRandomGame();const n=window.getComputedStyle(this.gameContainer).getPropertyValue("gap"),e=parseInt(n,10),t=this.selectedGameEl.offsetWidth;this.animation=this.gameContainer.animate([{transform:"translateX(0px)",scale:1},{scale:.75},{transform:`translateX(-${(t+e)*this.selectedGameIndex+t/2-this.gameContainer.offsetWidth/2}px)`,scale:1}],{duration:3e3,easing:"cubic-bezier(0.5, 0, 0.5, 1.2)",fill:"forwards"}),this.animation.onfinish=()=>{this.animationDone=!0,this.selectedGameEl.classList.add("TheRandomGame"),this.selectedGame=this.gamesToShow[this.selectedGameIndex]}}playGame(){this.selectedGame&&(window.postMessage({type:"PlayRandomGame",gameId:this.selectedGame.id,launchUrl:this.selectedGame.launchUrl,gameName:this.selectedGame.name,subVendor:this.selectedGame.subVendor},window.location.href),"function"==typeof gtag&&gtag("event","OpenRandomGame",{context:"CasinoPlayRandomGame"}))}showGameInfo(){window.postMessage({type:"InfoRandomGame",gameId:this.selectedGame.id,launchUrl:this.selectedGame.launchUrl,gameName:this.selectedGame.name,subVendor:this.selectedGame.subVendor},window.location.href),"function"==typeof gtag&&gtag("event","OpenRandomGameInfo",{context:"CasinoPlayRandomGame"})}renderGameDetails(){return t("div",{class:"RandomButtonsWrapper"},t("div",{class:"RandomGameDetails"},t("span",{class:"RandomGameTitle"},this.selectedGame.name),t("span",{class:"RandomGameInfo",onClick:()=>this.showGameInfo()},"i")),t("div",{class:"RandomButtons"},t("button",{class:"RandomButton On",onClick:()=>this.respin()},s("spinRandomGame",this.language)),!this.launchByGameCard&&t("button",{class:"RandomButton On",onClick:()=>this.playGame()},s("playNowRandomGame",this.language))))}renderSkeleton(){const n=Array.from({length:5},((n,e)=>t("div",{class:"RandomGameCard",key:e},t("ui-skeleton",{structure:"rectangle",width:"300px",height:"420px",borderRadius:"10px",animation:!0}))));return t("div",{class:"RandomGameWrapper"},t("div",{class:"GameContainerGradient"}),t("div",{class:"GamesContainer"},n))}render(){return t("div",{key:"29fe3535d63177e6d1f30a757bf17b70d89ce386",ref:n=>this.stylingContainer=n},this.hasErrors?t("div",{class:"RandomGameError"},t("div",{class:"Title"},s("error",this.language))):this.isLoading?this.renderSkeleton():t("div",{class:"RandomGameWrapper"},t("div",{class:"GameContainerGradient"}),t("div",{class:"GamesContainer",ref:n=>this.gameContainer=n},this.gamesToShow&&this.gamesToShow.map(((n,e)=>t("div",{class:"RandomGameCard",key:e,onClick:"true"===this.launchByGameCard?()=>this.playGame():void 0},t("div",{class:"RandomGameVendor"},n.vendor.name),t("ui-image",{class:"RandomGameImage",src:n.thumbnail,alt:n.name,title:n.name,loading:this.imageLoadingType}),this.selectedGame&&this.selectedGameIndex===e&&this.renderGameDetails())))),t("div",{class:"ButtonWrapper "+(this.animationDone?"HideAnimation":"")},t("div",{class:"ButtonContainer"},this.iconVisibility&&t("div",{class:"ButtonIcon "+(this.animationStarted?"Flip":"")},t("div",{class:"QustionMark"},"?"),t("div",{class:"HexagonMarkShadow"}),t("div",{class:"HexagonMark"})),!this.animationStarted&&t("div",{class:"RandomButton "+(this.animationStarted?"HideAnimation":""),onClick:()=>this.playRandomGame()},s("playRandomGame",this.language))))))}get host(){return i(this)}static get watchers(){return{endpoint:["watchEndpoint"],datasource:["watchEndpoint"],language:["watchEndpoint"],translationUrl:["handleNewTranslations"],iconVisible:["handleIsIconVisible"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};d.style=":host {\n  display: block;\n  font-family: inherit;\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n}\n\n:host * {\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n}\n\n.RandomGameWrapper {\n  width: 100%;\n  height: var(--emw--size-4x-medium, 700px);\n  background: transparent;\n  position: relative;\n  overflow: hidden;\n}\n\n.GameContainerGradient {\n  position: absolute;\n  top: 10%;\n  left: -5px;\n  width: 100vw;\n  height: 80%;\n  background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.5) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.5) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n  pointer-events: none;\n  z-index: 1;\n  filter: blur(10px);\n}\n\n.GamesContainer {\n  display: flex;\n  height: var(--emw--size-4x-medium, 600px);\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  align-content: flex-start;\n  gap: var(--emw--spacing-large, 20px);\n}\n\n.RandomGameCard {\n  position: relative;\n  width: var(--emw--size-3x-medium, 300px);\n  height: var(--emw--size-4x-medium, 420px);\n  border-radius: var(--emw--border-radius-large, 10px);\n  top: 8%;\n  filter: blur(5px);\n}\n.RandomGameCard .RandomGameVendor {\n  position: absolute;\n  font-size: var(--emw--font-size-x-small, 12px);\n  bottom: var(--emw--spacing-small-minus, 10px);\n  left: var(--emw--spacing-small-minus, 10px);\n  color: var(--emw--color-typography, #FFFFFF);\n}\n\n.TheRandomGame {\n  animation-name: ZoomFadeIn;\n  animation-duration: 0.5s;\n  animation-fill-mode: forwards;\n  -webkit-animation-name: ZoomFadeIn;\n  -webkit-animation-duration: 0.5s;\n  -webkit-animation-fill-mode: forwards;\n  opacity: 1;\n  cursor: pointer;\n  filter: blur(0);\n}\n\n.RandomGameImage {\n  width: inherit;\n  height: inherit;\n  object-fit: cover;\n  border-radius: var(--emw--border-radius-large, 10px);\n}\n\n.RandomGameDetails {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--emw--color-typography, #FFFFFF);\n  font-size: var(--emw--font-size-small, 14px);\n  width: 100%;\n}\n.RandomGameDetails .RandomGameTitle {\n  line-height: 18px;\n  margin: 5px 0;\n}\n.RandomGameDetails .RandomGameInfo {\n  border-radius: 50%;\n  width: var(--emw--spacing-medium, 16px);\n  height: var(--emw--spacing-medium, 16px);\n  font-size: var(--emw--font-size-x-small, 12px);\n  font-weight: var(--emw--font-weight-normal, 400);\n  border: solid 1px var(--emw--color-typography, #FFFFFF);\n  text-align: center;\n  margin: var(--emw--spacing-2x-small, 4px) 0;\n  line-height: 14px;\n  cursor: pointer;\n}\n.RandomGameDetails .RandomGamePlay {\n  background: var(--emw--color-primary, #4bd004);\n  color: var(--emw--color-typography, #FFFFFF);\n  border: none;\n  border-radius: var(--emw--border-radius-medium, 5px);\n  width: 200px;\n  height: 40px;\n  font-size: var(--emw--font-size-small, 14px);\n  cursor: pointer;\n}\n\n.ButtonWrapper {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 20;\n}\n\n.ButtonContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  position: relative;\n}\n\n.ButtonIcon {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--emw--spacing-2x-small, 5px);\n}\n\n.QustionMark {\n  position: absolute;\n  font-family: sans-serif;\n  font-size: 120px;\n  font-weight: 900;\n  color: color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 10%);\n  text-shadow: 0px 12px 0px color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 50%);\n  left: 50%;\n  top: -20%;\n  transform: translateX(-50%);\n  z-index: 10;\n}\n\n.HexagonMarkShadow {\n  width: 100px;\n  height: 115px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 70%);\n  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMark {\n  position: absolute;\n  width: var(--emw--size-medium, 90px);\n  height: 105px;\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 20%) 0%, var(--emw--categories-color-secondary, var(--emw--color-secondary, #eeac4a)) 100%);\n  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.RandomButtons {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: var(--emw--spacing-2x-small, 5px);\n  width: 100%;\n  position: relative;\n  z-index: 10;\n}\n\n.RandomButton {\n  font-size: var(--emw--font-size-large, 12px);\n  text-transform: uppercase;\n  width: max-content;\n  border-radius: var(--emw--button-border-radius, 10px);\n  padding: var(--emw--spacing-large, 20px) var(--emw--spacing-2x-large, 40px);\n  border: solid 3px var(--emw--button-border-color, #063B17);\n  color: var(--emw--button-text-color, #FFFFFF);\n  opacity: 1;\n  animation: ButtonEffect 3s linear infinite;\n  background-image: linear-gradient(to right, var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E), black 30%), var(--emw--color-primary, #22B04E));\n  background-size: 300% 100%;\n  cursor: pointer;\n  position: relative;\n  z-index: 10;\n}\n.RandomButton:hover {\n  opacity: 0.8;\n}\n\n.HideAnimation {\n  filter: blur(5px);\n  animation: AnimateButton 0.2s forwards;\n}\n\n.Flip {\n  animation-name: Flip, Blur;\n  animation-duration: 0.75s, 3s;\n  animation-iteration-count: infinite, 1;\n  -webkit-animation-name: Flip, Blur;\n  -webkit-animation-duration: 0.75s, 3s;\n  -webkit-animation-iteration-count: infinite, 1;\n}\n\n@keyframes ButtonEffect {\n  0% {\n    background-position: 0% 50%;\n  }\n  33% {\n    background-position: 100% 50%;\n  }\n  66% {\n    background-position: 200% 50%;\n  }\n  100% {\n    background-position: 300% 50%;\n  }\n}\n@keyframes ZoomFadeIn {\n  0% {\n    transform: scale(0.2) translateY(0);\n    filter: blur(5px);\n    opacity: 0.3;\n  }\n  50% {\n    transform: scale(1.1) translateY(-30px);\n    filter: blur(2px);\n    opacity: 0.7;\n  }\n  100% {\n    transform: scale(1) translateY(-30px);\n    filter: blur(0px);\n    opacity: 1;\n  }\n}\n@keyframes AnimateButton {\n  0% {\n    opacity: 0.7;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 0;\n    display: none;\n  }\n}\n@keyframes Flip {\n  0% {\n    transform: rotateY(0deg);\n  }\n  50% {\n    transform: rotateY(180deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n@keyframes Blur {\n  0% {\n    filter: blur(0);\n  }\n  50% {\n    filter: blur(1px);\n  }\n  100% {\n    filter: blur(3px);\n  }\n}\n@media screen and (max-width: 480px) {\n  .RandomButtons .RandomButton {\n    font-size: var(--emw--font-size-medium, 12px);\n  }\n}\n@container (max-width: 475px) {\n  .GamesContainer {\n    height: inherit;\n    gap: var(--emw--spacing-2x-small, 5px);\n  }\n  .RandomGameWrapper {\n    width: 100%;\n    height: 300px;\n    overflow: hidden;\n    background: transparent;\n    position: relative;\n  }\n  .GameContainerGradient {\n    position: absolute;\n    top: 10%;\n    left: -5px;\n    width: 100vw;\n    height: 80%;\n    background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.2) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.2) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n    pointer-events: none;\n    z-index: 1;\n    filter: blur(5px);\n  }\n  .RandomGameCard {\n    width: 100px;\n    height: 150px;\n    top: 0%;\n    border-radius: var(--emw--border-radius-medium, 4px);\n    filter: blur(5px);\n  }\n  .RandomGameImage {\n    width: 102px;\n    height: inherit;\n    top: 0%;\n  }\n  .RandomGameDetails {\n    font-size: 14px;\n    width: 100%;\n  }\n  .RandomGameDetails .RandomGameTitle {\n    margin: 5px 0;\n    line-height: 18px;\n    width: 75%;\n  }\n  .RandomGameDetails .RandomGameInfo {\n    border-radius: 50%;\n    width: 16px;\n    height: 16px;\n    font-size: var(--emw--font-size-x-small, 12px);\n    line-height: 14px;\n  }\n  .RandomGameDetails .RandomGamePlay {\n    background: var(--emw--color-primary, #52d004);\n    color: var(--emw--color-typography, #FFFFFF);\n    border: none;\n    border-radius: 5px;\n    width: 200px;\n    height: 40px;\n    font-size: 14px;\n    cursor: pointer;\n  }\n  .RandomGameCard .RandomGameVendor {\n    font-size: var(--emw--font-size-x-small, 12px);\n    bottom: 5px;\n    right: 5px;\n  }\n  .RandomButtons {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 5px;\n    width: 100%;\n  }\n  .RandomButton {\n    font-size: var(--emw--font-size-x-small, 12px);\n    padding: 10px 15px;\n    border: solid 1px var(--emw--button-border-color, #063B17);\n  }\n  .QustionMark {\n    font-size: 100px;\n    font-weight: 700;\n  }\n  .HexagonMarkShadow {\n    width: 80px;\n    height: 95px;\n  }\n  .HexagonMark {\n    width: 70px;\n    height: 85px;\n  }\n}";const m=class{constructor(e){n(this,e),this.hasStarted=!1,this.src=void 0,this.width=void 0,this.height=void 0,this.alt=void 0,this.styles=void 0,this.detectDistance="200px",this.loading="lazy",this.imgLoaded=!1}onSrcChange(){"eager"!==this.loading&&(this.imgLoaded=!1,this.hasStarted=!1,"undefined"!=typeof window&&"IntersectionObserver"in window||this.beginLoad())}onLoadingChange(n,e){n!==e&&(this.cleanupObserver(),this.detachImgHandlers(),"eager"===n?(this.imgEl&&this.src&&(this.imgEl.src=this.src),this.hasStarted=!0):(this.imgLoaded=!1,this.hasStarted=!1,this.setupObserver()))}componentDidLoad(){"eager"!==this.loading&&this.setupObserver()}disconnectedCallback(){this.cleanupObserver(),this.detachImgHandlers()}canUseIO(){return"undefined"!=typeof window&&"IntersectionObserver"in window}setupObserver(){"eager"!==this.loading&&(this.canUseIO()?(this.io=new IntersectionObserver((n=>{var e;for(const t of n)if(t.isIntersecting){this.beginLoad(),null===(e=this.io)||void 0===e||e.unobserve(t.target),this.cleanupObserver();break}}),{root:null,rootMargin:this.detectDistance,threshold:0}),this.io.observe(this.el)):this.beginLoad())}cleanupObserver(){var n;null===(n=this.io)||void 0===n||n.disconnect(),this.io=void 0}wireOnceHandlers(){this.imgEl&&(this.detachImgHandlers(),this._onLoad=()=>{var n;this.currentSrc&&(null===(n=this.imgEl)||void 0===n?void 0:n.currentSrc)&&!this.imgEl.currentSrc.includes(this.currentSrc)||(this.imgLoaded=!0)},this._onError=()=>{console.error("Load image failed:",this.src)},this.imgEl.addEventListener("load",this._onLoad,{once:!0}),this.imgEl.addEventListener("error",this._onError,{once:!0}))}detachImgHandlers(){this.imgEl&&(this._onLoad&&this.imgEl.removeEventListener("load",this._onLoad),this._onError&&this.imgEl.removeEventListener("error",this._onError),this._onLoad=void 0,this._onError=void 0)}beginLoad(){this.hasStarted||this.imgEl&&this.src&&(this.hasStarted=!0,this.wireOnceHandlers(),this.imgEl.complete&&this.imgEl.naturalWidth>0?this.imgLoaded=!0:(this.currentSrc=this.src,this.imgEl.src=this.src,this.imgEl.complete&&this.imgEl.naturalWidth>0&&(this.imgLoaded=!0)))}get showSkeleton(){return"eager"!==this.loading&&!this.imgLoaded}renderEager(){return t(a,{class:"HostContainer"},t("img",{src:this.src,decoding:"async",style:this.styles,class:"UiContainer Visible",alt:this.alt,width:this.width,height:this.height,loading:"eager"}))}renderLazy(){return t(a,{class:"HostContainer","aria-busy":this.imgLoaded?"false":"true"},this.showSkeleton&&t("ui-skeleton",{class:"UiContainer",structure:"image",width:"100%",height:"100%"}),t("img",{ref:n=>this.imgEl=n,src:void 0,decoding:"async",style:this.styles,class:"UiContainer "+(this.imgLoaded?"Visible":"Hidden"),alt:this.alt,width:this.width,height:this.height,loading:"lazy"}))}render(){return"eager"===this.loading?this.renderEager():this.renderLazy()}get el(){return i(this)}static get watchers(){return{src:["onSrcChange"],loading:["onLoadingChange"]}}};m.style=".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit;object-fit:inherit}.UiContainer .Image{border-radius:inherit}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;border-radius:var(--emw--border-radius-medium, 10px);transition:opacity 0.5s ease-in-out}";const c=class{constructor(e){n(this,e),this.stylingValue={width:this.handleStylingProps(this.width),height:this.handleStylingProps(this.height),borderRadius:this.handleStylingProps(this.borderRadius),marginBottom:this.handleStylingProps(this.marginBottom),marginTop:this.handleStylingProps(this.marginTop),marginLeft:this.handleStylingProps(this.marginLeft),marginRight:this.handleStylingProps(this.marginRight),size:this.handleStylingProps(this.size)},this.structure=void 0,this.width="unset",this.height="unset",this.borderRadius="unset",this.marginBottom="unset",this.marginTop="unset",this.marginLeft="unset",this.marginRight="unset",this.animation=!0,this.rows=0,this.size="100%"}handleStructureChange(n,e){e!==n&&this.handleStructure(n)}handleStylingProps(n){switch(typeof n){case"number":return 0===n?0:`${n}px`;case"undefined":default:return"unset";case"string":return["auto","unset","none","inherit","initial"].includes(n)||n.endsWith("px")||n.endsWith("%")?n:"unset"}}handleStructure(n){switch(n){case"logo":return this.renderLogo();case"image":return this.renderImage();case"title":return this.renderTitle();case"text":return this.renderText();case"rectangle":return this.renderRectangle();case"circle":return this.renderCircle();default:return null}}renderLogo(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Logo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"Image "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Title "+(this.animation?"Skeleton":"")}))}renderText(){return t("div",{class:"SkeletonContainer"},Array.from({length:this.rows>0?this.rows:1}).map(((n,e)=>t("div",{key:e,class:"Text "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Rectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Circle "+(this.animation?"Skeleton":"")}))}render(){let n="";switch(this.structure){case"logo":n=`\n          :host {\n            --emw-skeleton-logo-width: ${this.stylingValue.width};\n            --emw-skeleton-logo-height: ${this.stylingValue.height};\n            --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"image":n=`\n          :host {\n            --emw-skeleton-image-width: ${this.stylingValue.width};\n            --emw-skeleton-image-height: ${this.stylingValue.height};\n            --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"title":n=`\n          :host {\n            --emw-skeleton-title-width: ${this.stylingValue.width};\n            --emw-skeleton-title-height: ${this.stylingValue.height};\n            --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"text":n=`\n          :host {\n            --emw-skeleton-text-width: ${this.stylingValue.width};\n            --emw-skeleton-text-height: ${this.stylingValue.height};\n            --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"rectangle":n=`\n          :host {\n            --emw-skeleton-rectangle-width: ${this.stylingValue.width};\n            --emw-skeleton-rectangle-height: ${this.stylingValue.height};\n            --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"circle":n=`\n          :host {\n            --emw-skeleton-circle-size: ${this.stylingValue.size};\n          }\n        `;break;default:n=""}return t(a,{key:"e6b885bfd985ce7663d990756fe9101e25eb97f0"},t("style",{key:"06ae24c7bb74f4dacfc12ae58085333f9dc89da5"},n),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};c.style=":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";export{d as casino_play_random_game,m as ui_image,c as ui_skeleton}

package/dist/casino-play-random-game/index-27b314b8.js

@@ -0,0 +1,2 @@
+var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),r=new Map,i=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",a="undefined"!=typeof window?window:{},u=a.document||{head:{}},f={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},h=e=>Promise.resolve(e),d=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),m=!1,p=[],y=[],$=(e,t)=>n=>{e.push(n),m||(m=!0,t&&4&f.l?v(w):f.raf(w))},b=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){s(e)}e.length=0},w=()=>{b(p),b(y),(m=p.length>0)&&f.raf(w)},v=e=>h().then(e),g=$(y,!0),S={},k=e=>"object"==(e=typeof e)||"function"===e;function j(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>C,map:()=>E,ok:()=>O,unwrap:()=>P,unwrapErr:()=>L});var O=e=>({isOk:!0,isErr:!1,value:e}),C=e=>({isOk:!1,isErr:!0,value:e});function E(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>O(e))):O(n)}if(e.isErr)return C(e.value);throw"should never get here"}var M,x,P=e=>{if(e.isOk)return e.value;throw e.value},L=e=>{if(e.isErr)return e.value;throw e.value},R=(e,t,...n)=>{let l=null,o=null,s=!1,r=!1;const i=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!k(l))&&(l+=""),s&&r?i[i.length-1].i+=l:i.push(s?T(null,l):l),r=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const a=T(e,null);return a.u=t,i.length>0&&(a.h=i),a.m=o,a},T=(e,t)=>({l:0,p:e,i:t,$:null,h:null,u:null,m:null}),A={},F=e=>n(e).$hostElement$,H=(e,t,n)=>{const l=F(e);return{emit:e=>N(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},N=(e,t,n)=>{const l=f.ce(t,n);return e.dispatchEvent(l),l},U=new WeakMap,W=e=>"sc-"+e.v,D=(e,t,n,l,s,r)=>{if(n!==l){let i=o(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=G(n),s=G(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("style"===t){for(const t in n)l&&null!=l[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in l)n&&l[t]===n[t]||(t.includes("-")?e.style.setProperty(t,l[t]):e.style[t]=l[t])}else if("key"===t);else if("ref"===t)l&&l(e);else if(i||"o"!==t[0]||"n"!==t[1]){const o=k(l);if((i||o&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||s)&&!o&&e.setAttribute(t,l=!0===l?"":l)}else if(t="-"===t[2]?t.slice(3):o(a,c)?c.slice(2):c[2]+t.slice(3),n||l){const o=t.endsWith(V);t=t.replace(_,""),n&&f.rel(e,t,n,o),l&&f.ael(e,t,l,o)}}},q=/\s/,G=e=>e?e.split(q):[],V="Capture",_=RegExp(V+"$"),z=(e,t,n)=>{const l=11===t.$.nodeType&&t.$.host?t.$.host:t.$,o=e&&e.u||S,s=t.u||S;for(const e of B(Object.keys(o)))e in s||D(l,e,o[e],void 0,n,t.l);for(const e of B(Object.keys(s)))D(l,e,o[e],s[e],n,t.l)};function B(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var I=!1,J=(e,t,n)=>{const l=t.h[n];let o,s,r=0;if(null!==l.i)o=l.$=u.createTextNode(l.i);else if(o=l.$=u.createElement(l.p),z(null,l,I),null!=M&&o["s-si"]!==M&&o.classList.add(o["s-si"]=M),l.h)for(r=0;r<l.h.length;++r)s=J(e,l,r),s&&o.appendChild(s);return o["s-hn"]=x,o},K=(e,t,n,l,o,s)=>{let r,i=e;for(i.shadowRoot&&i.tagName===x&&(i=i.shadowRoot);o<=s;++o)l[o]&&(r=J(null,n,o),r&&(l[o].$=r,ee(i,r,t)))},Q=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.$;Z(t),e&&e.remove()}}},X=(e,t,n=!1)=>e.p===t.p&&(!!n||e.m===t.m),Y=(e,t,n=!1)=>{const l=t.$=e.$,o=e.h,s=t.h,r=t.i;null===r?(z(e,t,I),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,r,i=0,c=0,a=0,u=0,f=t.length-1,h=t[0],d=t[f],m=l.length-1,p=l[0],y=l[m];for(;i<=f&&c<=m;)if(null==h)h=t[++i];else if(null==d)d=t[--f];else if(null==p)p=l[++c];else if(null==y)y=l[--m];else if(X(h,p,o))Y(h,p,o),h=t[++i],p=l[++c];else if(X(d,y,o))Y(d,y,o),d=t[--f],y=l[--m];else if(X(h,y,o))Y(h,y,o),ee(e,h.$,d.$.nextSibling),h=t[++i],y=l[--m];else if(X(d,p,o))Y(d,p,o),ee(e,d.$,h.$),d=t[--f],p=l[++c];else{for(a=-1,u=i;u<=f;++u)if(t[u]&&null!==t[u].m&&t[u].m===p.m){a=u;break}a>=0?(r=t[a],r.p!==p.p?s=J(t&&t[c],n,a):(Y(r,p,o),t[a]=void 0,s=r.$),p=l[++c]):(s=J(t&&t[c],n,c),p=l[++c]),s&&ee(h.$.parentNode,s,h.$)}i>f?K(e,null==l[m+1]?null:l[m+1].$,n,l,c,m):c>m&&Q(t,i,f)})(l,o,t,s,n):null!==s?(null!==e.i&&(l.textContent=""),K(l,null,t,s,0,s.length-1)):null!==o&&Q(o,0,o.length-1)):e.i!==r&&(l.data=r)},Z=e=>{e.u&&e.u.ref&&e.u.ref(null),e.h&&e.h.map(Z)},ee=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),te=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},ne=(e,t)=>{if(e.l|=16,!(4&e.l))return te(e,e.k),g((()=>le(e,t)));e.l|=512},le=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return t&&(l=ue(n,"componentWillLoad")),oe(l,(()=>re(e,n,t)))},oe=(e,t)=>se(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),se=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,re=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.j,n=e.$hostElement$,l=t.l,o=((e,t)=>{var n;const l=W(t),o=i.get(l);if(e=11===e.nodeType?e:u,o)if("string"==typeof o){let s,r=U.get(e=e.head||e);if(r||U.set(e,r=new Set),!r.has(l)){{s=u.createElement("style"),s.innerHTML=o;const t=null!=(n=f.O)?n:j(u);null!=t&&s.setAttribute("nonce",t),e.insertBefore(s,e.querySelector("link"))}4&t.l&&(s.innerHTML+=c),r&&r.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);ie(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>ce(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},ie=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.j,s=e.C||T(null,null),r=(e=>e&&e.p===A)(t)?t:R(null,null,t);if(x=l.tagName,o.M&&(r.u=r.u||{},o.M.map((([e,t])=>r.u[t]=l[e]))),n&&r.u)for(const e of Object.keys(r.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(r.u[e]=l[e]);r.p=null,r.l|=4,e.C=r,r.$=s.$=l.shadowRoot||l,M=l["s-sc"],Y(s,r,n)})(e,t,l)}catch(t){s(t,e.$hostElement$)}return null},ce=e=>{const t=e.$hostElement$,n=e.t,l=e.k;64&e.l||(e.l|=64,fe(t),ue(n,"componentDidLoad"),e.P(t),l||ae()),e.S&&(e.S(),e.S=void 0),512&e.l&&v((()=>ne(e,!1))),e.l&=-517},ae=()=>{fe(u.documentElement),v((()=>N(a,"appload",{detail:{namespace:"casino-play-random-game"}})))},ue=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){s(e)}},fe=e=>e.classList.add("hydrated"),he=(e,t,l)=>{var o,r;const i=e.prototype;if(t.L||t.R||e.watchers){e.watchers&&!t.R&&(t.R=e.watchers);const c=Object.entries(null!=(o=t.L)?o:{});if(c.map((([e,[o]])=>{(31&o||2&l&&32&o)&&Object.defineProperty(i,e,{get(){return((e,t)=>n(this).T.get(t))(0,e)},set(l){((e,t,l,o)=>{const r=n(e);if(!r)throw Error(`Couldn't find host element for "${o.v}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const i=r.$hostElement$,c=r.T.get(t),a=r.l,u=r.t;if(l=((e,t)=>null==e||k(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(l,o.L[t][0]),(!(8&a)||void 0===c)&&l!==c&&(!Number.isNaN(c)||!Number.isNaN(l))&&(r.T.set(t,l),u)){if(o.R&&128&a){const e=o.R[t];e&&e.map((e=>{try{u[e](l,c,t)}catch(e){s(e,i)}}))}2==(18&a)&&ne(r,!1)}})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;i.attributeChangedCallback=function(e,o,s){f.jmp((()=>{var r;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(i.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),i=null==l?void 0:l.l;if(i&&!(8&i)&&128&i&&s!==o){const n=l.t,i=null==(r=t.R)?void 0:r[e];null==i||i.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(r=t.R)?r:{}),...c.filter((([e,t])=>15&t[0])).map((([e,n])=>{var o;const s=n[1]||e;return l.set(s,e),512&n[0]&&(null==(o=t.M)||o.push([e,s])),s}))]))}}return e},de=e=>{ue(e,"connectedCallback")},me=e=>{ue(e,"disconnectedCallback")},pe=(e,l={})=>{var o;const h=[],m=l.exclude||[],p=a.customElements,y=u.head,$=y.querySelector("meta[charset]"),b=u.createElement("style"),w=[];let v,g=!0;Object.assign(f,l),f.o=new URL(l.resourcesUrl||"./",u.baseURI).href;let S=!1;if(e.map((e=>{e[1].map((l=>{var o;const c={l:l[0],v:l[1],L:l[2],A:l[3]};4&c.l&&(S=!0),c.L=l[2],c.M=[],c.R=null!=(o=l[4])?o:{};const a=c.v,u=class extends HTMLElement{constructor(e){if(super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,j:n,T:new Map};l.F=new Promise((e=>l.P=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,c),1&c.l)if(e.shadowRoot){if("open"!==e.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.v}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else e.attachShadow({mode:"open"})}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),v&&(clearTimeout(v),v=null),g?w.push(this):f.jmp((()=>(e=>{if(!(1&f.l)){const t=n(e),l=t.j,o=()=>{};if(1&t.l)(null==t?void 0:t.t)?de(t.t):(null==t?void 0:t.F)&&t.F.then((()=>de(t.t)));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){te(t,t.k=n);break}}l.L&&Object.entries(l.L).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.H){const e=(e=>{const t=e.v.replace(/-/g,"_"),n=e.H;if(!n)return;const l=r.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(r.set(n,e),e[t])),s)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.v}#${t.N}" was not found`);l.isProxied||(n.R=l.watchers,he(l,n,2),l.isProxied=!0);const o=()=>{};t.l|=8;try{new l(t)}catch(e){s(e)}t.l&=-9,t.l|=128,o(),de(t.t)}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=W(n);if(!i.has(t)){const l=()=>{};((e,t,n)=>{let l=i.get(e);d&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,i.set(e,l)})(t,e,!!(1&n.l)),l()}}}const o=t.k,c=()=>ne(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(e,t,l)}o()}})(this)))}disconnectedCallback(){f.jmp((()=>(async()=>{if(!(1&f.l)){const e=n(this);(null==e?void 0:e.t)?me(e.t):(null==e?void 0:e.F)&&e.F.then((()=>me(e.t)))}})()))}componentOnReady(){return n(this).F}};c.H=e[0],m.includes(a)||p.get(a)||(h.push(a),p.define(a,he(u,c,1)))}))})),h.length>0&&(S&&(b.textContent+=c),b.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",b.innerHTML.length)){b.setAttribute("data-styles","");const e=null!=(o=f.O)?o:j(u);null!=e&&b.setAttribute("nonce",e),y.insertBefore(b,$?$.nextSibling:y.firstChild)}g=!1,w.length?w.map((e=>e.connectedCallback())):f.jmp((()=>v=setTimeout(ae,30)))},ye=e=>f.O=e;export{A as H,pe as b,H as c,F as g,R as h,h as p,l as r,ye as s}

package/dist/cjs/casino-play-random-game.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-443b9d24.js');
+const index = require('./index-2b5d81a9.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["casino-play-random-game_2.cjs",[[1,"casino-play-random-game",{"endpoint":[513],"datasource":[513],"language":[513],"specificCategory":[513,"specific-category"],"iconVisible":[513,"icon-visible"],"iconVisibleOnAnim":[513,"icon-visible-on-anim"],"launchByGameCard":[513,"launch-by-game-card"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"hasErrors":[32],"isLoading":[32],"gamesToShow":[32],"selectedGame":[32],"animationDone":[32],"animationStarted":[32]},null,{"endpoint":["watchEndpoint"],"datasource":["watchEndpoint"],"language":["watchEndpoint"],"translationUrl":["handleNewTranslations"],"iconVisible":["handleIsIconVisible"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
+  return index.bootstrapLazy([["casino-play-random-game_3.cjs",[[1,"casino-play-random-game",{"endpoint":[513],"datasource":[513],"language":[513],"specificCategory":[513,"specific-category"],"iconVisible":[513,"icon-visible"],"iconVisibleOnAnim":[513,"icon-visible-on-anim"],"launchByGameCard":[513,"launch-by-game-card"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"hasErrors":[32],"isLoading":[32],"gamesToShow":[32],"selectedGame":[32],"animationDone":[32],"animationStarted":[32],"imageLoadingType":[32],"detectDistance":[32]},null,{"endpoint":["watchEndpoint"],"datasource":["watchEndpoint"],"language":["watchEndpoint"],"translationUrl":["handleNewTranslations"],"iconVisible":["handleIsIconVisible"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"loading":[1],"imgLoaded":[32]},null,{"src":["onSrcChange"],"loading":["onLoadingChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{casino-play-random-game_2.cjs.entry.js → casino-play-random-game_3.cjs.entry.js}

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-443b9d24.js');
+const index = require('./index-2b5d81a9.js');
 
 const getDevice = () => {
     let userAgent = window.navigator.userAgent;
@@ -180,6 +180,8 @@ const CasinoPlayRandomGame = class {
         this.selectedGame = null;
         this.animationDone = false;
         this.animationStarted = false;
+        this.imageLoadingType = 'lazy';
+        this.detectDistance = '200px';
     }
     watchEndpoint(newValue, oldValue) {
         if (newValue && newValue != oldValue && this.endpoint) {
@@ -218,6 +220,18 @@ const CasinoPlayRandomGame = class {
         }
     }
     componentDidLoad() {
+        if ('IntersectionObserver' in window) {
+            this.io = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    var _a;
+                    if (entry.isIntersecting) {
+                        this.imageLoadingType = 'eager';
+                        (_a = this.io) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);
+                    }
+                });
+            }, { root: null, rootMargin: this.detectDistance });
+            this.io.observe(this.host);
+        }
         if (window.emMessageBus != undefined) {
             setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
         }
@@ -230,6 +244,8 @@ const CasinoPlayRandomGame = class {
         }
     }
     disconnectedCallback() {
+        var _a;
+        (_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
     fetchGameList() {
@@ -365,8 +381,8 @@ const CasinoPlayRandomGame = class {
         return (index.h("div", { class: "RandomGameWrapper" }, index.h("div", { class: "GameContainerGradient" }), index.h("div", { class: "GamesContainer" }, skeletonCards)));
     }
     render() {
-        return (index.h("div", { key: 'ccc1e77093402e72a300ded18465085c182fbd79', ref: (el) => (this.stylingContainer = el) }, this.hasErrors ? (index.h("div", { class: "RandomGameError" }, index.h("div", { class: "Title" }, translate('error', this.language)))) : this.isLoading ? (this.renderSkeleton()) : (index.h("div", { class: "RandomGameWrapper" }, index.h("div", { class: "GameContainerGradient" }), index.h("div", { class: "GamesContainer", ref: (el) => (this.gameContainer = el) }, this.gamesToShow &&
-            this.gamesToShow.map((game, index$1) => (index.h("div", { class: "RandomGameCard", key: index$1, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : undefined }, index.h("div", { class: "RandomGameVendor" }, game.vendor.name), index.h("img", { class: "RandomGameImage", src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index$1 && this.renderGameDetails())))), index.h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, index.h("div", { class: "ButtonContainer" }, this.iconVisibility && (index.h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, index.h("div", { class: "QustionMark" }, "?"), index.h("div", { class: "HexagonMarkShadow" }), index.h("div", { class: "HexagonMark" }))), !this.animationStarted && (index.h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))))))));
+        return (index.h("div", { key: '29fe3535d63177e6d1f30a757bf17b70d89ce386', ref: (el) => (this.stylingContainer = el) }, this.hasErrors ? (index.h("div", { class: "RandomGameError" }, index.h("div", { class: "Title" }, translate('error', this.language)))) : this.isLoading ? (this.renderSkeleton()) : (index.h("div", { class: "RandomGameWrapper" }, index.h("div", { class: "GameContainerGradient" }), index.h("div", { class: "GamesContainer", ref: (el) => (this.gameContainer = el) }, this.gamesToShow &&
+            this.gamesToShow.map((game, index$1) => (index.h("div", { class: "RandomGameCard", key: index$1, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : undefined }, index.h("div", { class: "RandomGameVendor" }, game.vendor.name), index.h("ui-image", { class: "RandomGameImage", src: game.thumbnail, alt: game.name, title: game.name, loading: this.imageLoadingType }), this.selectedGame && this.selectedGameIndex === index$1 && this.renderGameDetails())))), index.h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, index.h("div", { class: "ButtonContainer" }, this.iconVisibility && (index.h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, index.h("div", { class: "QustionMark" }, "?"), index.h("div", { class: "HexagonMarkShadow" }), index.h("div", { class: "HexagonMark" }))), !this.animationStarted && (index.h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -381,6 +397,150 @@ const CasinoPlayRandomGame = class {
 };
 CasinoPlayRandomGame.style = CasinoPlayRandomGameStyle0;
 
+const uiImageCss = ".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit;object-fit:inherit}.UiContainer .Image{border-radius:inherit}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;border-radius:var(--emw--border-radius-medium, 10px);transition:opacity 0.5s ease-in-out}";
+const UiImageStyle0 = uiImageCss;
+
+const UiImage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hasStarted = false;
+        this.src = undefined;
+        this.width = undefined;
+        this.height = undefined;
+        this.alt = undefined;
+        this.styles = undefined;
+        this.detectDistance = '200px';
+        this.loading = 'lazy';
+        this.imgLoaded = false;
+    }
+    onSrcChange() {
+        if (this.loading === 'eager')
+            return;
+        this.imgLoaded = false;
+        this.hasStarted = false;
+        if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
+            this.beginLoad();
+        }
+    }
+    onLoadingChange(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        this.cleanupObserver();
+        this.detachImgHandlers();
+        if (newVal === 'eager') {
+            if (this.imgEl && this.src) {
+                this.imgEl.src = this.src;
+            }
+            this.hasStarted = true;
+        }
+        else {
+            this.imgLoaded = false;
+            this.hasStarted = false;
+            this.setupObserver();
+        }
+    }
+    componentDidLoad() {
+        if (this.loading === 'eager')
+            return;
+        this.setupObserver();
+    }
+    disconnectedCallback() {
+        this.cleanupObserver();
+        this.detachImgHandlers();
+    }
+    canUseIO() {
+        return typeof window !== 'undefined' && 'IntersectionObserver' in window;
+    }
+    setupObserver() {
+        if (this.loading === 'eager')
+            return;
+        if (!this.canUseIO()) {
+            this.beginLoad();
+            return;
+        }
+        this.io = new IntersectionObserver((entries) => {
+            var _a;
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    this.beginLoad();
+                    (_a = this.io) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);
+                    this.cleanupObserver();
+                    break;
+                }
+            }
+        }, { root: null, rootMargin: this.detectDistance, threshold: 0 });
+        this.io.observe(this.el);
+    }
+    cleanupObserver() {
+        var _a;
+        (_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.io = undefined;
+    }
+    wireOnceHandlers() {
+        if (!this.imgEl)
+            return;
+        this.detachImgHandlers();
+        this._onLoad = () => {
+            var _a;
+            if (this.currentSrc && ((_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.currentSrc) && !this.imgEl.currentSrc.includes(this.currentSrc))
+                return;
+            this.imgLoaded = true;
+        };
+        this._onError = () => {
+            console.error('Load image failed:', this.src);
+        };
+        this.imgEl.addEventListener('load', this._onLoad, { once: true });
+        this.imgEl.addEventListener('error', this._onError, { once: true });
+    }
+    detachImgHandlers() {
+        if (!this.imgEl)
+            return;
+        if (this._onLoad)
+            this.imgEl.removeEventListener('load', this._onLoad);
+        if (this._onError)
+            this.imgEl.removeEventListener('error', this._onError);
+        this._onLoad = undefined;
+        this._onError = undefined;
+    }
+    beginLoad() {
+        if (this.hasStarted)
+            return;
+        if (!this.imgEl)
+            return;
+        if (!this.src)
+            return;
+        this.hasStarted = true;
+        this.wireOnceHandlers();
+        if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
+            this.imgLoaded = true;
+            return;
+        }
+        this.currentSrc = this.src;
+        this.imgEl.src = this.src;
+        if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
+            this.imgLoaded = true;
+        }
+    }
+    get showSkeleton() {
+        return this.loading !== 'eager' && !this.imgLoaded;
+    }
+    renderEager() {
+        return (index.h(index.Host, { class: "HostContainer" }, index.h("img", { src: this.src, decoding: "async", style: this.styles, class: "UiContainer Visible", alt: this.alt, width: this.width, height: this.height, loading: "eager" })));
+    }
+    renderLazy() {
+        return (index.h(index.Host, { class: "HostContainer", "aria-busy": !this.imgLoaded ? 'true' : 'false' }, this.showSkeleton && (index.h("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" })), index.h("img", { ref: (el) => (this.imgEl = el), src: undefined, decoding: "async", style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
+    }
+    render() {
+        return this.loading === 'eager' ? this.renderEager() : this.renderLazy();
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "src": ["onSrcChange"],
+        "loading": ["onLoadingChange"]
+    }; }
+};
+UiImage.style = UiImageStyle0;
+
 const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
 const UiSkeletonStyle0 = uiSkeletonCss;
 
@@ -556,4 +716,5 @@ const UiSkeleton = class {
 UiSkeleton.style = UiSkeletonStyle0;
 
 exports.casino_play_random_game = CasinoPlayRandomGame;
+exports.ui_image = UiImage;
 exports.ui_skeleton = UiSkeleton;

package/dist/cjs/{index-443b9d24.js → index-2b5d81a9.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'casino-play-random-game';
-const BUILD = /* casino-play-random-game */ { 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: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, 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: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* casino-play-random-game */ { 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: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, 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: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -71,10 +71,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'casino-play-random-game_2.cjs':
+                case 'casino-play-random-game_3.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './casino-play-random-game_2.cjs.entry.js')); }).then(processMod, consoleError);
+                        './casino-play-random-game_3.cjs.entry.js')); }).then(processMod, consoleError);
           }
       }
   return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
@@ -405,6 +405,27 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       const newClasses = parseClassList(newValue);
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+    } else if (memberName === "style") {
+      {
+        for (const prop in oldValue) {
+          if (!newValue || newValue[prop] == null) {
+            if (prop.includes("-")) {
+              elm.style.removeProperty(prop);
+            } else {
+              elm.style[prop] = "";
+            }
+          }
+        }
+      }
+      for (const prop in newValue) {
+        if (!oldValue || newValue[prop] !== oldValue[prop]) {
+          if (prop.includes("-")) {
+            elm.style.setProperty(prop, newValue[prop]);
+          } else {
+            elm.style[prop] = newValue[prop];
+          }
+        }
+      }
     } else if (memberName === "key") ; else if (memberName === "ref") {
       if (newValue) {
         newValue(elm);

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-443b9d24.js');
+const index = require('./index-2b5d81a9.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["casino-play-random-game_2.cjs",[[1,"casino-play-random-game",{"endpoint":[513],"datasource":[513],"language":[513],"specificCategory":[513,"specific-category"],"iconVisible":[513,"icon-visible"],"iconVisibleOnAnim":[513,"icon-visible-on-anim"],"launchByGameCard":[513,"launch-by-game-card"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"hasErrors":[32],"isLoading":[32],"gamesToShow":[32],"selectedGame":[32],"animationDone":[32],"animationStarted":[32]},null,{"endpoint":["watchEndpoint"],"datasource":["watchEndpoint"],"language":["watchEndpoint"],"translationUrl":["handleNewTranslations"],"iconVisible":["handleIsIconVisible"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
+  return index.bootstrapLazy([["casino-play-random-game_3.cjs",[[1,"casino-play-random-game",{"endpoint":[513],"datasource":[513],"language":[513],"specificCategory":[513,"specific-category"],"iconVisible":[513,"icon-visible"],"iconVisibleOnAnim":[513,"icon-visible-on-anim"],"launchByGameCard":[513,"launch-by-game-card"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"hasErrors":[32],"isLoading":[32],"gamesToShow":[32],"selectedGame":[32],"animationDone":[32],"animationStarted":[32],"imageLoadingType":[32],"detectDistance":[32]},null,{"endpoint":["watchEndpoint"],"datasource":["watchEndpoint"],"language":["watchEndpoint"],"translationUrl":["handleNewTranslations"],"iconVisible":["handleIsIconVisible"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"loading":[1],"imgLoaded":[32]},null,{"src":["onSrcChange"],"loading":["onLoadingChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -8,6 +8,12 @@
     "typescriptVersion": "5.4.5"
   },
   "collections": [
+    {
+      "name": "@everymatrix/ui-image",
+      "tags": [
+        "ui-image"
+      ]
+    },
     {
       "name": "@everymatrix/ui-skeleton",
       "tags": [

package/dist/collection/components/casino-play-random-game/casino-play-random-game.js

@@ -3,6 +3,7 @@ import { getDevice } from "../../utils/utils";
 import { getTranslations, translate } from "../../utils/locale.utils";
 import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 import "../../../../../ui-skeleton/dist/types/index";
+import "../../../../../ui-image/dist/types/index";
 export class CasinoPlayRandomGame {
     constructor() {
         this.animation = null;
@@ -36,6 +37,8 @@ export class CasinoPlayRandomGame {
         this.selectedGame = null;
         this.animationDone = false;
         this.animationStarted = false;
+        this.imageLoadingType = 'lazy';
+        this.detectDistance = '200px';
     }
     watchEndpoint(newValue, oldValue) {
         if (newValue && newValue != oldValue && this.endpoint) {
@@ -74,6 +77,18 @@ export class CasinoPlayRandomGame {
         }
     }
     componentDidLoad() {
+        if ('IntersectionObserver' in window) {
+            this.io = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    var _a;
+                    if (entry.isIntersecting) {
+                        this.imageLoadingType = 'eager';
+                        (_a = this.io) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);
+                    }
+                });
+            }, { root: null, rootMargin: this.detectDistance });
+            this.io.observe(this.host);
+        }
         if (window.emMessageBus != undefined) {
             setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
         }
@@ -86,6 +101,8 @@ export class CasinoPlayRandomGame {
         }
     }
     disconnectedCallback() {
+        var _a;
+        (_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
     fetchGameList() {
@@ -221,8 +238,8 @@ export class CasinoPlayRandomGame {
         return (h("div", { class: "RandomGameWrapper" }, h("div", { class: "GameContainerGradient" }), h("div", { class: "GamesContainer" }, skeletonCards)));
     }
     render() {
-        return (h("div", { key: 'ccc1e77093402e72a300ded18465085c182fbd79', ref: (el) => (this.stylingContainer = el) }, this.hasErrors ? (h("div", { class: "RandomGameError" }, h("div", { class: "Title" }, translate('error', this.language)))) : this.isLoading ? (this.renderSkeleton()) : (h("div", { class: "RandomGameWrapper" }, h("div", { class: "GameContainerGradient" }), h("div", { class: "GamesContainer", ref: (el) => (this.gameContainer = el) }, this.gamesToShow &&
-            this.gamesToShow.map((game, index) => (h("div", { class: "RandomGameCard", key: index, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : undefined }, h("div", { class: "RandomGameVendor" }, game.vendor.name), h("img", { class: "RandomGameImage", src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index && this.renderGameDetails())))), h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, h("div", { class: "ButtonContainer" }, this.iconVisibility && (h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, h("div", { class: "QustionMark" }, "?"), h("div", { class: "HexagonMarkShadow" }), h("div", { class: "HexagonMark" }))), !this.animationStarted && (h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))))))));
+        return (h("div", { key: '29fe3535d63177e6d1f30a757bf17b70d89ce386', ref: (el) => (this.stylingContainer = el) }, this.hasErrors ? (h("div", { class: "RandomGameError" }, h("div", { class: "Title" }, translate('error', this.language)))) : this.isLoading ? (this.renderSkeleton()) : (h("div", { class: "RandomGameWrapper" }, h("div", { class: "GameContainerGradient" }), h("div", { class: "GamesContainer", ref: (el) => (this.gameContainer = el) }, this.gamesToShow &&
+            this.gamesToShow.map((game, index) => (h("div", { class: "RandomGameCard", key: index, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : undefined }, h("div", { class: "RandomGameVendor" }, game.vendor.name), h("ui-image", { class: "RandomGameImage", src: game.thumbnail, alt: game.name, title: game.name, loading: this.imageLoadingType }), this.selectedGame && this.selectedGameIndex === index && this.renderGameDetails())))), h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, h("div", { class: "ButtonContainer" }, this.iconVisibility && (h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, h("div", { class: "QustionMark" }, "?"), h("div", { class: "HexagonMarkShadow" }), h("div", { class: "HexagonMark" }))), !this.animationStarted && (h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))))))));
     }
     static get is() { return "casino-play-random-game"; }
     static get encapsulation() { return "shadow"; }
@@ -442,7 +459,9 @@ export class CasinoPlayRandomGame {
             "gamesToShow": {},
             "selectedGame": {},
             "animationDone": {},
-            "animationStarted": {}
+            "animationStarted": {},
+            "imageLoadingType": {},
+            "detectDistance": {}
         };
     }
     static get events() {

package/dist/esm/casino-play-random-game.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-328e660d.js';
-export { s as setNonce } from './index-328e660d.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-27b314b8.js';
+export { s as setNonce } from './index-27b314b8.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["casino-play-random-game_2",[[1,"casino-play-random-game",{"endpoint":[513],"datasource":[513],"language":[513],"specificCategory":[513,"specific-category"],"iconVisible":[513,"icon-visible"],"iconVisibleOnAnim":[513,"icon-visible-on-anim"],"launchByGameCard":[513,"launch-by-game-card"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"hasErrors":[32],"isLoading":[32],"gamesToShow":[32],"selectedGame":[32],"animationDone":[32],"animationStarted":[32]},null,{"endpoint":["watchEndpoint"],"datasource":["watchEndpoint"],"language":["watchEndpoint"],"translationUrl":["handleNewTranslations"],"iconVisible":["handleIsIconVisible"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
+  return bootstrapLazy([["casino-play-random-game_3",[[1,"casino-play-random-game",{"endpoint":[513],"datasource":[513],"language":[513],"specificCategory":[513,"specific-category"],"iconVisible":[513,"icon-visible"],"iconVisibleOnAnim":[513,"icon-visible-on-anim"],"launchByGameCard":[513,"launch-by-game-card"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"hasErrors":[32],"isLoading":[32],"gamesToShow":[32],"selectedGame":[32],"animationDone":[32],"animationStarted":[32],"imageLoadingType":[32],"detectDistance":[32]},null,{"endpoint":["watchEndpoint"],"datasource":["watchEndpoint"],"language":["watchEndpoint"],"translationUrl":["handleNewTranslations"],"iconVisible":["handleIsIconVisible"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"loading":[1],"imgLoaded":[32]},null,{"src":["onSrcChange"],"loading":["onLoadingChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
 });

package/dist/esm/{casino-play-random-game_2.entry.js → casino-play-random-game_3.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-328e660d.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-27b314b8.js';
 
 const getDevice = () => {
     let userAgent = window.navigator.userAgent;
@@ -176,6 +176,8 @@ const CasinoPlayRandomGame = class {
         this.selectedGame = null;
         this.animationDone = false;
         this.animationStarted = false;
+        this.imageLoadingType = 'lazy';
+        this.detectDistance = '200px';
     }
     watchEndpoint(newValue, oldValue) {
         if (newValue && newValue != oldValue && this.endpoint) {
@@ -214,6 +216,18 @@ const CasinoPlayRandomGame = class {
         }
     }
     componentDidLoad() {
+        if ('IntersectionObserver' in window) {
+            this.io = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    var _a;
+                    if (entry.isIntersecting) {
+                        this.imageLoadingType = 'eager';
+                        (_a = this.io) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);
+                    }
+                });
+            }, { root: null, rootMargin: this.detectDistance });
+            this.io.observe(this.host);
+        }
         if (window.emMessageBus != undefined) {
             setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
         }
@@ -226,6 +240,8 @@ const CasinoPlayRandomGame = class {
         }
     }
     disconnectedCallback() {
+        var _a;
+        (_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
     fetchGameList() {
@@ -361,8 +377,8 @@ const CasinoPlayRandomGame = class {
         return (h("div", { class: "RandomGameWrapper" }, h("div", { class: "GameContainerGradient" }), h("div", { class: "GamesContainer" }, skeletonCards)));
     }
     render() {
-        return (h("div", { key: 'ccc1e77093402e72a300ded18465085c182fbd79', ref: (el) => (this.stylingContainer = el) }, this.hasErrors ? (h("div", { class: "RandomGameError" }, h("div", { class: "Title" }, translate('error', this.language)))) : this.isLoading ? (this.renderSkeleton()) : (h("div", { class: "RandomGameWrapper" }, h("div", { class: "GameContainerGradient" }), h("div", { class: "GamesContainer", ref: (el) => (this.gameContainer = el) }, this.gamesToShow &&
-            this.gamesToShow.map((game, index) => (h("div", { class: "RandomGameCard", key: index, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : undefined }, h("div", { class: "RandomGameVendor" }, game.vendor.name), h("img", { class: "RandomGameImage", src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index && this.renderGameDetails())))), h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, h("div", { class: "ButtonContainer" }, this.iconVisibility && (h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, h("div", { class: "QustionMark" }, "?"), h("div", { class: "HexagonMarkShadow" }), h("div", { class: "HexagonMark" }))), !this.animationStarted && (h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))))))));
+        return (h("div", { key: '29fe3535d63177e6d1f30a757bf17b70d89ce386', ref: (el) => (this.stylingContainer = el) }, this.hasErrors ? (h("div", { class: "RandomGameError" }, h("div", { class: "Title" }, translate('error', this.language)))) : this.isLoading ? (this.renderSkeleton()) : (h("div", { class: "RandomGameWrapper" }, h("div", { class: "GameContainerGradient" }), h("div", { class: "GamesContainer", ref: (el) => (this.gameContainer = el) }, this.gamesToShow &&
+            this.gamesToShow.map((game, index) => (h("div", { class: "RandomGameCard", key: index, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : undefined }, h("div", { class: "RandomGameVendor" }, game.vendor.name), h("ui-image", { class: "RandomGameImage", src: game.thumbnail, alt: game.name, title: game.name, loading: this.imageLoadingType }), this.selectedGame && this.selectedGameIndex === index && this.renderGameDetails())))), h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, h("div", { class: "ButtonContainer" }, this.iconVisibility && (h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, h("div", { class: "QustionMark" }, "?"), h("div", { class: "HexagonMarkShadow" }), h("div", { class: "HexagonMark" }))), !this.animationStarted && (h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -377,6 +393,150 @@ const CasinoPlayRandomGame = class {
 };
 CasinoPlayRandomGame.style = CasinoPlayRandomGameStyle0;
 
+const uiImageCss = ".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit;object-fit:inherit}.UiContainer .Image{border-radius:inherit}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;border-radius:var(--emw--border-radius-medium, 10px);transition:opacity 0.5s ease-in-out}";
+const UiImageStyle0 = uiImageCss;
+
+const UiImage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hasStarted = false;
+        this.src = undefined;
+        this.width = undefined;
+        this.height = undefined;
+        this.alt = undefined;
+        this.styles = undefined;
+        this.detectDistance = '200px';
+        this.loading = 'lazy';
+        this.imgLoaded = false;
+    }
+    onSrcChange() {
+        if (this.loading === 'eager')
+            return;
+        this.imgLoaded = false;
+        this.hasStarted = false;
+        if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
+            this.beginLoad();
+        }
+    }
+    onLoadingChange(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        this.cleanupObserver();
+        this.detachImgHandlers();
+        if (newVal === 'eager') {
+            if (this.imgEl && this.src) {
+                this.imgEl.src = this.src;
+            }
+            this.hasStarted = true;
+        }
+        else {
+            this.imgLoaded = false;
+            this.hasStarted = false;
+            this.setupObserver();
+        }
+    }
+    componentDidLoad() {
+        if (this.loading === 'eager')
+            return;
+        this.setupObserver();
+    }
+    disconnectedCallback() {
+        this.cleanupObserver();
+        this.detachImgHandlers();
+    }
+    canUseIO() {
+        return typeof window !== 'undefined' && 'IntersectionObserver' in window;
+    }
+    setupObserver() {
+        if (this.loading === 'eager')
+            return;
+        if (!this.canUseIO()) {
+            this.beginLoad();
+            return;
+        }
+        this.io = new IntersectionObserver((entries) => {
+            var _a;
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    this.beginLoad();
+                    (_a = this.io) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);
+                    this.cleanupObserver();
+                    break;
+                }
+            }
+        }, { root: null, rootMargin: this.detectDistance, threshold: 0 });
+        this.io.observe(this.el);
+    }
+    cleanupObserver() {
+        var _a;
+        (_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.io = undefined;
+    }
+    wireOnceHandlers() {
+        if (!this.imgEl)
+            return;
+        this.detachImgHandlers();
+        this._onLoad = () => {
+            var _a;
+            if (this.currentSrc && ((_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.currentSrc) && !this.imgEl.currentSrc.includes(this.currentSrc))
+                return;
+            this.imgLoaded = true;
+        };
+        this._onError = () => {
+            console.error('Load image failed:', this.src);
+        };
+        this.imgEl.addEventListener('load', this._onLoad, { once: true });
+        this.imgEl.addEventListener('error', this._onError, { once: true });
+    }
+    detachImgHandlers() {
+        if (!this.imgEl)
+            return;
+        if (this._onLoad)
+            this.imgEl.removeEventListener('load', this._onLoad);
+        if (this._onError)
+            this.imgEl.removeEventListener('error', this._onError);
+        this._onLoad = undefined;
+        this._onError = undefined;
+    }
+    beginLoad() {
+        if (this.hasStarted)
+            return;
+        if (!this.imgEl)
+            return;
+        if (!this.src)
+            return;
+        this.hasStarted = true;
+        this.wireOnceHandlers();
+        if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
+            this.imgLoaded = true;
+            return;
+        }
+        this.currentSrc = this.src;
+        this.imgEl.src = this.src;
+        if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
+            this.imgLoaded = true;
+        }
+    }
+    get showSkeleton() {
+        return this.loading !== 'eager' && !this.imgLoaded;
+    }
+    renderEager() {
+        return (h(Host, { class: "HostContainer" }, h("img", { src: this.src, decoding: "async", style: this.styles, class: "UiContainer Visible", alt: this.alt, width: this.width, height: this.height, loading: "eager" })));
+    }
+    renderLazy() {
+        return (h(Host, { class: "HostContainer", "aria-busy": !this.imgLoaded ? 'true' : 'false' }, this.showSkeleton && (h("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" })), h("img", { ref: (el) => (this.imgEl = el), src: undefined, decoding: "async", style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
+    }
+    render() {
+        return this.loading === 'eager' ? this.renderEager() : this.renderLazy();
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "src": ["onSrcChange"],
+        "loading": ["onLoadingChange"]
+    }; }
+};
+UiImage.style = UiImageStyle0;
+
 const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
 const UiSkeletonStyle0 = uiSkeletonCss;
 
@@ -551,4 +711,4 @@ const UiSkeleton = class {
 };
 UiSkeleton.style = UiSkeletonStyle0;
 
-export { CasinoPlayRandomGame as casino_play_random_game, UiSkeleton as ui_skeleton };
+export { CasinoPlayRandomGame as casino_play_random_game, UiImage as ui_image, UiSkeleton as ui_skeleton };

package/dist/esm/{index-328e660d.js → index-27b314b8.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'casino-play-random-game';
-const BUILD = /* casino-play-random-game */ { 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: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, 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: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* casino-play-random-game */ { 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: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, 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: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -49,10 +49,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'casino-play-random-game_2':
+                case 'casino-play-random-game_3':
                     return import(
                       /* webpackMode: "lazy" */
-                      './casino-play-random-game_2.entry.js').then(processMod, consoleError);
+                      './casino-play-random-game_3.entry.js').then(processMod, consoleError);
           }
       }
   return import(
@@ -383,6 +383,27 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       const newClasses = parseClassList(newValue);
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+    } else if (memberName === "style") {
+      {
+        for (const prop in oldValue) {
+          if (!newValue || newValue[prop] == null) {
+            if (prop.includes("-")) {
+              elm.style.removeProperty(prop);
+            } else {
+              elm.style[prop] = "";
+            }
+          }
+        }
+      }
+      for (const prop in newValue) {
+        if (!oldValue || newValue[prop] !== oldValue[prop]) {
+          if (prop.includes("-")) {
+            elm.style.setProperty(prop, newValue[prop]);
+          } else {
+            elm.style[prop] = newValue[prop];
+          }
+        }
+      }
     } else if (memberName === "key") ; else if (memberName === "ref") {
       if (newValue) {
         newValue(elm);

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-328e660d.js';
-export { s as setNonce } from './index-328e660d.js';
+import { b as bootstrapLazy } from './index-27b314b8.js';
+export { s as setNonce } from './index-27b314b8.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["casino-play-random-game_2",[[1,"casino-play-random-game",{"endpoint":[513],"datasource":[513],"language":[513],"specificCategory":[513,"specific-category"],"iconVisible":[513,"icon-visible"],"iconVisibleOnAnim":[513,"icon-visible-on-anim"],"launchByGameCard":[513,"launch-by-game-card"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"hasErrors":[32],"isLoading":[32],"gamesToShow":[32],"selectedGame":[32],"animationDone":[32],"animationStarted":[32]},null,{"endpoint":["watchEndpoint"],"datasource":["watchEndpoint"],"language":["watchEndpoint"],"translationUrl":["handleNewTranslations"],"iconVisible":["handleIsIconVisible"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
+  return bootstrapLazy([["casino-play-random-game_3",[[1,"casino-play-random-game",{"endpoint":[513],"datasource":[513],"language":[513],"specificCategory":[513,"specific-category"],"iconVisible":[513,"icon-visible"],"iconVisibleOnAnim":[513,"icon-visible-on-anim"],"launchByGameCard":[513,"launch-by-game-card"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"hasErrors":[32],"isLoading":[32],"gamesToShow":[32],"selectedGame":[32],"animationDone":[32],"animationStarted":[32],"imageLoadingType":[32],"detectDistance":[32]},null,{"endpoint":["watchEndpoint"],"datasource":["watchEndpoint"],"language":["watchEndpoint"],"translationUrl":["handleNewTranslations"],"iconVisible":["handleIsIconVisible"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"loading":[1],"imgLoaded":[32]},null,{"src":["onSrcChange"],"loading":["onLoadingChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/casino-play-random-game/.stencil/packages/stencil/casino-play-random-game/stencil.config.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/casino-play-random-game/.stencil/packages/stencil/casino-play-random-game/stencil.config.dev.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/{builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-play-random-game/.stencil/tools/plugins/index.d.ts → Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/casino-play-random-game/.stencil/tools/plugins/index.d.ts }

@@ -1,3 +1,4 @@
 export * from "./vite-chunk-plugin";
 export * from "./stencil-clean-deps-plugin";
 export * from "./vite-clean-deps-plugin";
+export * from "./lazy-load-chunk-plugin";

package/dist/types/Users/maria.bumbar/Desktop/Widgets & Template/widgets-monorepo/packages/stencil/casino-play-random-game/.stencil/tools/plugins/lazy-load-chunk-plugin.d.ts

@@ -0,0 +1,12 @@
+export declare const lazyLoadChunkPlugin: () => {
+    name: string;
+    config(config: any): {
+        build: {
+            rollupOptions: {
+                output: {
+                    manualChunks(id: any): any;
+                };
+            };
+        };
+    };
+};

package/dist/types/components/casino-play-random-game/casino-play-random-game.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import "../../../../../../dist/packages/stencil/ui-skeleton/dist/types/index";
+import "../../../../../../dist/packages/stencil/ui-image/dist/types/index";
 export declare class CasinoPlayRandomGame {
     /**
      * Endpoint URL for the source of data
@@ -52,6 +53,8 @@ export declare class CasinoPlayRandomGame {
     private selectedGame;
     private animationDone;
     private animationStarted;
+    private imageLoadingType;
+    private detectDistance;
     dataLoaded: EventEmitter<{
         target: HTMLElement;
     }>;
@@ -62,6 +65,7 @@ export declare class CasinoPlayRandomGame {
     private iconVisibility;
     private stylingSubscription;
     private stylingContainer;
+    private io?;
     watchEndpoint(newValue: string, oldValue: string): void;
     handleNewTranslations(): void;
     handleIsIconVisible(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-play-random-game",
-  "version": "1.76.13",
+  "version": "1.76.14",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/casino-play-random-game/casino-play-random-game_2.entry.js

@@ -1 +0,0 @@
-import{r as n,c as e,h as t,g as a,H as i}from"./index-328e660d.js";const o={en:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},ro:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},fr:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},hr:{error:"Greška",randomGameLoading:"Učitavanje ...",playRandomGame:"Igraj nasumičnu igru",playNowRandomGame:"Igraj sada",spinRandomGame:"Zavrti"},hu:{error:"Error",randomGameLoading:"Loading ...",playRandomGame:"Play a random game",playNowRandomGame:"Play now",spinRandomGame:"Spin"},tr:{error:"Hata",randomGameLoading:"Yükleniyor...",playRandomGame:"Rastgele Bir Oyun Oyna",playNowRandomGame:"Şimdi Oyna",spinRandomGame:"DEĞİŞTİR"}},r=n=>new Promise((e=>{fetch(n).then((n=>n.json())).then((n=>{Object.keys(n).forEach((e=>{o[e]||(o[e]={});for(let t in n[e])o[e][t]=n[e][t]})),e(!0)}))})),s=(n,e)=>o[void 0!==e&&e in o?e:"en"][n];function l(n,e){if(n){const t=document.createElement("style");t.innerHTML=e,n.appendChild(t)}}function m(n,e){const t=new URL(e);fetch(t.href).then((n=>n.text())).then((e=>{const t=document.createElement("style");t.innerHTML=e,n&&n.appendChild(t)})).catch((n=>{console.error("There was an error while trying to load client styling from URL",n)}))}const d=class{constructor(t){n(this,t),this.dataLoaded=e(this,"data-loaded",7),this.animation=null,this.selectedGameIndex=null,this.selectedGameEl=null,this.iconVisibility=null,this.shuffle=n=>{let e,t=n.length;for(;0!==t;)e=Math.floor(Math.random()*t),t--,[n[t],n[e]]=[n[e],n[t]];return n},this.endpoint=void 0,this.datasource=void 0,this.language="en",this.specificCategory="",this.iconVisible="",this.iconVisibleOnAnim="",this.launchByGameCard="",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.hasErrors=!1,this.isLoading=!0,this.gamesToShow=void 0,this.selectedGame=null,this.animationDone=!1,this.animationStarted=!1}watchEndpoint(n,e){n&&n!=e&&this.endpoint&&this.fetchGameList()}handleNewTranslations(){this.isLoading=!0,r(this.translationUrl).then((()=>{this.isLoading=!1}))}handleIsIconVisible(){this.iconVisibility="true"===this.iconVisible}handleClientStylingChange(n,e){n!=e&&l(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(n,e){n!=e&&this.clientStylingUrl&&m(this.stylingContainer,this.clientStylingUrl)}connectedCallback(){this.handleIsIconVisible()}componentWillLoad(){if(this.translationUrl.length>2&&r(this.translationUrl),this.endpoint&&this.language&&this.datasource)return this.fetchGameList()}componentDidLoad(){null!=window.emMessageBus?function(n,e){if(window.emMessageBus){const t=document.createElement("style");window.emMessageBus.subscribe(e,(e=>{t.innerHTML=e,n&&n.appendChild(t)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&l(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&m(this.stylingContainer,this.clientStylingUrl))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}fetchGameList(){let n=new URL(`${this.endpoint}/v1/casino/games`);return n.searchParams.append("platform",(()=>{let n=window.navigator.userAgent;return n.toLowerCase().match(/android/i)?"Android":n.toLowerCase().match(/iphone/i)?"iPhone":n.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})()),n.searchParams.append("datasource",this.datasource),n.searchParams.append("fields","gId,id,href,thumbnail,name,vendor,launchUrl,subVendor"),n.searchParams.append("expand","vendor"),n.searchParams.append("pagination","offset=0,limit=423"),n.searchParams.append("language",this.language),this.specificCategory&&n.searchParams.append("filter",`categories(id=${this.specificCategory})`),new Promise(((e,t)=>{this.isLoading=!0,fetch(n.href).then((n=>n.json())).then((n=>{this.gamesToShow=this.setUpGames(null==n?void 0:n.items),e(!0)})).catch((n=>{console.error(n),this.hasErrors=!0,t(n)})).finally((()=>{this.isLoading=!1,this.dataLoaded.emit({target:this.host})}))}))}setUpGames(n){const e=this.shuffle(n).slice(0,40);return e.concat(e)}selectRandomGame(){const n=this.gamesToShow.length/2;this.selectedGameIndex=Math.floor(Math.random()*(n-3)),this.selectedGameIndex+=n,this.selectedGameEl=this.gameContainer.children[this.selectedGameIndex]}playRandomGame(){this.animateGames(),"function"==typeof gtag&&gtag("event","PlayRandomGame",{context:"CasinoPlayRandomGame"})}respin(){this.animateGames(),"function"==typeof gtag&&gtag("event","RespinRandomGame",{context:"CasinoPlayRandomGame"})}animateGames(){this.iconVisibility="true"===this.iconVisibleOnAnim,this.animationStarted=!0,this.animationDone=!1,this.animation&&this.animation.cancel(),this.selectedGameEl&&(this.selectedGameEl.classList.remove("TheRandomGame"),this.selectedGame=null,this.selectedGameIndex=null),this.selectRandomGame();const n=window.getComputedStyle(this.gameContainer).getPropertyValue("gap"),e=parseInt(n,10),t=this.selectedGameEl.offsetWidth;this.animation=this.gameContainer.animate([{transform:"translateX(0px)",scale:1},{scale:.75},{transform:`translateX(-${(t+e)*this.selectedGameIndex+t/2-this.gameContainer.offsetWidth/2}px)`,scale:1}],{duration:3e3,easing:"cubic-bezier(0.5, 0, 0.5, 1.2)",fill:"forwards"}),this.animation.onfinish=()=>{this.animationDone=!0,this.selectedGameEl.classList.add("TheRandomGame"),this.selectedGame=this.gamesToShow[this.selectedGameIndex]}}playGame(){this.selectedGame&&(window.postMessage({type:"PlayRandomGame",gameId:this.selectedGame.id,launchUrl:this.selectedGame.launchUrl,gameName:this.selectedGame.name,subVendor:this.selectedGame.subVendor},window.location.href),"function"==typeof gtag&&gtag("event","OpenRandomGame",{context:"CasinoPlayRandomGame"}))}showGameInfo(){window.postMessage({type:"InfoRandomGame",gameId:this.selectedGame.id,launchUrl:this.selectedGame.launchUrl,gameName:this.selectedGame.name,subVendor:this.selectedGame.subVendor},window.location.href),"function"==typeof gtag&&gtag("event","OpenRandomGameInfo",{context:"CasinoPlayRandomGame"})}renderGameDetails(){return t("div",{class:"RandomButtonsWrapper"},t("div",{class:"RandomGameDetails"},t("span",{class:"RandomGameTitle"},this.selectedGame.name),t("span",{class:"RandomGameInfo",onClick:()=>this.showGameInfo()},"i")),t("div",{class:"RandomButtons"},t("button",{class:"RandomButton On",onClick:()=>this.respin()},s("spinRandomGame",this.language)),!this.launchByGameCard&&t("button",{class:"RandomButton On",onClick:()=>this.playGame()},s("playNowRandomGame",this.language))))}renderSkeleton(){const n=Array.from({length:5},((n,e)=>t("div",{class:"RandomGameCard",key:e},t("ui-skeleton",{structure:"rectangle",width:"300px",height:"420px",borderRadius:"10px",animation:!0}))));return t("div",{class:"RandomGameWrapper"},t("div",{class:"GameContainerGradient"}),t("div",{class:"GamesContainer"},n))}render(){return t("div",{key:"ccc1e77093402e72a300ded18465085c182fbd79",ref:n=>this.stylingContainer=n},this.hasErrors?t("div",{class:"RandomGameError"},t("div",{class:"Title"},s("error",this.language))):this.isLoading?this.renderSkeleton():t("div",{class:"RandomGameWrapper"},t("div",{class:"GameContainerGradient"}),t("div",{class:"GamesContainer",ref:n=>this.gameContainer=n},this.gamesToShow&&this.gamesToShow.map(((n,e)=>t("div",{class:"RandomGameCard",key:e,onClick:"true"===this.launchByGameCard?()=>this.playGame():void 0},t("div",{class:"RandomGameVendor"},n.vendor.name),t("img",{class:"RandomGameImage",src:n.thumbnail,alt:n.name,title:n.name}),this.selectedGame&&this.selectedGameIndex===e&&this.renderGameDetails())))),t("div",{class:"ButtonWrapper "+(this.animationDone?"HideAnimation":"")},t("div",{class:"ButtonContainer"},this.iconVisibility&&t("div",{class:"ButtonIcon "+(this.animationStarted?"Flip":"")},t("div",{class:"QustionMark"},"?"),t("div",{class:"HexagonMarkShadow"}),t("div",{class:"HexagonMark"})),!this.animationStarted&&t("div",{class:"RandomButton "+(this.animationStarted?"HideAnimation":""),onClick:()=>this.playRandomGame()},s("playRandomGame",this.language))))))}get host(){return a(this)}static get watchers(){return{endpoint:["watchEndpoint"],datasource:["watchEndpoint"],language:["watchEndpoint"],translationUrl:["handleNewTranslations"],iconVisible:["handleIsIconVisible"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};d.style=":host {\n  display: block;\n  font-family: inherit;\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n}\n\n:host * {\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n}\n\n.RandomGameWrapper {\n  width: 100%;\n  height: var(--emw--size-4x-medium, 700px);\n  background: transparent;\n  position: relative;\n  overflow: hidden;\n}\n\n.GameContainerGradient {\n  position: absolute;\n  top: 10%;\n  left: -5px;\n  width: 100vw;\n  height: 80%;\n  background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.5) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.5) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n  pointer-events: none;\n  z-index: 1;\n  filter: blur(10px);\n}\n\n.GamesContainer {\n  display: flex;\n  height: var(--emw--size-4x-medium, 600px);\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  align-content: flex-start;\n  gap: var(--emw--spacing-large, 20px);\n}\n\n.RandomGameCard {\n  position: relative;\n  width: var(--emw--size-3x-medium, 300px);\n  height: var(--emw--size-4x-medium, 420px);\n  border-radius: var(--emw--border-radius-large, 10px);\n  top: 8%;\n  filter: blur(5px);\n}\n.RandomGameCard .RandomGameVendor {\n  position: absolute;\n  font-size: var(--emw--font-size-x-small, 12px);\n  bottom: var(--emw--spacing-small-minus, 10px);\n  left: var(--emw--spacing-small-minus, 10px);\n  color: var(--emw--color-typography, #FFFFFF);\n}\n\n.TheRandomGame {\n  animation-name: ZoomFadeIn;\n  animation-duration: 0.5s;\n  animation-fill-mode: forwards;\n  -webkit-animation-name: ZoomFadeIn;\n  -webkit-animation-duration: 0.5s;\n  -webkit-animation-fill-mode: forwards;\n  opacity: 1;\n  cursor: pointer;\n  filter: blur(0);\n}\n\n.RandomGameImage {\n  width: inherit;\n  height: inherit;\n  object-fit: cover;\n  border-radius: var(--emw--border-radius-large, 10px);\n}\n\n.RandomGameDetails {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--emw--color-typography, #FFFFFF);\n  font-size: var(--emw--font-size-small, 14px);\n  width: 100%;\n}\n.RandomGameDetails .RandomGameTitle {\n  line-height: 18px;\n  margin: 5px 0;\n}\n.RandomGameDetails .RandomGameInfo {\n  border-radius: 50%;\n  width: var(--emw--spacing-medium, 16px);\n  height: var(--emw--spacing-medium, 16px);\n  font-size: var(--emw--font-size-x-small, 12px);\n  font-weight: var(--emw--font-weight-normal, 400);\n  border: solid 1px var(--emw--color-typography, #FFFFFF);\n  text-align: center;\n  margin: var(--emw--spacing-2x-small, 4px) 0;\n  line-height: 14px;\n  cursor: pointer;\n}\n.RandomGameDetails .RandomGamePlay {\n  background: var(--emw--color-primary, #4bd004);\n  color: var(--emw--color-typography, #FFFFFF);\n  border: none;\n  border-radius: var(--emw--border-radius-medium, 5px);\n  width: 200px;\n  height: 40px;\n  font-size: var(--emw--font-size-small, 14px);\n  cursor: pointer;\n}\n\n.ButtonWrapper {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 20;\n}\n\n.ButtonContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  position: relative;\n}\n\n.ButtonIcon {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--emw--spacing-2x-small, 5px);\n}\n\n.QustionMark {\n  position: absolute;\n  font-family: sans-serif;\n  font-size: 120px;\n  font-weight: 900;\n  color: color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 10%);\n  text-shadow: 0px 12px 0px color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 50%);\n  left: 50%;\n  top: -20%;\n  transform: translateX(-50%);\n  z-index: 10;\n}\n\n.HexagonMarkShadow {\n  width: 100px;\n  height: 115px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 70%);\n  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMark {\n  position: absolute;\n  width: var(--emw--size-medium, 90px);\n  height: 105px;\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 20%) 0%, var(--emw--categories-color-secondary, var(--emw--color-secondary, #eeac4a)) 100%);\n  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.RandomButtons {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: var(--emw--spacing-2x-small, 5px);\n  width: 100%;\n  position: relative;\n  z-index: 10;\n}\n\n.RandomButton {\n  font-size: var(--emw--font-size-large, 12px);\n  text-transform: uppercase;\n  width: max-content;\n  border-radius: var(--emw--button-border-radius, 10px);\n  padding: var(--emw--spacing-large, 20px) var(--emw--spacing-2x-large, 40px);\n  border: solid 3px var(--emw--button-border-color, #063B17);\n  color: var(--emw--button-text-color, #FFFFFF);\n  opacity: 1;\n  animation: ButtonEffect 3s linear infinite;\n  background-image: linear-gradient(to right, var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E), black 30%), var(--emw--color-primary, #22B04E));\n  background-size: 300% 100%;\n  cursor: pointer;\n  position: relative;\n  z-index: 10;\n}\n.RandomButton:hover {\n  opacity: 0.8;\n}\n\n.HideAnimation {\n  filter: blur(5px);\n  animation: AnimateButton 0.2s forwards;\n}\n\n.Flip {\n  animation-name: Flip, Blur;\n  animation-duration: 0.75s, 3s;\n  animation-iteration-count: infinite, 1;\n  -webkit-animation-name: Flip, Blur;\n  -webkit-animation-duration: 0.75s, 3s;\n  -webkit-animation-iteration-count: infinite, 1;\n}\n\n@keyframes ButtonEffect {\n  0% {\n    background-position: 0% 50%;\n  }\n  33% {\n    background-position: 100% 50%;\n  }\n  66% {\n    background-position: 200% 50%;\n  }\n  100% {\n    background-position: 300% 50%;\n  }\n}\n@keyframes ZoomFadeIn {\n  0% {\n    transform: scale(0.2) translateY(0);\n    filter: blur(5px);\n    opacity: 0.3;\n  }\n  50% {\n    transform: scale(1.1) translateY(-30px);\n    filter: blur(2px);\n    opacity: 0.7;\n  }\n  100% {\n    transform: scale(1) translateY(-30px);\n    filter: blur(0px);\n    opacity: 1;\n  }\n}\n@keyframes AnimateButton {\n  0% {\n    opacity: 0.7;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 0;\n    display: none;\n  }\n}\n@keyframes Flip {\n  0% {\n    transform: rotateY(0deg);\n  }\n  50% {\n    transform: rotateY(180deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n@keyframes Blur {\n  0% {\n    filter: blur(0);\n  }\n  50% {\n    filter: blur(1px);\n  }\n  100% {\n    filter: blur(3px);\n  }\n}\n@media screen and (max-width: 480px) {\n  .RandomButtons .RandomButton {\n    font-size: var(--emw--font-size-medium, 12px);\n  }\n}\n@container (max-width: 475px) {\n  .GamesContainer {\n    height: inherit;\n    gap: var(--emw--spacing-2x-small, 5px);\n  }\n  .RandomGameWrapper {\n    width: 100%;\n    height: 300px;\n    overflow: hidden;\n    background: transparent;\n    position: relative;\n  }\n  .GameContainerGradient {\n    position: absolute;\n    top: 10%;\n    left: -5px;\n    width: 100vw;\n    height: 80%;\n    background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.2) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.2) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n    pointer-events: none;\n    z-index: 1;\n    filter: blur(5px);\n  }\n  .RandomGameCard {\n    width: 100px;\n    height: 150px;\n    top: 0%;\n    border-radius: var(--emw--border-radius-medium, 4px);\n    filter: blur(5px);\n  }\n  .RandomGameImage {\n    width: 102px;\n    height: inherit;\n    top: 0%;\n  }\n  .RandomGameDetails {\n    font-size: 14px;\n    width: 100%;\n  }\n  .RandomGameDetails .RandomGameTitle {\n    margin: 5px 0;\n    line-height: 18px;\n    width: 75%;\n  }\n  .RandomGameDetails .RandomGameInfo {\n    border-radius: 50%;\n    width: 16px;\n    height: 16px;\n    font-size: var(--emw--font-size-x-small, 12px);\n    line-height: 14px;\n  }\n  .RandomGameDetails .RandomGamePlay {\n    background: var(--emw--color-primary, #52d004);\n    color: var(--emw--color-typography, #FFFFFF);\n    border: none;\n    border-radius: 5px;\n    width: 200px;\n    height: 40px;\n    font-size: 14px;\n    cursor: pointer;\n  }\n  .RandomGameCard .RandomGameVendor {\n    font-size: var(--emw--font-size-x-small, 12px);\n    bottom: 5px;\n    right: 5px;\n  }\n  .RandomButtons {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 5px;\n    width: 100%;\n  }\n  .RandomButton {\n    font-size: var(--emw--font-size-x-small, 12px);\n    padding: 10px 15px;\n    border: solid 1px var(--emw--button-border-color, #063B17);\n  }\n  .QustionMark {\n    font-size: 100px;\n    font-weight: 700;\n  }\n  .HexagonMarkShadow {\n    width: 80px;\n    height: 95px;\n  }\n  .HexagonMark {\n    width: 70px;\n    height: 85px;\n  }\n}";const h=class{constructor(e){n(this,e),this.stylingValue={width:this.handleStylingProps(this.width),height:this.handleStylingProps(this.height),borderRadius:this.handleStylingProps(this.borderRadius),marginBottom:this.handleStylingProps(this.marginBottom),marginTop:this.handleStylingProps(this.marginTop),marginLeft:this.handleStylingProps(this.marginLeft),marginRight:this.handleStylingProps(this.marginRight),size:this.handleStylingProps(this.size)},this.structure=void 0,this.width="unset",this.height="unset",this.borderRadius="unset",this.marginBottom="unset",this.marginTop="unset",this.marginLeft="unset",this.marginRight="unset",this.animation=!0,this.rows=0,this.size="100%"}handleStructureChange(n,e){e!==n&&this.handleStructure(n)}handleStylingProps(n){switch(typeof n){case"number":return 0===n?0:`${n}px`;case"undefined":default:return"unset";case"string":return["auto","unset","none","inherit","initial"].includes(n)||n.endsWith("px")||n.endsWith("%")?n:"unset"}}handleStructure(n){switch(n){case"logo":return this.renderLogo();case"image":return this.renderImage();case"title":return this.renderTitle();case"text":return this.renderText();case"rectangle":return this.renderRectangle();case"circle":return this.renderCircle();default:return null}}renderLogo(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Logo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"Image "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Title "+(this.animation?"Skeleton":"")}))}renderText(){return t("div",{class:"SkeletonContainer"},Array.from({length:this.rows>0?this.rows:1}).map(((n,e)=>t("div",{key:e,class:"Text "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Rectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Circle "+(this.animation?"Skeleton":"")}))}render(){let n="";switch(this.structure){case"logo":n=`\n          :host {\n            --emw-skeleton-logo-width: ${this.stylingValue.width};\n            --emw-skeleton-logo-height: ${this.stylingValue.height};\n            --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"image":n=`\n          :host {\n            --emw-skeleton-image-width: ${this.stylingValue.width};\n            --emw-skeleton-image-height: ${this.stylingValue.height};\n            --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"title":n=`\n          :host {\n            --emw-skeleton-title-width: ${this.stylingValue.width};\n            --emw-skeleton-title-height: ${this.stylingValue.height};\n            --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"text":n=`\n          :host {\n            --emw-skeleton-text-width: ${this.stylingValue.width};\n            --emw-skeleton-text-height: ${this.stylingValue.height};\n            --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"rectangle":n=`\n          :host {\n            --emw-skeleton-rectangle-width: ${this.stylingValue.width};\n            --emw-skeleton-rectangle-height: ${this.stylingValue.height};\n            --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"circle":n=`\n          :host {\n            --emw-skeleton-circle-size: ${this.stylingValue.size};\n          }\n        `;break;default:n=""}return t(i,{key:"e6b885bfd985ce7663d990756fe9101e25eb97f0"},t("style",{key:"06ae24c7bb74f4dacfc12ae58085333f9dc89da5"},n),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};h.style=":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";export{d as casino_play_random_game,h as ui_skeleton}

package/dist/casino-play-random-game/index-328e660d.js

@@ -1,2 +0,0 @@
-var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),r=new Map,i=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",a="undefined"!=typeof window?window:{},u=a.document||{head:{}},f={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},h=e=>Promise.resolve(e),d=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),m=!1,p=[],y=[],$=(e,t)=>n=>{e.push(n),m||(m=!0,t&&4&f.l?v(w):f.raf(w))},b=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){s(e)}e.length=0},w=()=>{b(p),b(y),(m=p.length>0)&&f.raf(w)},v=e=>h().then(e),g=$(y,!0),S={},k=e=>"object"==(e=typeof e)||"function"===e;function j(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>C,map:()=>E,ok:()=>O,unwrap:()=>P,unwrapErr:()=>L});var O=e=>({isOk:!0,isErr:!1,value:e}),C=e=>({isOk:!1,isErr:!0,value:e});function E(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>O(e))):O(n)}if(e.isErr)return C(e.value);throw"should never get here"}var M,x,P=e=>{if(e.isOk)return e.value;throw e.value},L=e=>{if(e.isErr)return e.value;throw e.value},R=(e,t,...n)=>{let l=null,o=null,s=!1,r=!1;const i=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!k(l))&&(l+=""),s&&r?i[i.length-1].i+=l:i.push(s?T(null,l):l),r=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const a=T(e,null);return a.u=t,i.length>0&&(a.h=i),a.m=o,a},T=(e,t)=>({l:0,p:e,i:t,$:null,h:null,u:null,m:null}),A={},F=e=>n(e).$hostElement$,H=(e,t,n)=>{const l=F(e);return{emit:e=>N(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},N=(e,t,n)=>{const l=f.ce(t,n);return e.dispatchEvent(l),l},U=new WeakMap,W=e=>"sc-"+e.v,D=(e,t,n,l,s,r)=>{if(n!==l){let i=o(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=G(n),s=G(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("key"===t);else if("ref"===t)l&&l(e);else if(i||"o"!==t[0]||"n"!==t[1]){const o=k(l);if((i||o&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||s)&&!o&&e.setAttribute(t,l=!0===l?"":l)}else if(t="-"===t[2]?t.slice(3):o(a,c)?c.slice(2):c[2]+t.slice(3),n||l){const o=t.endsWith(V);t=t.replace(_,""),n&&f.rel(e,t,n,o),l&&f.ael(e,t,l,o)}}},q=/\s/,G=e=>e?e.split(q):[],V="Capture",_=RegExp(V+"$"),z=(e,t,n)=>{const l=11===t.$.nodeType&&t.$.host?t.$.host:t.$,o=e&&e.u||S,s=t.u||S;for(const e of B(Object.keys(o)))e in s||D(l,e,o[e],void 0,n,t.l);for(const e of B(Object.keys(s)))D(l,e,o[e],s[e],n,t.l)};function B(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var I=!1,J=(e,t,n)=>{const l=t.h[n];let o,s,r=0;if(null!==l.i)o=l.$=u.createTextNode(l.i);else if(o=l.$=u.createElement(l.p),z(null,l,I),null!=M&&o["s-si"]!==M&&o.classList.add(o["s-si"]=M),l.h)for(r=0;r<l.h.length;++r)s=J(e,l,r),s&&o.appendChild(s);return o["s-hn"]=x,o},K=(e,t,n,l,o,s)=>{let r,i=e;for(i.shadowRoot&&i.tagName===x&&(i=i.shadowRoot);o<=s;++o)l[o]&&(r=J(null,n,o),r&&(l[o].$=r,ee(i,r,t)))},Q=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.$;Z(t),e&&e.remove()}}},X=(e,t,n=!1)=>e.p===t.p&&(!!n||e.m===t.m),Y=(e,t,n=!1)=>{const l=t.$=e.$,o=e.h,s=t.h,r=t.i;null===r?(z(e,t,I),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,r,i=0,c=0,a=0,u=0,f=t.length-1,h=t[0],d=t[f],m=l.length-1,p=l[0],y=l[m];for(;i<=f&&c<=m;)if(null==h)h=t[++i];else if(null==d)d=t[--f];else if(null==p)p=l[++c];else if(null==y)y=l[--m];else if(X(h,p,o))Y(h,p,o),h=t[++i],p=l[++c];else if(X(d,y,o))Y(d,y,o),d=t[--f],y=l[--m];else if(X(h,y,o))Y(h,y,o),ee(e,h.$,d.$.nextSibling),h=t[++i],y=l[--m];else if(X(d,p,o))Y(d,p,o),ee(e,d.$,h.$),d=t[--f],p=l[++c];else{for(a=-1,u=i;u<=f;++u)if(t[u]&&null!==t[u].m&&t[u].m===p.m){a=u;break}a>=0?(r=t[a],r.p!==p.p?s=J(t&&t[c],n,a):(Y(r,p,o),t[a]=void 0,s=r.$),p=l[++c]):(s=J(t&&t[c],n,c),p=l[++c]),s&&ee(h.$.parentNode,s,h.$)}i>f?K(e,null==l[m+1]?null:l[m+1].$,n,l,c,m):c>m&&Q(t,i,f)})(l,o,t,s,n):null!==s?(null!==e.i&&(l.textContent=""),K(l,null,t,s,0,s.length-1)):null!==o&&Q(o,0,o.length-1)):e.i!==r&&(l.data=r)},Z=e=>{e.u&&e.u.ref&&e.u.ref(null),e.h&&e.h.map(Z)},ee=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),te=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},ne=(e,t)=>{if(e.l|=16,!(4&e.l))return te(e,e.k),g((()=>le(e,t)));e.l|=512},le=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return t&&(l=ue(n,"componentWillLoad")),oe(l,(()=>re(e,n,t)))},oe=(e,t)=>se(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),se=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,re=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.j,n=e.$hostElement$,l=t.l,o=((e,t)=>{var n;const l=W(t),o=i.get(l);if(e=11===e.nodeType?e:u,o)if("string"==typeof o){let s,r=U.get(e=e.head||e);if(r||U.set(e,r=new Set),!r.has(l)){{s=u.createElement("style"),s.innerHTML=o;const t=null!=(n=f.O)?n:j(u);null!=t&&s.setAttribute("nonce",t),e.insertBefore(s,e.querySelector("link"))}4&t.l&&(s.innerHTML+=c),r&&r.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);ie(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>ce(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},ie=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.j,s=e.C||T(null,null),r=(e=>e&&e.p===A)(t)?t:R(null,null,t);if(x=l.tagName,o.M&&(r.u=r.u||{},o.M.map((([e,t])=>r.u[t]=l[e]))),n&&r.u)for(const e of Object.keys(r.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(r.u[e]=l[e]);r.p=null,r.l|=4,e.C=r,r.$=s.$=l.shadowRoot||l,M=l["s-sc"],Y(s,r,n)})(e,t,l)}catch(t){s(t,e.$hostElement$)}return null},ce=e=>{const t=e.$hostElement$,n=e.t,l=e.k;64&e.l||(e.l|=64,fe(t),ue(n,"componentDidLoad"),e.P(t),l||ae()),e.S&&(e.S(),e.S=void 0),512&e.l&&v((()=>ne(e,!1))),e.l&=-517},ae=()=>{fe(u.documentElement),v((()=>N(a,"appload",{detail:{namespace:"casino-play-random-game"}})))},ue=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){s(e)}},fe=e=>e.classList.add("hydrated"),he=(e,t,l)=>{var o,r;const i=e.prototype;if(t.L||t.R||e.watchers){e.watchers&&!t.R&&(t.R=e.watchers);const c=Object.entries(null!=(o=t.L)?o:{});if(c.map((([e,[o]])=>{(31&o||2&l&&32&o)&&Object.defineProperty(i,e,{get(){return((e,t)=>n(this).T.get(t))(0,e)},set(l){((e,t,l,o)=>{const r=n(e);if(!r)throw Error(`Couldn't find host element for "${o.v}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const i=r.$hostElement$,c=r.T.get(t),a=r.l,u=r.t;if(l=((e,t)=>null==e||k(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(l,o.L[t][0]),(!(8&a)||void 0===c)&&l!==c&&(!Number.isNaN(c)||!Number.isNaN(l))&&(r.T.set(t,l),u)){if(o.R&&128&a){const e=o.R[t];e&&e.map((e=>{try{u[e](l,c,t)}catch(e){s(e,i)}}))}2==(18&a)&&ne(r,!1)}})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;i.attributeChangedCallback=function(e,o,s){f.jmp((()=>{var r;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(i.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),i=null==l?void 0:l.l;if(i&&!(8&i)&&128&i&&s!==o){const n=l.t,i=null==(r=t.R)?void 0:r[e];null==i||i.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(r=t.R)?r:{}),...c.filter((([e,t])=>15&t[0])).map((([e,n])=>{var o;const s=n[1]||e;return l.set(s,e),512&n[0]&&(null==(o=t.M)||o.push([e,s])),s}))]))}}return e},de=e=>{ue(e,"connectedCallback")},me=e=>{ue(e,"disconnectedCallback")},pe=(e,l={})=>{var o;const h=[],m=l.exclude||[],p=a.customElements,y=u.head,$=y.querySelector("meta[charset]"),b=u.createElement("style"),w=[];let v,g=!0;Object.assign(f,l),f.o=new URL(l.resourcesUrl||"./",u.baseURI).href;let S=!1;if(e.map((e=>{e[1].map((l=>{var o;const c={l:l[0],v:l[1],L:l[2],A:l[3]};4&c.l&&(S=!0),c.L=l[2],c.M=[],c.R=null!=(o=l[4])?o:{};const a=c.v,u=class extends HTMLElement{constructor(e){if(super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,j:n,T:new Map};l.F=new Promise((e=>l.P=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,c),1&c.l)if(e.shadowRoot){if("open"!==e.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.v}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else e.attachShadow({mode:"open"})}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),v&&(clearTimeout(v),v=null),g?w.push(this):f.jmp((()=>(e=>{if(!(1&f.l)){const t=n(e),l=t.j,o=()=>{};if(1&t.l)(null==t?void 0:t.t)?de(t.t):(null==t?void 0:t.F)&&t.F.then((()=>de(t.t)));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){te(t,t.k=n);break}}l.L&&Object.entries(l.L).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.H){const e=(e=>{const t=e.v.replace(/-/g,"_"),n=e.H;if(!n)return;const l=r.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(r.set(n,e),e[t])),s)
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.v}#${t.N}" was not found`);l.isProxied||(n.R=l.watchers,he(l,n,2),l.isProxied=!0);const o=()=>{};t.l|=8;try{new l(t)}catch(e){s(e)}t.l&=-9,t.l|=128,o(),de(t.t)}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=W(n);if(!i.has(t)){const l=()=>{};((e,t,n)=>{let l=i.get(e);d&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,i.set(e,l)})(t,e,!!(1&n.l)),l()}}}const o=t.k,c=()=>ne(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(e,t,l)}o()}})(this)))}disconnectedCallback(){f.jmp((()=>(async()=>{if(!(1&f.l)){const e=n(this);(null==e?void 0:e.t)?me(e.t):(null==e?void 0:e.F)&&e.F.then((()=>me(e.t)))}})()))}componentOnReady(){return n(this).F}};c.H=e[0],m.includes(a)||p.get(a)||(h.push(a),p.define(a,he(u,c,1)))}))})),h.length>0&&(S&&(b.textContent+=c),b.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",b.innerHTML.length)){b.setAttribute("data-styles","");const e=null!=(o=f.O)?o:j(u);null!=e&&b.setAttribute("nonce",e),y.insertBefore(b,$?$.nextSibling:y.firstChild)}g=!1,w.length?w.map((e=>e.connectedCallback())):f.jmp((()=>v=setTimeout(ae,30)))},ye=e=>f.O=e;export{A as H,pe as b,H as c,F as g,R as h,h as p,l as r,ye as s}

package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-play-random-game/.stencil/packages/stencil/casino-play-random-game/stencil.config.d.ts

@@ -1,2 +0,0 @@
-import { Config } from '../../../../../../../../../../stencil-public-runtime';
-export declare const config: Config;

package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-play-random-game/.stencil/packages/stencil/casino-play-random-game/stencil.config.dev.d.ts

@@ -1,2 +0,0 @@
-import { Config } from '../../../../../../../../../../stencil-public-runtime';
-export declare const config: Config;