@everymatrix/casino-engagement-suite-luckywheel 0.0.1

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

@@ -0,0 +1,737 @@
+import { r as registerInstance, h, g as getElement } from './index-27ac0c91.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.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var PointerMode;
+(function (PointerMode) {
+    PointerMode["Arrow"] = "Arrow";
+    PointerMode["Partition"] = "Partition";
+})(PointerMode || (PointerMode = {}));
+var ArrowMode;
+(function (ArrowMode) {
+    ArrowMode["DownFromTop"] = "DownFromTop";
+    ArrowMode["UpFromCenter"] = "UpFromCenter";
+    ArrowMode["DownFromCenter"] = "DownFromCenter";
+    ArrowMode["UpFromBottom"] = "UpFromBottom";
+})(ArrowMode || (ArrowMode = {}));
+var Lang;
+(function (Lang) {
+    Lang["en"] = "en";
+    Lang["fr"] = "fr";
+    Lang["de"] = "de";
+    Lang["tr"] = "tr";
+})(Lang || (Lang = {}));
+var ContentDirection;
+(function (ContentDirection) {
+    ContentDirection[ContentDirection["clockwise"] = 1] = "clockwise";
+    ContentDirection[ContentDirection["anticlockwise"] = -1] = "anticlockwise";
+    ContentDirection[ContentDirection["outward"] = 0] = "outward";
+})(ContentDirection || (ContentDirection = {}));
+var SpinStep;
+(function (SpinStep) {
+    SpinStep["launch"] = "launch";
+    SpinStep["loop"] = "loop";
+    SpinStep["halt"] = "halt";
+})(SpinStep || (SpinStep = {}));
+var Easing;
+(function (Easing) {
+    Easing["quad"] = "quad";
+    Easing["cubic"] = "cubic";
+    Easing["quart"] = "quart";
+    Easing["quint"] = "quint";
+    // 
+    Easing["expo"] = "expo";
+    Easing["sine"] = "sine";
+    Easing["circ"] = "circ";
+})(Easing || (Easing = {}));
+
+const isSafari = () => {
+    var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    return isSafari;
+};
+const cvtCaseFromCamelToKebab = (text) => text
+    .split(/(?=[A-Z])/)
+    .map(s => s.toLocaleLowerCase())
+    .join('-');
+const setProps = (element, props) => {
+    Object.keys(props).map(_key => {
+        element.setAttribute(cvtCaseFromCamelToKebab(_key), props[_key]);
+    });
+};
+const imageLoaderSvg = (src) => {
+    return new Promise((resolve, _reject) => {
+        let img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+        img.onload = () => resolve(img);
+        img.onerror = () => resolve(img); //reject
+        img.href.baseVal = src;
+    });
+};
+const getSymmetricalPointFromScalar = (length) => ({
+    x: length,
+    y: length
+});
+const getPointOnCircle = (radius, angle, center) => {
+    const centerPoint = getSymmetricalPointFromScalar(center);
+    return {
+        x: centerPoint.x + radius * Math.cos(angle),
+        y: centerPoint.y + radius * Math.sin(angle)
+    };
+};
+const getPoint = (num, length, r, rCenter) => {
+    const arc = 360 / length;
+    const psai = Math.PI / 180 * (-90 + arc * (num - 1 / 2));
+    const rCenterPoint = getSymmetricalPointFromScalar(rCenter);
+    const rPoint = getSymmetricalPointFromScalar(r);
+    return {
+        x: rCenterPoint.x + rPoint.x * Math.cos(psai),
+        y: rCenterPoint.y + rPoint.y * Math.sin(psai)
+    };
+};
+const getPointWithNext = (num, length, r1, r2) => {
+    const getPointx = (num) => getPoint(num, length, r1, r2);
+    return {
+        point: getPointx(num),
+        pointNext: getPointx(num + 1)
+    };
+};
+const pointPlus = (point1, point2) => ({
+    x: point1.x + point2.x,
+    y: point1.y + point2.y
+});
+const optionCompliment = {
+    image: '',
+    name: 'Thank you',
+    prizeText: '',
+    prizeImage: ''
+};
+const getSumProbability = (partitions) => {
+    let probabilityAll = 0;
+    partitions.map(partition => {
+        probabilityAll += Number(partition.probability);
+    });
+    return probabilityAll;
+};
+const getOptionsFromPartitions = (partitions, lang) => {
+    const options = partitions.map(_partition => {
+        const option = {};
+        Object.keys(_partition).map((_key) => {
+            if (typeof _partition[_key] === 'object' &&
+                _partition[_key].hasOwnProperty('*')) {
+                const targetKey = _key === 'image1' ? 'image' : _key;
+                option[targetKey] = _partition[_key][lang] || _partition[_key]['*'];
+            }
+        });
+        return option;
+    });
+    if (getSumProbability(partitions) < 1) {
+        options.push(optionCompliment);
+    }
+    return options;
+};
+const preloadImage = async (src) => {
+    if (!src)
+        return {};
+    return {
+        image: await imageLoaderSvg(src)
+    };
+};
+const getOptions = async (bonus, lang) => {
+    const { partitions } = bonus.program.wheelOfFortune;
+    let options = getOptionsFromPartitions(partitions, lang);
+    if (isSafari()) {
+        options = options.map(option => {
+            if (option.image) {
+                const img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+                img.href.baseVal = option.image;
+                return Object.assign(Object.assign({}, option), { image: img });
+            }
+            else {
+                return option;
+            }
+        });
+    }
+    else {
+        options = await Promise.all(options.map(async (o) => (Object.assign(Object.assign({}, o), (await preloadImage(o.image))))));
+    }
+    return options;
+};
+const easing = {
+    in: {
+        quad: (x) => Math.pow(x, 2),
+        cubic: (x) => Math.pow(x, 3),
+        quart: (x) => Math.pow(x, 4),
+        quint: (x) => Math.pow(x, 5),
+        //
+        sine: (x) => 1 - Math.cos((x * Math.PI) / 2),
+        expo: (x) => x === 0 ? 0 : Math.pow(2, 10 * x - 10),
+        circ: (x) => 1 - Math.sqrt(1 - Math.pow(x, 2)),
+    },
+    out: {
+        quad: (x) => 1 - Math.pow(1 - x, 2),
+        cubic: (x) => 1 - Math.pow(1 - x, 3),
+        quart: (x) => 1 - Math.pow(1 - x, 4),
+        quint: (x) => 1 - Math.pow(1 - x, 5),
+        //
+        sine: (x) => Math.sin((x * Math.PI) / 2),
+        expo: (x) => x === 1 ? 1 : 1 - Math.pow(2, -10 * x),
+        circ: (x) => Math.sqrt(1 - Math.pow(x - 1, 2)),
+    }
+};
+const easingGrad = {
+    quad: 2,
+    cubic: 3,
+    quart: 4,
+    quint: 5,
+    sine: Math.PI / 2,
+    expo: Math.LN2,
+    circ: Infinity,
+};
+const easingGradX = {
+    in: {
+        quad: (x) => 2 * x,
+        cubic: (x) => 3 * x ** 2,
+        quart: (x) => 4 * x ** 3,
+        quint: (x) => 5 * x ** 4,
+        sine: (x) => Math.PI / 2 * Math.sin(Math.PI / 2 * x),
+        expo: (x) => Math.LN2 * 10 * 2 ** (10 * x - 10),
+        circ: (x) => -1 / 2 * (1 - x ** 2) ** (-1 / 2),
+    },
+    out: {
+        cubic: (x) => 3 * x ** 2 - 6 * x + 3,
+    }
+};
+const params = [
+    // basic
+    {
+        launchTurns: 5,
+        launchSpeed: 0.2,
+        loopSpeed: 15,
+        haltTurns: 2,
+        haltSpeed: 0.16,
+    },
+    // faster
+    {
+        launchTurns: 2,
+        launchSpeed: 0.5,
+        loopSpeed: 20,
+        haltTurns: 2,
+        haltSpeed: 0.22,
+    },
+    // faster with more turns
+    {
+        launchTurns: 6,
+        launchSpeed: 1.38,
+        loopSpeed: 45,
+        haltTurns: 6,
+        haltSpeed: 0.50,
+    },
+];
+
+const mapObjectValueToTuple = (object) => Object.keys(object).map(key => object[key]);
+var RotateDirection;
+(function (RotateDirection) {
+    RotateDirection[RotateDirection["clockwise"] = 1] = "clockwise";
+    RotateDirection[RotateDirection["anticlockwise"] = -1] = "anticlockwise";
+})(RotateDirection || (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.findDeg = (index, n) => {
+            const degDelta = this.convertArcToDeg(this.getArcDelta(n));
+            return (index) * degDelta;
+        };
+        this.angleTransform = (arrowmode) => {
+            switch (arrowmode) {
+                case ArrowMode.DownFromTop:
+                case ArrowMode.UpFromCenter:
+                    return -Math.PI / 2;
+                case ArrowMode.DownFromCenter:
+                case ArrowMode.UpFromBottom:
+                    return Math.PI / 2;
+            }
+        };
+        this.contentdirection = contentdirection || 'anticlockwise';
+        // size
+        this.center = size / 2;
+        this.ratio = size / 375;
+        // options
+        this.options = options;
+        this.length = options.length;
+        // theme
+        this.themeIndex = themeIndex;
+        //
+        this.radius = radius;
+    }
+    get sizeImage() {
+        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);
+        }
+    }
+    getSizeImageByPartition(index) {
+        if (this.options[index].name) {
+            return this.sizeImage / 2;
+        }
+        else {
+            return this.sizeImage;
+        }
+    }
+    getSvgImageProps(index, partitionDivisor = 1.25) {
+        const sizeImage = this.getSizeImageByPartition(index);
+        let baseRadius;
+        if (this.options[index].name) {
+            baseRadius = this.radius - sizeImage / 2 - 3 * this.ratio;
+        }
+        else {
+            baseRadius = (this.radius - sizeImage / 2) / Number(partitionDivisor) - 3 * this.ratio;
+        }
+        return Object.assign(Object.assign({}, this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius, ContentDirection.outward)), { width: sizeImage, height: sizeImage });
+    }
+    getSvgTextProps(index) {
+        const sizeImage = this.getSizeImageByPartition(index);
+        let baseRadius;
+        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));
+    }
+    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 });
+    }
+    get offsetText() {
+        return {
+            center: 0,
+            position: {
+                x: 0,
+                y: 0
+            },
+            transform: {
+                x: 0,
+                y: 0
+            }
+        };
+    }
+    getOffsetImage(sizeImage) {
+        return {
+            center: 0,
+            position: {
+                x: -1 * sizeImage / 2,
+                y: -1 * sizeImage / 2
+            },
+            transform: {
+                x: 0,
+                y: 0
+            }
+        };
+    }
+    get direction() {
+        return RotateDirection.clockwise;
+    }
+    getAngleSelf(index, contentDirection) {
+        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 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);
+        return {
+            transformOrigin,
+            point: pointResult
+        };
+    }
+    getPropsForPartitionInfo(index, offset, baseRadius, contentDirection) {
+        const { point, transformOrigin } = this.getPartitionPositions(index, baseRadius, offset);
+        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)}`
+            } });
+    }
+    getPartitionDraw(index) {
+        const rPoint = getSymmetricalPointFromScalar(this.center);
+        const rRingInnerPoint = getSymmetricalPointFromScalar(this.radius);
+        const { point, pointNext } = getPointWithNext(index, this.length, this.radius, this.center);
+        const ds = [
+            'M', ...mapObjectValueToTuple(rPoint),
+            'L', ...mapObjectValueToTuple(point),
+            'A',
+            ...mapObjectValueToTuple(rRingInnerPoint),
+            '0 0 1',
+            ...mapObjectValueToTuple(pointNext),
+            'Z'
+        ];
+        return {
+            d: ds.join(' ')
+        };
+    }
+    getDeg(index) {
+        const i = index || this.length - 1;
+        return this.findDeg(length - i, length);
+    }
+    getSpinnerProps() {
+        const centerPoint = getSymmetricalPointFromScalar(this.center);
+        return {
+            'transform-origin': `${centerPoint.x} ${centerPoint.y}`
+        };
+    }
+}
+
+class Spinner {
+    constructor(inits) {
+        this.deg = 0;
+        this.degTarget = undefined;
+        this.step = undefined;
+        this.easingType = Easing.cubic;
+        this.param = params[2];
+        this.halt = (deg, cb = () => { }) => {
+            this.shouldHalt = () => {
+                this.step = SpinStep.halt;
+                this.cb = () => {
+                    cb();
+                    this.setDeg(deg, 0);
+                };
+                this.degTarget = deg + 360 * this.param.haltTurns;
+                this.continueRepeat();
+            };
+        };
+        this.continueRepeat = () => setTimeout(() => this.ticker(), 30);
+        this.ticker = () => {
+            const linkSpeed = this.param.loopSpeed;
+            const easingDuration = (deg) => 33 * easingGrad[this.easingType] * deg / this.param.loopSpeed;
+            const animations = {
+                launch: () => {
+                    const degTar = 360 * this.param.launchTurns - this.deg;
+                    const t = easingDuration(degTar);
+                    this.animateF(t, this.deg, degTar, easing.in[this.easingType], easingGradX.in[this.easingType]);
+                },
+                halt: () => {
+                    const t = easingDuration(this.degTarget);
+                    this.animateF(t, 0, this.degTarget, easing.out[this.easingType], easingGradX.out[this.easingType]);
+                },
+                loop: () => {
+                    this.setDeg((this.deg + linkSpeed) % 360, easingGrad[this.easingType]);
+                    this.continueRepeat();
+                }
+            };
+            const stepSwitcher = {
+                [SpinStep.launch]: () => {
+                    this.cb = () => {
+                        this.step = SpinStep.loop;
+                        this.setDeg(linkSpeed, easingGrad[this.easingType]);
+                        this.continueRepeat();
+                    };
+                    animations.launch();
+                },
+                [SpinStep.loop]: () => {
+                    if (this.shouldHalt && this.deg === 0) {
+                        this.shouldHalt();
+                    }
+                    else {
+                        animations.loop();
+                    }
+                },
+                [SpinStep.halt]: () => {
+                    if (this.deg === 360 - linkSpeed) {
+                        animations.halt();
+                    }
+                    else {
+                        animations.loop();
+                    }
+                }
+            };
+            stepSwitcher[this.step]();
+        };
+        this.setDeg = (deg, speed) => {
+            this.deg = deg;
+            this.tick(deg, speed);
+        };
+        this.animateF = (duration, startAngle, target, easing, _easingGrad) => {
+            let start = null;
+            const step = () => {
+                let timestamp = new Date().getTime();
+                if (!start) {
+                    start = timestamp;
+                }
+                const progress = timestamp - start;
+                const translation = target * easing(progress / duration) + startAngle;
+                const speedCur = Math.abs(_easingGrad(progress / duration));
+                this.setDeg(translation, speedCur);
+                if (progress < duration) {
+                    setTimeout(() => step(), 30);
+                }
+                else {
+                    this.cb();
+                }
+            };
+            step();
+        };
+        this.animate = (duration, startAngle, target, easing, _easingGrad) => {
+            let animationId = null;
+            window.cancelAnimationFrame(animationId);
+            let start = null;
+            const step = (timestamp) => {
+                if (!start) {
+                    start = timestamp;
+                }
+                const progress = timestamp - start;
+                const translation = target * easing(progress / duration) + startAngle;
+                const speedCur = Math.abs(_easingGrad(progress / duration));
+                this.setDeg(translation, speedCur);
+                if (progress < duration) {
+                    animationId = window.requestAnimationFrame(step);
+                }
+                else {
+                    this.cb();
+                }
+            };
+            animationId = window.requestAnimationFrame(step);
+        };
+        this.tick = inits.tick;
+    }
+    launch() {
+        this.shouldHalt = undefined;
+        this.step = SpinStep.launch;
+        this.ticker();
+    }
+}
+
+const casinoEngagementSuiteLuckywheelCss = ":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}";
+const CasinoEngagementSuiteLuckywheelStyle0 = casinoEngagementSuiteLuckywheelCss;
+
+const CasinoEngagementSuiteLuckywheel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Client custom styling via string
+         */
+        this.clientStyling = '';
+        /**
+         * Client custom styling via url
+         */
+        this.clientStylingUrl = '';
+        /**
+         * Language of the widget
+         */
+        this.language = 'en';
+        /**
+         * User's device type
+         */
+        this.device = 'Mobile';
+        /**
+         * Wheel size
+         */
+        this.size = '440';
+        /**
+         * Content Direction
+         */
+        this.contentdirection = 'anticlockwise';
+        this.limitStylingAppends = false;
+        this.isPartitionsCustomableReady = false;
+        this.isSpinning = false;
+        this.radius = 0.85 * Number(this.size) / 2;
+        this.speed = 0;
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.host.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                setTimeout(() => { this.host.prepend(cssFile); }, 1);
+            })
+                .catch((err) => {
+                console.log('Error ', err);
+            });
+        };
+        this.renderImage = (node, index) => {
+            const image = this.options[index].image;
+            setProps(image, this.settings.getSvgImageProps(index));
+            node.innerHTML = null;
+            node.appendChild(image);
+        };
+        this.updateSpinable = () => {
+            if (!!this.luckywheel.current) {
+                if (Number(this.luckywheel.current.remainingTimes) > 0) {
+                    this.spinable = true;
+                    return;
+                }
+                else {
+                    window.postMessage({ type: 'ShowNoSpinLeftModal' });
+                }
+            }
+            this.spinable = false;
+        };
+        this.eventSpin = () => {
+            this.updateSpinable();
+            if (!this.spinable || this.isSpinning) {
+                return;
+            }
+            this.isSpinning = true;
+            this.spinContainer = this.svg.querySelector('g.PartitionsContainer');
+            this.spinner.launch();
+            window.postMessage({
+                type: 'SpinLuckyWheel',
+                lotteryProgramID: this.luckywheel.program.id,
+            });
+            // todo: this code below simulates the server response, 
+            // delete after implementation with GLС
+            setTimeout(() => {
+                window.postMessage({
+                    type: 'SpinLuckyWheelRes',
+                    data: {
+                        item: { result: { wheelOfFortunePartitionIndex: 1 } },
+                        success: false
+                    }
+                });
+            }, 2500);
+        };
+        this.handleSpinClick = () => {
+            if (isSafari()) {
+                return;
+            }
+            this.eventSpin();
+        };
+    }
+    handleEvent(e) {
+        const _a = e === null || e === void 0 ? void 0 : e.data, { type } = _a, rest = __rest(_a, ["type"]);
+        switch (type) {
+            case 'SpinLuckyWheelRes':
+                this.spinner.halt(this.settings.getDeg(rest.data.item.result.wheelOfFortunePartitionIndex), () => {
+                    this.isSpinning = false;
+                    this.updateSpinable();
+                    const prizeText = this.luckywheel.program.wheelOfFortune.partitions[rest.data.item.result.wheelOfFortunePartitionIndex].prizeText;
+                    window.postMessage({
+                        type: 'ShowLuckywheelRewardModal',
+                        data: {
+                            PrizeMessage: prizeText['en'] || prizeText['*'],
+                            HasError: rest.data.success,
+                        }
+                    });
+                });
+                break;
+        }
+    }
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+    }
+    async componentWillLoad() {
+        this.options = await getOptions(this.luckywheel, Lang.en);
+        this.settings = new SvgCalc({
+            size: this.size,
+            radius: this.radius,
+            options: this.options,
+            themeIndex: 1,
+            contentdirection: this.contentdirection
+        });
+        this.spinner = new Spinner({
+            tick: (deg, speed) => {
+                setProps(this.spinContainer, {
+                    style: [
+                        `transform: rotate(${deg}deg)`,
+                        `height: ${this.size}px`,
+                        `width: ${this.size}px`,
+                    ].join(';'),
+                });
+                this.speed = speed * 0.5;
+            }
+        });
+    }
+    defineGeneralVariables() {
+        return {
+            '--length': `${this.options.length}`,
+            '--radius': `${this.radius}`,
+            '--ratio': `${Number(this.size) / 480}`,
+            '--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: '8d964d9a81690d2a22240cb1355abb3c7cf6f665', class: `WheelContainer ${this.device}`, style: this.defineGeneralVariables() }, h("svg", { key: '92f44f4659874e1fedaffa32813c57d1c9c04440', width: this.size, height: this.size, ref: (el) => { this.svg = el; } }, h("foreignObject", Object.assign({ key: 'f042214f1516c688035f650a92ff1437c5d06a36' }, sizeProps, { class: "Bottom Customable" }), h("div", { key: '6c80c40dfdb80159d75af8f70a75604257039c53', style: foreignObjectAgentProps })), h("g", Object.assign({ key: '46c01589f440c19727c8364d5e1bdb3a90082cac', class: "PartitionsContainer" }, this.settings.getSpinnerProps()), h("g", { key: 'fd0e9a65b7ba25db742ff12bb26e389b8d72e4c7', 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: '8c116aa611b92b87b98f23aa344025953a27e90d', 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: '8907e6529e660e6452328aaa684995719b528ec6', 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: '62cf4e41e77374dd8f8c1af0833a4143e5d45403', 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: '6b0538da5d4f52e4b543205fb64dedda084f81b2', 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: '907db579094a7a192999510ade3150fdadbb94b6', class: "Middle Customable" }, sizeProps), h("div", { key: 'fa66cb96da2f285015fb8afeea5db05313ed832c', style: foreignObjectAgentProps })), h("foreignObject", Object.assign({ key: '688c0d33ad480ea331847286335a88fd74dbbb26', class: "Top Customable" }, sizeProps), h("div", { key: '292f6ea3549322a605fc8c3c61a93addcba00890', style: foreignObjectAgentProps })), h("g", { key: '22368be98007a7fa820cee96c666c363f85cd32a', class: { 'spinning': this.isSpinning, 'Center': true }, onClick: this.handleSpinClick }, h("foreignObject", { key: 'efffd7edb9ed21d5bd93896a4bead8931d91ff1f', x: Number(this.size) / 2 - 100 / 2, y: Number(this.size) / 2 - 100 / 2, width: 100, height: 100 })), h("g", { key: '7d8b741cc21d6d07f5736336f147cef2bfdf90ca' }, this.options.map((_el, index) => {
+            return (h("clipPath", { id: `clip${index}` }, h("path", Object.assign({}, this.settings.getPartitionDraw(index)))));
+        })))));
+    }
+    get host() { return getElement(this); }
+};
+CasinoEngagementSuiteLuckywheel.style = CasinoEngagementSuiteLuckywheelStyle0;
+
+export { CasinoEngagementSuiteLuckywheel as C };