@everymatrix/casino-engagement-suite-luckywheel 0.6.3 → 0.7.0

package/dist/casino-engagement-suite-luckywheel/casino-engagement-suite-luckywheel.esm.js

@@ -1 +1 @@
-import{p as e,b as n}from"./p-7d1170ae.js";export{s as setNonce}from"./p-7d1170ae.js";import{g as i}from"./p-e1255160.js";(()=>{const n=import.meta.url,i={};return""!==n&&(i.resourcesUrl=new URL(".",n).href),e(i)})().then((async e=>(await i(),n([["p-b7afe849",[[1,"casino-engagement-suite-luckywheel",{clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],language:[1],device:[1],luckywheel:[16],size:[1],contentdirection:[1],limitStylingAppends:[32],isPartitionsCustomableReady:[32],isSpinning:[32],options:[32],radius:[32],speed:[32],settings:[32],svg:[32],spinContainer:[32],spinable:[32],spinner:[32]},[[8,"message","handleEvent"]]]]]],e))));
+import{p as e,b as n}from"./p-7d1170ae.js";export{s as setNonce}from"./p-7d1170ae.js";import{g as i}from"./p-e1255160.js";(()=>{const n=import.meta.url,i={};return""!==n&&(i.resourcesUrl=new URL(".",n).href),e(i)})().then((async e=>(await i(),n([["p-6b36a6f1",[[1,"casino-engagement-suite-luckywheel",{clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],language:[1],device:[1],luckywheel:[16],size:[1],contentdirection:[1],limitStylingAppends:[32],isPartitionsCustomableReady:[32],isSpinning:[32],options:[32],radius:[32],speed:[32],settings:[32],svg:[32],spinContainer:[32],spinable:[32],spinner:[32]},[[8,"message","handleEvent"]]]]]],e))));

package/dist/casino-engagement-suite-luckywheel/index.esm.js

@@ -1 +1 @@
-export{C as CasinoEngagementSuiteLuckywheel}from"./p-24a65524.js";import"./p-7d1170ae.js";
+export{C as CasinoEngagementSuiteLuckywheel}from"./p-a50d208a.js";import"./p-7d1170ae.js";

package/dist/casino-engagement-suite-luckywheel/p-6b36a6f1.entry.js

@@ -0,0 +1 @@
+export{C as casino_engagement_suite_luckywheel}from"./p-a50d208a.js";import"./p-7d1170ae.js";

package/dist/casino-engagement-suite-luckywheel/p-a50d208a.js

@@ -0,0 +1,15 @@
+import{r as t,h as i,g as e}from"./p-7d1170ae.js";
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */var s,r,n,a,o,h;!function(t){t.Arrow="Arrow",t.Partition="Partition"}(s||(s={})),function(t){t.DownFromTop="DownFromTop",t.UpFromCenter="UpFromCenter",t.DownFromCenter="DownFromCenter",t.UpFromBottom="UpFromBottom"}(r||(r={})),function(t){t.en="en",t.fr="fr",t.de="de",t.tr="tr"}(n||(n={})),function(t){t[t.clockwise=1]="clockwise",t[t.anticlockwise=-1]="anticlockwise",t[t.outward=0]="outward"}(a||(a={})),function(t){t.launch="launch",t.loop="loop",t.halt="halt"}(o||(o={})),function(t){t.quad="quad",t.cubic="cubic",t.quart="quart",t.quint="quint",t.expo="expo",t.sine="sine",t.circ="circ"}(h||(h={}));const c=(t,i)=>{Object.keys(i).map((e=>{t.setAttribute(e.split(/(?=[A-Z])/).map((t=>t.toLocaleLowerCase())).join("-"),i[e])}))},l=t=>new Promise((i=>{let e=document.createElementNS("http://www.w3.org/2000/svg","image");e.onload=()=>i(e),e.onerror=()=>i(e),e.href.baseVal=t})),d=t=>({x:t,y:t}),u=(t,i)=>({x:t.x+i.x,y:t.y+i.y}),g={Image:"",Name:"Thank you",PrizeText:"",PrizeImage:""},b=async(t,i)=>{let e=((t,i)=>{const e=t.map((t=>{const e={};return Object.keys(t).map((s=>{"object"==typeof t[s]&&t[s]&&(e["Image1"===s?"Image":s]=t[s][i]||t[s]["*"])})),e}));return(t=>{let i=0;return t.map((t=>{i+=Number(t.probability)})),i})(t)<1&&e.push(g),e})(t.Program.WheelOfFortune.Partitions,i);return e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent)?e.map((t=>{if(t.Image){const i=document.createElementNS("http://www.w3.org/2000/svg","image");return i.href.baseVal=t.Image,Object.assign(Object.assign({},t),{Image:i})}return t})):await Promise.all(e.map((async t=>Object.assign(Object.assign({},t),await(async t=>t?{Image:await l(t)}:{})(t.Image))))),e},p={in:{quad:t=>Math.pow(t,2),cubic:t=>Math.pow(t,3),quart:t=>Math.pow(t,4),quint:t=>Math.pow(t,5),sine:t=>1-Math.cos(t*Math.PI/2),expo:t=>0===t?0:Math.pow(2,10*t-10),circ:t=>1-Math.sqrt(1-Math.pow(t,2))},out:{quad:t=>1-Math.pow(1-t,2),cubic:t=>1-Math.pow(1-t,3),quart:t=>1-Math.pow(1-t,4),quint:t=>1-Math.pow(1-t,5),sine:t=>Math.sin(t*Math.PI/2),expo:t=>1===t?1:1-Math.pow(2,-10*t),circ:t=>Math.sqrt(1-Math.pow(t-1,2))}},f={quad:2,cubic:3,quart:4,quint:5,sine:Math.PI/2,expo:Math.LN2,circ:1/0},m={in:{quad:t=>2*t,cubic:t=>3*t**2,quart:t=>4*t**3,quint:t=>5*t**4,sine:t=>Math.PI/2*Math.sin(Math.PI/2*t),expo:t=>10*Math.LN2*2**(10*t-10),circ:t=>-.5*(1-t**2)**-.5},out:{cubic:t=>3*t**2-6*t+3}},v=[{launchTurns:5,launchSpeed:.2,loopSpeed:15,haltTurns:2,haltSpeed:.16},{launchTurns:2,launchSpeed:.5,loopSpeed:20,haltTurns:2,haltSpeed:.22},{launchTurns:6,launchSpeed:1.38,loopSpeed:45,haltTurns:6,haltSpeed:.5}],y=t=>Object.keys(t).map((i=>t[i]));var x;!function(t){t[t.clockwise=1]="clockwise",t[t.anticlockwise=-1]="anticlockwise"}(x||(x={}));class k{constructor({size:t,radius:i,options:e,themeIndex:s,contentdirection:n}){this.arrowmode=r.DownFromTop,this.convertDegToArc=t=>t*Math.PI/180,this.convertArcToDeg=t=>180*t/Math.PI%360,this.getArcDelta=t=>2*Math.PI/t,this.findDeg=(t,i)=>t*this.convertArcToDeg(this.getArcDelta(i)),this.angleTransform=t=>{switch(t){case r.DownFromTop:case r.UpFromCenter:return-Math.PI/2;case r.DownFromCenter:case r.UpFromBottom:return Math.PI/2}},this.contentdirection=n,this.center=t/2,this.ratio=t/375,this.options=e,this.length=e.length,this.themeIndex=s,this.radius=i}get sizeImage(){const t=t=>48*this.ratio*5/t;if(this.length<=3)return t(4);switch(this.length){case 8:case 7:return 24*this.ratio;case 6:return 36*this.ratio;case 5:return 48*this.ratio;case 4:return 56*this.ratio;default:return t(this.length)}}getSizeImageByPartition(t){return this.options[t].Name?this.sizeImage/2:this.sizeImage}getSvgImageProps(t,i=1.25){const e=this.getSizeImageByPartition(t);let s;return s=this.options[t].Name?this.radius-e/2-3*this.ratio:(this.radius-e/2)/Number(i)-3*this.ratio,Object.assign(Object.assign({},this.getPropsForPartitionInfo(t,this.getOffsetImage(e),s,a.outward)),{width:e,height:e})}getSvgTextProps(t,i){const e=this.getSizeImageByPartition(t);let s;return s=this.options[t].Image?this.radius-e-6*this.ratio:this.radius-6*this.ratio,Object.assign({},this.getPropsForPartitionInfo(t,this.offsetText,s,void 0,i))}getSvgTextPropsAdjustedByImage(t){const i=this.getSvgTextProps(t,this.options[t].Image?80:100);return Object.assign({},i)}get offsetText(){return{center:0,position:{x:0,y:0},transform:{x:0,y:0}}}getOffsetImage(t){return{center:0,position:{x:-1*t/2,y:-1*t/2},transform:{x:0,y:0}}}get direction(){return x.clockwise}getAngleSelf(t,i){return 360*t/this.length*this.direction+90*(void 0!==i?i:a[this.contentdirection])}getPartitionPositions(t,i,e){const s=this.angleTransform(this.arrowmode)+this.direction*t*2*Math.PI/this.length,r=((t,i,e)=>{const s=d(e);return{x:s.x+t*Math.cos(i),y:s.y+t*Math.sin(i)}})(i||this.radius-9*this.ratio,s,this.center+e.center);return{transformOrigin:u(r,e.transform),point:u(r,e.position)}}getPropsForPartitionInfo(t,i,e,s,r){const{point:n,transformOrigin:a}=this.getPartitionPositions(t,e,i);return Object.assign(Object.assign({},n),{style:{"font-size":13*this.ratio+"px",transform:`rotate(${this.getAngleSelf(t,s)}deg) translate(${"clockwise"===this.contentdirection?n.x:n.x-100}px, ${n.y-50}px)`,"transform-origin":`${o=a,Object.keys(o).map((t=>`${o[t]}px`)).join(" ")}`,height:`${r}px`,width:`${r}px`}});var o}getPartitionDraw(t){const i=d(this.center),e=d(this.radius),{point:s,pointNext:r}=((t,i,e,s)=>{const r=t=>((t,i,e,s)=>{const r=Math.PI/180*(360/i*(t-.5)-90),n=d(s),a=d(e);return{x:n.x+a.x*Math.cos(r),y:n.y+a.y*Math.sin(r)}})(t,i,e,s);return{point:r(t),pointNext:r(t+1)}})(t,this.length,this.radius,this.center);return{d:["M",...y(i),"L",...y(s),"A",...y(e),"0 0 1",...y(r),"Z"].join(" ")}}getDeg(t){return this.findDeg(length-(t||this.length-1),length)}getSpinnerProps(){const t=d(this.center);return{"transform-origin":`${t.x} ${t.y}`}}}class w{constructor(t){this.deg=0,this.degTarget=void 0,this.step=void 0,this.easingType=h.cubic,this.param=v[2],this.halt=(t,i=(()=>{}))=>{this.shouldHalt=()=>{this.step=o.halt,this.cb=()=>{i(),this.setDeg(t,0)},this.degTarget=t+360*this.param.haltTurns,this.continueRepeat()}},this.continueRepeat=()=>setTimeout((()=>this.ticker()),30),this.ticker=()=>{const t=this.param.loopSpeed,i=t=>33*f[this.easingType]*t/this.param.loopSpeed,e=()=>{const t=360*this.param.launchTurns-this.deg,e=i(t);this.animateF(e,this.deg,t,p.in[this.easingType],m.in[this.easingType])},s=()=>{const t=i(this.degTarget);this.animateF(t,0,this.degTarget,p.out[this.easingType],m.out[this.easingType])},r=()=>{this.setDeg((this.deg+t)%360,f[this.easingType]),this.continueRepeat()};({[o.launch]:()=>{this.cb=()=>{this.step=o.loop,this.setDeg(t,f[this.easingType]),this.continueRepeat()},e()},[o.loop]:()=>{this.shouldHalt&&0===this.deg?this.shouldHalt():r()},[o.halt]:()=>{this.deg===360-t?s():r()}})[this.step]()},this.setDeg=(t,i)=>{this.deg=t,this.tick(t,i)},this.animateF=(t,i,e,s,r)=>{let n=null;const a=()=>{let o=(new Date).getTime();n||(n=o);const h=o-n,c=e*s(h/t)+i,l=Math.abs(r(h/t));this.setDeg(c,l),h<t?setTimeout((()=>a()),30):this.cb()};a()},this.animate=(t,i,e,s,r)=>{let n=null;window.cancelAnimationFrame(n);let a=null;const o=h=>{a||(a=h);const c=h-a,l=e*s(c/t)+i,d=Math.abs(r(c/t));this.setDeg(l,d),c<t?n=window.requestAnimationFrame(o):this.cb()};n=window.requestAnimationFrame(o)},this.tick=t.tick}launch(){this.shouldHalt=void 0,this.step=o.launch,this.ticker()}}const P=class{constructor(i){t(this,i),this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.host.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.host.prepend(i)}),1)})).catch((t=>{console.log("Error ",t)}))},this.renderImage=(t,i)=>{const e=this.options[i].Image;c(e,this.settings.getSvgImageProps(i)),t.innerHTML=null,t.appendChild(e)},this.updateSpinable=()=>{if(this.luckywheel.Current){if(Number(this.luckywheel.Current.RemainingTimes)>0)return void(this.spinable=!0);window.postMessage({type:"ShowNoSpinLeftModal"})}this.spinable=!1},this.eventSpin=()=>{this.updateSpinable(),this.spinable&&!this.isSpinning&&(this.isSpinning=!0,this.spinContainer=this.svg.querySelector("g.PartitionsContainer"),this.spinner.launch(),window.postMessage({type:"SpinLuckyWheel",data:{lotteryProgramID:this.luckywheel.Program.Id}}))},this.clientStyling="",this.clientStylingUrl="",this.language="en",this.device="Mobile",this.luckywheel=void 0,this.size="440",this.contentdirection="anticlockwise",this.limitStylingAppends=!1,this.isPartitionsCustomableReady=!1,this.isSpinning=!1,this.options=void 0,this.radius=.85*Number(this.size)/2,this.speed=0,this.settings=void 0,this.svg=void 0,this.spinContainer=void 0,this.spinable=void 0,this.spinner=void 0}handleEvent(t){const i=null==t?void 0:t.data,{type:e}=i,s=function(t,i){var e={};for(var s in t)Object.prototype.hasOwnProperty.call(t,s)&&i.indexOf(s)<0&&(e[s]=t[s]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(s=Object.getOwnPropertySymbols(t);r<s.length;r++)i.indexOf(s[r])<0&&Object.prototype.propertyIsEnumerable.call(t,s[r])&&(e[s[r]]=t[s[r]])}return e}(i,["type"]);if("SpinLuckyWheelRes"===e){const t=!1===s.success,i=+s.data.Result.WheelOfFortunePartitionIndex;this.spinner.halt(this.settings.getDeg(i),(()=>{var e;this.isSpinning=!1,this.updateSpinable();let s="";if(!t){const t=null===(e=this.luckywheel.Program.WheelOfFortune.Partitions[i])||void 0===e?void 0:e.PrizeText;s=t[this.language]||t["*"],this.luckywheel.Current.RemainingTimes=+this.luckywheel.Current.RemainingTimes-1}window.postMessage({type:"ShowLuckywheelRewardModal",data:{PrizeMessage:s,HasError:t}})}))}}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}async componentWillLoad(){this.options=await b(this.luckywheel,n.en),this.settings=new k({size:this.size,radius:this.radius,options:this.options,themeIndex:1,contentdirection:this.contentdirection}),this.spinner=new w({tick:(t,i)=>{c(this.spinContainer,{style:[`transform: rotate(${t}deg)`,`height: ${this.size}px`,`width: ${this.size}px`].join(";")}),this.speed=.5*i}})}defineGeneralVariables(){return{"--length":`${this.options.length}`,"--radius":`${this.radius}`,"--ratio":""+Number(this.size)/480,"--size":`${this.size}`}}render(){const t={height:this.size,width:this.size},e={height:`${this.size}px`,width:`${this.size}px`};return i("div",{key:"ea47ff81b5aa4173b448295e474f94e8c2799aec",class:`WheelContainer ${this.device}`,style:this.defineGeneralVariables()},i("svg",{key:"6c486c941b63b79a0e33ef2a078b225869080b9d",width:this.size,height:this.size,ref:t=>{this.svg=t}},i("foreignObject",Object.assign({key:"4dd2fc761bc1914e3e5104fdfaf03c126f481e5d"},t,{style:e,class:"Bottom Customable"}),i("div",{key:"621ea705e477cadafa8be17108e0ccab3a8833f3",style:e})),i("g",Object.assign({key:"61642e6056a75a114c8d3d4bab22bde7fe17afff",class:"PartitionsContainer"},this.settings.getSpinnerProps()),i("g",{key:"53cc83c283e3d7eb625c4d9687c2862173bdee86",class:"PartitionsBackgrounds"},this.options.map(((t,s)=>i("foreignObject",{"clip-path":`url(#clip${s})`,class:"PartitionBackground Customable",style:Object.assign({"--index":s.toString()},e)},i("div",{style:e}))))),i("g",{key:"51ca18f5b7c877357a60d2ceb8f9b99cafcf6818",class:"PartitionsBackgroundStrokes"},this.options.map(((t,e)=>i("path",Object.assign({class:"PartitionBackgroundStroke"},this.settings.getPartitionDraw(e),{width:this.size,height:this.size}))))),i("g",{key:"cc81bbe2e72960ced6562702ab7be1dc7973480c",class:"Partitions",style:{filter:this.speed>.3?`blur(${this.speed}px)`:""}},this.options.map(((t,e)=>[t.Image&&i("g",{class:`PartitionImage PartitionImage${e}`,ref:t=>this.renderImage(t,e)}),t.Name&&i("foreignObject",Object.assign({class:"PartitionText"},this.settings.getSvgTextPropsAdjustedByImage(e)),i("div",{class:"PartitionTextEntityContainer"},i("p",{class:"PartitionTextEntity"+("clockwise"===this.settings.contentdirection?"":" Anticlockwise"),innerHTML:t.Name})))])))),i("g",{key:"d126a5bde2af4b31f32ec029c117637fa5983e20",class:{active:this.isPartitionsCustomableReady,PartitionsCustomable1:!0}},this.options.map(((s,r)=>i("foreignObject",Object.assign({class:"Partition1 Customable",style:{"--index":r.toString()}},t),i("div",{style:e}))))),i("g",{key:"abb7544782eb40d08fa1304612f69ed389e10dcf",class:{active:this.isPartitionsCustomableReady,PartitionsCustomable2:!0}},this.options.map(((s,r)=>i("foreignObject",Object.assign({class:"Partition2 Customable",style:{"--index":r.toString()}},t),i("div",{style:e}))))),i("foreignObject",Object.assign({key:"a76b670602be3050180ab71b2e4e424937865358",class:"Middle Customable"},t,{style:e}),i("div",{key:"1d074b872c29092a51ce7a8c2c8cf2e4a84c1381",style:e})),i("foreignObject",Object.assign({key:"b8525ca3463cbde5a12f47655bc82451ef648012",class:"Top Customable"},t,{style:e}),i("div",{key:"ddbe297ea9947778975248dd111faed457bb9433",style:e})),i("g",{key:"0d247fcbc8734643bc36f9f457876d3b4cb462fa",class:{spinning:this.isSpinning,Center:!0},onClick:this.eventSpin},i("foreignObject",{key:"b63e7d4e9f73c101305c4854565ad9ce9c11c171",style:{width:"100px",height:"100px",transform:`translate(${Number(this.size)/2-50}px, ${Number(this.size)/2-50}px)`}})),i("g",{key:"d3e9be9a11f4c6d8c6abff35936c33ff5cf8c26d"},this.options.map(((t,e)=>i("clipPath",{id:`clip${e}`},i("path",Object.assign({},this.settings.getPartitionDraw(e)))))))))}get host(){return e(this)}};P.style=':host{font-family:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"}*,*::before,*::after{margin:0;padding:0;list-style:none;text-decoration:none;outline:none;box-sizing:border-box}.LotteryProgramWof{background:var(--emw--color-contrast, #07072A);display:flex;align-items:center;flex-direction:column;padding:20px 0}main{max-width:600px;width:100%;display:flex;justify-content:space-around;min-height:200px}svg{transition:opacity 0.3s}.WheelContainer{text-align:center}.FortuneContainer{width:100%;display:flex;align-items:center;flex-direction:column}.Center{cursor:pointer;transition:filter;transition-duration:1s}.Center.disabled{filter:grayscale(80%)}.Center .CenterCircle{fill:#3CE4BB;stroke:rgb(150, 54, 88);stroke-width:2px;cursor:pointer;transition:fill;transition-duration:1s}.Center .CenterText{fill:#FFFFFF}.PointerPartition{opacity:0.3;fill:lightgoldenrodyellow;stroke:red;stroke-width:6px;stroke-dasharray:12}.Current{color:#FFFFFF}.PartitionText{color:#FFFFFF;font-style:normal;font-weight:700;text-anchor:end;text-shadow:0px 3px #000;dominant-baseline:central}.PartitionsShadow{background-blend-mode:multiply;mix-blend-mode:multiply}.PartitionTextEntityContainer{height:100%;display:flex;align-items:center}.PartitionTextEntity{width:100%}.PartitionTextEntity.Anticlockwise{text-align:end}foreignObject.Bottom div{background-image:url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-bg.svg");background-size:calc(var(--radius) * 2px + var(--ratio) * 20px);background-position:center}foreignObject.Middle div{background-image:url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-spin.svg"), url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-pointer.svg");background-position:center, center 5px}foreignObject.Top{mix-blend-mode:multiply}foreignObject.Top div{background-image:var(--img-theme-shadow);background-position:center;background-size:calc(var(--radius) * 2px)}foreignObject.Partition1 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc(var(--index) * 360deg / var(--length)))}foreignObject.Partition2 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc((var(--index) + 0.5) * 360deg / var(--length)))}foreignObject.PointerArea{mix-blend-mode:screen}foreignObject.PointerArea div{background-image:var(--img-theme-pointer-area);background-position:center -3px;background-size:51%}foreignObject.Partition1 div,foreignObject.Partition2 div{transform-origin:center}.PartitionsCustomable1 div,.PartitionsCustomable2 div{visibility:hidden}.PartitionsCustomable1 div.active,.PartitionsCustomable2 div.active{visibility:visible}foreignObject.Customable{overflow:visible}foreignObject.Customable div{background-repeat:no-repeat}.PartitionBackground div{background-size:calc(var(--radius) * 2 / var(--size) * 100%) calc(var(--radius) * 2 / var(--size) * 100%);background-position:center}.PartitionBackground:nth-child(2n) div{background:var(--emw--color-primary, #3F2E75)}.PartitionBackground:nth-child(2n+1) div{background:var(--emw--color-secondary, #9482CE)}.PartitionBackground div{transform-origin:center}.PartitionBackgroundStroke{fill:transparent;stroke:var(--emw--color-background-secondary, #251D3E);stroke-width:3px;stroke-dasharray:none}.PointerPartitionFrame{stroke:#FFDD64;fill:transparent;stroke-dasharray:var(--radius) calc(6.2831853072 / var(--length) * var(--radius));stroke-width:0px}.PointerPartitionFrame.active{stroke-width:3px}.WheelContainer.Mobile foreignObject.Middle div{background-size:95px, 38px}.PartitionText .PartitionTextEntityContainer .PartitionTextEntity{text-align:center;text-transform:uppercase;text-shadow:none;font-size:var(--emw--font-size-small, 14px);font-weight:900}';export{P as C}

