@everymatrix/bonus-elevate-shop 1.33.3 → 1.33.4

package/dist/bonus-elevate-shop/bonus-elevate-shop.esm.js

@@ -1 +1 @@
-import{p as e,b as l}from"./p-75b51599.js";(()=>{const l=import.meta.url,a={};return""!==l&&(a.resourcesUrl=new URL(".",l).href),e(a)})().then((e=>l([["p-6410647b",[[1,"bonus-elevate-shop",{session:[513],endpoint:[513],language:[513],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],locale:[32],gifts:[32]}],[1,"player-elevate-pointcard",{endpoint:[513],theme:[513],session:[513],playerAvatarUrl:[513,"player-avatar-url"],language:[513],playerName:[513,"player-name"],cardTitle:[513,"card-title"],buttonType:[513,"button-type"],dateFormat:[513,"date-format"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],pointExpireString:[32],playerElevateLevel:[32],elevateWalletTotal:[32],elevateSPTotal:[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[4,"general-styling-wrapper",{clientStyling:[1,"client-styling"],clientStylingUrl:[1,"client-styling-url"],translationUrl:[1,"translation-url"],targetTranslations:[16]}],[0,"player-elevate-card-data",{params:[8],playerElevateLevel:[32],pointExpireString:[32]},[[9,"resize","handleWindowResizs"]]]]],["p-a76542bd",[[1,"player-elevate-card",{endpoint:[513],theme:[513],session:[513],playerAvatarUrl:[513,"player-avatar-url"],language:[513],playerName:[513,"player-name"],dateFormat:[513,"date-format"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],pointExpireString:[32],playerLevelFlag:[32],playerElevateLevel:[32],elevateWalletTotal:[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]],["p-d4f6c446",[[1,"player-elevate-loyaltycard",{endpoint:[513],theme:[513],session:[513],playerAvatarUrl:[513,"player-avatar-url"],language:[513],playerName:[513,"player-name"],dateFormat:[513,"date-format"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],pointExpireString:[32],playerElevateLevel:[32],elevateWalletTotal:[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]]],e)));
+import{p as e,b as l}from"./p-75b51599.js";(()=>{const l=import.meta.url,a={};return""!==l&&(a.resourcesUrl=new URL(".",l).href),e(a)})().then((e=>l([["p-af7bd5bf",[[1,"bonus-elevate-shop",{session:[513],endpoint:[513],language:[513],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],locale:[32],gifts:[32],isLoading:[32]}],[1,"player-elevate-pointcard",{endpoint:[513],theme:[513],session:[513],playerAvatarUrl:[513,"player-avatar-url"],language:[513],playerName:[513,"player-name"],cardTitle:[513,"card-title"],buttonType:[513,"button-type"],dateFormat:[513,"date-format"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],pointExpireString:[32],playerElevateLevel:[32],elevateWalletTotal:[32],elevateSPTotal:[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[4,"general-styling-wrapper",{clientStyling:[1,"client-styling"],clientStylingUrl:[1,"client-styling-url"],translationUrl:[1,"translation-url"],targetTranslations:[16]}],[0,"player-elevate-card-data",{params:[8],playerElevateLevel:[32],pointExpireString:[32]},[[9,"resize","handleWindowResizs"]]]]],["p-a76542bd",[[1,"player-elevate-card",{endpoint:[513],theme:[513],session:[513],playerAvatarUrl:[513,"player-avatar-url"],language:[513],playerName:[513,"player-name"],dateFormat:[513,"date-format"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],pointExpireString:[32],playerLevelFlag:[32],playerElevateLevel:[32],elevateWalletTotal:[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]],["p-d4f6c446",[[1,"player-elevate-loyaltycard",{endpoint:[513],theme:[513],session:[513],playerAvatarUrl:[513,"player-avatar-url"],language:[513],playerName:[513,"player-name"],dateFormat:[513,"date-format"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],pointExpireString:[32],playerElevateLevel:[32],elevateWalletTotal:[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]]],e)));

package/dist/bonus-elevate-shop/p-af7bd5bf.entry.js

@@ -0,0 +1 @@
+import{h as e,r as n,g as t,c as i,a as r,F as a}from"./p-75b51599.js";import"@everymatrix/general-animation-loading";import{r as o,t as l,g as s,a as d,T as c,P as p,b as h,c as f}from"./p-e2f63c46.js";async function g(e,n={},t={}){const{endpoint:i,language:r,session:a}=this,o=n;t.method&&"GET"!==t.method||(o.language=r);const l=((e,n={})=>e+"?"+Object.keys(n).map((e=>`${e}=${n[e]}`)).join("&"))(`${i}${e}`,o);return t.headers||(t.headers={}),t.headers["x-SessionId"]=a,await(async(e,n={})=>{let t;t=await fetch(e,n),t=await t.text();try{t=JSON.parse(t)}catch(e){console.error(e)}return t})(l,t)}const v={en:{Points:"Points",Point:"Point",noContent:"No Content"}},u=(n,t,i)=>e("div",{class:"Gifts FlexLayout"},n.map((n=>{var r;const a=((e,n)=>{switch(e.available){case"true":return{extraClass:" active",onClick:()=>n(e.id),icon:'<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <g filter="url(#filter0_bd_179_6145)">\n    <circle cx="23" cy="19" r="19" style="fill: var(--emfe-w-elevate-avaliable-button-enabled-color, #53B65C);" />\n    <circle cx="23" cy="19" r="18" stroke="url(#paint0_linear_179_6145)" stroke-opacity="0.6" stroke-width="2"/>\n    <circle cx="23" cy="19" r="18" stroke="url(#paint1_linear_179_6145)" stroke-width="2"/>\n    <circle cx="23" cy="19" r="18" stroke="url(#paint2_linear_179_6145)" stroke-width="2"/>\n  </g>\n  <g filter="url(#filter1_d_179_6145)">\n    <path d="M31.1977 11C31.7015 11 32.1279 11.1777 32.4767 11.5332C32.8256 11.8887 33 12.3203 33 12.8281V18.9102C33 20.2852 32.7364 21.5977 32.2093 22.8477C31.6822 24.0977 30.9748 25.1719 30.0872 26.0703C29.1996 26.9688 28.1376 27.6816 26.9012 28.209C25.6647 28.7363 24.3682 29 23.0116 29C21.6473 29 20.3469 28.7363 19.1105 28.209C17.874 27.6816 16.8101 26.9688 15.9186 26.0703C15.0271 25.1719 14.3178 24.0977 13.7907 22.8477C13.2636 21.5977 13 20.2852 13 18.9102V12.8281C13 12.3281 13.1783 11.8984 13.5349 11.5391C13.8915 11.1797 14.3178 11 14.814 11H31.1977ZM23.0116 23.4688C23.376 23.4688 23.6938 23.3398 23.9651 23.082L28.6628 18.5352C28.9496 18.2617 29.093 17.9297 29.093 17.5391C29.093 17.1562 28.9593 16.8301 28.6919 16.5605C28.4244 16.291 28.1008 16.1562 27.7209 16.1562C27.3566 16.1562 27.0388 16.2852 26.7674 16.543L23.0116 20.1758L19.2558 16.543C18.9845 16.2852 18.6705 16.1562 18.314 16.1562C17.9341 16.1562 17.6105 16.291 17.343 16.5605C17.0756 16.8301 16.9419 17.1562 16.9419 17.5391C16.9419 17.9375 17.0814 18.2695 17.3605 18.5352L22.0698 23.082C22.3256 23.3398 22.6395 23.4688 23.0116 23.4688Z" fill="white"/>\n  </g>\n  <defs>\n    <filter id="filter0_bd_179_6145" x="-36" y="-40" width="118" height="118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\n      <feFlood flood-opacity="0" result="BackgroundImageFix"/>\n      <feGaussianBlur in="BackgroundImageFix" stdDeviation="20"/>\n      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_179_6145"/>\n      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>\n      <feOffset dy="4"/>\n      <feGaussianBlur stdDeviation="2"/>\n      <feComposite in2="hardAlpha" operator="out"/>\n      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>\n      <feBlend mode="normal" in2="effect1_backgroundBlur_179_6145" result="effect2_dropShadow_179_6145"/>\n      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_179_6145" result="shape"/>\n    </filter>\n    <filter id="filter1_d_179_6145" x="11" y="10" width="24" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\n      <feFlood flood-opacity="0" result="BackgroundImageFix"/>\n      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>\n      <feOffset dy="1"/>\n      <feGaussianBlur stdDeviation="1"/>\n      <feComposite in2="hardAlpha" operator="out"/>\n      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>\n      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_179_6145"/>\n      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_179_6145" result="shape"/>\n    </filter>\n    <linearGradient id="paint0_linear_179_6145" x1="49.2869" y1="15.1911" x2="36.3103" y2="15.603" gradientUnits="userSpaceOnUse">\n      <stop stop-color="white"/>\n      <stop offset="1" stop-color="#EFEFEF" stop-opacity="0"/>\n    </linearGradient>\n    <linearGradient id="paint1_linear_179_6145" x1="4" y1="0" x2="19.3776" y2="8.17396" gradientUnits="userSpaceOnUse">\n      <stop stop-color="white" stop-opacity="0.5"/>\n      <stop offset="1" stop-color="white" stop-opacity="0"/>\n    </linearGradient>\n    <linearGradient id="paint2_linear_179_6145" x1="42" y1="38" x2="27.0558" y2="34.3156" gradientUnits="userSpaceOnUse">\n      <stop stop-color="white" stop-opacity="0.5"/>\n      <stop offset="1" stop-color="white" stop-opacity="0"/>\n    </linearGradient>\n  </defs>\n</svg>\n'};case"false":return{extraClass:" deactive",onClick:()=>{},icon:'<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g filter="url(#filter0_bd_183_6497)">\n<circle cx="23" cy="19" r="19" style="fill: var(--emfe-w-elevate-avaliable-button-disabled-color, #B7B7B7);" />\n<circle cx="23" cy="19" r="18" stroke="url(#paint0_linear_183_6497)" stroke-opacity="0.6" stroke-width="2"/>\n<circle cx="23" cy="19" r="18" stroke="url(#paint1_linear_183_6497)" stroke-width="2"/>\n<circle cx="23" cy="19" r="18" stroke="url(#paint2_linear_183_6497)" stroke-width="2"/>\n</g>\n<g filter="url(#filter1_d_183_6497)">\n<path d="M31.1977 11C31.7015 11 32.1279 11.1777 32.4767 11.5332C32.8256 11.8887 33 12.3203 33 12.8281V18.9102C33 20.2852 32.7364 21.5977 32.2093 22.8477C31.6822 24.0977 30.9748 25.1719 30.0872 26.0703C29.1996 26.9688 28.1376 27.6816 26.9012 28.209C25.6647 28.7363 24.3682 29 23.0116 29C21.6473 29 20.3469 28.7363 19.1105 28.209C17.874 27.6816 16.8101 26.9688 15.9186 26.0703C15.0271 25.1719 14.3178 24.0977 13.7907 22.8477C13.2636 21.5977 13 20.2852 13 18.9102V12.8281C13 12.3281 13.1783 11.8984 13.5349 11.5391C13.8915 11.1797 14.3178 11 14.814 11H31.1977ZM23.0116 23.4688C23.376 23.4688 23.6938 23.3398 23.9651 23.082L28.6628 18.5352C28.9496 18.2617 29.093 17.9297 29.093 17.5391C29.093 17.1562 28.9593 16.8301 28.6919 16.5605C28.4244 16.291 28.1008 16.1562 27.7209 16.1562C27.3566 16.1562 27.0388 16.2852 26.7674 16.543L23.0116 20.1758L19.2558 16.543C18.9845 16.2852 18.6705 16.1562 18.314 16.1562C17.9341 16.1562 17.6105 16.291 17.343 16.5605C17.0756 16.8301 16.9419 17.1562 16.9419 17.5391C16.9419 17.9375 17.0814 18.2695 17.3605 18.5352L22.0698 23.082C22.3256 23.3398 22.6395 23.4688 23.0116 23.4688Z" fill="#F0F0F0"/>\n</g>\n<defs>\n<filter id="filter0_bd_183_6497" x="-36" y="-40" width="118" height="118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\n<feFlood flood-opacity="0" result="BackgroundImageFix"/>\n<feGaussianBlur in="BackgroundImageFix" stdDeviation="20"/>\n<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_183_6497"/>\n<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>\n<feOffset dy="4"/>\n<feGaussianBlur stdDeviation="2"/>\n<feComposite in2="hardAlpha" operator="out"/>\n<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>\n<feBlend mode="normal" in2="effect1_backgroundBlur_183_6497" result="effect2_dropShadow_183_6497"/>\n<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_183_6497" result="shape"/>\n</filter>\n<filter id="filter1_d_183_6497" x="11" y="10" width="24" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\n<feFlood flood-opacity="0" result="BackgroundImageFix"/>\n<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>\n<feOffset dy="1"/>\n<feGaussianBlur stdDeviation="1"/>\n<feComposite in2="hardAlpha" operator="out"/>\n<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>\n<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_183_6497"/>\n<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_183_6497" result="shape"/>\n</filter>\n<linearGradient id="paint0_linear_183_6497" x1="49.2869" y1="15.1911" x2="36.3103" y2="15.603" gradientUnits="userSpaceOnUse">\n<stop stop-color="white"/>\n<stop offset="1" stop-color="#EFEFEF" stop-opacity="0"/>\n</linearGradient>\n<linearGradient id="paint1_linear_183_6497" x1="4" y1="0" x2="19.3776" y2="8.17396" gradientUnits="userSpaceOnUse">\n<stop stop-color="white" stop-opacity="0.5"/>\n<stop offset="1" stop-color="white" stop-opacity="0"/>\n</linearGradient>\n<linearGradient id="paint2_linear_183_6497" x1="42" y1="38" x2="27.0558" y2="34.3156" gradientUnits="userSpaceOnUse">\n<stop stop-color="white" stop-opacity="0.5"/>\n<stop offset="1" stop-color="white" stop-opacity="0"/>\n</linearGradient>\n</defs>\n</svg>\n'}}})(n,i),o=n.presentation;return e("div",{class:"Gift"},e("div",{class:"ImgContainer",onClick:()=>window.postMessage({type:"BEEShopImgClicked",itemId:n.id},window.location.href),style:Object.assign({},(l=(null===(r=o.assets)||void 0===r?void 0:r.length)>0?o.assets[0]:"",l?{backgroundImage:`url('${l}')`}:{}))}),e("div",{class:"InfoContainer"},e("div",null,e("div",{class:"Point"},n.points," ",1===n.points?t.Point:t.Points),e("div",{class:"Title"},(null==o?void 0:o.displayName)||n.displayName),e("div",{class:"Description"},(null==o?void 0:o.description)||"")),e("div",{class:"AvaliableWrap"+a.extraClass,onClick:()=>a.onClick()},e("span",{innerHTML:a.icon}))));var l}))),x=class{constructor(e){n(this,e),this.language="en",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.locale=v.en,this.gifts=[],this.isLoading=!0}async updateGifts(){this.isLoading=!0;const e=await g.bind(this,"/v1/elevate/shop",{}).call();this.gifts=e.data||[],this.isLoading=!1}async redeemGift(e){confirm("Are you sure to redeem this gift?")&&(await g.bind(this,"/v1/elevate/redeem",{},{method:"PUT",body:JSON.stringify({giftID:e}),headers:{"Content-Type":"application/json-patch+json"}}).call()).success&&window.postMessage({type:"BEEGiftRedeem",itemId:e},window.location.href)}loadGifts(n){return this.isLoading?e("general-animation-loading",null):0===this.gifts.length?e("div",{class:"NoContent"},this.locale.noContent):n()}render(){return e("main",{class:"MainContainer"},e("general-styling-wrapper",{clientStyling:this.clientStyling,clientStylingUrl:this.clientStylingUrl,targetTranslations:v,translationUrl:this.translationUrl}),e("player-elevate-pointcard",{endpoint:this.endpoint,session:this.session,language:this.language,clientStylingUrl:this.clientStylingUrl,clientStyling:this.clientStyling,translationUrl:this.translationUrl}),this.loadGifts(u.bind(this,this.gifts,this.locale,this.redeemGift.bind(this))))}async componentDidLoad(){this.updateGifts()}static get assetsDirs(){return["static"]}static get watchers(){return{endpoint:["updateGifts"],language:["updateGifts"],session:["updateGifts"]}}};x.style=":host{display:block}svg circle{shape-rendering:crispEdges}.MainContainer{max-width:420px}.MainContainer player-elevate-pointcard{width:100%;height:220px}.Gifts{display:flex;justify-content:space-between;padding:15px;padding-left:-8px;padding-right:-8px;flex:0 0 45.1282051282%;flex-wrap:wrap;justify-content:flex-start;background:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black-150, #000000);font-weight:500;gap:10px;margin-top:-100px;position:relative;min-height:200px}.InfoContainer{display:flex;margin-top:17px;justify-content:space-between}.Gift{display:block;margin-bottom:10px;padding:8px;box-shadow:0px 18px 45px 0px var(--emfe-w-color-black-150, #A7A7A733);border-radius:11px;background:var(--emfe-w-color-white, #FFFFFF)}.Gift .ImgContainer{width:160px;height:107px;border-radius:11px;box-shadow:0px 2px 6px 0px var(--emfe-w-color-black-200, #00000040);cursor:pointer;background-size:cover;background-position:center center;background-repeat:no-repeat}.Gift .Point{font-size:20px}.Gift .Title,.Gift .Description{padding-left:3px}.Gift .Title{font-size:14px;margin-top:10px}.Gift .Description{font-size:12px;color:var(--emfe-w-color-black-100, #767171)}.Gift .AvaliableWrap{align-self:self-end}.Gift .AvaliableWrap.active{cursor:pointer}.Gift .AvaliableWrap.deactive{cursor:not-allowed}.Gift .AvaliableWrap span svg{width:var(--emfe-w-elevate-avaliable-button-size, 46px)}.NoContent{font-size:16px;color:var(--emfe-w-color-black-100, #afafaf);text-align:center;height:120px;line-height:120px}";const w=class{constructor(e){n(this,e),this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.stylingAppends=!1,this.setClientStyling=()=>{let e=document.createElement("style");e.innerHTML=this.clientStyling,this.el.prepend(e)},this.setClientStylingURL=()=>{let e=new URL(this.clientStylingUrl),n=document.createElement("style");fetch(e.href).then((e=>e.text())).then((e=>{n.innerHTML=e,setTimeout((()=>{this.el.prepend(n)}),1)})).catch((e=>{console.log("error ",e)}))}}componentDidRender(){this.stylingAppends||(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.stylingAppends=!0)}async componentWillLoad(){const e=[];if(this.translationUrl){const i=(n=this.translationUrl,t=this.targetTranslations,new Promise((e=>{fetch(n).then((e=>e.json())).then((n=>{Object.keys(n).forEach((e=>{t[e]=t[e]?t[e]:{};for(let i in n[e])t[e][i]=n[e][i]})),e(!0)}))})));e.push(i)}var n,t;return await Promise.all(e)}render(){return e("div",{class:"StyleShell"},e("slot",{name:"mainContent"}))}get el(){return t(this)}};function m(e){o(1,arguments);var n=l(e);return n.setHours(0,0,0,0),n}function y(e,n){return o(2,arguments),l(e).getTime()-l(n).getTime()}w.style=":host{display:block}";var b={ceil:Math.ceil,round:Math.round,floor:Math.floor,trunc:function(e){return e<0?Math.ceil(e):Math.floor(e)}};function _(e){return e?b[e]:b.trunc}const C=class{constructor(e){n(this,e),this.playerElevateLeveLoaded=i(this,"playerElevateLeveLoaded",7)}handleWindowResizs(){this.initLevelProgressbar()}onRedeemClick(){window.postMessage({type:"BEERedeemClicked"},window.location.href)}loadLevels(){let e=new URL(`${this.params.endpoint}/v1/elevate/levels?language=${this.params.language}`);return new Promise(((n,t)=>fetch(e.href,{method:"GET"}).then((e=>e.json())).then((e=>{this.levels=e.data,n(!0)})).catch((e=>{t(e)}))))}calcuatePointsToBeExpired(e){let n="";if(!e||!e.aboutToExpire||0==e.aboutToExpire.length||e.aboutToExpire[0].points<=0)return n;e.aboutToExpire.sort(((e,n)=>function(e,n){o(2,arguments);var t=l(e),i=l(n);return t.getTime()<i.getTime()}(new Date(e.expireTime),new Date(n.expireTime))?-1:1));const t=e.aboutToExpire[0],i=function(e,n){o(2,arguments);var t=m(e),i=m(n),r=t.getTime()-s(t),a=i.getTime()-s(i);return Math.round((r-a)/864e5)}(new Date(t.expireTime),new Date);let r=0,a=0===i?"pointsToBeExpiredDay":"pointsToBeExpired";return 0==i&&(r=function(e,n,t){o(2,arguments);var i=y(e,n)/36e5;return _(null==t?void 0:t.roundingMethod)(i)}(new Date(t.expireTime),new Date),a=r>1?"pointsToBeExpiredHours":"pointsToBeExpiredHour"),n=d(a,{expirationPoints:t.points,expireDay:i}),n}loadPlayerLevelInfo(){let e=new URL(`${this.params.endpoint}/v1/elevate/playerInfo?language=${this.params.language}`);return new Promise(((n,t)=>fetch(e.href,{method:"GET",headers:{"X-Sessionid":this.params.session,"Content-Type":"application/json"}}).then((e=>e.json())).then((e=>{var i,r,a;if(!e.success)return console.error("Exception when fetch user elevateinfo, ",e.errorCode,e.errorMessage),void t(!0);let o=e.data;this.playerElevateLevel=o.level,this.playerElevateLevel.name=this.playerElevateLevel.presentation.displayName||this.playerElevateLevel.name,this.playerElevateLevel.spendablePoints=(null===(i=o.spendableWallet)||void 0===i?void 0:i.total.points)||0,this.playerElevateLeveLoaded.emit({elevateLevel:this.playerElevateLevel});const l=null===(r=e.data.spendableWallet)||void 0===r?void 0:r.total,s=null===(a=e.data.loyaltyWallet)||void 0===a?void 0:a.total;this.playerElevateLeveLoaded.emit({elevateLevelWalletTotal:l,loyaltyWalletTotal:s});let d=this.calcuatePointsToBeExpired(l),c=this.calcuatePointsToBeExpired(s);(d||c)&&this.playerElevateLeveLoaded.emit({pointExpireString:d,xpExpireString:c}),n(this.playerElevateLevel)})).catch((e=>{console.log("error ",e),t(!0)}))))}setLoyaltyProgress(e){!function(e,n){const t=e.querySelector("#total_level"),i=t.getBBox().width,r=n*i-15<0?0:n*i-15,a=e.querySelector("#current_level"),o=e.querySelector("#filter_current_level"),l=e.querySelector("#circle_current_level");t.setAttribute("viewbox",`0 0 ${r} 28`),a.setAttribute("width",`${r}`),l.setAttribute("cx",`${r+3}`),o.setAttribute("x",""+(r-4));const s=e.querySelector("#lock"),d=e.querySelector("#filter_heart_ball"),c=e.querySelector("#filter_ball"),p=e.querySelector("#filter_heart"),h=e.querySelector("#filter_lock"),f=e.querySelector("#paint0_linear_ball"),g=e.querySelector("#paint1_linear_lock"),v=e.querySelector("#lock_box"),u=e.querySelector("#heart_box"),x=i-10;s.setAttribute("cx",`${x}`),g.setAttribute("x1",`${x}`),g.setAttribute("x2",`${x}`),f.setAttribute("x1",""+(x-6)),f.setAttribute("x2",""+(x-6+11.2)),h.setAttribute("x",""+(x-6)),p.setAttribute("x",""+(x-6-2)),c.setAttribute("x",""+(x-6-2-2)),d.setAttribute("x",""+(x-6-2-2-4)),v.setAttribute("x",""+(x-6)),u.setAttribute("x",""+(x-6))}(this.loyaltyProgressEle,e)}initLevelProgressbar(){setTimeout((()=>{this.loyaltyProgressEle=this.elevateCardRef.parentElement.querySelector("#LevelProgress"),this.loyaltyProgressEle&&(this.setLoyaltyProgress(this.playerElevateLevel.nextLevel?(this.playerElevateLevel.loyaltyPoints-this.playerElevateLevel.entryPoints)/(this.playerElevateLevel.nextLevel.entryPoints-this.playerElevateLevel.loyaltyPoints):1),this.params.playerElevateLevel=this.playerElevateLevel)}),80)}componentWillRender(){}componentDidRender(){this.initLevelProgressbar()}componentWillLoad(){if(!this.params.endpoint||!this.params.session)return;const e=[];e.push(this.loadPlayerLevelInfo()),this.params.calculateLevelFlag&&e.push(this.loadLevels()),Promise.all(e).then((e=>{if(console.log("elevate-init",e),this.initLevelProgressbar(),!this.levels)return;this.levels.sort(((e,n)=>e.firstEntryPoints>n.firstEntryPoints?1:-1));const n=this.playerElevateLevel.loyaltyPoints;let t=0;this.levels.forEach(((e,i)=>{n>e.firstEntryPoints&&(t=i)})),this.playerElevateLeveLoaded.emit({calculatedLevelFlag:t})}))}get elevateCardRef(){return t(this)}};C.style=':host {\n  display: block;\n  width: 360px;\n  height: 230px;\n}\n\n.ElevateCardWrapper {\n  contain: layout inline-size;\n  width: 100%;\n  height: fit-content;\n  min-height: 218px;\n}\n\n.Outer {\n  container-type: inline-size;\n  font-size: 12px;\n  background-size: cover;\n  background-repeat: no-repeat;\n  line-height: initial;\n  width: 100%;\n  height: 100%;\n}\n\n.Dark {\n  color: var(--emfe-w-color-gray150, #efefef);\n}\n\n.Light {\n  color: var(--emfe-w-color-black, #0e0e0e);\n}\n\n@container (min-width: 381px) {\n  .Outer {\n    background-size: cover;\n  }\n  .Outer .OuterCover {\n    min-height: 190px;\n  }\n}\n@container (min-width: 260px) {\n  .Outer {\n    background-size: contain;\n  }\n}\n.OuterCover {\n  width: 100%;\n  height: 100%;\n  content: "";\n  background-repeat: no-repeat;\n  background-size: cover;\n  border-radius: 15px;\n}\n\n.Inner {\n  display: flex;\n  flex-direction: column;\n  min-height: 158px;\n}\n.Inner .Content {\n  padding: 15px;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.Inner .Row {\n  display: flex;\n  flex-direction: row;\n}\n.Inner .CardCell {\n  display: flex;\n}\n.Inner .LevelInfo {\n  display: flex;\n  flex-direction: column;\n}\n.Inner .LevelInfo .ElevateLevel .LevelName {\n  height: 28px;\n  border-radius: 5px;\n  line-height: 28px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.Inner .LevelInfo.Level0 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level0button-shadow, rgba(191, 84, 6, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level0-bg0, #E2792C) 0%, var(--emfe-w-elevate-color-level0-bg1, rgba(242, 151, 99, 0)) 100%);\n}\n.Inner .LevelInfo.Level1 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level1button-shadow, rgba(151, 151, 151, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level1-bg0, #BEBFED) 0%, var(--emfe-w-elevate-color-level1-bg1, rgba(216, 217, 233, 0)) 100%);\n}\n.Inner .LevelInfo.Level2 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level2button-shadow, rgba(191, 120, 6, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level2-bg0, #FCC410) 0%, var(--emfe-w-elevate-color-level2-bg1, rgba(255, 189, 43, 0)) 100%);\n}\n.Inner .LevelInfo.Level3 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level3button-shadow, rgba(65, 6, 191, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level3-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level3-bg1, rgba(203, 202, 245, 0)) 100%);\n}\n.Inner .LevelInfo.Level4 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level4button-shadow, rgba(65, 6, 191, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level4-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level4-bg1, rgba(203, 202, 245, 0)) 100%);\n}\n.Inner .LevelInfo .ElevateLevel {\n  display: flex;\n}\n.Inner .LevelInfo {\n  flex: 1;\n  flex-grow: 1;\n  min-width: 150px;\n}\n.Inner .PlayerImg {\n  width: 29%;\n  margin: auto;\n  max-width: 100px;\n  min-width: 30px;\n  order: 0;\n}\n.Inner .PlayerAvatar {\n  max-width: 100px;\n  flex-basis: 100px;\n  height: auto;\n  margin: auto;\n  padding-top: 10px;\n}\n.Inner .PlayerAvatar .Avatar, .Inner .PlayerAvatar .Badge {\n  width: 100%;\n  height: 100%;\n}\n.Inner .PlayerAvatar .Avatar {\n  border-radius: 50%;\n  background-size: contain;\n  background-repeat: no-repeat;\n}\n.Inner .ElevateLevel .ExpirationDate {\n  max-width: 138px;\n  min-width: 118px;\n}\n.Inner .PlayerName, .Inner .RedeemButton, .Inner .ElevateLevel {\n  text-transform: capitalize;\n  width: 100%;\n}\n.Inner .PlayerName {\n  font-size: 16px;\n}\n.Inner .Row .PointsInfo {\n  display: table;\n  font-weight: 600;\n}\n.Inner .Row .Redeem {\n  justify-content: flex-end;\n  margin-left: auto;\n}\n.Inner .Row .Redeem:hover {\n  color: var(--emfe-w-elevate-color-redeem-hover, #00ABA4);\n  cursor: pointer;\n}\n.Inner .Row .RedeemButton:hover span {\n  color: var(emfe-w-elevate-color-redeem-text-hover, #f1f1f1);\n  font-weight: bold;\n}\n.Inner .Row .RedeemButton {\n  width: 95px;\n  height: 35px;\n  display: flex;\n  align-items: center;\n  border-radius: 10px;\n  background: var(--emfe-w-elevate-color-redeem-bg, linear-gradient(0deg, #26CC37, #26CC37)), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%);\n  box-shadow: 0px 4px 4px 0px #00000040;\n}\n.Inner .Row .RedeemButton span {\n  color: var(--emfe-w-color-white, #fff);\n  line-height: 18px;\n  font-size: 15px;\n  text-align: center;\n  width: 100%;\n}\n.Inner .Row .Points {\n  font-size: large;\n  vertical-align: middle;\n}\n.Inner .Row .Points .XP {\n  font-size: x-small;\n}\n.Inner .Row .ExpirationPoints {\n  font-size: small;\n  text-align: right;\n  font-weight: bold;\n  color: var(--emfe-w-color-red, #9e595f);\n}';const I=class{constructor(e){n(this,e),this.theme="Dark",this.language="en",this.buttonType="earningRule",this.dateFormat="yyyy-MM-dd",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.isPointDetailCard="earningRule"===this.buttonType}playerElevateLeveLoadedHandler(e){e.detail&&(e.detail.elevateLevelWalletTotal&&(this.elevateWalletTotal=e.detail.elevateLevelWalletTotal,this.elevateSPTotal=e.detail.loyaltyWalletTotal),e.detail.elevateLevel&&(this.playerElevateLevel=e.detail.elevateLevel),e.detail.pointExpireString&&(this.pointExpireString=e.detail.pointExpireString))}onDetailsClick(){window.postMessage({type:this.isPointDetailCard?"BEEPointRulesClicked":"BEEDetailsClicked",path:this.isPointDetailCard?"player-elevate-level":"player-elevate-point-details"},window.location.href)}componentWillLoad(){this.paramProxy={endpoint:this.endpoint,session:this.session,language:this.language}}render(){const n=r("../static/card-ground.svg"),t=r("../static/card-ground-over.svg");return e("div",{class:`ElevateCardWrapper ${this.theme}`},e("div",{class:"PointsCard Outer ",style:{backgroundImage:`url(${n}`}},e("general-styling-wrapper",{clientStyling:this.clientStyling,clientStylingUrl:this.clientStylingUrl,targetTranslations:c,translationUrl:this.translationUrl}),e("player-elevate-card-data",{params:this.paramProxy}),e("div",{class:"OuterCover Inner",style:{backgroundImage:`url(${t}`}},e("div",{class:"Content Row"},this.playerElevateLevel&&e(a,null,e("div",{class:"PlayerImg"},e(p,{onlyBadge:!0,loyaltyIconUrl:this.playerElevateLevel.presentation.asset})),e("div",{class:`LevelInfo ${this.playerElevateLevel.name}`},e("div",{class:"PointsTxt Label"},this.cardTitle?this.cardTitle:h("spendablePoints")),e("div",{class:"PointsTxt SPPoints"},e(f,{spendablePoints:this.playerElevateLevel.spendablePoints,language:this.language}),e("a",{class:"TC",onClick:()=>{this.onDetailsClick()}},h("termAndConditions",this.language))),this.pointExpireString&&e("div",{class:"ExpirationPoints"},this.pointExpireString," ")))))))}};I.style=":host{display:block}.PointsCard .Inner .Row .ExpirationPoints{text-align:left}.PointsCard .Inner .PlayerAvatar .Avatar{display:none}.PointsCard .Inner .PlayerAvatar .Badge{border-radius:50%;background-size:contain;width:100%;height:100%;position:inherit}.PointsCard .Inner .PointsTxt{display:flex;flex-direction:row;justify-content:space-between}.PointsCard .Inner .DetailButton{background:linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%), linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));border-radius:5px;box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);border:2px solid;font-size:11px;width:108px;padding:4px;cursor:pointer;margin-top:5px;height:16px;min-width:45px;text-align:center}.PointsCard .Inner .DetailButton span{color:var(--emfe-w-color-gray-150, #6D6D6D)}.PointsCard .Inner .DetailButton span{display:inline-block;vertical-align:middle}.PointsCard .Inner .DetailButton:hover span{color:var(--emfe-w-color-gray-150, #6D6D6D)}.PointsCard .Inner .LevelInfo{gap:15px;width:70%}.PointsCard .Inner .LevelInfo .PointsTxt{font-size:15px}.PointsCard .Inner .LevelInfo .PointsTxt.Label{display:none}.PointsCard .Inner .LevelInfo .PointsTxt.SPPoints{padding-top:15px}.PointsCard .Inner .LevelInfo .PointsTxt .TC{font-size:x-small;color:var(--emw--color-gray-300, #58586B);display:flex;align-content:center;height:100%;flex-wrap:wrap;text-decoration:underline;cursor:pointer;display:none}";export{x as bonus_elevate_shop,w as general_styling_wrapper,C as player_elevate_card_data,I as player_elevate_pointcard}

package/dist/cjs/bonus-elevate-shop.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["bonus-elevate-shop_4.cjs",[[1,"bonus-elevate-shop",{"session":[513],"endpoint":[513],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"locale":[32],"gifts":[32]}],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"cardTitle":[513,"card-title"],"buttonType":[513,"button-type"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32],"elevateSPTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"]]]]],["player-elevate-card.cjs",[[1,"player-elevate-card",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]],["player-elevate-loyaltycard.cjs",[[1,"player-elevate-loyaltycard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]]], options);
+  return index.bootstrapLazy([["bonus-elevate-shop_4.cjs",[[1,"bonus-elevate-shop",{"session":[513],"endpoint":[513],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"locale":[32],"gifts":[32],"isLoading":[32]}],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"cardTitle":[513,"card-title"],"buttonType":[513,"button-type"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32],"elevateSPTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"]]]]],["player-elevate-card.cjs",[[1,"player-elevate-card",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]],["player-elevate-loyaltycard.cjs",[[1,"player-elevate-loyaltycard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]]], options);
 });

package/dist/cjs/bonus-elevate-shop_4.cjs.entry.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ec3ffb89.js');
+require('@everymatrix/general-animation-loading');
 const playerElevateCardItems = require('./player-elevate-card-items-8154b78f.js');
 
 const getUrl = (path, params = {}) => {
@@ -39,6 +40,7 @@ const translation = {
   en: {
     Points: 'Points',
     Point: 'Point',
+    noContent: 'No Content',
   }
 };
 
@@ -179,7 +181,7 @@ const renderGifts = (gifts, locale, redeem) => {
   })));
 };
 
-const bonusElevateShopCss = ":host{display:block}svg circle{shape-rendering:crispEdges}.MainContainer{max-width:420px}.MainContainer player-elevate-pointcard{width:100%;height:220px}.Gifts{display:flex;justify-content:space-between;padding:15px;padding-left:-8px;padding-right:-8px;flex:0 0 45.1282051282%;flex-wrap:wrap;justify-content:flex-start;background:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black-150, #000000);font-weight:500;gap:10px;margin-top:-100px;position:relative;min-height:200px}.InfoContainer{display:flex;margin-top:17px;justify-content:space-between}.Gift{display:block;margin-bottom:10px;padding:8px;box-shadow:0px 18px 45px 0px var(--emfe-w-color-black-150, #A7A7A733);border-radius:11px;background:var(--emfe-w-color-white, #FFFFFF)}.Gift .ImgContainer{width:160px;height:107px;border-radius:11px;box-shadow:0px 2px 6px 0px var(--emfe-w-color-black-200, #00000040);cursor:pointer;background-size:cover;background-position:center center;background-repeat:no-repeat}.Gift .Point{font-size:20px}.Gift .Title,.Gift .Description{padding-left:3px}.Gift .Title{font-size:14px;margin-top:10px}.Gift .Description{font-size:12px;color:var(--emfe-w-color-black-100, #767171)}.Gift .AvaliableWrap{align-self:self-end}.Gift .AvaliableWrap.active{cursor:pointer}.Gift .AvaliableWrap.deactive{cursor:not-allowed}.Gift .AvaliableWrap span svg{width:var(--emfe-w-elevate-avaliable-button-size, 46px)}";
+const bonusElevateShopCss = ":host{display:block}svg circle{shape-rendering:crispEdges}.MainContainer{max-width:420px}.MainContainer player-elevate-pointcard{width:100%;height:220px}.Gifts{display:flex;justify-content:space-between;padding:15px;padding-left:-8px;padding-right:-8px;flex:0 0 45.1282051282%;flex-wrap:wrap;justify-content:flex-start;background:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black-150, #000000);font-weight:500;gap:10px;margin-top:-100px;position:relative;min-height:200px}.InfoContainer{display:flex;margin-top:17px;justify-content:space-between}.Gift{display:block;margin-bottom:10px;padding:8px;box-shadow:0px 18px 45px 0px var(--emfe-w-color-black-150, #A7A7A733);border-radius:11px;background:var(--emfe-w-color-white, #FFFFFF)}.Gift .ImgContainer{width:160px;height:107px;border-radius:11px;box-shadow:0px 2px 6px 0px var(--emfe-w-color-black-200, #00000040);cursor:pointer;background-size:cover;background-position:center center;background-repeat:no-repeat}.Gift .Point{font-size:20px}.Gift .Title,.Gift .Description{padding-left:3px}.Gift .Title{font-size:14px;margin-top:10px}.Gift .Description{font-size:12px;color:var(--emfe-w-color-black-100, #767171)}.Gift .AvaliableWrap{align-self:self-end}.Gift .AvaliableWrap.active{cursor:pointer}.Gift .AvaliableWrap.deactive{cursor:not-allowed}.Gift .AvaliableWrap span svg{width:var(--emfe-w-elevate-avaliable-button-size, 46px)}.NoContent{font-size:16px;color:var(--emfe-w-color-black-100, #afafaf);text-align:center;height:120px;line-height:120px}";
 
 const BonusElevateShop = class {
   constructor(hostRef) {
@@ -202,10 +204,13 @@ const BonusElevateShop = class {
     this.translationUrl = '';
     this.locale = translation['en'];
     this.gifts = [];
+    this.isLoading = true;
   }
   async updateGifts() {
+    this.isLoading = true;
     const res = await fetchNorwayApi.bind(this, '/v1/elevate/shop', {}).call();
     this.gifts = res.data || [];
+    this.isLoading = false;
   }
   async redeemGift(id) {
     if (!confirm('Are you sure to redeem this gift?'))
@@ -221,8 +226,21 @@ const BonusElevateShop = class {
       window.postMessage({ type: 'BEEGiftRedeem', itemId: id }, window.location.href);
     }
   }
+  loadGifts(renderer) {
+    if (this.isLoading) {
+      return index.h("general-animation-loading", null);
+    }
+    else {
+      if (this.gifts.length === 0) {
+        return (index.h("div", { class: "NoContent" }, this.locale.noContent));
+      }
+      else {
+        return renderer();
+      }
+    }
+  }
   render() {
-    return (index.h("main", { class: "MainContainer" }, index.h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: translation, translationUrl: this.translationUrl }), index.h("player-elevate-pointcard", { endpoint: this.endpoint, session: this.session, language: this.language, clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, translationUrl: this.translationUrl }), renderGifts(this.gifts, this.locale, this.redeemGift.bind(this))));
+    return (index.h("main", { class: "MainContainer" }, index.h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: translation, translationUrl: this.translationUrl }), index.h("player-elevate-pointcard", { endpoint: this.endpoint, session: this.session, language: this.language, clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, translationUrl: this.translationUrl }), this.loadGifts(renderGifts.bind(this, this.gifts, this.locale, this.redeemGift.bind(this)))));
   }
   async componentDidLoad() {
     this.updateGifts();

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["bonus-elevate-shop_4.cjs",[[1,"bonus-elevate-shop",{"session":[513],"endpoint":[513],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"locale":[32],"gifts":[32]}],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"cardTitle":[513,"card-title"],"buttonType":[513,"button-type"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32],"elevateSPTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"]]]]],["player-elevate-card.cjs",[[1,"player-elevate-card",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]],["player-elevate-loyaltycard.cjs",[[1,"player-elevate-loyaltycard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]]], options);
+  return index.bootstrapLazy([["bonus-elevate-shop_4.cjs",[[1,"bonus-elevate-shop",{"session":[513],"endpoint":[513],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"locale":[32],"gifts":[32],"isLoading":[32]}],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"cardTitle":[513,"card-title"],"buttonType":[513,"button-type"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32],"elevateSPTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"]]]]],["player-elevate-card.cjs",[[1,"player-elevate-card",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]],["player-elevate-loyaltycard.cjs",[[1,"player-elevate-loyaltycard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]]], options);
   });
 };
 

package/dist/collection/components/bonus-elevate-shop/bonus-elevate-shop.css

@@ -81,4 +81,12 @@ svg circle {
 }
 .Gift .AvaliableWrap span svg {
   width: var(--emfe-w-elevate-avaliable-button-size, 46px);
+}
+
+.NoContent {
+  font-size: 16px;
+  color: var(--emfe-w-color-black-100, #afafaf);
+  text-align: center;
+  height: 120px;
+  line-height: 120px;
 }

package/dist/collection/components/bonus-elevate-shop/bonus-elevate-shop.js

@@ -3,6 +3,7 @@ import { fetchNorwayApi } from '../../utils/fetch';
 import { translation } from '../../utils/translation';
 import { renderGifts } from '../../renders/renderGifts';
 import '@everymatrix/general-styling-wrapper';
+import '@everymatrix/general-animation-loading';
 import '@everymatrix/player-elevate-card';
 export class BonusElevateShop {
   constructor() {
@@ -24,10 +25,13 @@ export class BonusElevateShop {
     this.translationUrl = '';
     this.locale = translation['en'];
     this.gifts = [];
+    this.isLoading = true;
   }
   async updateGifts() {
+    this.isLoading = true;
     const res = await fetchNorwayApi.bind(this, '/v1/elevate/shop', {}).call();
     this.gifts = res.data || [];
+    this.isLoading = false;
   }
   async redeemGift(id) {
     if (!confirm('Are you sure to redeem this gift?'))
@@ -43,11 +47,24 @@ export class BonusElevateShop {
       window.postMessage({ type: 'BEEGiftRedeem', itemId: id }, window.location.href);
     }
   }
+  loadGifts(renderer) {
+    if (this.isLoading) {
+      return h("general-animation-loading", null);
+    }
+    else {
+      if (this.gifts.length === 0) {
+        return (h("div", { class: "NoContent" }, this.locale.noContent));
+      }
+      else {
+        return renderer();
+      }
+    }
+  }
   render() {
     return (h("main", { class: "MainContainer" },
       h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: translation, translationUrl: this.translationUrl }),
       h("player-elevate-pointcard", { endpoint: this.endpoint, session: this.session, language: this.language, clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, translationUrl: this.translationUrl }),
-      renderGifts(this.gifts, this.locale, this.redeemGift.bind(this))));
+      this.loadGifts(renderGifts.bind(this, this.gifts, this.locale, this.redeemGift.bind(this)))));
   }
   async componentDidLoad() {
     this.updateGifts();
@@ -171,7 +188,8 @@ export class BonusElevateShop {
   }; }
   static get states() { return {
     "locale": {},
-    "gifts": {}
+    "gifts": {},
+    "isLoading": {}
   }; }
   static get watchers() { return [{
       "propName": "endpoint",

package/dist/collection/utils/translation.js

@@ -2,5 +2,6 @@ export const translation = {
   en: {
     Points: 'Points',
     Point: 'Point',
+    noContent: 'No Content',
   }
 };

package/dist/components/bonus-elevate-shop.js

@@ -1,4 +1,5 @@
 import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import '@everymatrix/general-animation-loading';
 import { d as defineCustomElement$4 } from './general-styling-wrapper2.js';
 import { d as defineCustomElement$3 } from './player-elevate-card-data2.js';
 import { d as defineCustomElement$2 } from './player-elevate-pointcard2.js';
@@ -37,6 +38,7 @@ const translation = {
   en: {
     Points: 'Points',
     Point: 'Point',
+    noContent: 'No Content',
   }
 };
 
@@ -177,7 +179,7 @@ const renderGifts = (gifts, locale, redeem) => {
   })));
 };
 
-const bonusElevateShopCss = ":host{display:block}svg circle{shape-rendering:crispEdges}.MainContainer{max-width:420px}.MainContainer player-elevate-pointcard{width:100%;height:220px}.Gifts{display:flex;justify-content:space-between;padding:15px;padding-left:-8px;padding-right:-8px;flex:0 0 45.1282051282%;flex-wrap:wrap;justify-content:flex-start;background:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black-150, #000000);font-weight:500;gap:10px;margin-top:-100px;position:relative;min-height:200px}.InfoContainer{display:flex;margin-top:17px;justify-content:space-between}.Gift{display:block;margin-bottom:10px;padding:8px;box-shadow:0px 18px 45px 0px var(--emfe-w-color-black-150, #A7A7A733);border-radius:11px;background:var(--emfe-w-color-white, #FFFFFF)}.Gift .ImgContainer{width:160px;height:107px;border-radius:11px;box-shadow:0px 2px 6px 0px var(--emfe-w-color-black-200, #00000040);cursor:pointer;background-size:cover;background-position:center center;background-repeat:no-repeat}.Gift .Point{font-size:20px}.Gift .Title,.Gift .Description{padding-left:3px}.Gift .Title{font-size:14px;margin-top:10px}.Gift .Description{font-size:12px;color:var(--emfe-w-color-black-100, #767171)}.Gift .AvaliableWrap{align-self:self-end}.Gift .AvaliableWrap.active{cursor:pointer}.Gift .AvaliableWrap.deactive{cursor:not-allowed}.Gift .AvaliableWrap span svg{width:var(--emfe-w-elevate-avaliable-button-size, 46px)}";
+const bonusElevateShopCss = ":host{display:block}svg circle{shape-rendering:crispEdges}.MainContainer{max-width:420px}.MainContainer player-elevate-pointcard{width:100%;height:220px}.Gifts{display:flex;justify-content:space-between;padding:15px;padding-left:-8px;padding-right:-8px;flex:0 0 45.1282051282%;flex-wrap:wrap;justify-content:flex-start;background:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black-150, #000000);font-weight:500;gap:10px;margin-top:-100px;position:relative;min-height:200px}.InfoContainer{display:flex;margin-top:17px;justify-content:space-between}.Gift{display:block;margin-bottom:10px;padding:8px;box-shadow:0px 18px 45px 0px var(--emfe-w-color-black-150, #A7A7A733);border-radius:11px;background:var(--emfe-w-color-white, #FFFFFF)}.Gift .ImgContainer{width:160px;height:107px;border-radius:11px;box-shadow:0px 2px 6px 0px var(--emfe-w-color-black-200, #00000040);cursor:pointer;background-size:cover;background-position:center center;background-repeat:no-repeat}.Gift .Point{font-size:20px}.Gift .Title,.Gift .Description{padding-left:3px}.Gift .Title{font-size:14px;margin-top:10px}.Gift .Description{font-size:12px;color:var(--emfe-w-color-black-100, #767171)}.Gift .AvaliableWrap{align-self:self-end}.Gift .AvaliableWrap.active{cursor:pointer}.Gift .AvaliableWrap.deactive{cursor:not-allowed}.Gift .AvaliableWrap span svg{width:var(--emfe-w-elevate-avaliable-button-size, 46px)}.NoContent{font-size:16px;color:var(--emfe-w-color-black-100, #afafaf);text-align:center;height:120px;line-height:120px}";
 
 const BonusElevateShop$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -202,10 +204,13 @@ const BonusElevateShop$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.translationUrl = '';
     this.locale = translation['en'];
     this.gifts = [];
+    this.isLoading = true;
   }
   async updateGifts() {
+    this.isLoading = true;
     const res = await fetchNorwayApi.bind(this, '/v1/elevate/shop', {}).call();
     this.gifts = res.data || [];
+    this.isLoading = false;
   }
   async redeemGift(id) {
     if (!confirm('Are you sure to redeem this gift?'))
@@ -221,8 +226,21 @@ const BonusElevateShop$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       window.postMessage({ type: 'BEEGiftRedeem', itemId: id }, window.location.href);
     }
   }
+  loadGifts(renderer) {
+    if (this.isLoading) {
+      return h("general-animation-loading", null);
+    }
+    else {
+      if (this.gifts.length === 0) {
+        return (h("div", { class: "NoContent" }, this.locale.noContent));
+      }
+      else {
+        return renderer();
+      }
+    }
+  }
   render() {
-    return (h("main", { class: "MainContainer" }, h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: translation, translationUrl: this.translationUrl }), h("player-elevate-pointcard", { endpoint: this.endpoint, session: this.session, language: this.language, clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, translationUrl: this.translationUrl }), renderGifts(this.gifts, this.locale, this.redeemGift.bind(this))));
+    return (h("main", { class: "MainContainer" }, h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: translation, translationUrl: this.translationUrl }), h("player-elevate-pointcard", { endpoint: this.endpoint, session: this.session, language: this.language, clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, translationUrl: this.translationUrl }), this.loadGifts(renderGifts.bind(this, this.gifts, this.locale, this.redeemGift.bind(this)))));
   }
   async componentDidLoad() {
     this.updateGifts();
@@ -242,7 +260,8 @@ const BonusElevateShop$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     "clientStylingUrl": [513, "client-styling-url"],
     "translationUrl": [513, "translation-url"],
     "locale": [32],
-    "gifts": [32]
+    "gifts": [32],
+    "isLoading": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/esm/bonus-elevate-shop.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["bonus-elevate-shop_4",[[1,"bonus-elevate-shop",{"session":[513],"endpoint":[513],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"locale":[32],"gifts":[32]}],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"cardTitle":[513,"card-title"],"buttonType":[513,"button-type"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32],"elevateSPTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"]]]]],["player-elevate-card",[[1,"player-elevate-card",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]],["player-elevate-loyaltycard",[[1,"player-elevate-loyaltycard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]]], options);
+  return bootstrapLazy([["bonus-elevate-shop_4",[[1,"bonus-elevate-shop",{"session":[513],"endpoint":[513],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"locale":[32],"gifts":[32],"isLoading":[32]}],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"cardTitle":[513,"card-title"],"buttonType":[513,"button-type"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32],"elevateSPTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"]]]]],["player-elevate-card",[[1,"player-elevate-card",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]],["player-elevate-loyaltycard",[[1,"player-elevate-loyaltycard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]]], options);
 });

package/dist/esm/bonus-elevate-shop_4.entry.js

@@ -1,4 +1,5 @@
 import { h, r as registerInstance, g as getElement, c as createEvent, a as getAssetPath, F as Fragment } from './index-2b126a46.js';
+import '@everymatrix/general-animation-loading';
 import { r as requiredArgs, t as toDate, g as getTimezoneOffsetInMilliseconds, a as translateWithParams, T as TRANSLATIONS, P as PlayerAvatar, b as translate, c as PlayerPoints } from './player-elevate-card-items-88f5a140.js';
 
 const getUrl = (path, params = {}) => {
@@ -35,6 +36,7 @@ const translation = {
   en: {
     Points: 'Points',
     Point: 'Point',
+    noContent: 'No Content',
   }
 };
 
@@ -175,7 +177,7 @@ const renderGifts = (gifts, locale, redeem) => {
   })));
 };
 
-const bonusElevateShopCss = ":host{display:block}svg circle{shape-rendering:crispEdges}.MainContainer{max-width:420px}.MainContainer player-elevate-pointcard{width:100%;height:220px}.Gifts{display:flex;justify-content:space-between;padding:15px;padding-left:-8px;padding-right:-8px;flex:0 0 45.1282051282%;flex-wrap:wrap;justify-content:flex-start;background:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black-150, #000000);font-weight:500;gap:10px;margin-top:-100px;position:relative;min-height:200px}.InfoContainer{display:flex;margin-top:17px;justify-content:space-between}.Gift{display:block;margin-bottom:10px;padding:8px;box-shadow:0px 18px 45px 0px var(--emfe-w-color-black-150, #A7A7A733);border-radius:11px;background:var(--emfe-w-color-white, #FFFFFF)}.Gift .ImgContainer{width:160px;height:107px;border-radius:11px;box-shadow:0px 2px 6px 0px var(--emfe-w-color-black-200, #00000040);cursor:pointer;background-size:cover;background-position:center center;background-repeat:no-repeat}.Gift .Point{font-size:20px}.Gift .Title,.Gift .Description{padding-left:3px}.Gift .Title{font-size:14px;margin-top:10px}.Gift .Description{font-size:12px;color:var(--emfe-w-color-black-100, #767171)}.Gift .AvaliableWrap{align-self:self-end}.Gift .AvaliableWrap.active{cursor:pointer}.Gift .AvaliableWrap.deactive{cursor:not-allowed}.Gift .AvaliableWrap span svg{width:var(--emfe-w-elevate-avaliable-button-size, 46px)}";
+const bonusElevateShopCss = ":host{display:block}svg circle{shape-rendering:crispEdges}.MainContainer{max-width:420px}.MainContainer player-elevate-pointcard{width:100%;height:220px}.Gifts{display:flex;justify-content:space-between;padding:15px;padding-left:-8px;padding-right:-8px;flex:0 0 45.1282051282%;flex-wrap:wrap;justify-content:flex-start;background:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black-150, #000000);font-weight:500;gap:10px;margin-top:-100px;position:relative;min-height:200px}.InfoContainer{display:flex;margin-top:17px;justify-content:space-between}.Gift{display:block;margin-bottom:10px;padding:8px;box-shadow:0px 18px 45px 0px var(--emfe-w-color-black-150, #A7A7A733);border-radius:11px;background:var(--emfe-w-color-white, #FFFFFF)}.Gift .ImgContainer{width:160px;height:107px;border-radius:11px;box-shadow:0px 2px 6px 0px var(--emfe-w-color-black-200, #00000040);cursor:pointer;background-size:cover;background-position:center center;background-repeat:no-repeat}.Gift .Point{font-size:20px}.Gift .Title,.Gift .Description{padding-left:3px}.Gift .Title{font-size:14px;margin-top:10px}.Gift .Description{font-size:12px;color:var(--emfe-w-color-black-100, #767171)}.Gift .AvaliableWrap{align-self:self-end}.Gift .AvaliableWrap.active{cursor:pointer}.Gift .AvaliableWrap.deactive{cursor:not-allowed}.Gift .AvaliableWrap span svg{width:var(--emfe-w-elevate-avaliable-button-size, 46px)}.NoContent{font-size:16px;color:var(--emfe-w-color-black-100, #afafaf);text-align:center;height:120px;line-height:120px}";
 
 const BonusElevateShop = class {
   constructor(hostRef) {
@@ -198,10 +200,13 @@ const BonusElevateShop = class {
     this.translationUrl = '';
     this.locale = translation['en'];
     this.gifts = [];
+    this.isLoading = true;
   }
   async updateGifts() {
+    this.isLoading = true;
     const res = await fetchNorwayApi.bind(this, '/v1/elevate/shop', {}).call();
     this.gifts = res.data || [];
+    this.isLoading = false;
   }
   async redeemGift(id) {
     if (!confirm('Are you sure to redeem this gift?'))
@@ -217,8 +222,21 @@ const BonusElevateShop = class {
       window.postMessage({ type: 'BEEGiftRedeem', itemId: id }, window.location.href);
     }
   }
+  loadGifts(renderer) {
+    if (this.isLoading) {
+      return h("general-animation-loading", null);
+    }
+    else {
+      if (this.gifts.length === 0) {
+        return (h("div", { class: "NoContent" }, this.locale.noContent));
+      }
+      else {
+        return renderer();
+      }
+    }
+  }
   render() {
-    return (h("main", { class: "MainContainer" }, h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: translation, translationUrl: this.translationUrl }), h("player-elevate-pointcard", { endpoint: this.endpoint, session: this.session, language: this.language, clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, translationUrl: this.translationUrl }), renderGifts(this.gifts, this.locale, this.redeemGift.bind(this))));
+    return (h("main", { class: "MainContainer" }, h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: translation, translationUrl: this.translationUrl }), h("player-elevate-pointcard", { endpoint: this.endpoint, session: this.session, language: this.language, clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, translationUrl: this.translationUrl }), this.loadGifts(renderGifts.bind(this, this.gifts, this.locale, this.redeemGift.bind(this)))));
   }
   async componentDidLoad() {
     this.updateGifts();

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["bonus-elevate-shop_4",[[1,"bonus-elevate-shop",{"session":[513],"endpoint":[513],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"locale":[32],"gifts":[32]}],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"cardTitle":[513,"card-title"],"buttonType":[513,"button-type"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32],"elevateSPTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"]]]]],["player-elevate-card",[[1,"player-elevate-card",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]],["player-elevate-loyaltycard",[[1,"player-elevate-loyaltycard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]]], options);
+  return bootstrapLazy([["bonus-elevate-shop_4",[[1,"bonus-elevate-shop",{"session":[513],"endpoint":[513],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"locale":[32],"gifts":[32],"isLoading":[32]}],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"cardTitle":[513,"card-title"],"buttonType":[513,"button-type"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32],"elevateSPTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"]]]]],["player-elevate-card",[[1,"player-elevate-card",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]],["player-elevate-loyaltycard",[[1,"player-elevate-loyaltycard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]]], options);
   });
 };
 

package/dist/types/components/bonus-elevate-shop/bonus-elevate-shop.d.ts

@@ -1,6 +1,7 @@
 import { Gift } from '../../utils/types';
 import { TLocale } from '../../utils/translation';
 import '@everymatrix/general-styling-wrapper';
+import '@everymatrix/general-animation-loading';
 import '@everymatrix/player-elevate-card';
 export declare class BonusElevateShop {
   /**
@@ -29,8 +30,10 @@ export declare class BonusElevateShop {
   translationUrl: string;
   locale: TLocale;
   gifts: Gift[];
+  isLoading: boolean;
   updateGifts(): Promise<void>;
   redeemGift(id: string): Promise<void>;
+  loadGifts(renderer: any): any;
   render(): any;
   componentDidLoad(): Promise<void>;
 }

package/dist/types/utils/translation.d.ts

@@ -2,6 +2,7 @@ export declare const translation: {
   en: {
     Points: string;
     Point: string;
+    noContent: string;
   };
 };
 export declare type TLocale = typeof translation['en'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/bonus-elevate-shop",
-  "version": "1.33.3",
+  "version": "1.33.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",
@@ -19,7 +19,8 @@
   ],
   "devDependencies": {
     "@everymatrix/player-elevate-card": "^1.32.4",
-    "stencil-inline-svg": "^1.1.0"
+    "stencil-inline-svg": "^1.1.0",
+    "@everymatrix/general-animation-loading": "^1.31.2"
   },
   "publishConfig": {
     "access": "public"

package/dist/bonus-elevate-shop/p-6410647b.entry.js

@@ -1 +0,0 @@
-import{h as e,r as n,g as t,c as i,a as r,F as a}from"./p-75b51599.js";import{r as o,t as l,g as s,a as d,T as c,P as p,b as h,c as f}from"./p-e2f63c46.js";async function v(e,n={},t={}){const{endpoint:i,language:r,session:a}=this,o=n;t.method&&"GET"!==t.method||(o.language=r);const l=((e,n={})=>e+"?"+Object.keys(n).map((e=>`${e}=${n[e]}`)).join("&"))(`${i}${e}`,o);return t.headers||(t.headers={}),t.headers["x-SessionId"]=a,await(async(e,n={})=>{let t;t=await fetch(e,n),t=await t.text();try{t=JSON.parse(t)}catch(e){console.error(e)}return t})(l,t)}const g={en:{Points:"Points",Point:"Point"}},u=class{constructor(e){n(this,e),this.language="en",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.locale=g.en,this.gifts=[]}async updateGifts(){const e=await v.bind(this,"/v1/elevate/shop",{}).call();this.gifts=e.data||[]}async redeemGift(e){confirm("Are you sure to redeem this gift?")&&(await v.bind(this,"/v1/elevate/redeem",{},{method:"PUT",body:JSON.stringify({giftID:e}),headers:{"Content-Type":"application/json-patch+json"}}).call()).success&&window.postMessage({type:"BEEGiftRedeem",itemId:e},window.location.href)}render(){return e("main",{class:"MainContainer"},e("general-styling-wrapper",{clientStyling:this.clientStyling,clientStylingUrl:this.clientStylingUrl,targetTranslations:g,translationUrl:this.translationUrl}),e("player-elevate-pointcard",{endpoint:this.endpoint,session:this.session,language:this.language,clientStylingUrl:this.clientStylingUrl,clientStyling:this.clientStyling,translationUrl:this.translationUrl}),(n=this.gifts,t=this.locale,i=this.redeemGift.bind(this),e("div",{class:"Gifts FlexLayout"},n.map((n=>{var r;const a=((e,n)=>{switch(e.available){case"true":return{extraClass:" active",onClick:()=>n(e.id),icon:'<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <g filter="url(#filter0_bd_179_6145)">\n    <circle cx="23" cy="19" r="19" style="fill: var(--emfe-w-elevate-avaliable-button-enabled-color, #53B65C);" />\n    <circle cx="23" cy="19" r="18" stroke="url(#paint0_linear_179_6145)" stroke-opacity="0.6" stroke-width="2"/>\n    <circle cx="23" cy="19" r="18" stroke="url(#paint1_linear_179_6145)" stroke-width="2"/>\n    <circle cx="23" cy="19" r="18" stroke="url(#paint2_linear_179_6145)" stroke-width="2"/>\n  </g>\n  <g filter="url(#filter1_d_179_6145)">\n    <path d="M31.1977 11C31.7015 11 32.1279 11.1777 32.4767 11.5332C32.8256 11.8887 33 12.3203 33 12.8281V18.9102C33 20.2852 32.7364 21.5977 32.2093 22.8477C31.6822 24.0977 30.9748 25.1719 30.0872 26.0703C29.1996 26.9688 28.1376 27.6816 26.9012 28.209C25.6647 28.7363 24.3682 29 23.0116 29C21.6473 29 20.3469 28.7363 19.1105 28.209C17.874 27.6816 16.8101 26.9688 15.9186 26.0703C15.0271 25.1719 14.3178 24.0977 13.7907 22.8477C13.2636 21.5977 13 20.2852 13 18.9102V12.8281C13 12.3281 13.1783 11.8984 13.5349 11.5391C13.8915 11.1797 14.3178 11 14.814 11H31.1977ZM23.0116 23.4688C23.376 23.4688 23.6938 23.3398 23.9651 23.082L28.6628 18.5352C28.9496 18.2617 29.093 17.9297 29.093 17.5391C29.093 17.1562 28.9593 16.8301 28.6919 16.5605C28.4244 16.291 28.1008 16.1562 27.7209 16.1562C27.3566 16.1562 27.0388 16.2852 26.7674 16.543L23.0116 20.1758L19.2558 16.543C18.9845 16.2852 18.6705 16.1562 18.314 16.1562C17.9341 16.1562 17.6105 16.291 17.343 16.5605C17.0756 16.8301 16.9419 17.1562 16.9419 17.5391C16.9419 17.9375 17.0814 18.2695 17.3605 18.5352L22.0698 23.082C22.3256 23.3398 22.6395 23.4688 23.0116 23.4688Z" fill="white"/>\n  </g>\n  <defs>\n    <filter id="filter0_bd_179_6145" x="-36" y="-40" width="118" height="118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\n      <feFlood flood-opacity="0" result="BackgroundImageFix"/>\n      <feGaussianBlur in="BackgroundImageFix" stdDeviation="20"/>\n      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_179_6145"/>\n      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>\n      <feOffset dy="4"/>\n      <feGaussianBlur stdDeviation="2"/>\n      <feComposite in2="hardAlpha" operator="out"/>\n      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>\n      <feBlend mode="normal" in2="effect1_backgroundBlur_179_6145" result="effect2_dropShadow_179_6145"/>\n      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_179_6145" result="shape"/>\n    </filter>\n    <filter id="filter1_d_179_6145" x="11" y="10" width="24" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\n      <feFlood flood-opacity="0" result="BackgroundImageFix"/>\n      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>\n      <feOffset dy="1"/>\n      <feGaussianBlur stdDeviation="1"/>\n      <feComposite in2="hardAlpha" operator="out"/>\n      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>\n      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_179_6145"/>\n      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_179_6145" result="shape"/>\n    </filter>\n    <linearGradient id="paint0_linear_179_6145" x1="49.2869" y1="15.1911" x2="36.3103" y2="15.603" gradientUnits="userSpaceOnUse">\n      <stop stop-color="white"/>\n      <stop offset="1" stop-color="#EFEFEF" stop-opacity="0"/>\n    </linearGradient>\n    <linearGradient id="paint1_linear_179_6145" x1="4" y1="0" x2="19.3776" y2="8.17396" gradientUnits="userSpaceOnUse">\n      <stop stop-color="white" stop-opacity="0.5"/>\n      <stop offset="1" stop-color="white" stop-opacity="0"/>\n    </linearGradient>\n    <linearGradient id="paint2_linear_179_6145" x1="42" y1="38" x2="27.0558" y2="34.3156" gradientUnits="userSpaceOnUse">\n      <stop stop-color="white" stop-opacity="0.5"/>\n      <stop offset="1" stop-color="white" stop-opacity="0"/>\n    </linearGradient>\n  </defs>\n</svg>\n'};case"false":return{extraClass:" deactive",onClick:()=>{},icon:'<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g filter="url(#filter0_bd_183_6497)">\n<circle cx="23" cy="19" r="19" style="fill: var(--emfe-w-elevate-avaliable-button-disabled-color, #B7B7B7);" />\n<circle cx="23" cy="19" r="18" stroke="url(#paint0_linear_183_6497)" stroke-opacity="0.6" stroke-width="2"/>\n<circle cx="23" cy="19" r="18" stroke="url(#paint1_linear_183_6497)" stroke-width="2"/>\n<circle cx="23" cy="19" r="18" stroke="url(#paint2_linear_183_6497)" stroke-width="2"/>\n</g>\n<g filter="url(#filter1_d_183_6497)">\n<path d="M31.1977 11C31.7015 11 32.1279 11.1777 32.4767 11.5332C32.8256 11.8887 33 12.3203 33 12.8281V18.9102C33 20.2852 32.7364 21.5977 32.2093 22.8477C31.6822 24.0977 30.9748 25.1719 30.0872 26.0703C29.1996 26.9688 28.1376 27.6816 26.9012 28.209C25.6647 28.7363 24.3682 29 23.0116 29C21.6473 29 20.3469 28.7363 19.1105 28.209C17.874 27.6816 16.8101 26.9688 15.9186 26.0703C15.0271 25.1719 14.3178 24.0977 13.7907 22.8477C13.2636 21.5977 13 20.2852 13 18.9102V12.8281C13 12.3281 13.1783 11.8984 13.5349 11.5391C13.8915 11.1797 14.3178 11 14.814 11H31.1977ZM23.0116 23.4688C23.376 23.4688 23.6938 23.3398 23.9651 23.082L28.6628 18.5352C28.9496 18.2617 29.093 17.9297 29.093 17.5391C29.093 17.1562 28.9593 16.8301 28.6919 16.5605C28.4244 16.291 28.1008 16.1562 27.7209 16.1562C27.3566 16.1562 27.0388 16.2852 26.7674 16.543L23.0116 20.1758L19.2558 16.543C18.9845 16.2852 18.6705 16.1562 18.314 16.1562C17.9341 16.1562 17.6105 16.291 17.343 16.5605C17.0756 16.8301 16.9419 17.1562 16.9419 17.5391C16.9419 17.9375 17.0814 18.2695 17.3605 18.5352L22.0698 23.082C22.3256 23.3398 22.6395 23.4688 23.0116 23.4688Z" fill="#F0F0F0"/>\n</g>\n<defs>\n<filter id="filter0_bd_183_6497" x="-36" y="-40" width="118" height="118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\n<feFlood flood-opacity="0" result="BackgroundImageFix"/>\n<feGaussianBlur in="BackgroundImageFix" stdDeviation="20"/>\n<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_183_6497"/>\n<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>\n<feOffset dy="4"/>\n<feGaussianBlur stdDeviation="2"/>\n<feComposite in2="hardAlpha" operator="out"/>\n<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>\n<feBlend mode="normal" in2="effect1_backgroundBlur_183_6497" result="effect2_dropShadow_183_6497"/>\n<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_183_6497" result="shape"/>\n</filter>\n<filter id="filter1_d_183_6497" x="11" y="10" width="24" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\n<feFlood flood-opacity="0" result="BackgroundImageFix"/>\n<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>\n<feOffset dy="1"/>\n<feGaussianBlur stdDeviation="1"/>\n<feComposite in2="hardAlpha" operator="out"/>\n<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>\n<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_183_6497"/>\n<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_183_6497" result="shape"/>\n</filter>\n<linearGradient id="paint0_linear_183_6497" x1="49.2869" y1="15.1911" x2="36.3103" y2="15.603" gradientUnits="userSpaceOnUse">\n<stop stop-color="white"/>\n<stop offset="1" stop-color="#EFEFEF" stop-opacity="0"/>\n</linearGradient>\n<linearGradient id="paint1_linear_183_6497" x1="4" y1="0" x2="19.3776" y2="8.17396" gradientUnits="userSpaceOnUse">\n<stop stop-color="white" stop-opacity="0.5"/>\n<stop offset="1" stop-color="white" stop-opacity="0"/>\n</linearGradient>\n<linearGradient id="paint2_linear_183_6497" x1="42" y1="38" x2="27.0558" y2="34.3156" gradientUnits="userSpaceOnUse">\n<stop stop-color="white" stop-opacity="0.5"/>\n<stop offset="1" stop-color="white" stop-opacity="0"/>\n</linearGradient>\n</defs>\n</svg>\n'}}})(n,i),o=n.presentation;return e("div",{class:"Gift"},e("div",{class:"ImgContainer",onClick:()=>window.postMessage({type:"BEEShopImgClicked",itemId:n.id},window.location.href),style:Object.assign({},(l=(null===(r=o.assets)||void 0===r?void 0:r.length)>0?o.assets[0]:"",l?{backgroundImage:`url('${l}')`}:{}))}),e("div",{class:"InfoContainer"},e("div",null,e("div",{class:"Point"},n.points," ",1===n.points?t.Point:t.Points),e("div",{class:"Title"},(null==o?void 0:o.displayName)||n.displayName),e("div",{class:"Description"},(null==o?void 0:o.description)||"")),e("div",{class:"AvaliableWrap"+a.extraClass,onClick:()=>a.onClick()},e("span",{innerHTML:a.icon}))));var l})))));var n,t,i}async componentDidLoad(){this.updateGifts()}static get assetsDirs(){return["static"]}static get watchers(){return{endpoint:["updateGifts"],language:["updateGifts"],session:["updateGifts"]}}};u.style=":host{display:block}svg circle{shape-rendering:crispEdges}.MainContainer{max-width:420px}.MainContainer player-elevate-pointcard{width:100%;height:220px}.Gifts{display:flex;justify-content:space-between;padding:15px;padding-left:-8px;padding-right:-8px;flex:0 0 45.1282051282%;flex-wrap:wrap;justify-content:flex-start;background:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black-150, #000000);font-weight:500;gap:10px;margin-top:-100px;position:relative;min-height:200px}.InfoContainer{display:flex;margin-top:17px;justify-content:space-between}.Gift{display:block;margin-bottom:10px;padding:8px;box-shadow:0px 18px 45px 0px var(--emfe-w-color-black-150, #A7A7A733);border-radius:11px;background:var(--emfe-w-color-white, #FFFFFF)}.Gift .ImgContainer{width:160px;height:107px;border-radius:11px;box-shadow:0px 2px 6px 0px var(--emfe-w-color-black-200, #00000040);cursor:pointer;background-size:cover;background-position:center center;background-repeat:no-repeat}.Gift .Point{font-size:20px}.Gift .Title,.Gift .Description{padding-left:3px}.Gift .Title{font-size:14px;margin-top:10px}.Gift .Description{font-size:12px;color:var(--emfe-w-color-black-100, #767171)}.Gift .AvaliableWrap{align-self:self-end}.Gift .AvaliableWrap.active{cursor:pointer}.Gift .AvaliableWrap.deactive{cursor:not-allowed}.Gift .AvaliableWrap span svg{width:var(--emfe-w-elevate-avaliable-button-size, 46px)}";const x=class{constructor(e){n(this,e),this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.stylingAppends=!1,this.setClientStyling=()=>{let e=document.createElement("style");e.innerHTML=this.clientStyling,this.el.prepend(e)},this.setClientStylingURL=()=>{let e=new URL(this.clientStylingUrl),n=document.createElement("style");fetch(e.href).then((e=>e.text())).then((e=>{n.innerHTML=e,setTimeout((()=>{this.el.prepend(n)}),1)})).catch((e=>{console.log("error ",e)}))}}componentDidRender(){this.stylingAppends||(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.stylingAppends=!0)}async componentWillLoad(){const e=[];if(this.translationUrl){const i=(n=this.translationUrl,t=this.targetTranslations,new Promise((e=>{fetch(n).then((e=>e.json())).then((n=>{Object.keys(n).forEach((e=>{t[e]=t[e]?t[e]:{};for(let i in n[e])t[e][i]=n[e][i]})),e(!0)}))})));e.push(i)}var n,t;return await Promise.all(e)}render(){return e("div",{class:"StyleShell"},e("slot",{name:"mainContent"}))}get el(){return t(this)}};function w(e){o(1,arguments);var n=l(e);return n.setHours(0,0,0,0),n}function m(e,n){return o(2,arguments),l(e).getTime()-l(n).getTime()}x.style=":host{display:block}";var y={ceil:Math.ceil,round:Math.round,floor:Math.floor,trunc:function(e){return e<0?Math.ceil(e):Math.floor(e)}};function b(e){return e?y[e]:y.trunc}const _=class{constructor(e){n(this,e),this.playerElevateLeveLoaded=i(this,"playerElevateLeveLoaded",7)}handleWindowResizs(){this.initLevelProgressbar()}onRedeemClick(){window.postMessage({type:"BEERedeemClicked"},window.location.href)}loadLevels(){let e=new URL(`${this.params.endpoint}/v1/elevate/levels?language=${this.params.language}`);return new Promise(((n,t)=>fetch(e.href,{method:"GET"}).then((e=>e.json())).then((e=>{this.levels=e.data,n(!0)})).catch((e=>{t(e)}))))}calcuatePointsToBeExpired(e){let n="";if(!e||!e.aboutToExpire||0==e.aboutToExpire.length||e.aboutToExpire[0].points<=0)return n;e.aboutToExpire.sort(((e,n)=>function(e,n){o(2,arguments);var t=l(e),i=l(n);return t.getTime()<i.getTime()}(new Date(e.expireTime),new Date(n.expireTime))?-1:1));const t=e.aboutToExpire[0],i=function(e,n){o(2,arguments);var t=w(e),i=w(n),r=t.getTime()-s(t),a=i.getTime()-s(i);return Math.round((r-a)/864e5)}(new Date(t.expireTime),new Date);let r=0,a=0===i?"pointsToBeExpiredDay":"pointsToBeExpired";return 0==i&&(r=function(e,n,t){o(2,arguments);var i=m(e,n)/36e5;return b(null==t?void 0:t.roundingMethod)(i)}(new Date(t.expireTime),new Date),a=r>1?"pointsToBeExpiredHours":"pointsToBeExpiredHour"),n=d(a,{expirationPoints:t.points,expireDay:i}),n}loadPlayerLevelInfo(){let e=new URL(`${this.params.endpoint}/v1/elevate/playerInfo?language=${this.params.language}`);return new Promise(((n,t)=>fetch(e.href,{method:"GET",headers:{"X-Sessionid":this.params.session,"Content-Type":"application/json"}}).then((e=>e.json())).then((e=>{var i,r,a;if(!e.success)return console.error("Exception when fetch user elevateinfo, ",e.errorCode,e.errorMessage),void t(!0);let o=e.data;this.playerElevateLevel=o.level,this.playerElevateLevel.name=this.playerElevateLevel.presentation.displayName||this.playerElevateLevel.name,this.playerElevateLevel.spendablePoints=(null===(i=o.spendableWallet)||void 0===i?void 0:i.total.points)||0,this.playerElevateLeveLoaded.emit({elevateLevel:this.playerElevateLevel});const l=null===(r=e.data.spendableWallet)||void 0===r?void 0:r.total,s=null===(a=e.data.loyaltyWallet)||void 0===a?void 0:a.total;this.playerElevateLeveLoaded.emit({elevateLevelWalletTotal:l,loyaltyWalletTotal:s});let d=this.calcuatePointsToBeExpired(l),c=this.calcuatePointsToBeExpired(s);(d||c)&&this.playerElevateLeveLoaded.emit({pointExpireString:d,xpExpireString:c}),n(this.playerElevateLevel)})).catch((e=>{console.log("error ",e),t(!0)}))))}setLoyaltyProgress(e){!function(e,n){const t=e.querySelector("#total_level"),i=t.getBBox().width,r=n*i-15<0?0:n*i-15,a=e.querySelector("#current_level"),o=e.querySelector("#filter_current_level"),l=e.querySelector("#circle_current_level");t.setAttribute("viewbox",`0 0 ${r} 28`),a.setAttribute("width",`${r}`),l.setAttribute("cx",`${r+3}`),o.setAttribute("x",""+(r-4));const s=e.querySelector("#lock"),d=e.querySelector("#filter_heart_ball"),c=e.querySelector("#filter_ball"),p=e.querySelector("#filter_heart"),h=e.querySelector("#filter_lock"),f=e.querySelector("#paint0_linear_ball"),v=e.querySelector("#paint1_linear_lock"),g=e.querySelector("#lock_box"),u=e.querySelector("#heart_box"),x=i-10;s.setAttribute("cx",`${x}`),v.setAttribute("x1",`${x}`),v.setAttribute("x2",`${x}`),f.setAttribute("x1",""+(x-6)),f.setAttribute("x2",""+(x-6+11.2)),h.setAttribute("x",""+(x-6)),p.setAttribute("x",""+(x-6-2)),c.setAttribute("x",""+(x-6-2-2)),d.setAttribute("x",""+(x-6-2-2-4)),g.setAttribute("x",""+(x-6)),u.setAttribute("x",""+(x-6))}(this.loyaltyProgressEle,e)}initLevelProgressbar(){setTimeout((()=>{this.loyaltyProgressEle=this.elevateCardRef.parentElement.querySelector("#LevelProgress"),this.loyaltyProgressEle&&(this.setLoyaltyProgress(this.playerElevateLevel.nextLevel?(this.playerElevateLevel.loyaltyPoints-this.playerElevateLevel.entryPoints)/(this.playerElevateLevel.nextLevel.entryPoints-this.playerElevateLevel.loyaltyPoints):1),this.params.playerElevateLevel=this.playerElevateLevel)}),80)}componentWillRender(){}componentDidRender(){this.initLevelProgressbar()}componentWillLoad(){if(!this.params.endpoint||!this.params.session)return;const e=[];e.push(this.loadPlayerLevelInfo()),this.params.calculateLevelFlag&&e.push(this.loadLevels()),Promise.all(e).then((e=>{if(console.log("elevate-init",e),this.initLevelProgressbar(),!this.levels)return;this.levels.sort(((e,n)=>e.firstEntryPoints>n.firstEntryPoints?1:-1));const n=this.playerElevateLevel.loyaltyPoints;let t=0;this.levels.forEach(((e,i)=>{n>e.firstEntryPoints&&(t=i)})),this.playerElevateLeveLoaded.emit({calculatedLevelFlag:t})}))}get elevateCardRef(){return t(this)}};_.style=':host {\n  display: block;\n  width: 360px;\n  height: 230px;\n}\n\n.ElevateCardWrapper {\n  contain: layout inline-size;\n  width: 100%;\n  height: fit-content;\n  min-height: 218px;\n}\n\n.Outer {\n  container-type: inline-size;\n  font-size: 12px;\n  background-size: cover;\n  background-repeat: no-repeat;\n  line-height: initial;\n  width: 100%;\n  height: 100%;\n}\n\n.Dark {\n  color: var(--emfe-w-color-gray150, #efefef);\n}\n\n.Light {\n  color: var(--emfe-w-color-black, #0e0e0e);\n}\n\n@container (min-width: 381px) {\n  .Outer {\n    background-size: cover;\n  }\n  .Outer .OuterCover {\n    min-height: 190px;\n  }\n}\n@container (min-width: 260px) {\n  .Outer {\n    background-size: contain;\n  }\n}\n.OuterCover {\n  width: 100%;\n  height: 100%;\n  content: "";\n  background-repeat: no-repeat;\n  background-size: cover;\n  border-radius: 15px;\n}\n\n.Inner {\n  display: flex;\n  flex-direction: column;\n  min-height: 158px;\n}\n.Inner .Content {\n  padding: 15px;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.Inner .Row {\n  display: flex;\n  flex-direction: row;\n}\n.Inner .CardCell {\n  display: flex;\n}\n.Inner .LevelInfo {\n  display: flex;\n  flex-direction: column;\n}\n.Inner .LevelInfo .ElevateLevel .LevelName {\n  height: 28px;\n  border-radius: 5px;\n  line-height: 28px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.Inner .LevelInfo.Level0 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level0button-shadow, rgba(191, 84, 6, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level0-bg0, #E2792C) 0%, var(--emfe-w-elevate-color-level0-bg1, rgba(242, 151, 99, 0)) 100%);\n}\n.Inner .LevelInfo.Level1 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level1button-shadow, rgba(151, 151, 151, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level1-bg0, #BEBFED) 0%, var(--emfe-w-elevate-color-level1-bg1, rgba(216, 217, 233, 0)) 100%);\n}\n.Inner .LevelInfo.Level2 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level2button-shadow, rgba(191, 120, 6, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level2-bg0, #FCC410) 0%, var(--emfe-w-elevate-color-level2-bg1, rgba(255, 189, 43, 0)) 100%);\n}\n.Inner .LevelInfo.Level3 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level3button-shadow, rgba(65, 6, 191, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level3-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level3-bg1, rgba(203, 202, 245, 0)) 100%);\n}\n.Inner .LevelInfo.Level4 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level4button-shadow, rgba(65, 6, 191, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level4-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level4-bg1, rgba(203, 202, 245, 0)) 100%);\n}\n.Inner .LevelInfo .ElevateLevel {\n  display: flex;\n}\n.Inner .LevelInfo {\n  flex: 1;\n  flex-grow: 1;\n  min-width: 150px;\n}\n.Inner .PlayerImg {\n  width: 29%;\n  margin: auto;\n  max-width: 100px;\n  min-width: 30px;\n  order: 0;\n}\n.Inner .PlayerAvatar {\n  max-width: 100px;\n  flex-basis: 100px;\n  height: auto;\n  margin: auto;\n  padding-top: 10px;\n}\n.Inner .PlayerAvatar .Avatar, .Inner .PlayerAvatar .Badge {\n  width: 100%;\n  height: 100%;\n}\n.Inner .PlayerAvatar .Avatar {\n  border-radius: 50%;\n  background-size: contain;\n  background-repeat: no-repeat;\n}\n.Inner .ElevateLevel .ExpirationDate {\n  max-width: 138px;\n  min-width: 118px;\n}\n.Inner .PlayerName, .Inner .RedeemButton, .Inner .ElevateLevel {\n  text-transform: capitalize;\n  width: 100%;\n}\n.Inner .PlayerName {\n  font-size: 16px;\n}\n.Inner .Row .PointsInfo {\n  display: table;\n  font-weight: 600;\n}\n.Inner .Row .Redeem {\n  justify-content: flex-end;\n  margin-left: auto;\n}\n.Inner .Row .Redeem:hover {\n  color: var(--emfe-w-elevate-color-redeem-hover, #00ABA4);\n  cursor: pointer;\n}\n.Inner .Row .RedeemButton:hover span {\n  color: var(emfe-w-elevate-color-redeem-text-hover, #f1f1f1);\n  font-weight: bold;\n}\n.Inner .Row .RedeemButton {\n  width: 95px;\n  height: 35px;\n  display: flex;\n  align-items: center;\n  border-radius: 10px;\n  background: var(--emfe-w-elevate-color-redeem-bg, linear-gradient(0deg, #26CC37, #26CC37)), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%);\n  box-shadow: 0px 4px 4px 0px #00000040;\n}\n.Inner .Row .RedeemButton span {\n  color: var(--emfe-w-color-white, #fff);\n  line-height: 18px;\n  font-size: 15px;\n  text-align: center;\n  width: 100%;\n}\n.Inner .Row .Points {\n  font-size: large;\n  vertical-align: middle;\n}\n.Inner .Row .Points .XP {\n  font-size: x-small;\n}\n.Inner .Row .ExpirationPoints {\n  font-size: small;\n  text-align: right;\n  font-weight: bold;\n  color: var(--emfe-w-color-red, #9e595f);\n}';const C=class{constructor(e){n(this,e),this.theme="Dark",this.language="en",this.buttonType="earningRule",this.dateFormat="yyyy-MM-dd",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.isPointDetailCard="earningRule"===this.buttonType}playerElevateLeveLoadedHandler(e){e.detail&&(e.detail.elevateLevelWalletTotal&&(this.elevateWalletTotal=e.detail.elevateLevelWalletTotal,this.elevateSPTotal=e.detail.loyaltyWalletTotal),e.detail.elevateLevel&&(this.playerElevateLevel=e.detail.elevateLevel),e.detail.pointExpireString&&(this.pointExpireString=e.detail.pointExpireString))}onDetailsClick(){window.postMessage({type:this.isPointDetailCard?"BEEPointRulesClicked":"BEEDetailsClicked",path:this.isPointDetailCard?"player-elevate-level":"player-elevate-point-details"},window.location.href)}componentWillLoad(){this.paramProxy={endpoint:this.endpoint,session:this.session,language:this.language}}render(){const n=r("../static/card-ground.svg"),t=r("../static/card-ground-over.svg");return e("div",{class:`ElevateCardWrapper ${this.theme}`},e("div",{class:"PointsCard Outer ",style:{backgroundImage:`url(${n}`}},e("general-styling-wrapper",{clientStyling:this.clientStyling,clientStylingUrl:this.clientStylingUrl,targetTranslations:c,translationUrl:this.translationUrl}),e("player-elevate-card-data",{params:this.paramProxy}),e("div",{class:"OuterCover Inner",style:{backgroundImage:`url(${t}`}},e("div",{class:"Content Row"},this.playerElevateLevel&&e(a,null,e("div",{class:"PlayerImg"},e(p,{onlyBadge:!0,loyaltyIconUrl:this.playerElevateLevel.presentation.asset})),e("div",{class:`LevelInfo ${this.playerElevateLevel.name}`},e("div",{class:"PointsTxt Label"},this.cardTitle?this.cardTitle:h("spendablePoints")),e("div",{class:"PointsTxt SPPoints"},e(f,{spendablePoints:this.playerElevateLevel.spendablePoints,language:this.language}),e("a",{class:"TC",onClick:()=>{this.onDetailsClick()}},h("termAndConditions",this.language))),this.pointExpireString&&e("div",{class:"ExpirationPoints"},this.pointExpireString," ")))))))}};C.style=":host{display:block}.PointsCard .Inner .Row .ExpirationPoints{text-align:left}.PointsCard .Inner .PlayerAvatar .Avatar{display:none}.PointsCard .Inner .PlayerAvatar .Badge{border-radius:50%;background-size:contain;width:100%;height:100%;position:inherit}.PointsCard .Inner .PointsTxt{display:flex;flex-direction:row;justify-content:space-between}.PointsCard .Inner .DetailButton{background:linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%), linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));border-radius:5px;box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);border:2px solid;font-size:11px;width:108px;padding:4px;cursor:pointer;margin-top:5px;height:16px;min-width:45px;text-align:center}.PointsCard .Inner .DetailButton span{color:var(--emfe-w-color-gray-150, #6D6D6D)}.PointsCard .Inner .DetailButton span{display:inline-block;vertical-align:middle}.PointsCard .Inner .DetailButton:hover span{color:var(--emfe-w-color-gray-150, #6D6D6D)}.PointsCard .Inner .LevelInfo{gap:15px;width:70%}.PointsCard .Inner .LevelInfo .PointsTxt{font-size:15px}.PointsCard .Inner .LevelInfo .PointsTxt.Label{display:none}.PointsCard .Inner .LevelInfo .PointsTxt.SPPoints{padding-top:15px}.PointsCard .Inner .LevelInfo .PointsTxt .TC{font-size:x-small;color:var(--emw--color-gray-300, #58586B);display:flex;align-content:center;height:100%;flex-wrap:wrap;text-decoration:underline;cursor:pointer;display:none}";export{u as bonus_elevate_shop,x as general_styling_wrapper,_ as player_elevate_card_data,C as player_elevate_pointcard}