@everymatrix/bonus-elevate-shop-item 1.87.25 → 1.87.27

package/dist/bonus-elevate-shop-item/bonus-elevate-shop-assets-slider_3.entry.js

@@ -1 +1 @@
-import{r as e,h as t,g as i,c as a,F as s,H as o}from"./index-fca048d8.js";const n=class{constructor(t){e(this,t),this.xDown=null,this.yDown=null,this.orientationChangeHandler=()=>{setTimeout((()=>{this.recalculateItemsPerPage()}),10)},this.resizeHandler=()=>{this.recalculateItemsPerPage()},this.showSliderDots=!1,this.showSliderArrows=!0,this.itemsPerPage=1,this.sliderItems=[],this.activeIndex=0}setActive(e){var t;const i=null===(t=this.sliderItems)||void 0===t?void 0:t.length;this.activeIndex=e>=0?e>=i-1?i-1:e:0}move(e){this.setActive(this.activeIndex+e)}goTo(e){let t=this.activeIndex-e;if(t>0)for(let e=0;e<t;e++)this.move(-1);else for(let e=0;e>t;e--)this.move(1)}handleTouchStart(e){const t=this.getTouches(e)[0];this.xDown=t.clientX,this.yDown=t.clientY}getTouches(e){return e.touches||e.originalEvent.touches}handleTouchMove(e){if(!this.xDown||!this.yDown)return;let t=this.xDown-e.touches[0].clientX,i=this.yDown-e.touches[0].clientY;Math.abs(t)>Math.abs(i)&&this.move(t>0?1:-1),this.xDown=null,this.yDown=null}recalculateItemsPerPage(){this.sliderItemsElement&&(this.itemElementWidth=this.sliderItemsElement.clientWidth,this.sliderItemsElementWidth=(this.sliderItems.length-1)*this.itemElementWidth)}renderDots(){var e;const i=[];for(let a=0;a<(null===(e=this.sliderItems)||void 0===e?void 0:e.length)/this.itemsPerPage;a++)i.push(t("li",{class:a==this.activeIndex?"active":"default",onClick:()=>{this.goTo(a),this.setActive(a)}}));return i}componentDidRender(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.el.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:!0}),this.recalculateItemsPerPage()}componentDidUpdate(){this.recalculateItemsPerPage()}connectedCallback(){window.screen.orientation.addEventListener("change",this.orientationChangeHandler)}disconnectedCallback(){this.el.removeEventListener("touchstart",this.handleTouchStart),this.el.removeEventListener("touchmove",this.handleTouchMove),window.screen.orientation.removeEventListener("change",this.orientationChangeHandler),window.removeEventListener("resize",this.resizeHandler)}render(){var e;const i={transform:`translate(${this.sliderItemsElementWidth/((null===(e=this.sliderItems)||void 0===e?void 0:e.length)-1)*this.activeIndex*-1}px, 0px)`},a={width:this.itemElementWidth/this.itemsPerPage+"px"};return t("div",{key:"3740bd5b367f4e24f0b4391dc7f25c63ccb12958",class:"SliderWrapper"},t("div",{key:"6aac842f54de59cea8b2f2655e8408a8778702d4",class:"MainContent "},this.showSliderArrows&&t("div",{key:"94de38b6a631824bbe15964d70377639af769917",class:`SliderNavButton LeftArrow ${0===this.activeIndex?"DisabledArrow ":""} ${1===this.sliderItems.length?"HiddenArrow ":""}`,onClick:()=>this.move(-1)},t("svg",{key:"382d3d0c54932b359b2be4b9ed8c3db3c6da49ec",fill:"none",stroke:"var(--emw--color-secondary, #FD2839)",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"9b4d592aa650ddff2fbd8625a8b0a5d1b604c723","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}))),t("div",{key:"b3ec493624a11931eb48e44eb620373b2613d0a8",class:"ItemsWrapper",ref:e=>this.sliderItemsElement=e},t("div",{key:"724e11f1b3899c0f4bb179fff9b60f40c363e7f1",class:"Items AssetsItems",style:i},this.sliderItems.map((e=>t("img",{class:`img${this.itemsPerPage}`,alt:"Gift Thumbnails",style:a,src:e}))))),this.showSliderArrows&&t("div",{key:"2791a14781f73619c122401a97a9833e33787282",class:`SliderNavButton RightArrow  ${1===this.sliderItems.length?"HiddenArrow ":""}\n                      ${this.activeIndex===this.sliderItems.length-1||this.itemsPerPage==this.sliderItems.length?"DisabledArrow":""}`,onClick:()=>this.move(1)},t("svg",{key:"3810b14f2a0fc436601186335a01b7af90aabab5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"18178c52a74cf77c856f65b6f377a350fc672db8","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"})))),this.showSliderDots&&this.sliderItems.length>1&&t("div",{key:"83964fb11e6728adb065958ebfbf17902e301b2e",class:"DotsWrapper"},t("ul",{key:"cafab68d463e25a0847306314c64041bc3f107f7",class:"Dots"},this.renderDots())))}get el(){return i(this)}},r={en:{coins:"Coins",noGiftPresentation:"No description",redeemGift:"Redeem Gift",noDataFound:"No data found",error4003:"Invalid Session",redeemFailed:"Failed to redeem",back:"Back"},tr:{coins:"Coin",noGiftPresentation:"Açıklama yok",redeemGift:"Hediye Al",noDataFound:"Veri bulunamadı",error4003:"Geçersiz Oturum",redeemFailed:"Kullanım başarısız",back:"Geri"},ro:{coins:"Coins",noGiftPresentation:"No description",redeemGift:"Redeem Gift",noDataFound:"No data found",error4003:"Invalid Session",redeemFailed:"Failed to redeem",back:"Back"},fr:{coins:"Coins",noGiftPresentation:"No description",redeemGift:"Redeem Gift",noDataFound:"No data found",error4003:"Invalid Session",redeemFailed:"Failed to redeem",back:"Back"},ar:{coins:"Coins",noGiftPresentation:"No description",redeemGift:"Redeem Gift",noDataFound:"No data found",error4003:"Invalid Session",redeemFailed:"Failed to redeem",back:"Back"},hu:{coins:"Coins",noGiftPresentation:"No description",redeemGift:"Redeem Gift",noDataFound:"No data found",error4003:"Invalid Session",redeemFailed:"Failed to redeem",back:"Back"}},d=(e,t)=>r[t||"en"][e]||r.en[e],l=class{constructor(t){e(this,t),this.redeemGiftButton=a(this,"redeemGiftButton",7),this.bindedHandler=this.handleMessage.bind(this),this.deviceType=(()=>{const e=(()=>{let e=window.navigator.userAgent;return e.toLowerCase().match(/android/i)?"Android":e.toLowerCase().match(/iphone/i)?"iPhone":e.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(e)return"PC"===e?"dk":"iPad"===e||"iPhone"===e?"ios":"mtWeb"})(),this.endpoint=void 0,this.language="en",this.itemId=void 0,this.elevateGift=void 0,this.session=void 0,this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.showSliderDots=!1,this.showSliderArrows=!0,this.isGiftNotFound=!1,this.redeemErrorMsg="",this.isRedeeming=!1}redeemGiftConfirm(){this.isRedeeming||"true"!=this.elevateGift.available||window.postMessage({type:"BEERedeemConfirm",shopItem:this.elevateGift},window.location.href)}handleMessage(e){e.data&&"bee-redeem-confirmed"===e.data.type&&e.data.id==this.elevateGift.id&&this.redeemGift()}onBackClicked(){window.postMessage({type:"OnGiftDetailsBackButtonClicked"},window.location.href)}redeemGift(){if("false"===this.elevateGift.available.toLowerCase()||this.isRedeeming)return;let e=new URL(`${this.endpoint}/v1/elevate/redeem`),t={method:"PUT",headers:{"x-SessionId":this.session,"Content-Type":"application/json-patch+json"},body:JSON.stringify({giftId:this.elevateGift.id})};this.redeemErrorMsg="",this.isRedeeming=!0,fetch(e.toString(),t).then((e=>e.json())).then((e=>{if(e.success)this.redeemGiftButton.emit(),window.postMessage({type:"BEEGiftRedeem",itemId:this.elevateGift.id},window.location.href);else{let t=d(`error${e.errorCode}`,this.language);this.redeemErrorMsg=t||d("redeemFailed",this.language),window.postMessage({type:"BEEGiftRedeemFailed",itemId:this.elevateGift.id,res:e},window.location.href)}})).catch((e=>{window.postMessage({type:"BEEGiftClaimFailed",itemId:this.elevateGift.id,err:e},window.location.href)})).finally((()=>{this.isRedeeming=!1}))}async loadElevateGift(){let e=new URL(`${this.endpoint}/v1/elevate/shop?language=${this.language}&filter=id=${this.itemId}`),t={headers:{"Content-Type":"application/json","x-SessionId":this.session},method:"GET"};await new Promise((i=>{fetch(e.href,t).then((e=>e.json())).then((e=>{let t=e.data;t&&1==t.length?(this.elevateGift=t[0],this.isGiftNotFound=!1):this.isGiftNotFound=!0,i(!0)}))}))}disconnectedCallback(){window.removeEventListener("message",this.bindedHandler,!1)}componentDidLoad(){window.addEventListener("message",this.bindedHandler,!1)}async componentWillLoad(){var e;this.translationUrl.length>2&&await(e=this.translationUrl,new Promise((t=>{fetch(e).then((e=>e.json())).then((e=>{Object.keys(e).forEach((t=>{r[t]=r[t]||{};for(let i in e[t])r[t][i]=e[t][i]})),t(!0)})).catch((e=>{console.error("Failed to load translations:",e),t(!1)}))}))),this.elevateGift?this.isGiftNotFound=!1:await this.loadElevateGift()}render(){return t(o,{key:"059f0eb449e36b30ce271306a9faf85b79197f36"},t("general-styling-wrapper",{key:"4b857c7d532d288c660fc9b9cfc28c17ba80c400",clientStylingUrl:this.clientStylingUrl,clientStyling:this.clientStyling,mbSource:this.mbSource}),t("div",{key:"b400e365431afc6af40c11010b708a72525d4af6",class:"ElevateDetails"},this.isGiftNotFound&&t(s,{key:"93a532a9d25137fe02aca600c98237f08dbc5347"},t("div",{key:"b423b7b20c4e6829ecd5cf53ab860b909ac639d5",class:"Row ThumbnailRow"},t("div",{key:"eaafe445f831699a1f4a22bc951a68e211bc1eb1",class:"BackButton",onClick:()=>{this.onBackClicked()}},t("span",{key:"70105de7173a933b921bd4a78c62c4d6e5cf847e",class:"BackArrow",innerHTML:"<"}),t("span",{key:"d695e223a899ae130355d5ee083a622b7cf131dd",class:"BackTxt"}," ",d("back",this.language)," "))),t("div",{key:"f9624e689b03b06c0937f81821ff4e00c0911851",class:"Thumnails GiftNotFound"},d("noDataFound",this.language),".")),this.elevateGift&&t(s,{key:"5c104bba7cd29706418cffa9ffdd20d13714bf2a"},t("div",{key:"c100262b2d4547e1a81108426fa07e6a66e8f560",class:"ThumbnailRow"},t("div",{key:"bf573c9685c7afe71239faced77bfaef4fab2a37",class:"Row"},t("div",{key:"10ff56e0df5eca9792428fc5279a79d79f619c56",class:"BackButton",onClick:()=>{this.onBackClicked()}},t("span",{key:"899bbe9f1288b49743d51f4afec8b9237052b7f1",class:"BackArrow",innerHTML:"<"}),t("span",{key:"f4dd1b849114f4fd9743b6726394aacf444a6e7b",class:"BackTxt"}," ",d("back",this.language)," ")),t("bonus-elevate-shop-assets-slider",{key:"b11de8226e28e3038e70615093e07dd7ae896730",class:"Thumbnails",itemsPerPage:1,sliderItems:this.elevateGift.presentation.assets,showSliderDots:this.showSliderDots})),t("div",{key:"4084bea351593009e0a3a9dd3e3cb70b9d1a864c",class:"Col Details"},t("h3",{key:"2346e29ead91d6ace97f99fa768c46db704d1ab9",class:"GiftName"},this.elevateGift.presentation.displayName||this.elevateGift.displayName),t("div",{key:"835a0b059b2c0399cdb442a8376b0ef8ddf1c9e2",class:"GiftPoints"},t("span",{key:"73afb596b3b493736e67c3b62207b2dc7dbc27d9",class:"Points"},this.elevateGift.points," "),t("span",{key:"7a484d65195a5e6e32b079ca31410eefd239a240",class:" PointsLabel"},d("coins",this.language))))),t("div",{key:"f318deaf612752dc61b49e57b5751755800291ea",class:"ShopItemDetail Details"},t("div",{key:"2a7b77649b74baad93816eabf8413d0b45930f83",class:"GiftPresentation"},t("p",{key:"3ce1a1a6adb36127b3526e005a3ac49349349bfd"},this.elevateGift.presentation.description?this.elevateGift.presentation.description:d("noGiftPresentation",this.language))),t("div",{key:"e8f61acba748c582288e2053f61c7efc754bb8f9",class:`RedeemButton ${"false"===this.elevateGift.available||this.isRedeeming?"Disabled deactive":" active "}\n                ${"dk"==this.deviceType?"DkButton":""}`,onClick:this.redeemGiftConfirm.bind(this)},d("redeemGift",this.language)),t("span",{key:"8cfe770fbbe29d1aebab26826146590cc1ecd177",class:"RedeemError Error"}," ",this.redeemErrorMsg," ")))))}};function c(e,t){if(e){const i=document.createElement("style");i.innerHTML=t,e.appendChild(i)}}function h(e,t){if(!e||!t)return;const i=new URL(t);fetch(i.href).then((e=>e.text())).then((t=>{const i=document.createElement("style");i.innerHTML=t,e&&e.appendChild(i)})).catch((e=>{console.error("There was an error while trying to load client styling from URL",e)}))}l.style=":host{display:block}.ElevateDetails{display:flex;flex-direction:row;flex-wrap:wrap;padding:10px;width:calc(100% - 20px);}.ElevateDetails .RedeemError{display:none}.ElevateDetails .Error{color:var(--emw--color-error, #FD2839)}.ElevateDetails .Row{flex-direction:row;display:flex}.ElevateDetails .Col{flex-direction:column;display:flex}.ElevateDetails .Details{padding:20px}.ElevateDetails .ThumbnailRow{display:flex;flex-direction:column;justify-content:space-between;min-width:268px;max-width:398px}.ElevateDetails .ThumbnailRow .BackButton{width:100px;height:20px;padding:5px;background:white;box-shadow:0px 4px 40px 0px rgba(138, 149, 158, 0.2);margin:10px 0 10px;cursor:pointer;animation-timing-function:ease-out;animation-duration:300ms;transition-property:all;border:1px solid #e4e6e8;border-radius:5px;text-align:center}.ElevateDetails .ThumbnailRow .BackButton:hover{background:rgb(227, 222, 222)}.ElevateDetails .ThumbnailRow .Thumbnails{display:flex;flex-direction:column;position:relative;width:calc(100% - 40px)}.ElevateDetails .ShopItemDetail{flex-grow:1;min-width:300px}.ElevateDetails .GiftPoints .Points{font-size:21px}.ElevateDetails .GiftPoints .PointsLabel{font-size:12px;color:var(--emw--color-gray-300, rgb(78, 90, 55));font-weight:400;line-height:29px;letter-spacing:0.04em;text-align:left}.ElevateDetails .RedeemButton{width:150px;padding:5px 0px;border:2px solid var(--emw--button-border-color, rgba(8, 59, 23, 0.1098039216));text-align:center;color:var(--emw--button-typography, var(--emw--color-white, #FFFFFF));font-size:var(--emw--font-size-small, 12px);font-weight:var(--emw--font-weight-bold, 700);line-height:var(--emw--font-size-medium, 14px);text-transform:uppercase;border-radius:var(--emw--border-radius-medium, 10px)}.ElevateDetails .RedeemButton.active{background:var(--emw--color-primary, #18CE51)}.ElevateDetails .RedeemButton.active:hover{background:var(--mmw--color-main-button-hover, #24B24E)}.ElevateDetails .RedeemButton.deactive,.ElevateDetails .RedeemButton.disabled{background:var(--mmw--color-disabled, rgba(153, 153, 153, 0.5019607843))}.ElevateDetails .SliderWrapper{display:flex;flex-direction:column;position:relative;width:calc(100% - 40px)}.ElevateDetails .SliderWrapper .MainContent{display:flex;flex-direction:row;justify-content:space-around}.ElevateDetails .SliderWrapper .MainContent .LeftArrow,.ElevateDetails .SliderWrapper .MainContent .RightArrow{width:20px}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper{overflow:hidden;display:inline-flex;width:calc(100% - 40px);flex-direction:column}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper .Items{display:inline-flex;transition:transform 0.4s ease-in-out;transform:translateX(0px);margin:auto}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img.img2{width:50%}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img.img3{width:30%}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img,.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img.img1{max-width:100%;background:rgb(239, 239, 239);border:1px solid rgb(239, 239, 239);border-radius:18px;border:1px;margin:10px 0 10px}.ElevateDetails .SliderWrapper .DotsWrapper{width:100%;margin:0 auto;height:30px}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots{display:flex;justify-content:center;padding:0}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li{height:10px;width:10px;background:#ccc;border-radius:50%;margin-left:3px;margin-right:3px;list-style:none;cursor:pointer}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li:hover{background:#bbb}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li.active{border:solid 1px var(--emw--color-secondary, #FD2839);background:var(--emw--color-secondary, #FD2839)}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li.default{border:solid 1px var(--emw--color-secondary, #FD2839);background-color:#FFF}.ElevateDetails .SliderNavButton{border:0px;width:25px;display:flex;align-items:center;justify-content:center;cursor:pointer}.ElevateDetails .SliderNavButton.HiddenArrow{visibility:hidden}.ElevateDetails .SliderNavButton svg{width:20px;stroke:var(--emw--color-secondary, #FD2839)}.ElevateDetails .DisabledArrow svg{opacity:0.2;stroke:var(--emw--color-secondary, #FD2839);pointer-events:none}";const f=class{constructor(t){e(this,t),this.stylingAppends=!1,this.clientStyling="",this.clientStylingUrl="",this.mbSource=void 0,this.translationUrl="",this.targetTranslations=void 0}componentDidLoad(){this.el&&(null!=window.emMessageBus?function(e,t){if(window.emMessageBus){const i=document.createElement("style");window.emMessageBus.subscribe(t,(t=>{i.innerHTML=t,e&&e.appendChild(i)}))}}(this.el,`${this.mbSource}.Style`):(this.clientStyling&&c(this.el,this.clientStyling),this.clientStylingUrl&&h(this.el,this.clientStylingUrl),this.stylingAppends=!0))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}handleClientStylingChange(e,t){e!=t&&c(this.el,this.clientStyling)}handleClientStylingUrlChange(e,t){e!=t&&this.clientStylingUrl&&h(this.el,this.clientStylingUrl)}componentDidRender(){this.stylingAppends||(this.clientStyling&&c(this.el,this.clientStyling),this.clientStylingUrl&&h(this.el,this.clientStylingUrl),this.stylingAppends=!0)}async componentWillLoad(){const e=[];if(this.translationUrl){const a=(t=this.translationUrl,i=this.targetTranslations,new Promise((e=>{fetch(t).then((e=>e.json())).then((t=>{Object.keys(t).forEach((e=>{i[e]=i[e]||{},Object.keys(t[e]).forEach((a=>{if(!i.en[a])return;const s=i.en[a];"object"==typeof t[e][a]?(i[e][a]=i[e][a]||Object.assign({},s),Object.keys(t[e][a]).forEach((s=>{i[e][a][s]=t[e][a][s]}))):i[e][a]=t[e][a]||Object.assign({},s)}))})),e(!0)})).catch((t=>{console.error("Failed to load translations:",t),e(!1)}))})));e.push(a)}var t,i;return await Promise.all(e)}render(){return t("div",{key:"09ad83748bbad518743c8671b986c541c52bf3f0",class:"StyleShell"},t("slot",{key:"3b28b776d3944410c717b002b70946d274a4e8e7",name:"mainContent"}))}get el(){return i(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"]}}};f.style=":host{display:block}";export{n as bonus_elevate_shop_assets_slider,l as bonus_elevate_shop_item,f as general_styling_wrapper}
+import{r as e,h as t,g as i,c as a,F as s,H as o}from"./index-fca048d8.js";const n=class{constructor(t){e(this,t),this.xDown=null,this.yDown=null,this.orientationChangeHandler=()=>{setTimeout((()=>{this.recalculateItemsPerPage()}),10)},this.resizeHandler=()=>{this.recalculateItemsPerPage()},this.showSliderDots=!1,this.showSliderArrows=!0,this.itemsPerPage=1,this.sliderItems=[],this.activeIndex=0}setActive(e){var t;const i=null===(t=this.sliderItems)||void 0===t?void 0:t.length;this.activeIndex=e>=0?e>=i-1?i-1:e:0}move(e){this.setActive(this.activeIndex+e)}goTo(e){let t=this.activeIndex-e;if(t>0)for(let e=0;e<t;e++)this.move(-1);else for(let e=0;e>t;e--)this.move(1)}handleTouchStart(e){const t=this.getTouches(e)[0];this.xDown=t.clientX,this.yDown=t.clientY}getTouches(e){return e.touches||e.originalEvent.touches}handleTouchMove(e){if(!this.xDown||!this.yDown)return;let t=this.xDown-e.touches[0].clientX,i=this.yDown-e.touches[0].clientY;Math.abs(t)>Math.abs(i)&&this.move(t>0?1:-1),this.xDown=null,this.yDown=null}recalculateItemsPerPage(){this.sliderItemsElement&&(this.itemElementWidth=this.sliderItemsElement.clientWidth,this.sliderItemsElementWidth=(this.sliderItems.length-1)*this.itemElementWidth)}renderDots(){var e;const i=[];for(let a=0;a<(null===(e=this.sliderItems)||void 0===e?void 0:e.length)/this.itemsPerPage;a++)i.push(t("li",{class:a==this.activeIndex?"active":"default",onClick:()=>{this.goTo(a),this.setActive(a)}}));return i}componentDidRender(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.el.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:!0}),this.recalculateItemsPerPage()}componentDidUpdate(){this.recalculateItemsPerPage()}connectedCallback(){window.screen.orientation.addEventListener("change",this.orientationChangeHandler)}disconnectedCallback(){this.el.removeEventListener("touchstart",this.handleTouchStart),this.el.removeEventListener("touchmove",this.handleTouchMove),window.screen.orientation.removeEventListener("change",this.orientationChangeHandler),window.removeEventListener("resize",this.resizeHandler)}render(){var e;const i={transform:`translate(${this.sliderItemsElementWidth/((null===(e=this.sliderItems)||void 0===e?void 0:e.length)-1)*this.activeIndex*-1}px, 0px)`},a={width:this.itemElementWidth/this.itemsPerPage+"px"};return t("div",{key:"3740bd5b367f4e24f0b4391dc7f25c63ccb12958",class:"SliderWrapper"},t("div",{key:"6aac842f54de59cea8b2f2655e8408a8778702d4",class:"MainContent "},this.showSliderArrows&&t("div",{key:"94de38b6a631824bbe15964d70377639af769917",class:`SliderNavButton LeftArrow ${0===this.activeIndex?"DisabledArrow ":""} ${1===this.sliderItems.length?"HiddenArrow ":""}`,onClick:()=>this.move(-1)},t("svg",{key:"382d3d0c54932b359b2be4b9ed8c3db3c6da49ec",fill:"none",stroke:"var(--emw--color-secondary, #FD2839)",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"9b4d592aa650ddff2fbd8625a8b0a5d1b604c723","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}))),t("div",{key:"b3ec493624a11931eb48e44eb620373b2613d0a8",class:"ItemsWrapper",ref:e=>this.sliderItemsElement=e},t("div",{key:"724e11f1b3899c0f4bb179fff9b60f40c363e7f1",class:"Items AssetsItems",style:i},this.sliderItems.map((e=>t("img",{class:`img${this.itemsPerPage}`,alt:"Gift Thumbnails",style:a,src:e}))))),this.showSliderArrows&&t("div",{key:"2791a14781f73619c122401a97a9833e33787282",class:`SliderNavButton RightArrow  ${1===this.sliderItems.length?"HiddenArrow ":""}\n                      ${this.activeIndex===this.sliderItems.length-1||this.itemsPerPage==this.sliderItems.length?"DisabledArrow":""}`,onClick:()=>this.move(1)},t("svg",{key:"3810b14f2a0fc436601186335a01b7af90aabab5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"18178c52a74cf77c856f65b6f377a350fc672db8","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"})))),this.showSliderDots&&this.sliderItems.length>1&&t("div",{key:"83964fb11e6728adb065958ebfbf17902e301b2e",class:"DotsWrapper"},t("ul",{key:"cafab68d463e25a0847306314c64041bc3f107f7",class:"Dots"},this.renderDots())))}get el(){return i(this)}},r={en:{coins:"Coins",noGiftPresentation:"No description",redeemGift:"Redeem Gift",noDataFound:"No data found",error4003:"Invalid Session",redeemFailed:"Failed to redeem",back:"Back"},tr:{coins:"Coin",noGiftPresentation:"Açıklama yok",redeemGift:"Hediye Al",noDataFound:"Veri bulunamadı",error4003:"Geçersiz Oturum",redeemFailed:"Kullanım başarısız",back:"Geri"},ro:{coins:"Coins",noGiftPresentation:"No description",redeemGift:"Redeem Gift",noDataFound:"No data found",error4003:"Invalid Session",redeemFailed:"Failed to redeem",back:"Back"},fr:{coins:"Coins",noGiftPresentation:"No description",redeemGift:"Redeem Gift",noDataFound:"No data found",error4003:"Invalid Session",redeemFailed:"Failed to redeem",back:"Back"},ar:{coins:"Coins",noGiftPresentation:"No description",redeemGift:"Redeem Gift",noDataFound:"No data found",error4003:"Invalid Session",redeemFailed:"Failed to redeem",back:"Back"},hu:{coins:"Coins",noGiftPresentation:"No description",redeemGift:"Redeem Gift",noDataFound:"No data found",error4003:"Invalid Session",redeemFailed:"Failed to redeem",back:"Back"}},d=(e,t)=>r[t||"en"][e]||r.en[e],l=class{constructor(t){e(this,t),this.redeemGiftButton=a(this,"redeemGiftButton",7),this.bindedHandler=this.handleMessage.bind(this),this.deviceType=(()=>{const e=(()=>{let e=window.navigator.userAgent;return e.toLowerCase().match(/android/i)?"Android":e.toLowerCase().match(/iphone/i)?"iPhone":e.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(e)return"PC"===e?"dk":"iPad"===e||"iPhone"===e?"ios":"mtWeb"})(),this.endpoint=void 0,this.language="en",this.itemId=void 0,this.elevateGift=void 0,this.session=void 0,this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.showSliderDots=!1,this.showSliderArrows=!0,this.isGiftNotFound=!1,this.redeemErrorMsg="",this.isRedeeming=!1}redeemGiftConfirm(){this.isRedeeming||"true"!=this.elevateGift.available||window.postMessage({type:"BEERedeemConfirm",shopItem:this.elevateGift},window.location.href)}handleMessage(e){e.data&&"bee-redeem-confirmed"===e.data.type&&e.data.id==this.elevateGift.id&&this.redeemGift()}onBackClicked(){window.postMessage({type:"OnGiftDetailsBackButtonClicked"},window.location.href)}redeemGift(){if("false"===this.elevateGift.available.toLowerCase()||this.isRedeeming)return;let e=new URL(`${this.endpoint}/v1/elevate/redeem`),t={method:"PUT",headers:{"x-SessionId":this.session,"Content-Type":"application/json-patch+json"},body:JSON.stringify({giftId:this.elevateGift.id})};this.redeemErrorMsg="",this.isRedeeming=!0,fetch(e.toString(),t).then((e=>e.json())).then((e=>{if(e.success)this.redeemGiftButton.emit(),window.postMessage({type:"BEEGiftRedeem",itemId:this.elevateGift.id},window.location.href);else{let t=d(`error${e.errorCode}`,this.language);this.redeemErrorMsg=t||d("redeemFailed",this.language),window.postMessage({type:"BEEGiftRedeemFailed",itemId:this.elevateGift.id,res:e},window.location.href)}})).catch((e=>{window.postMessage({type:"BEEGiftClaimFailed",itemId:this.elevateGift.id,err:e},window.location.href)})).finally((()=>{this.isRedeeming=!1}))}async loadElevateGift(){let e=new URL(`${this.endpoint}/v1/elevate/shop?language=${this.language}&filter=id=${this.itemId}`),t={headers:{"Content-Type":"application/json","x-SessionId":this.session},method:"GET"};await new Promise((i=>{fetch(e.href,t).then((e=>e.json())).then((e=>{let t=e.data;t&&1==t.length?(this.elevateGift=t[0],this.isGiftNotFound=!1):this.isGiftNotFound=!0,i(!0)}))}))}disconnectedCallback(){window.removeEventListener("message",this.bindedHandler,!1)}componentDidLoad(){window.addEventListener("message",this.bindedHandler,!1)}async componentWillLoad(){var e;this.translationUrl.length>2&&await(e=this.translationUrl,new Promise((t=>{fetch(e).then((e=>e.json())).then((e=>{Object.keys(e).forEach((t=>{r[t]=r[t]||{};for(let i in e[t])r[t][i]=e[t][i]})),t(!0)})).catch((e=>{console.error("Failed to load translations:",e),t(!1)}))}))),this.elevateGift?this.isGiftNotFound=!1:await this.loadElevateGift()}render(){return t(o,{key:"059f0eb449e36b30ce271306a9faf85b79197f36"},t("general-styling-wrapper",{key:"4b857c7d532d288c660fc9b9cfc28c17ba80c400",clientStylingUrl:this.clientStylingUrl,clientStyling:this.clientStyling,mbSource:this.mbSource}),t("div",{key:"b400e365431afc6af40c11010b708a72525d4af6",class:"ElevateDetails"},this.isGiftNotFound&&t(s,{key:"93a532a9d25137fe02aca600c98237f08dbc5347"},t("div",{key:"b423b7b20c4e6829ecd5cf53ab860b909ac639d5",class:"Row ThumbnailRow"},t("div",{key:"eaafe445f831699a1f4a22bc951a68e211bc1eb1",class:"BackButton",onClick:()=>{this.onBackClicked()}},t("span",{key:"70105de7173a933b921bd4a78c62c4d6e5cf847e",class:"BackArrow",innerHTML:"<"}),t("span",{key:"d695e223a899ae130355d5ee083a622b7cf131dd",class:"BackTxt"}," ",d("back",this.language)," "))),t("div",{key:"f9624e689b03b06c0937f81821ff4e00c0911851",class:"Thumnails GiftNotFound"},d("noDataFound",this.language),".")),this.elevateGift&&t(s,{key:"5c104bba7cd29706418cffa9ffdd20d13714bf2a"},t("div",{key:"c100262b2d4547e1a81108426fa07e6a66e8f560",class:"ThumbnailRow"},t("div",{key:"bf573c9685c7afe71239faced77bfaef4fab2a37",class:"Row"},t("div",{key:"10ff56e0df5eca9792428fc5279a79d79f619c56",class:"BackButton",onClick:()=>{this.onBackClicked()}},t("span",{key:"899bbe9f1288b49743d51f4afec8b9237052b7f1",class:"BackArrow",innerHTML:"<"}),t("span",{key:"f4dd1b849114f4fd9743b6726394aacf444a6e7b",class:"BackTxt"}," ",d("back",this.language)," ")),t("bonus-elevate-shop-assets-slider",{key:"b11de8226e28e3038e70615093e07dd7ae896730",class:"Thumbnails",itemsPerPage:1,sliderItems:this.elevateGift.presentation.assets,showSliderDots:this.showSliderDots})),t("div",{key:"4084bea351593009e0a3a9dd3e3cb70b9d1a864c",class:"Col Details"},t("h3",{key:"2346e29ead91d6ace97f99fa768c46db704d1ab9",class:"GiftName"},this.elevateGift.presentation.displayName||this.elevateGift.displayName),t("div",{key:"835a0b059b2c0399cdb442a8376b0ef8ddf1c9e2",class:"GiftPoints"},t("span",{key:"73afb596b3b493736e67c3b62207b2dc7dbc27d9",class:"Points"},this.elevateGift.points," "),t("span",{key:"7a484d65195a5e6e32b079ca31410eefd239a240",class:" PointsLabel"},d("coins",this.language))))),t("div",{key:"f318deaf612752dc61b49e57b5751755800291ea",class:"ShopItemDetail Details"},t("div",{key:"2a7b77649b74baad93816eabf8413d0b45930f83",class:"GiftPresentation"},t("p",{key:"3ce1a1a6adb36127b3526e005a3ac49349349bfd"},this.elevateGift.presentation.description?this.elevateGift.presentation.description:d("noGiftPresentation",this.language))),t("div",{key:"e8f61acba748c582288e2053f61c7efc754bb8f9",class:`RedeemButton ${"false"===this.elevateGift.available||this.isRedeeming?"Disabled deactive":" active "}\n                ${"dk"==this.deviceType?"DkButton":""}`,onClick:this.redeemGiftConfirm.bind(this)},d("redeemGift",this.language)),t("span",{key:"8cfe770fbbe29d1aebab26826146590cc1ecd177",class:"RedeemError Error"}," ",this.redeemErrorMsg," ")))))}};l.style=":host{display:block}.ElevateDetails{display:flex;flex-direction:row;flex-wrap:wrap;padding:10px;width:calc(100% - 20px);}.ElevateDetails .RedeemError{display:none}.ElevateDetails .Error{color:var(--emw--color-error, #FD2839)}.ElevateDetails .Row{flex-direction:row;display:flex}.ElevateDetails .Col{flex-direction:column;display:flex}.ElevateDetails .Details{padding:20px}.ElevateDetails .ThumbnailRow{display:flex;flex-direction:column;justify-content:space-between;min-width:268px;max-width:398px}.ElevateDetails .ThumbnailRow .BackButton{width:100px;height:20px;padding:5px;background:white;box-shadow:0px 4px 40px 0px rgba(138, 149, 158, 0.2);margin:10px 0 10px;cursor:pointer;animation-timing-function:ease-out;animation-duration:300ms;transition-property:all;border:1px solid #e4e6e8;border-radius:5px;text-align:center}.ElevateDetails .ThumbnailRow .BackButton:hover{background:rgb(227, 222, 222)}.ElevateDetails .ThumbnailRow .Thumbnails{display:flex;flex-direction:column;position:relative;width:calc(100% - 40px)}.ElevateDetails .ShopItemDetail{flex-grow:1;min-width:300px}.ElevateDetails .GiftPoints .Points{font-size:21px}.ElevateDetails .GiftPoints .PointsLabel{font-size:12px;color:var(--emw--color-gray-300, rgb(78, 90, 55));font-weight:400;line-height:29px;letter-spacing:0.04em;text-align:left}.ElevateDetails .RedeemButton{width:150px;padding:5px 0px;border:2px solid var(--emw--button-border-color, rgba(8, 59, 23, 0.1098039216));text-align:center;color:var(--emw--button-typography, var(--emw--color-white, #FFFFFF));font-size:var(--emw--font-size-small, 12px);font-weight:var(--emw--font-weight-bold, 700);line-height:var(--emw--font-size-medium, 14px);text-transform:uppercase;border-radius:var(--emw--border-radius-medium, 10px)}.ElevateDetails .RedeemButton.active{background:var(--emw--color-primary, #18CE51)}.ElevateDetails .RedeemButton.active:hover{background:var(--mmw--color-main-button-hover, #24B24E)}.ElevateDetails .RedeemButton.deactive,.ElevateDetails .RedeemButton.disabled{background:var(--mmw--color-disabled, rgba(153, 153, 153, 0.5019607843))}.ElevateDetails .SliderWrapper{display:flex;flex-direction:column;position:relative;width:calc(100% - 40px)}.ElevateDetails .SliderWrapper .MainContent{display:flex;flex-direction:row;justify-content:space-around}.ElevateDetails .SliderWrapper .MainContent .LeftArrow,.ElevateDetails .SliderWrapper .MainContent .RightArrow{width:20px}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper{overflow:hidden;display:inline-flex;width:calc(100% - 40px);flex-direction:column}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper .Items{display:inline-flex;transition:transform 0.4s ease-in-out;transform:translateX(0px);margin:auto}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img.img2{width:50%}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img.img3{width:30%}.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img,.ElevateDetails .SliderWrapper .MainContent .ItemsWrapper img.img1{max-width:100%;background:rgb(239, 239, 239);border:1px solid rgb(239, 239, 239);border-radius:18px;border:1px;margin:10px 0 10px}.ElevateDetails .SliderWrapper .DotsWrapper{width:100%;margin:0 auto;height:30px}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots{display:flex;justify-content:center;padding:0}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li{height:10px;width:10px;background:#ccc;border-radius:50%;margin-left:3px;margin-right:3px;list-style:none;cursor:pointer}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li:hover{background:#bbb}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li.active{border:solid 1px var(--emw--color-secondary, #FD2839);background:var(--emw--color-secondary, #FD2839)}.ElevateDetails .SliderWrapper .DotsWrapper ul.Dots li.default{border:solid 1px var(--emw--color-secondary, #FD2839);background-color:#FFF}.ElevateDetails .SliderNavButton{border:0px;width:25px;display:flex;align-items:center;justify-content:center;cursor:pointer}.ElevateDetails .SliderNavButton.HiddenArrow{visibility:hidden}.ElevateDetails .SliderNavButton svg{width:20px;stroke:var(--emw--color-secondary, #FD2839)}.ElevateDetails .DisabledArrow svg{opacity:0.2;stroke:var(--emw--color-secondary, #FD2839);pointer-events:none}";const c="__WIDGET_GLOBAL_STYLE_CACHE__";function h(e,t){if(e){const i=document.createElement("style");i.innerHTML=t,e.appendChild(i)}}function f(e,t){if(!e||!t)return;const i=new URL(t);fetch(i.href).then((e=>e.text())).then((t=>{const i=document.createElement("style");i.innerHTML=t,e&&e.appendChild(i)})).catch((e=>{console.error("There was an error while trying to load client styling from URL",e)}))}const p=class{constructor(t){e(this,t),this.stylingAppends=!1,this.clientStyling="",this.clientStylingUrl="",this.mbSource=void 0,this.translationUrl="",this.targetTranslations=void 0}componentDidLoad(){this.el&&(null!=window.emMessageBus?function(e,t,i,a=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!a)return function(e,t){const i=document.createElement("style");return window.emMessageBus.subscribe(t,(t=>{e&&(i.innerHTML=t,e.appendChild(i))}))}(e,t);window[c]||(window[c]={});const s=(i=function(e,t){return window.emMessageBus.subscribe(t,(i=>{if(!e)return;const a=e.getRootNode(),s=window[c];let o=s[t]?.sheet;o?s[t].refCount=s[t].refCount+1:(o=new CSSStyleSheet,o.replaceSync(i),s[t]={sheet:o,refCount:1});const n=a.adoptedStyleSheets||[];n.includes(o)||(a.adoptedStyleSheets=[...n,o])}))}(e,t)).unsubscribe.bind(i);i.unsubscribe=()=>{if(window[c][t]){const e=window[c][t];e.refCount>1?e.refCount=e.refCount-1:delete window[c][t]}s()}}(this.el,`${this.mbSource}.Style`,this.stylingSubscription):(this.clientStyling&&h(this.el,this.clientStyling),this.clientStylingUrl&&f(this.el,this.clientStylingUrl),this.stylingAppends=!0))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}handleClientStylingChange(e,t){e!=t&&h(this.el,this.clientStyling)}handleClientStylingUrlChange(e,t){e!=t&&this.clientStylingUrl&&f(this.el,this.clientStylingUrl)}componentDidRender(){this.stylingAppends||(this.clientStyling&&h(this.el,this.clientStyling),this.clientStylingUrl&&f(this.el,this.clientStylingUrl),this.stylingAppends=!0)}async componentWillLoad(){const e=[];if(this.translationUrl){const a=(t=this.translationUrl,i=this.targetTranslations,new Promise((e=>{fetch(t).then((e=>e.json())).then((t=>{Object.keys(t).forEach((e=>{i[e]=i[e]||{},Object.keys(t[e]).forEach((a=>{if(!i.en[a])return;const s=i.en[a];"object"==typeof t[e][a]?(i[e][a]=i[e][a]||Object.assign({},s),Object.keys(t[e][a]).forEach((s=>{i[e][a][s]=t[e][a][s]}))):i[e][a]=t[e][a]||Object.assign({},s)}))})),e(!0)})).catch((t=>{console.error("Failed to load translations:",t),e(!1)}))})));e.push(a)}var t,i;return await Promise.all(e)}render(){return t("div",{key:"09ad83748bbad518743c8671b986c541c52bf3f0",class:"StyleShell"},t("slot",{key:"3b28b776d3944410c717b002b70946d274a4e8e7",name:"mainContent"}))}get el(){return i(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"]}}};p.style=":host{display:block}";export{n as bonus_elevate_shop_assets_slider,l as bonus_elevate_shop_item,p as general_styling_wrapper}

package/dist/cjs/bonus-elevate-shop-assets-slider_3.cjs.entry.js

@@ -403,6 +403,8 @@ const mergeTranslations = (url, target) => {
     });
 };
 
+const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
+
 /**
  * @name setClientStyling
  * @description Method used to create and append to the passed element of the widget a style element with the content received
@@ -448,18 +450,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
  * @param {HTMLElement} stylingContainer The highest element of the widget
  * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
  * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
  */
-function setStreamStyling(stylingContainer, domain, subscription) {
-  if (window.emMessageBus) {
-    const sheet = document.createElement('style');
+function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
+  if (!window.emMessageBus) return;
 
-    window.emMessageBus.subscribe(domain, (data) => {
-      sheet.innerHTML = data;
-      if (stylingContainer) {
-        stylingContainer.appendChild(sheet);
-      }
-    });
+  const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
+
+  if (!supportAdoptStyle || !useAdoptedStyleSheets) {
+    subscription = getStyleTagSubscription(stylingContainer, domain);
+
+    return subscription;
+  }
+
+  if (!window[StyleCacheKey]) {
+    window[StyleCacheKey] = {};
   }
+  subscription = getAdoptStyleSubscription(stylingContainer, domain);
+
+  const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
+  const wrappedUnsubscribe = () => {
+    if (window[StyleCacheKey][domain]) {
+      const cachedObject = window[StyleCacheKey][domain];
+      cachedObject.refCount > 1
+        ? (cachedObject.refCount = cachedObject.refCount - 1)
+        : delete window[StyleCacheKey][domain];
+    }
+
+    originalUnsubscribe();
+  };
+  subscription.unsubscribe = wrappedUnsubscribe;
+
+  return subscription;
+}
+
+function getStyleTagSubscription(stylingContainer, domain) {
+  const sheet = document.createElement('style');
+
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (stylingContainer) {
+      sheet.innerHTML = data;
+      stylingContainer.appendChild(sheet);
+    }
+  });
+}
+
+function getAdoptStyleSubscription(stylingContainer, domain) {
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (!stylingContainer) return;
+
+    const shadowRoot = stylingContainer.getRootNode();
+    const cacheStyleObject = window[StyleCacheKey];
+    let cachedStyle = cacheStyleObject[domain]?.sheet;
+
+    if (!cachedStyle) {
+      cachedStyle = new CSSStyleSheet();
+      cachedStyle.replaceSync(data);
+      cacheStyleObject[domain] = {
+        sheet: cachedStyle,
+        refCount: 1
+      };
+    } else {
+      cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
+    }
+
+    const currentSheets = shadowRoot.adoptedStyleSheets || [];
+    if (!currentSheets.includes(cachedStyle)) {
+      shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
+    }
+  });
 }
 
 const generalStylingWrapperCss = ":host{display:block}";
@@ -478,7 +537,7 @@ const GeneralStylingWrapper = class {
     componentDidLoad() {
         if (this.el) {
             if (window.emMessageBus != undefined) {
-                setStreamStyling(this.el, `${this.mbSource}.Style`);
+                setStreamStyling(this.el, `${this.mbSource}.Style`, this.stylingSubscription);
             }
             else {
                 if (this.clientStyling)

package/dist/esm/bonus-elevate-shop-assets-slider_3.entry.js

@@ -399,6 +399,8 @@ const mergeTranslations = (url, target) => {
     });
 };
 
+const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
+
 /**
  * @name setClientStyling
  * @description Method used to create and append to the passed element of the widget a style element with the content received
@@ -444,18 +446,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
  * @param {HTMLElement} stylingContainer The highest element of the widget
  * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
  * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
  */
-function setStreamStyling(stylingContainer, domain, subscription) {
-  if (window.emMessageBus) {
-    const sheet = document.createElement('style');
+function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
+  if (!window.emMessageBus) return;
 
-    window.emMessageBus.subscribe(domain, (data) => {
-      sheet.innerHTML = data;
-      if (stylingContainer) {
-        stylingContainer.appendChild(sheet);
-      }
-    });
+  const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
+
+  if (!supportAdoptStyle || !useAdoptedStyleSheets) {
+    subscription = getStyleTagSubscription(stylingContainer, domain);
+
+    return subscription;
+  }
+
+  if (!window[StyleCacheKey]) {
+    window[StyleCacheKey] = {};
   }
+  subscription = getAdoptStyleSubscription(stylingContainer, domain);
+
+  const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
+  const wrappedUnsubscribe = () => {
+    if (window[StyleCacheKey][domain]) {
+      const cachedObject = window[StyleCacheKey][domain];
+      cachedObject.refCount > 1
+        ? (cachedObject.refCount = cachedObject.refCount - 1)
+        : delete window[StyleCacheKey][domain];
+    }
+
+    originalUnsubscribe();
+  };
+  subscription.unsubscribe = wrappedUnsubscribe;
+
+  return subscription;
+}
+
+function getStyleTagSubscription(stylingContainer, domain) {
+  const sheet = document.createElement('style');
+
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (stylingContainer) {
+      sheet.innerHTML = data;
+      stylingContainer.appendChild(sheet);
+    }
+  });
+}
+
+function getAdoptStyleSubscription(stylingContainer, domain) {
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (!stylingContainer) return;
+
+    const shadowRoot = stylingContainer.getRootNode();
+    const cacheStyleObject = window[StyleCacheKey];
+    let cachedStyle = cacheStyleObject[domain]?.sheet;
+
+    if (!cachedStyle) {
+      cachedStyle = new CSSStyleSheet();
+      cachedStyle.replaceSync(data);
+      cacheStyleObject[domain] = {
+        sheet: cachedStyle,
+        refCount: 1
+      };
+    } else {
+      cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
+    }
+
+    const currentSheets = shadowRoot.adoptedStyleSheets || [];
+    if (!currentSheets.includes(cachedStyle)) {
+      shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
+    }
+  });
 }
 
 const generalStylingWrapperCss = ":host{display:block}";
@@ -474,7 +533,7 @@ const GeneralStylingWrapper = class {
     componentDidLoad() {
         if (this.el) {
             if (window.emMessageBus != undefined) {
-                setStreamStyling(this.el, `${this.mbSource}.Style`);
+                setStreamStyling(this.el, `${this.mbSource}.Style`, this.stylingSubscription);
             }
             else {
                 if (this.clientStyling)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/bonus-elevate-shop-item",
-  "version": "1.87.25",
+  "version": "1.87.27",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",