package/dist/cjs/{casino-engagement-suite-luckywheel-757e058b.js → casino-engagement-suite-luckywheel-2b06fa4a.js}

@@ -254,7 +254,7 @@ const params = [
     },
 ];
 
-const mapObjectValueToTuple = (object) => Object.keys(object).map(key => object[key]);
+const mapObjectValueToTuple = (object) => Object.keys(object).map((key) => object[key]);
 var RotateDirection;
 (function (RotateDirection) {
     RotateDirection[RotateDirection["clockwise"] = 1] = "clockwise";
@@ -263,12 +263,12 @@ var RotateDirection;
 class SvgCalc {
     constructor({ size, radius, options, themeIndex, contentdirection }) {
         this.arrowmode = ArrowMode.DownFromTop;
-        this.convertDegToArc = (deg) => deg * Math.PI / 180;
-        this.convertArcToDeg = (arc) => arc * 180 / Math.PI % 360;
-        this.getArcDelta = (n) => 2 * Math.PI / n;
+        this.convertDegToArc = (deg) => (deg * Math.PI) / 180;
+        this.convertArcToDeg = (arc) => ((arc * 180) / Math.PI) % 360;
+        this.getArcDelta = (n) => (2 * Math.PI) / n;
         this.findDeg = (index, n) => {
             const degDelta = this.convertArcToDeg(this.getArcDelta(n));
-            return (index) * degDelta;
+            return index * degDelta;
         };
         this.angleTransform = (arrowmode) => {
             switch (arrowmode) {
@@ -280,7 +280,7 @@ class SvgCalc {
                     return Math.PI / 2;
             }
         };
-        this.contentdirection = contentdirection || 'anticlockwise';
+        this.contentdirection = contentdirection;
         // size
         this.center = size / 2;
         this.ratio = size / 375;
@@ -293,20 +293,25 @@ class SvgCalc {
         this.radius = radius;
     }
     get sizeImage() {
-        const getSize = (length) => this.ratio * 48 * 5 / length;
+        const getSize = (length) => (this.ratio * 48 * 5) / length;
         if (this.length <= 3)
             return getSize(4);
         switch (this.length) {
             case 8:
-            case 7: return this.ratio * 24;
-            case 6: return this.ratio * 36;
-            case 5: return this.ratio * 48;
-            case 4: return this.ratio * 56;
-            default: return getSize(this.length);
+            case 7:
+                return this.ratio * 24;
+            case 6:
+                return this.ratio * 36;
+            case 5:
+                return this.ratio * 48;
+            case 4:
+                return this.ratio * 56;
+            default:
+                return getSize(this.length);
         }
     }
     getSizeImageByPartition(index) {
-        if (this.options[index].name) {
+        if (this.options[index].Name) {
             return this.sizeImage / 2;
         }
         else {
@@ -316,7 +321,7 @@ class SvgCalc {
     getSvgImageProps(index, partitionDivisor = 1.25) {
         const sizeImage = this.getSizeImageByPartition(index);
         let baseRadius;
-        if (this.options[index].name) {
+        if (this.options[index].Name) {
             baseRadius = this.radius - sizeImage / 2 - 3 * this.ratio;
         }
         else {
@@ -324,25 +329,21 @@ class SvgCalc {
         }
         return Object.assign(Object.assign({}, this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius, ContentDirection.outward)), { width: sizeImage, height: sizeImage });
     }
-    getSvgTextProps(index) {
+    getSvgTextProps(index, size) {
         const sizeImage = this.getSizeImageByPartition(index);
         let baseRadius;
-        if (this.options[index].image) {
+        if (this.options[index].Image) {
             baseRadius = this.radius - sizeImage - 6 * this.ratio;
         }
         else {
             baseRadius = this.radius - 6 * this.ratio;
         }
-        return Object.assign({}, this.getPropsForPartitionInfo(index, this.offsetText, baseRadius));
+        return Object.assign({}, this.getPropsForPartitionInfo(index, this.offsetText, baseRadius, undefined, size));
     }
     getSvgTextPropsAdjustedByImage(index) {
-        const props = this.getSvgTextProps(index);
-        const size = this.options[index].image ? 80 : 100;
-        const objectSize = {
-            width: size,
-            height: size
-        };
-        return Object.assign(Object.assign(Object.assign({}, props), objectSize), { x: this.contentdirection === 'clockwise' ? props.x : props.x - objectSize.width, y: props.y - objectSize.height / 2 });
+        const size = this.options[index].Image ? 80 : 100;
+        const props = this.getSvgTextProps(index, size);
+        return Object.assign({}, props);
     }
     get offsetText() {
         return {
@@ -361,8 +362,8 @@ class SvgCalc {
         return {
             center: 0,
             position: {
-                x: -1 * sizeImage / 2,
-                y: -1 * sizeImage / 2
+                x: (-1 * sizeImage) / 2,
+                y: (-1 * sizeImage) / 2
             },
             transform: {
                 x: 0,
@@ -374,14 +375,13 @@ class SvgCalc {
         return RotateDirection.clockwise;
     }
     getAngleSelf(index, contentDirection) {
-        const baseAngle = 360 * index / this.length * this.direction;
+        const baseAngle = ((360 * index) / this.length) * this.direction;
         const fixerAngle = 90 * (contentDirection !== undefined ? contentDirection : ContentDirection[this.contentdirection]);
         const resultAngle = baseAngle + fixerAngle;
         return resultAngle;
     }
     getPartitionPositions(index, baseRadius, offset) {
-        const angle = this.angleTransform(this.arrowmode) +
-            this.direction * index * 2 * Math.PI / this.length;
+        const angle = this.angleTransform(this.arrowmode) + (this.direction * index * 2 * Math.PI) / this.length;
         const point = getPointOnCircle(baseRadius || this.radius - 9 * this.ratio, angle, this.center + offset.center);
         const transformOrigin = pointPlus(point, offset.transform);
         const pointResult = pointPlus(point, offset.position);
@@ -390,13 +390,17 @@ class SvgCalc {
             point: pointResult
         };
     }
-    getPropsForPartitionInfo(index, offset, baseRadius, contentDirection) {
+    getPropsForPartitionInfo(index, offset, baseRadius, contentDirection, size) {
         const { point, transformOrigin } = this.getPartitionPositions(index, baseRadius, offset);
-        const getTransformOriginString = (vector) => Object.keys(vector).map(axis => `${vector[axis]}px`).join(' ');
+        const getTransformOriginString = (vector) => Object.keys(vector)
+            .map((axis) => `${vector[axis]}px`)
+            .join(' ');
         return Object.assign(Object.assign({}, point), { style: {
                 'font-size': `${13 * this.ratio}px`,
-                'transform': `rotate(${this.getAngleSelf(index, contentDirection)}deg)`,
-                'transform-origin': `${getTransformOriginString(transformOrigin)}`
+                transform: `rotate(${this.getAngleSelf(index, contentDirection)}deg) translate(${this.contentdirection === 'clockwise' ? point.x : point.x - 100}px, ${point.y - 100 / 2}px)`,
+                'transform-origin': `${getTransformOriginString(transformOrigin)}`,
+                height: `${size}px`,
+                width: `${size}px`
             } });
     }
     getPartitionDraw(index) {
@@ -404,8 +408,10 @@ class SvgCalc {
         const rRingInnerPoint = getSymmetricalPointFromScalar(this.radius);
         const { point, pointNext } = getPointWithNext(index, this.length, this.radius, this.center);
         const ds = [
-            'M', ...mapObjectValueToTuple(rPoint),
-            'L', ...mapObjectValueToTuple(point),
+            'M',
+            ...mapObjectValueToTuple(rPoint),
+            'L',
+            ...mapObjectValueToTuple(point),
             'A',
             ...mapObjectValueToTuple(rRingInnerPoint),
             '0 0 1',
@@ -565,7 +571,9 @@ const CasinoEngagementSuiteLuckywheel = class {
                 .then((res) => res.text())
                 .then((data) => {
                 cssFile.innerHTML = data;
-                setTimeout(() => { this.host.prepend(cssFile); }, 1);
+                setTimeout(() => {
+                    this.host.prepend(cssFile);
+                }, 1);
             })
                 .catch((err) => {
                 console.log('Error ', err);
@@ -600,7 +608,7 @@ const CasinoEngagementSuiteLuckywheel = class {
             window.postMessage({
                 type: 'SpinLuckyWheel',
                 data: {
-                    lotteryProgramID: this.luckywheel.Program.Id,
+                    lotteryProgramID: this.luckywheel.Program.Id
                 }
             });
         };
@@ -615,7 +623,7 @@ const CasinoEngagementSuiteLuckywheel = class {
         this.isPartitionsCustomableReady = false;
         this.isSpinning = false;
         this.options = undefined;
-        this.radius = 0.85 * Number(this.size) / 2;
+        this.radius = (0.85 * Number(this.size)) / 2;
         this.speed = 0;
         this.settings = undefined;
         this.svg = undefined;
@@ -630,11 +638,12 @@ const CasinoEngagementSuiteLuckywheel = class {
                 const hasError = rest.success === false;
                 const index = +rest.data.Result.WheelOfFortunePartitionIndex;
                 this.spinner.halt(this.settings.getDeg(index), () => {
+                    var _a;
                     this.isSpinning = false;
                     this.updateSpinable();
                     let prizeText = '';
                     if (!hasError) {
-                        const partition = this.luckywheel.Program.WheelOfFortune.Partitions[index];
+                        const partition = (_a = this.luckywheel.Program.WheelOfFortune.Partitions[index]) === null || _a === void 0 ? void 0 : _a.PrizeText;
                         prizeText = partition[this.language] || partition['*'];
                         this.luckywheel.Current.RemainingTimes = +this.luckywheel.Current.RemainingTimes - 1;
                     }
@@ -642,7 +651,7 @@ const CasinoEngagementSuiteLuckywheel = class {
                         type: 'ShowLuckywheelRewardModal',
                         data: {
                             PrizeMessage: prizeText,
-                            HasError: hasError,
+                            HasError: hasError
                         }
                     });
                 });
@@ -670,11 +679,7 @@ const CasinoEngagementSuiteLuckywheel = class {
         this.spinner = new Spinner({
             tick: (deg, speed) => {
                 setProps(this.spinContainer, {
-                    style: [
-                        `transform: rotate(${deg}deg)`,
-                        `height: ${this.size}px`,
-                        `width: ${this.size}px`,
-                    ].join(';'),
+                    style: [`transform: rotate(${deg}deg)`, `height: ${this.size}px`, `width: ${this.size}px`].join(';')
                 });
                 this.speed = speed * 0.5;
             }
@@ -685,26 +690,32 @@ const CasinoEngagementSuiteLuckywheel = class {
             '--length': `${this.options.length}`,
             '--radius': `${this.radius}`,
             '--ratio': `${Number(this.size) / 480}`,
-            '--size': `${this.size}`,
+            '--size': `${this.size}`
         };
     }
     render() {
         const sizeProps = { height: this.size, width: this.size };
-        const foreignObjectAgentProps = { 'height': `${this.size}px`, 'width': `${this.size}px` };
-        return (index.h("div", { key: 'b2c5ec30fc58e6758a2bdf6703055bdddddd99af', class: `WheelContainer ${this.device}`, style: this.defineGeneralVariables() }, index.h("svg", { key: '5176b473af31b7f96c211d5be56b4dfcd67681a6', width: this.size, height: this.size, ref: (el) => { this.svg = el; } }, index.h("foreignObject", Object.assign({ key: 'aa80be601163398a24f4aa77007e971cffbfd238' }, sizeProps, { class: "Bottom Customable" }), index.h("div", { key: 'a24e0f121d43ccfbf6457e0ddbdf5f9d051eed00', style: foreignObjectAgentProps })), index.h("g", Object.assign({ key: '63926d76e820cceed585510f960c37991d187a20', class: "PartitionsContainer" }, this.settings.getSpinnerProps()), index.h("g", { key: '6ae912f06d75f3c3f3d35b66f806940f6ded8b87', class: "PartitionsBackgrounds" }, this.options.map((_el, index$1) => {
-            return (index.h("foreignObject", { "clip-path": `url(#clip${index$1})`, class: "PartitionBackground Customable", style: { '--index': index$1.toString() }, width: this.size, height: this.size }, index.h("div", { style: foreignObjectAgentProps })));
-        })), index.h("g", { key: '971611dc5b132701679595ec5ee317d97121029d', class: "PartitionsBackgroundStrokes" }, this.options.map((_el, index$1) => {
+        const foreignObjectAgentProps = { height: `${this.size}px`, width: `${this.size}px` };
+        return (index.h("div", { key: 'ea47ff81b5aa4173b448295e474f94e8c2799aec', class: `WheelContainer ${this.device}`, style: this.defineGeneralVariables() }, index.h("svg", { key: '6c486c941b63b79a0e33ef2a078b225869080b9d', width: this.size, height: this.size, ref: (el) => {
+                this.svg = el;
+            } }, index.h("foreignObject", Object.assign({ key: '4dd2fc761bc1914e3e5104fdfaf03c126f481e5d' }, sizeProps, { style: foreignObjectAgentProps, class: "Bottom Customable" }), index.h("div", { key: '621ea705e477cadafa8be17108e0ccab3a8833f3', style: foreignObjectAgentProps })), index.h("g", Object.assign({ key: '61642e6056a75a114c8d3d4bab22bde7fe17afff', class: "PartitionsContainer" }, this.settings.getSpinnerProps()), index.h("g", { key: '53cc83c283e3d7eb625c4d9687c2862173bdee86', class: "PartitionsBackgrounds" }, this.options.map((_el, index$1) => {
+            return (index.h("foreignObject", { "clip-path": `url(#clip${index$1})`, class: "PartitionBackground Customable", style: Object.assign({ '--index': index$1.toString() }, foreignObjectAgentProps) }, index.h("div", { style: foreignObjectAgentProps })));
+        })), index.h("g", { key: '51ca18f5b7c877357a60d2ceb8f9b99cafcf6818', class: "PartitionsBackgroundStrokes" }, this.options.map((_el, index$1) => {
             return (index.h("path", Object.assign({ class: "PartitionBackgroundStroke" }, this.settings.getPartitionDraw(index$1), { width: this.size, height: this.size })));
-        })), index.h("g", { key: '51b1c3319cf8db82e73008df9dd45bcddfe349fe', class: "Partitions", style: { filter: this.speed > 0.3 ? `blur(${this.speed}px)` : '' } }, this.options.map((el, index$1) => {
-            return ([
+        })), index.h("g", { key: 'cc81bbe2e72960ced6562702ab7be1dc7973480c', class: "Partitions", style: { filter: this.speed > 0.3 ? `blur(${this.speed}px)` : '' } }, this.options.map((el, index$1) => {
+            return [
                 el.Image && (index.h("g", { class: `PartitionImage PartitionImage${index$1}`, ref: (el) => this.renderImage(el, index$1) })),
                 el.Name && (index.h("foreignObject", Object.assign({ class: "PartitionText" }, this.settings.getSvgTextPropsAdjustedByImage(index$1)), index.h("div", { class: "PartitionTextEntityContainer" }, index.h("p", { class: `PartitionTextEntity${this.settings.contentdirection === 'clockwise' ? '' : ' Anticlockwise'}`, innerHTML: el.Name }))))
-            ]);
-        }))), index.h("g", { key: 'b892a4cc21a37e7981a5dfabf1f7e16d2f0493f7', class: { 'active': this.isPartitionsCustomableReady, 'PartitionsCustomable1': true } }, this.options.map((_el, index$1) => {
+            ];
+        }))), index.h("g", { key: 'd126a5bde2af4b31f32ec029c117637fa5983e20', class: { active: this.isPartitionsCustomableReady, PartitionsCustomable1: true } }, this.options.map((_el, index$1) => {
             return (index.h("foreignObject", Object.assign({ class: "Partition1 Customable", style: { '--index': index$1.toString() } }, sizeProps), index.h("div", { style: foreignObjectAgentProps })));
-        })), index.h("g", { key: '6d572edae8f005204257154eafa77e2fa1f54356', class: { 'active': this.isPartitionsCustomableReady, 'PartitionsCustomable2': true } }, this.options.map((_el, index$1) => {
+        })), index.h("g", { key: 'abb7544782eb40d08fa1304612f69ed389e10dcf', class: { active: this.isPartitionsCustomableReady, PartitionsCustomable2: true } }, this.options.map((_el, index$1) => {
             return (index.h("foreignObject", Object.assign({ class: "Partition2 Customable", style: { '--index': index$1.toString() } }, sizeProps), index.h("div", { style: foreignObjectAgentProps })));
-        })), index.h("foreignObject", Object.assign({ key: 'd1a8bb686fe1d76301a6fe824b13dd212b1ce060', class: "Middle Customable" }, sizeProps), index.h("div", { key: 'f5fb21485fd3c8bd3f127a6714c65d488e51d6f5', style: foreignObjectAgentProps })), index.h("foreignObject", Object.assign({ key: '3ccd35ea0ed62a3d23e85af0008ac9bc236dfc2d', class: "Top Customable" }, sizeProps), index.h("div", { key: '60abed1d4fb4d57dfa20bf5ff7368b47dd32629c', style: foreignObjectAgentProps })), index.h("g", { key: '758e906615752e067e94cb33242c60c1a811e78e', class: { 'spinning': this.isSpinning, 'Center': true }, onClick: this.eventSpin }, index.h("foreignObject", { key: '3064736e103ecd1b9b0cb3a0582283e146bab4b5', x: Number(this.size) / 2 - 100 / 2, y: Number(this.size) / 2 - 100 / 2, width: 100, height: 100 })), index.h("g", { key: '277f36735b58e24e424179ca7082851adf470af1' }, this.options.map((_el, index$1) => {
+        })), index.h("foreignObject", Object.assign({ key: 'a76b670602be3050180ab71b2e4e424937865358', class: "Middle Customable" }, sizeProps, { style: foreignObjectAgentProps }), index.h("div", { key: '1d074b872c29092a51ce7a8c2c8cf2e4a84c1381', style: foreignObjectAgentProps })), index.h("foreignObject", Object.assign({ key: 'b8525ca3463cbde5a12f47655bc82451ef648012', class: "Top Customable" }, sizeProps, { style: foreignObjectAgentProps }), index.h("div", { key: 'ddbe297ea9947778975248dd111faed457bb9433', style: foreignObjectAgentProps })), index.h("g", { key: '0d247fcbc8734643bc36f9f457876d3b4cb462fa', class: { spinning: this.isSpinning, Center: true }, onClick: this.eventSpin }, index.h("foreignObject", { key: 'b63e7d4e9f73c101305c4854565ad9ce9c11c171', style: {
+                width: '100px',
+                height: '100px',
+                transform: `translate(${Number(this.size) / 2 - 100 / 2}px, ${Number(this.size) / 2 - 100 / 2}px)`
+            } })), index.h("g", { key: 'd3e9be9a11f4c6d8c6abff35936c33ff5cf8c26d' }, this.options.map((_el, index$1) => {
             return (index.h("clipPath", { id: `clip${index$1}` }, index.h("path", Object.assign({}, this.settings.getPartitionDraw(index$1)))));
         })))));
     }

package/dist/cjs/casino-engagement-suite-luckywheel.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const casinoEngagementSuiteLuckywheel = require('./casino-engagement-suite-luckywheel-757e058b.js');
+const casinoEngagementSuiteLuckywheel = require('./casino-engagement-suite-luckywheel-2b06fa4a.js');
 require('./index-6096cc4b.js');
 
 

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const casinoEngagementSuiteLuckywheel = require('./casino-engagement-suite-luckywheel-757e058b.js');
+const casinoEngagementSuiteLuckywheel = require('./casino-engagement-suite-luckywheel-2b06fa4a.js');
 require('./index-6096cc4b.js');
 
 

package/dist/collection/components/casino-engagement-suite-luckywheel/casino-engagement-suite-luckywheel.js

@@ -18,7 +18,9 @@ export class CasinoEngagementSuiteLuckywheel {
                 .then((res) => res.text())
                 .then((data) => {
                 cssFile.innerHTML = data;
-                setTimeout(() => { this.host.prepend(cssFile); }, 1);
+                setTimeout(() => {
+                    this.host.prepend(cssFile);
+                }, 1);
             })
                 .catch((err) => {
                 console.log('Error ', err);
@@ -53,7 +55,7 @@ export class CasinoEngagementSuiteLuckywheel {
             window.postMessage({
                 type: 'SpinLuckyWheel',
                 data: {
-                    lotteryProgramID: this.luckywheel.Program.Id,
+                    lotteryProgramID: this.luckywheel.Program.Id
                 }
             });
         };
@@ -68,7 +70,7 @@ export class CasinoEngagementSuiteLuckywheel {
         this.isPartitionsCustomableReady = false;
         this.isSpinning = false;
         this.options = undefined;
-        this.radius = 0.85 * Number(this.size) / 2;
+        this.radius = (0.85 * Number(this.size)) / 2;
         this.speed = 0;
         this.settings = undefined;
         this.svg = undefined;
@@ -83,11 +85,12 @@ export class CasinoEngagementSuiteLuckywheel {
                 const hasError = rest.success === false;
                 const index = +rest.data.Result.WheelOfFortunePartitionIndex;
                 this.spinner.halt(this.settings.getDeg(index), () => {
+                    var _a;
                     this.isSpinning = false;
                     this.updateSpinable();
                     let prizeText = '';
                     if (!hasError) {
-                        const partition = this.luckywheel.Program.WheelOfFortune.Partitions[index];
+                        const partition = (_a = this.luckywheel.Program.WheelOfFortune.Partitions[index]) === null || _a === void 0 ? void 0 : _a.PrizeText;
                         prizeText = partition[this.language] || partition['*'];
                         this.luckywheel.Current.RemainingTimes = +this.luckywheel.Current.RemainingTimes - 1;
                     }
@@ -95,7 +98,7 @@ export class CasinoEngagementSuiteLuckywheel {
                         type: 'ShowLuckywheelRewardModal',
                         data: {
                             PrizeMessage: prizeText,
-                            HasError: hasError,
+                            HasError: hasError
                         }
                     });
                 });
@@ -123,11 +126,7 @@ export class CasinoEngagementSuiteLuckywheel {
         this.spinner = new Spinner({
             tick: (deg, speed) => {
                 setProps(this.spinContainer, {
-                    style: [
-                        `transform: rotate(${deg}deg)`,
-                        `height: ${this.size}px`,
-                        `width: ${this.size}px`,
-                    ].join(';'),
+                    style: [`transform: rotate(${deg}deg)`, `height: ${this.size}px`, `width: ${this.size}px`].join(';')
                 });
                 this.speed = speed * 0.5;
             }
@@ -138,26 +137,32 @@ export class CasinoEngagementSuiteLuckywheel {
             '--length': `${this.options.length}`,
             '--radius': `${this.radius}`,
             '--ratio': `${Number(this.size) / 480}`,
-            '--size': `${this.size}`,
+            '--size': `${this.size}`
         };
     }
     render() {
         const sizeProps = { height: this.size, width: this.size };
-        const foreignObjectAgentProps = { 'height': `${this.size}px`, 'width': `${this.size}px` };
-        return (h("div", { key: 'b2c5ec30fc58e6758a2bdf6703055bdddddd99af', class: `WheelContainer ${this.device}`, style: this.defineGeneralVariables() }, h("svg", { key: '5176b473af31b7f96c211d5be56b4dfcd67681a6', width: this.size, height: this.size, ref: (el) => { this.svg = el; } }, h("foreignObject", Object.assign({ key: 'aa80be601163398a24f4aa77007e971cffbfd238' }, sizeProps, { class: "Bottom Customable" }), h("div", { key: 'a24e0f121d43ccfbf6457e0ddbdf5f9d051eed00', style: foreignObjectAgentProps })), h("g", Object.assign({ key: '63926d76e820cceed585510f960c37991d187a20', class: "PartitionsContainer" }, this.settings.getSpinnerProps()), h("g", { key: '6ae912f06d75f3c3f3d35b66f806940f6ded8b87', class: "PartitionsBackgrounds" }, this.options.map((_el, index) => {
-            return (h("foreignObject", { "clip-path": `url(#clip${index})`, class: "PartitionBackground Customable", style: { '--index': index.toString() }, width: this.size, height: this.size }, h("div", { style: foreignObjectAgentProps })));
-        })), h("g", { key: '971611dc5b132701679595ec5ee317d97121029d', class: "PartitionsBackgroundStrokes" }, this.options.map((_el, index) => {
+        const foreignObjectAgentProps = { height: `${this.size}px`, width: `${this.size}px` };
+        return (h("div", { key: 'ea47ff81b5aa4173b448295e474f94e8c2799aec', class: `WheelContainer ${this.device}`, style: this.defineGeneralVariables() }, h("svg", { key: '6c486c941b63b79a0e33ef2a078b225869080b9d', width: this.size, height: this.size, ref: (el) => {
+                this.svg = el;
+            } }, h("foreignObject", Object.assign({ key: '4dd2fc761bc1914e3e5104fdfaf03c126f481e5d' }, sizeProps, { style: foreignObjectAgentProps, class: "Bottom Customable" }), h("div", { key: '621ea705e477cadafa8be17108e0ccab3a8833f3', style: foreignObjectAgentProps })), h("g", Object.assign({ key: '61642e6056a75a114c8d3d4bab22bde7fe17afff', class: "PartitionsContainer" }, this.settings.getSpinnerProps()), h("g", { key: '53cc83c283e3d7eb625c4d9687c2862173bdee86', class: "PartitionsBackgrounds" }, this.options.map((_el, index) => {
+            return (h("foreignObject", { "clip-path": `url(#clip${index})`, class: "PartitionBackground Customable", style: Object.assign({ '--index': index.toString() }, foreignObjectAgentProps) }, h("div", { style: foreignObjectAgentProps })));
+        })), h("g", { key: '51ca18f5b7c877357a60d2ceb8f9b99cafcf6818', class: "PartitionsBackgroundStrokes" }, this.options.map((_el, index) => {
             return (h("path", Object.assign({ class: "PartitionBackgroundStroke" }, this.settings.getPartitionDraw(index), { width: this.size, height: this.size })));
-        })), h("g", { key: '51b1c3319cf8db82e73008df9dd45bcddfe349fe', class: "Partitions", style: { filter: this.speed > 0.3 ? `blur(${this.speed}px)` : '' } }, this.options.map((el, index) => {
-            return ([
+        })), h("g", { key: 'cc81bbe2e72960ced6562702ab7be1dc7973480c', class: "Partitions", style: { filter: this.speed > 0.3 ? `blur(${this.speed}px)` : '' } }, this.options.map((el, index) => {
+            return [
                 el.Image && (h("g", { class: `PartitionImage PartitionImage${index}`, ref: (el) => this.renderImage(el, index) })),
                 el.Name && (h("foreignObject", Object.assign({ class: "PartitionText" }, this.settings.getSvgTextPropsAdjustedByImage(index)), h("div", { class: "PartitionTextEntityContainer" }, h("p", { class: `PartitionTextEntity${this.settings.contentdirection === 'clockwise' ? '' : ' Anticlockwise'}`, innerHTML: el.Name }))))
-            ]);
-        }))), h("g", { key: 'b892a4cc21a37e7981a5dfabf1f7e16d2f0493f7', class: { 'active': this.isPartitionsCustomableReady, 'PartitionsCustomable1': true } }, this.options.map((_el, index) => {
+            ];
+        }))), h("g", { key: 'd126a5bde2af4b31f32ec029c117637fa5983e20', class: { active: this.isPartitionsCustomableReady, PartitionsCustomable1: true } }, this.options.map((_el, index) => {
             return (h("foreignObject", Object.assign({ class: "Partition1 Customable", style: { '--index': index.toString() } }, sizeProps), h("div", { style: foreignObjectAgentProps })));
-        })), h("g", { key: '6d572edae8f005204257154eafa77e2fa1f54356', class: { 'active': this.isPartitionsCustomableReady, 'PartitionsCustomable2': true } }, this.options.map((_el, index) => {
+        })), h("g", { key: 'abb7544782eb40d08fa1304612f69ed389e10dcf', class: { active: this.isPartitionsCustomableReady, PartitionsCustomable2: true } }, this.options.map((_el, index) => {
             return (h("foreignObject", Object.assign({ class: "Partition2 Customable", style: { '--index': index.toString() } }, sizeProps), h("div", { style: foreignObjectAgentProps })));
-        })), h("foreignObject", Object.assign({ key: 'd1a8bb686fe1d76301a6fe824b13dd212b1ce060', class: "Middle Customable" }, sizeProps), h("div", { key: 'f5fb21485fd3c8bd3f127a6714c65d488e51d6f5', style: foreignObjectAgentProps })), h("foreignObject", Object.assign({ key: '3ccd35ea0ed62a3d23e85af0008ac9bc236dfc2d', class: "Top Customable" }, sizeProps), h("div", { key: '60abed1d4fb4d57dfa20bf5ff7368b47dd32629c', style: foreignObjectAgentProps })), h("g", { key: '758e906615752e067e94cb33242c60c1a811e78e', class: { 'spinning': this.isSpinning, 'Center': true }, onClick: this.eventSpin }, h("foreignObject", { key: '3064736e103ecd1b9b0cb3a0582283e146bab4b5', x: Number(this.size) / 2 - 100 / 2, y: Number(this.size) / 2 - 100 / 2, width: 100, height: 100 })), h("g", { key: '277f36735b58e24e424179ca7082851adf470af1' }, this.options.map((_el, index) => {
+        })), h("foreignObject", Object.assign({ key: 'a76b670602be3050180ab71b2e4e424937865358', class: "Middle Customable" }, sizeProps, { style: foreignObjectAgentProps }), h("div", { key: '1d074b872c29092a51ce7a8c2c8cf2e4a84c1381', style: foreignObjectAgentProps })), h("foreignObject", Object.assign({ key: 'b8525ca3463cbde5a12f47655bc82451ef648012', class: "Top Customable" }, sizeProps, { style: foreignObjectAgentProps }), h("div", { key: 'ddbe297ea9947778975248dd111faed457bb9433', style: foreignObjectAgentProps })), h("g", { key: '0d247fcbc8734643bc36f9f457876d3b4cb462fa', class: { spinning: this.isSpinning, Center: true }, onClick: this.eventSpin }, h("foreignObject", { key: 'b63e7d4e9f73c101305c4854565ad9ce9c11c171', style: {
+                width: '100px',
+                height: '100px',
+                transform: `translate(${Number(this.size) / 2 - 100 / 2}px, ${Number(this.size) / 2 - 100 / 2}px)`
+            } })), h("g", { key: 'd3e9be9a11f4c6d8c6abff35936c33ff5cf8c26d' }, this.options.map((_el, index) => {
             return (h("clipPath", { id: `clip${index}` }, h("path", Object.assign({}, this.settings.getPartitionDraw(index)))));
         })))));
     }

package/dist/collection/utils/class.svgcalc.js

@@ -1,6 +1,6 @@
 import { ArrowMode, ContentDirection } from "./types.js";
 import { getPointOnCircle, pointPlus, getSymmetricalPointFromScalar, getPointWithNext } from "./utils.js";
-export const mapObjectValueToTuple = (object) => Object.keys(object).map(key => object[key]);
+export const mapObjectValueToTuple = (object) => Object.keys(object).map((key) => object[key]);
 var RotateDirection;
 (function (RotateDirection) {
     RotateDirection[RotateDirection["clockwise"] = 1] = "clockwise";
@@ -9,12 +9,12 @@ var RotateDirection;
 export class SvgCalc {
     constructor({ size, radius, options, themeIndex, contentdirection }) {
         this.arrowmode = ArrowMode.DownFromTop;
-        this.convertDegToArc = (deg) => deg * Math.PI / 180;
-        this.convertArcToDeg = (arc) => arc * 180 / Math.PI % 360;
-        this.getArcDelta = (n) => 2 * Math.PI / n;
+        this.convertDegToArc = (deg) => (deg * Math.PI) / 180;
+        this.convertArcToDeg = (arc) => ((arc * 180) / Math.PI) % 360;
+        this.getArcDelta = (n) => (2 * Math.PI) / n;
         this.findDeg = (index, n) => {
             const degDelta = this.convertArcToDeg(this.getArcDelta(n));
-            return (index) * degDelta;
+            return index * degDelta;
         };
         this.angleTransform = (arrowmode) => {
             switch (arrowmode) {
@@ -26,7 +26,7 @@ export class SvgCalc {
                     return Math.PI / 2;
             }
         };
-        this.contentdirection = contentdirection || 'anticlockwise';
+        this.contentdirection = contentdirection;
         // size
         this.center = size / 2;
         this.ratio = size / 375;
@@ -39,20 +39,25 @@ export class SvgCalc {
         this.radius = radius;
     }
     get sizeImage() {
-        const getSize = (length) => this.ratio * 48 * 5 / length;
+        const getSize = (length) => (this.ratio * 48 * 5) / length;
         if (this.length <= 3)
             return getSize(4);
         switch (this.length) {
             case 8:
-            case 7: return this.ratio * 24;
-            case 6: return this.ratio * 36;
-            case 5: return this.ratio * 48;
-            case 4: return this.ratio * 56;
-            default: return getSize(this.length);
+            case 7:
+                return this.ratio * 24;
+            case 6:
+                return this.ratio * 36;
+            case 5:
+                return this.ratio * 48;
+            case 4:
+                return this.ratio * 56;
+            default:
+                return getSize(this.length);
         }
     }
     getSizeImageByPartition(index) {
-        if (this.options[index].name) {
+        if (this.options[index].Name) {
             return this.sizeImage / 2;
         }
         else {
@@ -62,7 +67,7 @@ export class SvgCalc {
     getSvgImageProps(index, partitionDivisor = 1.25) {
         const sizeImage = this.getSizeImageByPartition(index);
         let baseRadius;
-        if (this.options[index].name) {
+        if (this.options[index].Name) {
             baseRadius = this.radius - sizeImage / 2 - 3 * this.ratio;
         }
         else {
@@ -70,25 +75,21 @@ export class SvgCalc {
         }
         return Object.assign(Object.assign({}, this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius, ContentDirection.outward)), { width: sizeImage, height: sizeImage });
     }
-    getSvgTextProps(index) {
+    getSvgTextProps(index, size) {
         const sizeImage = this.getSizeImageByPartition(index);
         let baseRadius;
-        if (this.options[index].image) {
+        if (this.options[index].Image) {
             baseRadius = this.radius - sizeImage - 6 * this.ratio;
         }
         else {
             baseRadius = this.radius - 6 * this.ratio;
         }
-        return Object.assign({}, this.getPropsForPartitionInfo(index, this.offsetText, baseRadius));
+        return Object.assign({}, this.getPropsForPartitionInfo(index, this.offsetText, baseRadius, undefined, size));
     }
     getSvgTextPropsAdjustedByImage(index) {
-        const props = this.getSvgTextProps(index);
-        const size = this.options[index].image ? 80 : 100;
-        const objectSize = {
-            width: size,
-            height: size
-        };
-        return Object.assign(Object.assign(Object.assign({}, props), objectSize), { x: this.contentdirection === 'clockwise' ? props.x : props.x - objectSize.width, y: props.y - objectSize.height / 2 });
+        const size = this.options[index].Image ? 80 : 100;
+        const props = this.getSvgTextProps(index, size);
+        return Object.assign({}, props);
     }
     get offsetText() {
         return {
@@ -107,8 +108,8 @@ export class SvgCalc {
         return {
             center: 0,
             position: {
-                x: -1 * sizeImage / 2,
-                y: -1 * sizeImage / 2
+                x: (-1 * sizeImage) / 2,
+                y: (-1 * sizeImage) / 2
             },
             transform: {
                 x: 0,
@@ -120,14 +121,13 @@ export class SvgCalc {
         return RotateDirection.clockwise;
     }
     getAngleSelf(index, contentDirection) {
-        const baseAngle = 360 * index / this.length * this.direction;
+        const baseAngle = ((360 * index) / this.length) * this.direction;
         const fixerAngle = 90 * (contentDirection !== undefined ? contentDirection : ContentDirection[this.contentdirection]);
         const resultAngle = baseAngle + fixerAngle;
         return resultAngle;
     }
     getPartitionPositions(index, baseRadius, offset) {
-        const angle = this.angleTransform(this.arrowmode) +
-            this.direction * index * 2 * Math.PI / this.length;
+        const angle = this.angleTransform(this.arrowmode) + (this.direction * index * 2 * Math.PI) / this.length;
         const point = getPointOnCircle(baseRadius || this.radius - 9 * this.ratio, angle, this.center + offset.center);
         const transformOrigin = pointPlus(point, offset.transform);
         const pointResult = pointPlus(point, offset.position);
@@ -136,13 +136,17 @@ export class SvgCalc {
             point: pointResult
         };
     }
-    getPropsForPartitionInfo(index, offset, baseRadius, contentDirection) {
+    getPropsForPartitionInfo(index, offset, baseRadius, contentDirection, size) {
         const { point, transformOrigin } = this.getPartitionPositions(index, baseRadius, offset);
-        const getTransformOriginString = (vector) => Object.keys(vector).map(axis => `${vector[axis]}px`).join(' ');
+        const getTransformOriginString = (vector) => Object.keys(vector)
+            .map((axis) => `${vector[axis]}px`)
+            .join(' ');
         return Object.assign(Object.assign({}, point), { style: {
                 'font-size': `${13 * this.ratio}px`,
-                'transform': `rotate(${this.getAngleSelf(index, contentDirection)}deg)`,
-                'transform-origin': `${getTransformOriginString(transformOrigin)}`
+                transform: `rotate(${this.getAngleSelf(index, contentDirection)}deg) translate(${this.contentdirection === 'clockwise' ? point.x : point.x - 100}px, ${point.y - 100 / 2}px)`,
+                'transform-origin': `${getTransformOriginString(transformOrigin)}`,
+                height: `${size}px`,
+                width: `${size}px`
             } });
     }
     getPartitionDraw(index) {
@@ -150,8 +154,10 @@ export class SvgCalc {
         const rRingInnerPoint = getSymmetricalPointFromScalar(this.radius);
         const { point, pointNext } = getPointWithNext(index, this.length, this.radius, this.center);
         const ds = [
-            'M', ...mapObjectValueToTuple(rPoint),
-            'L', ...mapObjectValueToTuple(point),
+            'M',
+            ...mapObjectValueToTuple(rPoint),
+            'L',
+            ...mapObjectValueToTuple(point),
             'A',
             ...mapObjectValueToTuple(rRingInnerPoint),
             '0 0 1',

package/dist/esm/{casino-engagement-suite-luckywheel-61c38863.js → casino-engagement-suite-luckywheel-45c7f146.js}

@@ -252,7 +252,7 @@ const params = [
     },
 ];
 
-const mapObjectValueToTuple = (object) => Object.keys(object).map(key => object[key]);
+const mapObjectValueToTuple = (object) => Object.keys(object).map((key) => object[key]);
 var RotateDirection;
 (function (RotateDirection) {
     RotateDirection[RotateDirection["clockwise"] = 1] = "clockwise";
@@ -261,12 +261,12 @@ var RotateDirection;
 class SvgCalc {
     constructor({ size, radius, options, themeIndex, contentdirection }) {
         this.arrowmode = ArrowMode.DownFromTop;
-        this.convertDegToArc = (deg) => deg * Math.PI / 180;
-        this.convertArcToDeg = (arc) => arc * 180 / Math.PI % 360;
-        this.getArcDelta = (n) => 2 * Math.PI / n;
+        this.convertDegToArc = (deg) => (deg * Math.PI) / 180;
+        this.convertArcToDeg = (arc) => ((arc * 180) / Math.PI) % 360;
+        this.getArcDelta = (n) => (2 * Math.PI) / n;
         this.findDeg = (index, n) => {
             const degDelta = this.convertArcToDeg(this.getArcDelta(n));
-            return (index) * degDelta;
+            return index * degDelta;
         };
         this.angleTransform = (arrowmode) => {
             switch (arrowmode) {
@@ -278,7 +278,7 @@ class SvgCalc {
                     return Math.PI / 2;
             }
         };
-        this.contentdirection = contentdirection || 'anticlockwise';
+        this.contentdirection = contentdirection;
         // size
         this.center = size / 2;
         this.ratio = size / 375;
@@ -291,20 +291,25 @@ class SvgCalc {
         this.radius = radius;
     }
     get sizeImage() {
-        const getSize = (length) => this.ratio * 48 * 5 / length;
+        const getSize = (length) => (this.ratio * 48 * 5) / length;
         if (this.length <= 3)
             return getSize(4);
         switch (this.length) {
             case 8:
-            case 7: return this.ratio * 24;
-            case 6: return this.ratio * 36;
-            case 5: return this.ratio * 48;
-            case 4: return this.ratio * 56;
-            default: return getSize(this.length);
+            case 7:
+                return this.ratio * 24;
+            case 6:
+                return this.ratio * 36;
+            case 5:
+                return this.ratio * 48;
+            case 4:
+                return this.ratio * 56;
+            default:
+                return getSize(this.length);
         }
     }
     getSizeImageByPartition(index) {
-        if (this.options[index].name) {
+        if (this.options[index].Name) {
             return this.sizeImage / 2;
         }
         else {
@@ -314,7 +319,7 @@ class SvgCalc {
     getSvgImageProps(index, partitionDivisor = 1.25) {
         const sizeImage = this.getSizeImageByPartition(index);
         let baseRadius;
-        if (this.options[index].name) {
+        if (this.options[index].Name) {
             baseRadius = this.radius - sizeImage / 2 - 3 * this.ratio;
         }
         else {
@@ -322,25 +327,21 @@ class SvgCalc {
         }
         return Object.assign(Object.assign({}, this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius, ContentDirection.outward)), { width: sizeImage, height: sizeImage });
     }
-    getSvgTextProps(index) {
+    getSvgTextProps(index, size) {
         const sizeImage = this.getSizeImageByPartition(index);
         let baseRadius;
-        if (this.options[index].image) {
+        if (this.options[index].Image) {
             baseRadius = this.radius - sizeImage - 6 * this.ratio;
         }
         else {
             baseRadius = this.radius - 6 * this.ratio;
         }
-        return Object.assign({}, this.getPropsForPartitionInfo(index, this.offsetText, baseRadius));
+        return Object.assign({}, this.getPropsForPartitionInfo(index, this.offsetText, baseRadius, undefined, size));
     }
     getSvgTextPropsAdjustedByImage(index) {
-        const props = this.getSvgTextProps(index);
-        const size = this.options[index].image ? 80 : 100;
-        const objectSize = {
-            width: size,
-            height: size
-        };
-        return Object.assign(Object.assign(Object.assign({}, props), objectSize), { x: this.contentdirection === 'clockwise' ? props.x : props.x - objectSize.width, y: props.y - objectSize.height / 2 });
+        const size = this.options[index].Image ? 80 : 100;
+        const props = this.getSvgTextProps(index, size);
+        return Object.assign({}, props);
     }
     get offsetText() {
         return {
@@ -359,8 +360,8 @@ class SvgCalc {
         return {
             center: 0,
             position: {
-                x: -1 * sizeImage / 2,
-                y: -1 * sizeImage / 2
+                x: (-1 * sizeImage) / 2,
+                y: (-1 * sizeImage) / 2
             },
             transform: {
                 x: 0,
@@ -372,14 +373,13 @@ class SvgCalc {
         return RotateDirection.clockwise;
     }
     getAngleSelf(index, contentDirection) {
-        const baseAngle = 360 * index / this.length * this.direction;
+        const baseAngle = ((360 * index) / this.length) * this.direction;
         const fixerAngle = 90 * (contentDirection !== undefined ? contentDirection : ContentDirection[this.contentdirection]);
         const resultAngle = baseAngle + fixerAngle;
         return resultAngle;
     }
     getPartitionPositions(index, baseRadius, offset) {
-        const angle = this.angleTransform(this.arrowmode) +
-            this.direction * index * 2 * Math.PI / this.length;
+        const angle = this.angleTransform(this.arrowmode) + (this.direction * index * 2 * Math.PI) / this.length;
         const point = getPointOnCircle(baseRadius || this.radius - 9 * this.ratio, angle, this.center + offset.center);
         const transformOrigin = pointPlus(point, offset.transform);
         const pointResult = pointPlus(point, offset.position);
@@ -388,13 +388,17 @@ class SvgCalc {
             point: pointResult
         };
     }
-    getPropsForPartitionInfo(index, offset, baseRadius, contentDirection) {
+    getPropsForPartitionInfo(index, offset, baseRadius, contentDirection, size) {
         const { point, transformOrigin } = this.getPartitionPositions(index, baseRadius, offset);
-        const getTransformOriginString = (vector) => Object.keys(vector).map(axis => `${vector[axis]}px`).join(' ');
+        const getTransformOriginString = (vector) => Object.keys(vector)
+            .map((axis) => `${vector[axis]}px`)
+            .join(' ');
         return Object.assign(Object.assign({}, point), { style: {
                 'font-size': `${13 * this.ratio}px`,
-                'transform': `rotate(${this.getAngleSelf(index, contentDirection)}deg)`,
-                'transform-origin': `${getTransformOriginString(transformOrigin)}`
+                transform: `rotate(${this.getAngleSelf(index, contentDirection)}deg) translate(${this.contentdirection === 'clockwise' ? point.x : point.x - 100}px, ${point.y - 100 / 2}px)`,
+                'transform-origin': `${getTransformOriginString(transformOrigin)}`,
+                height: `${size}px`,
+                width: `${size}px`
             } });
     }
     getPartitionDraw(index) {
@@ -402,8 +406,10 @@ class SvgCalc {
         const rRingInnerPoint = getSymmetricalPointFromScalar(this.radius);
         const { point, pointNext } = getPointWithNext(index, this.length, this.radius, this.center);
         const ds = [
-            'M', ...mapObjectValueToTuple(rPoint),
-            'L', ...mapObjectValueToTuple(point),
+            'M',
+            ...mapObjectValueToTuple(rPoint),
+            'L',
+            ...mapObjectValueToTuple(point),
             'A',
             ...mapObjectValueToTuple(rRingInnerPoint),
             '0 0 1',
@@ -563,7 +569,9 @@ const CasinoEngagementSuiteLuckywheel = class {
                 .then((res) => res.text())
                 .then((data) => {
                 cssFile.innerHTML = data;
-                setTimeout(() => { this.host.prepend(cssFile); }, 1);
+                setTimeout(() => {
+                    this.host.prepend(cssFile);
+                }, 1);
             })
                 .catch((err) => {
                 console.log('Error ', err);
@@ -598,7 +606,7 @@ const CasinoEngagementSuiteLuckywheel = class {
             window.postMessage({
                 type: 'SpinLuckyWheel',
                 data: {
-                    lotteryProgramID: this.luckywheel.Program.Id,
+                    lotteryProgramID: this.luckywheel.Program.Id
                 }
             });
         };
@@ -613,7 +621,7 @@ const CasinoEngagementSuiteLuckywheel = class {
         this.isPartitionsCustomableReady = false;
         this.isSpinning = false;
         this.options = undefined;
-        this.radius = 0.85 * Number(this.size) / 2;
+        this.radius = (0.85 * Number(this.size)) / 2;
         this.speed = 0;
         this.settings = undefined;
         this.svg = undefined;
@@ -628,11 +636,12 @@ const CasinoEngagementSuiteLuckywheel = class {
                 const hasError = rest.success === false;
                 const index = +rest.data.Result.WheelOfFortunePartitionIndex;
                 this.spinner.halt(this.settings.getDeg(index), () => {
+                    var _a;
                     this.isSpinning = false;
                     this.updateSpinable();
                     let prizeText = '';
                     if (!hasError) {
-                        const partition = this.luckywheel.Program.WheelOfFortune.Partitions[index];
+                        const partition = (_a = this.luckywheel.Program.WheelOfFortune.Partitions[index]) === null || _a === void 0 ? void 0 : _a.PrizeText;
                         prizeText = partition[this.language] || partition['*'];
                         this.luckywheel.Current.RemainingTimes = +this.luckywheel.Current.RemainingTimes - 1;
                     }
@@ -640,7 +649,7 @@ const CasinoEngagementSuiteLuckywheel = class {
                         type: 'ShowLuckywheelRewardModal',
                         data: {
                             PrizeMessage: prizeText,
-                            HasError: hasError,
+                            HasError: hasError
                         }
                     });
                 });
@@ -668,11 +677,7 @@ const CasinoEngagementSuiteLuckywheel = class {
         this.spinner = new Spinner({
             tick: (deg, speed) => {
                 setProps(this.spinContainer, {
-                    style: [
-                        `transform: rotate(${deg}deg)`,
-                        `height: ${this.size}px`,
-                        `width: ${this.size}px`,
-                    ].join(';'),
+                    style: [`transform: rotate(${deg}deg)`, `height: ${this.size}px`, `width: ${this.size}px`].join(';')
                 });
                 this.speed = speed * 0.5;
             }
@@ -683,26 +688,32 @@ const CasinoEngagementSuiteLuckywheel = class {
             '--length': `${this.options.length}`,
             '--radius': `${this.radius}`,
             '--ratio': `${Number(this.size) / 480}`,
-            '--size': `${this.size}`,
+            '--size': `${this.size}`
         };
     }
     render() {
         const sizeProps = { height: this.size, width: this.size };
-        const foreignObjectAgentProps = { 'height': `${this.size}px`, 'width': `${this.size}px` };
-        return (h("div", { key: 'b2c5ec30fc58e6758a2bdf6703055bdddddd99af', class: `WheelContainer ${this.device}`, style: this.defineGeneralVariables() }, h("svg", { key: '5176b473af31b7f96c211d5be56b4dfcd67681a6', width: this.size, height: this.size, ref: (el) => { this.svg = el; } }, h("foreignObject", Object.assign({ key: 'aa80be601163398a24f4aa77007e971cffbfd238' }, sizeProps, { class: "Bottom Customable" }), h("div", { key: 'a24e0f121d43ccfbf6457e0ddbdf5f9d051eed00', style: foreignObjectAgentProps })), h("g", Object.assign({ key: '63926d76e820cceed585510f960c37991d187a20', class: "PartitionsContainer" }, this.settings.getSpinnerProps()), h("g", { key: '6ae912f06d75f3c3f3d35b66f806940f6ded8b87', class: "PartitionsBackgrounds" }, this.options.map((_el, index) => {
-            return (h("foreignObject", { "clip-path": `url(#clip${index})`, class: "PartitionBackground Customable", style: { '--index': index.toString() }, width: this.size, height: this.size }, h("div", { style: foreignObjectAgentProps })));
-        })), h("g", { key: '971611dc5b132701679595ec5ee317d97121029d', class: "PartitionsBackgroundStrokes" }, this.options.map((_el, index) => {
+        const foreignObjectAgentProps = { height: `${this.size}px`, width: `${this.size}px` };
+        return (h("div", { key: 'ea47ff81b5aa4173b448295e474f94e8c2799aec', class: `WheelContainer ${this.device}`, style: this.defineGeneralVariables() }, h("svg", { key: '6c486c941b63b79a0e33ef2a078b225869080b9d', width: this.size, height: this.size, ref: (el) => {
+                this.svg = el;
+            } }, h("foreignObject", Object.assign({ key: '4dd2fc761bc1914e3e5104fdfaf03c126f481e5d' }, sizeProps, { style: foreignObjectAgentProps, class: "Bottom Customable" }), h("div", { key: '621ea705e477cadafa8be17108e0ccab3a8833f3', style: foreignObjectAgentProps })), h("g", Object.assign({ key: '61642e6056a75a114c8d3d4bab22bde7fe17afff', class: "PartitionsContainer" }, this.settings.getSpinnerProps()), h("g", { key: '53cc83c283e3d7eb625c4d9687c2862173bdee86', class: "PartitionsBackgrounds" }, this.options.map((_el, index) => {
+            return (h("foreignObject", { "clip-path": `url(#clip${index})`, class: "PartitionBackground Customable", style: Object.assign({ '--index': index.toString() }, foreignObjectAgentProps) }, h("div", { style: foreignObjectAgentProps })));
+        })), h("g", { key: '51ca18f5b7c877357a60d2ceb8f9b99cafcf6818', class: "PartitionsBackgroundStrokes" }, this.options.map((_el, index) => {
             return (h("path", Object.assign({ class: "PartitionBackgroundStroke" }, this.settings.getPartitionDraw(index), { width: this.size, height: this.size })));
-        })), h("g", { key: '51b1c3319cf8db82e73008df9dd45bcddfe349fe', class: "Partitions", style: { filter: this.speed > 0.3 ? `blur(${this.speed}px)` : '' } }, this.options.map((el, index) => {
-            return ([
+        })), h("g", { key: 'cc81bbe2e72960ced6562702ab7be1dc7973480c', class: "Partitions", style: { filter: this.speed > 0.3 ? `blur(${this.speed}px)` : '' } }, this.options.map((el, index) => {
+            return [
                 el.Image && (h("g", { class: `PartitionImage PartitionImage${index}`, ref: (el) => this.renderImage(el, index) })),
                 el.Name && (h("foreignObject", Object.assign({ class: "PartitionText" }, this.settings.getSvgTextPropsAdjustedByImage(index)), h("div", { class: "PartitionTextEntityContainer" }, h("p", { class: `PartitionTextEntity${this.settings.contentdirection === 'clockwise' ? '' : ' Anticlockwise'}`, innerHTML: el.Name }))))
-            ]);
-        }))), h("g", { key: 'b892a4cc21a37e7981a5dfabf1f7e16d2f0493f7', class: { 'active': this.isPartitionsCustomableReady, 'PartitionsCustomable1': true } }, this.options.map((_el, index) => {
+            ];
+        }))), h("g", { key: 'd126a5bde2af4b31f32ec029c117637fa5983e20', class: { active: this.isPartitionsCustomableReady, PartitionsCustomable1: true } }, this.options.map((_el, index) => {
             return (h("foreignObject", Object.assign({ class: "Partition1 Customable", style: { '--index': index.toString() } }, sizeProps), h("div", { style: foreignObjectAgentProps })));
-        })), h("g", { key: '6d572edae8f005204257154eafa77e2fa1f54356', class: { 'active': this.isPartitionsCustomableReady, 'PartitionsCustomable2': true } }, this.options.map((_el, index) => {
+        })), h("g", { key: 'abb7544782eb40d08fa1304612f69ed389e10dcf', class: { active: this.isPartitionsCustomableReady, PartitionsCustomable2: true } }, this.options.map((_el, index) => {
             return (h("foreignObject", Object.assign({ class: "Partition2 Customable", style: { '--index': index.toString() } }, sizeProps), h("div", { style: foreignObjectAgentProps })));
-        })), h("foreignObject", Object.assign({ key: 'd1a8bb686fe1d76301a6fe824b13dd212b1ce060', class: "Middle Customable" }, sizeProps), h("div", { key: 'f5fb21485fd3c8bd3f127a6714c65d488e51d6f5', style: foreignObjectAgentProps })), h("foreignObject", Object.assign({ key: '3ccd35ea0ed62a3d23e85af0008ac9bc236dfc2d', class: "Top Customable" }, sizeProps), h("div", { key: '60abed1d4fb4d57dfa20bf5ff7368b47dd32629c', style: foreignObjectAgentProps })), h("g", { key: '758e906615752e067e94cb33242c60c1a811e78e', class: { 'spinning': this.isSpinning, 'Center': true }, onClick: this.eventSpin }, h("foreignObject", { key: '3064736e103ecd1b9b0cb3a0582283e146bab4b5', x: Number(this.size) / 2 - 100 / 2, y: Number(this.size) / 2 - 100 / 2, width: 100, height: 100 })), h("g", { key: '277f36735b58e24e424179ca7082851adf470af1' }, this.options.map((_el, index) => {
+        })), h("foreignObject", Object.assign({ key: 'a76b670602be3050180ab71b2e4e424937865358', class: "Middle Customable" }, sizeProps, { style: foreignObjectAgentProps }), h("div", { key: '1d074b872c29092a51ce7a8c2c8cf2e4a84c1381', style: foreignObjectAgentProps })), h("foreignObject", Object.assign({ key: 'b8525ca3463cbde5a12f47655bc82451ef648012', class: "Top Customable" }, sizeProps, { style: foreignObjectAgentProps }), h("div", { key: 'ddbe297ea9947778975248dd111faed457bb9433', style: foreignObjectAgentProps })), h("g", { key: '0d247fcbc8734643bc36f9f457876d3b4cb462fa', class: { spinning: this.isSpinning, Center: true }, onClick: this.eventSpin }, h("foreignObject", { key: 'b63e7d4e9f73c101305c4854565ad9ce9c11c171', style: {
+                width: '100px',
+                height: '100px',
+                transform: `translate(${Number(this.size) / 2 - 100 / 2}px, ${Number(this.size) / 2 - 100 / 2}px)`
+            } })), h("g", { key: 'd3e9be9a11f4c6d8c6abff35936c33ff5cf8c26d' }, this.options.map((_el, index) => {
             return (h("clipPath", { id: `clip${index}` }, h("path", Object.assign({}, this.settings.getPartitionDraw(index)))));
         })))));
     }

package/dist/esm/casino-engagement-suite-luckywheel.entry.js

@@ -1,2 +1,2 @@
-export { C as casino_engagement_suite_luckywheel } from './casino-engagement-suite-luckywheel-61c38863.js';
+export { C as casino_engagement_suite_luckywheel } from './casino-engagement-suite-luckywheel-45c7f146.js';
 import './index-48c42d04.js';

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { C as CasinoEngagementSuiteLuckywheel } from './casino-engagement-suite-luckywheel-61c38863.js';
+export { C as CasinoEngagementSuiteLuckywheel } from './casino-engagement-suite-luckywheel-45c7f146.js';
 import './index-48c42d04.js';

package/dist/types/utils/class.svgcalc.d.ts

@@ -1,5 +1,5 @@
-import { ArrowMode, ContentDirection } from "./types.js";
-import type { Point } from "./types.js";
+import { ArrowMode, ContentDirection } from './types.js';
+import type { Point } from './types.js';
 type MapObjectValueToTuple<T extends Object> = T[keyof T][];
 export declare const mapObjectValueToTuple: <T>(object: T) => MapObjectValueToTuple<T>;
 declare enum RotateDirection {
@@ -36,29 +36,33 @@ export declare class SvgCalc {
             'font-size': string;
             transform: string;
             'transform-origin': string;
+            height: string;
+            width: string;
         };
         x: number;
         y: number;
     };
-    getSvgTextProps(index: any): {
+    getSvgTextProps(index: any, size: any): {
         style: {
             'font-size': string;
             transform: string;
             'transform-origin': string;
+            height: string;
+            width: string;
         };
         x: number;
         y: number;
     };
     getSvgTextPropsAdjustedByImage(index: any): {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
         style: {
             'font-size': string;
             transform: string;
             'transform-origin': string;
+            height: string;
+            width: string;
         };
+        x: number;
+        y: number;
     };
     get offsetText(): {
         center: number;
@@ -88,11 +92,13 @@ export declare class SvgCalc {
         transformOrigin: Point;
         point: Point;
     };
-    getPropsForPartitionInfo(index: number, offset: any, baseRadius?: number, contentDirection?: ContentDirection): {
+    getPropsForPartitionInfo(index: number, offset: any, baseRadius?: number, contentDirection?: ContentDirection, size?: string): {
         style: {
             'font-size': string;
             transform: string;
             'transform-origin': string;
+            height: string;
+            width: string;
         };
         x: number;
         y: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-engagement-suite-luckywheel",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/casino-engagement-suite-luckywheel/p-24a65524.js

@@ -1,15 +0,0 @@
-import{r as t,h as i,g as e}from"./p-7d1170ae.js";
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */var s,r,n,a,o,h;!function(t){t.Arrow="Arrow",t.Partition="Partition"}(s||(s={})),function(t){t.DownFromTop="DownFromTop",t.UpFromCenter="UpFromCenter",t.DownFromCenter="DownFromCenter",t.UpFromBottom="UpFromBottom"}(r||(r={})),function(t){t.en="en",t.fr="fr",t.de="de",t.tr="tr"}(n||(n={})),function(t){t[t.clockwise=1]="clockwise",t[t.anticlockwise=-1]="anticlockwise",t[t.outward=0]="outward"}(a||(a={})),function(t){t.launch="launch",t.loop="loop",t.halt="halt"}(o||(o={})),function(t){t.quad="quad",t.cubic="cubic",t.quart="quart",t.quint="quint",t.expo="expo",t.sine="sine",t.circ="circ"}(h||(h={}));const c=(t,i)=>{Object.keys(i).map((e=>{t.setAttribute(e.split(/(?=[A-Z])/).map((t=>t.toLocaleLowerCase())).join("-"),i[e])}))},d=t=>new Promise((i=>{let e=document.createElementNS("http://www.w3.org/2000/svg","image");e.onload=()=>i(e),e.onerror=()=>i(e),e.href.baseVal=t})),l=t=>({x:t,y:t}),u=(t,i)=>({x:t.x+i.x,y:t.y+i.y}),g={Image:"",Name:"Thank you",PrizeText:"",PrizeImage:""},b=async(t,i)=>{let e=((t,i)=>{const e=t.map((t=>{const e={};return Object.keys(t).map((s=>{"object"==typeof t[s]&&t[s]&&(e["Image1"===s?"Image":s]=t[s][i]||t[s]["*"])})),e}));return(t=>{let i=0;return t.map((t=>{i+=Number(t.probability)})),i})(t)<1&&e.push(g),e})(t.Program.WheelOfFortune.Partitions,i);return e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent)?e.map((t=>{if(t.Image){const i=document.createElementNS("http://www.w3.org/2000/svg","image");return i.href.baseVal=t.Image,Object.assign(Object.assign({},t),{Image:i})}return t})):await Promise.all(e.map((async t=>Object.assign(Object.assign({},t),await(async t=>t?{Image:await d(t)}:{})(t.Image))))),e},f={in:{quad:t=>Math.pow(t,2),cubic:t=>Math.pow(t,3),quart:t=>Math.pow(t,4),quint:t=>Math.pow(t,5),sine:t=>1-Math.cos(t*Math.PI/2),expo:t=>0===t?0:Math.pow(2,10*t-10),circ:t=>1-Math.sqrt(1-Math.pow(t,2))},out:{quad:t=>1-Math.pow(1-t,2),cubic:t=>1-Math.pow(1-t,3),quart:t=>1-Math.pow(1-t,4),quint:t=>1-Math.pow(1-t,5),sine:t=>Math.sin(t*Math.PI/2),expo:t=>1===t?1:1-Math.pow(2,-10*t),circ:t=>Math.sqrt(1-Math.pow(t-1,2))}},m={quad:2,cubic:3,quart:4,quint:5,sine:Math.PI/2,expo:Math.LN2,circ:1/0},p={in:{quad:t=>2*t,cubic:t=>3*t**2,quart:t=>4*t**3,quint:t=>5*t**4,sine:t=>Math.PI/2*Math.sin(Math.PI/2*t),expo:t=>10*Math.LN2*2**(10*t-10),circ:t=>-.5*(1-t**2)**-.5},out:{cubic:t=>3*t**2-6*t+3}},y=[{launchTurns:5,launchSpeed:.2,loopSpeed:15,haltTurns:2,haltSpeed:.16},{launchTurns:2,launchSpeed:.5,loopSpeed:20,haltTurns:2,haltSpeed:.22},{launchTurns:6,launchSpeed:1.38,loopSpeed:45,haltTurns:6,haltSpeed:.5}],v=t=>Object.keys(t).map((i=>t[i]));var x;!function(t){t[t.clockwise=1]="clockwise",t[t.anticlockwise=-1]="anticlockwise"}(x||(x={}));class k{constructor({size:t,radius:i,options:e,themeIndex:s,contentdirection:n}){this.arrowmode=r.DownFromTop,this.convertDegToArc=t=>t*Math.PI/180,this.convertArcToDeg=t=>180*t/Math.PI%360,this.getArcDelta=t=>2*Math.PI/t,this.findDeg=(t,i)=>t*this.convertArcToDeg(this.getArcDelta(i)),this.angleTransform=t=>{switch(t){case r.DownFromTop:case r.UpFromCenter:return-Math.PI/2;case r.DownFromCenter:case r.UpFromBottom:return Math.PI/2}},this.contentdirection=n||"anticlockwise",this.center=t/2,this.ratio=t/375,this.options=e,this.length=e.length,this.themeIndex=s,this.radius=i}get sizeImage(){const t=t=>48*this.ratio*5/t;if(this.length<=3)return t(4);switch(this.length){case 8:case 7:return 24*this.ratio;case 6:return 36*this.ratio;case 5:return 48*this.ratio;case 4:return 56*this.ratio;default:return t(this.length)}}getSizeImageByPartition(t){return this.options[t].name?this.sizeImage/2:this.sizeImage}getSvgImageProps(t,i=1.25){const e=this.getSizeImageByPartition(t);let s;return s=this.options[t].name?this.radius-e/2-3*this.ratio:(this.radius-e/2)/Number(i)-3*this.ratio,Object.assign(Object.assign({},this.getPropsForPartitionInfo(t,this.getOffsetImage(e),s,a.outward)),{width:e,height:e})}getSvgTextProps(t){const i=this.getSizeImageByPartition(t);let e;return e=this.options[t].image?this.radius-i-6*this.ratio:this.radius-6*this.ratio,Object.assign({},this.getPropsForPartitionInfo(t,this.offsetText,e))}getSvgTextPropsAdjustedByImage(t){const i=this.getSvgTextProps(t),e=this.options[t].image?80:100,s={width:e,height:e};return Object.assign(Object.assign(Object.assign({},i),s),{x:"clockwise"===this.contentdirection?i.x:i.x-s.width,y:i.y-s.height/2})}get offsetText(){return{center:0,position:{x:0,y:0},transform:{x:0,y:0}}}getOffsetImage(t){return{center:0,position:{x:-1*t/2,y:-1*t/2},transform:{x:0,y:0}}}get direction(){return x.clockwise}getAngleSelf(t,i){return 360*t/this.length*this.direction+90*(void 0!==i?i:a[this.contentdirection])}getPartitionPositions(t,i,e){const s=this.angleTransform(this.arrowmode)+this.direction*t*2*Math.PI/this.length,r=((t,i,e)=>{const s=l(e);return{x:s.x+t*Math.cos(i),y:s.y+t*Math.sin(i)}})(i||this.radius-9*this.ratio,s,this.center+e.center);return{transformOrigin:u(r,e.transform),point:u(r,e.position)}}getPropsForPartitionInfo(t,i,e,s){const{point:r,transformOrigin:n}=this.getPartitionPositions(t,e,i);return Object.assign(Object.assign({},r),{style:{"font-size":13*this.ratio+"px",transform:`rotate(${this.getAngleSelf(t,s)}deg)`,"transform-origin":`${a=n,Object.keys(a).map((t=>`${a[t]}px`)).join(" ")}`}});var a}getPartitionDraw(t){const i=l(this.center),e=l(this.radius),{point:s,pointNext:r}=((t,i,e,s)=>{const r=t=>((t,i,e,s)=>{const r=Math.PI/180*(360/i*(t-.5)-90),n=l(s),a=l(e);return{x:n.x+a.x*Math.cos(r),y:n.y+a.y*Math.sin(r)}})(t,i,e,s);return{point:r(t),pointNext:r(t+1)}})(t,this.length,this.radius,this.center);return{d:["M",...v(i),"L",...v(s),"A",...v(e),"0 0 1",...v(r),"Z"].join(" ")}}getDeg(t){return this.findDeg(length-(t||this.length-1),length)}getSpinnerProps(){const t=l(this.center);return{"transform-origin":`${t.x} ${t.y}`}}}class w{constructor(t){this.deg=0,this.degTarget=void 0,this.step=void 0,this.easingType=h.cubic,this.param=y[2],this.halt=(t,i=(()=>{}))=>{this.shouldHalt=()=>{this.step=o.halt,this.cb=()=>{i(),this.setDeg(t,0)},this.degTarget=t+360*this.param.haltTurns,this.continueRepeat()}},this.continueRepeat=()=>setTimeout((()=>this.ticker()),30),this.ticker=()=>{const t=this.param.loopSpeed,i=t=>33*m[this.easingType]*t/this.param.loopSpeed,e=()=>{const t=360*this.param.launchTurns-this.deg,e=i(t);this.animateF(e,this.deg,t,f.in[this.easingType],p.in[this.easingType])},s=()=>{const t=i(this.degTarget);this.animateF(t,0,this.degTarget,f.out[this.easingType],p.out[this.easingType])},r=()=>{this.setDeg((this.deg+t)%360,m[this.easingType]),this.continueRepeat()};({[o.launch]:()=>{this.cb=()=>{this.step=o.loop,this.setDeg(t,m[this.easingType]),this.continueRepeat()},e()},[o.loop]:()=>{this.shouldHalt&&0===this.deg?this.shouldHalt():r()},[o.halt]:()=>{this.deg===360-t?s():r()}})[this.step]()},this.setDeg=(t,i)=>{this.deg=t,this.tick(t,i)},this.animateF=(t,i,e,s,r)=>{let n=null;const a=()=>{let o=(new Date).getTime();n||(n=o);const h=o-n,c=e*s(h/t)+i,d=Math.abs(r(h/t));this.setDeg(c,d),h<t?setTimeout((()=>a()),30):this.cb()};a()},this.animate=(t,i,e,s,r)=>{let n=null;window.cancelAnimationFrame(n);let a=null;const o=h=>{a||(a=h);const c=h-a,d=e*s(c/t)+i,l=Math.abs(r(c/t));this.setDeg(d,l),c<t?n=window.requestAnimationFrame(o):this.cb()};n=window.requestAnimationFrame(o)},this.tick=t.tick}launch(){this.shouldHalt=void 0,this.step=o.launch,this.ticker()}}const P=class{constructor(i){t(this,i),this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.host.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.host.prepend(i)}),1)})).catch((t=>{console.log("Error ",t)}))},this.renderImage=(t,i)=>{const e=this.options[i].Image;c(e,this.settings.getSvgImageProps(i)),t.innerHTML=null,t.appendChild(e)},this.updateSpinable=()=>{if(this.luckywheel.Current){if(Number(this.luckywheel.Current.RemainingTimes)>0)return void(this.spinable=!0);window.postMessage({type:"ShowNoSpinLeftModal"})}this.spinable=!1},this.eventSpin=()=>{this.updateSpinable(),this.spinable&&!this.isSpinning&&(this.isSpinning=!0,this.spinContainer=this.svg.querySelector("g.PartitionsContainer"),this.spinner.launch(),window.postMessage({type:"SpinLuckyWheel",data:{lotteryProgramID:this.luckywheel.Program.Id}}))},this.clientStyling="",this.clientStylingUrl="",this.language="en",this.device="Mobile",this.luckywheel=void 0,this.size="440",this.contentdirection="anticlockwise",this.limitStylingAppends=!1,this.isPartitionsCustomableReady=!1,this.isSpinning=!1,this.options=void 0,this.radius=.85*Number(this.size)/2,this.speed=0,this.settings=void 0,this.svg=void 0,this.spinContainer=void 0,this.spinable=void 0,this.spinner=void 0}handleEvent(t){const i=null==t?void 0:t.data,{type:e}=i,s=function(t,i){var e={};for(var s in t)Object.prototype.hasOwnProperty.call(t,s)&&i.indexOf(s)<0&&(e[s]=t[s]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(s=Object.getOwnPropertySymbols(t);r<s.length;r++)i.indexOf(s[r])<0&&Object.prototype.propertyIsEnumerable.call(t,s[r])&&(e[s[r]]=t[s[r]])}return e}(i,["type"]);if("SpinLuckyWheelRes"===e){const t=!1===s.success,i=+s.data.Result.WheelOfFortunePartitionIndex;this.spinner.halt(this.settings.getDeg(i),(()=>{this.isSpinning=!1,this.updateSpinable();let e="";if(!t){const t=this.luckywheel.Program.WheelOfFortune.Partitions[i];e=t[this.language]||t["*"],this.luckywheel.Current.RemainingTimes=+this.luckywheel.Current.RemainingTimes-1}window.postMessage({type:"ShowLuckywheelRewardModal",data:{PrizeMessage:e,HasError:t}})}))}}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}async componentWillLoad(){this.options=await b(this.luckywheel,n.en),this.settings=new k({size:this.size,radius:this.radius,options:this.options,themeIndex:1,contentdirection:this.contentdirection}),this.spinner=new w({tick:(t,i)=>{c(this.spinContainer,{style:[`transform: rotate(${t}deg)`,`height: ${this.size}px`,`width: ${this.size}px`].join(";")}),this.speed=.5*i}})}defineGeneralVariables(){return{"--length":`${this.options.length}`,"--radius":`${this.radius}`,"--ratio":""+Number(this.size)/480,"--size":`${this.size}`}}render(){const t={height:this.size,width:this.size},e={height:`${this.size}px`,width:`${this.size}px`};return i("div",{key:"b2c5ec30fc58e6758a2bdf6703055bdddddd99af",class:`WheelContainer ${this.device}`,style:this.defineGeneralVariables()},i("svg",{key:"5176b473af31b7f96c211d5be56b4dfcd67681a6",width:this.size,height:this.size,ref:t=>{this.svg=t}},i("foreignObject",Object.assign({key:"aa80be601163398a24f4aa77007e971cffbfd238"},t,{class:"Bottom Customable"}),i("div",{key:"a24e0f121d43ccfbf6457e0ddbdf5f9d051eed00",style:e})),i("g",Object.assign({key:"63926d76e820cceed585510f960c37991d187a20",class:"PartitionsContainer"},this.settings.getSpinnerProps()),i("g",{key:"6ae912f06d75f3c3f3d35b66f806940f6ded8b87",class:"PartitionsBackgrounds"},this.options.map(((t,s)=>i("foreignObject",{"clip-path":`url(#clip${s})`,class:"PartitionBackground Customable",style:{"--index":s.toString()},width:this.size,height:this.size},i("div",{style:e}))))),i("g",{key:"971611dc5b132701679595ec5ee317d97121029d",class:"PartitionsBackgroundStrokes"},this.options.map(((t,e)=>i("path",Object.assign({class:"PartitionBackgroundStroke"},this.settings.getPartitionDraw(e),{width:this.size,height:this.size}))))),i("g",{key:"51b1c3319cf8db82e73008df9dd45bcddfe349fe",class:"Partitions",style:{filter:this.speed>.3?`blur(${this.speed}px)`:""}},this.options.map(((t,e)=>[t.Image&&i("g",{class:`PartitionImage PartitionImage${e}`,ref:t=>this.renderImage(t,e)}),t.Name&&i("foreignObject",Object.assign({class:"PartitionText"},this.settings.getSvgTextPropsAdjustedByImage(e)),i("div",{class:"PartitionTextEntityContainer"},i("p",{class:"PartitionTextEntity"+("clockwise"===this.settings.contentdirection?"":" Anticlockwise"),innerHTML:t.Name})))])))),i("g",{key:"b892a4cc21a37e7981a5dfabf1f7e16d2f0493f7",class:{active:this.isPartitionsCustomableReady,PartitionsCustomable1:!0}},this.options.map(((s,r)=>i("foreignObject",Object.assign({class:"Partition1 Customable",style:{"--index":r.toString()}},t),i("div",{style:e}))))),i("g",{key:"6d572edae8f005204257154eafa77e2fa1f54356",class:{active:this.isPartitionsCustomableReady,PartitionsCustomable2:!0}},this.options.map(((s,r)=>i("foreignObject",Object.assign({class:"Partition2 Customable",style:{"--index":r.toString()}},t),i("div",{style:e}))))),i("foreignObject",Object.assign({key:"d1a8bb686fe1d76301a6fe824b13dd212b1ce060",class:"Middle Customable"},t),i("div",{key:"f5fb21485fd3c8bd3f127a6714c65d488e51d6f5",style:e})),i("foreignObject",Object.assign({key:"3ccd35ea0ed62a3d23e85af0008ac9bc236dfc2d",class:"Top Customable"},t),i("div",{key:"60abed1d4fb4d57dfa20bf5ff7368b47dd32629c",style:e})),i("g",{key:"758e906615752e067e94cb33242c60c1a811e78e",class:{spinning:this.isSpinning,Center:!0},onClick:this.eventSpin},i("foreignObject",{key:"3064736e103ecd1b9b0cb3a0582283e146bab4b5",x:Number(this.size)/2-50,y:Number(this.size)/2-50,width:100,height:100})),i("g",{key:"277f36735b58e24e424179ca7082851adf470af1"},this.options.map(((t,e)=>i("clipPath",{id:`clip${e}`},i("path",Object.assign({},this.settings.getPartitionDraw(e)))))))))}get host(){return e(this)}};P.style=':host{font-family:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"}*,*::before,*::after{margin:0;padding:0;list-style:none;text-decoration:none;outline:none;box-sizing:border-box}.LotteryProgramWof{background:var(--emw--color-contrast, #07072A);display:flex;align-items:center;flex-direction:column;padding:20px 0}main{max-width:600px;width:100%;display:flex;justify-content:space-around;min-height:200px}svg{transition:opacity 0.3s}.WheelContainer{text-align:center}.FortuneContainer{width:100%;display:flex;align-items:center;flex-direction:column}.Center{cursor:pointer;transition:filter;transition-duration:1s}.Center.disabled{filter:grayscale(80%)}.Center .CenterCircle{fill:#3CE4BB;stroke:rgb(150, 54, 88);stroke-width:2px;cursor:pointer;transition:fill;transition-duration:1s}.Center .CenterText{fill:#FFFFFF}.PointerPartition{opacity:0.3;fill:lightgoldenrodyellow;stroke:red;stroke-width:6px;stroke-dasharray:12}.Current{color:#FFFFFF}.PartitionText{color:#FFFFFF;font-style:normal;font-weight:700;text-anchor:end;text-shadow:0px 3px #000;dominant-baseline:central}.PartitionsShadow{background-blend-mode:multiply;mix-blend-mode:multiply}.PartitionTextEntityContainer{height:100%;display:flex;align-items:center}.PartitionTextEntity{width:100%}.PartitionTextEntity.Anticlockwise{text-align:end}foreignObject.Bottom div{background-image:url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-bg.svg");background-size:calc(var(--radius) * 2px + var(--ratio) * 20px);background-position:center}foreignObject.Middle div{background-image:url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-spin.svg"), url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-pointer.svg");background-position:center, center 5px}foreignObject.Top{mix-blend-mode:multiply}foreignObject.Top div{background-image:var(--img-theme-shadow);background-position:center;background-size:calc(var(--radius) * 2px)}foreignObject.Partition1 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc(var(--index) * 360deg / var(--length)))}foreignObject.Partition2 div{background-image:var(--img-theme-partition-light);background-position:center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);transform:rotate(calc((var(--index) + 0.5) * 360deg / var(--length)))}foreignObject.PointerArea{mix-blend-mode:screen}foreignObject.PointerArea div{background-image:var(--img-theme-pointer-area);background-position:center -3px;background-size:51%}foreignObject.Partition1 div,foreignObject.Partition2 div{transform-origin:center}.PartitionsCustomable1 div,.PartitionsCustomable2 div{visibility:hidden}.PartitionsCustomable1 div.active,.PartitionsCustomable2 div.active{visibility:visible}foreignObject.Customable{overflow:visible}foreignObject.Customable div{background-repeat:no-repeat}.PartitionBackground div{background-size:calc(var(--radius) * 2 / var(--size) * 100%) calc(var(--radius) * 2 / var(--size) * 100%);background-position:center}.PartitionBackground:nth-child(2n) div{background:var(--emw--color-primary, #3F2E75)}.PartitionBackground:nth-child(2n+1) div{background:var(--emw--color-secondary, #9482CE)}.PartitionBackground div{transform-origin:center}.PartitionBackgroundStroke{fill:transparent;stroke:var(--emw--color-background-secondary, #251D3E);stroke-width:3px;stroke-dasharray:none}.PointerPartitionFrame{stroke:#FFDD64;fill:transparent;stroke-dasharray:var(--radius) calc(6.2831853072 / var(--length) * var(--radius));stroke-width:0px}.PointerPartitionFrame.active{stroke-width:3px}.WheelContainer.Mobile foreignObject.Middle div{background-size:95px, 38px}.PartitionText .PartitionTextEntityContainer .PartitionTextEntity{text-align:center;text-transform:uppercase;text-shadow:none;font-size:var(--emw--font-size-small, 14px);font-weight:900}';export{P as C}

package/dist/casino-engagement-suite-luckywheel/p-b7afe849.entry.js

@@ -1 +0,0 @@
-export{C as casino_engagement_suite_luckywheel}from"./p-24a65524.js";import"./p-7d1170ae.js";