@everymatrix/casino-jackpot-winner 1.0.69

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-043b8326.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["casino-jackpot-winner.cjs",[[1,"casino-jackpot-winner",{"endpoint":[1],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"currency":[1],"locale":[32],"users":[32],"isLoading":[32]},null,{"endpoint":["watchForUpdateUsers"],"language":["watchForUpdateUsers"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/casino-jackpot-winner/casino-jackpot-winner.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.20.0",
+    "typescriptVersion": "5.5.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/casino-jackpot-winner/casino-jackpot-winner.css

@@ -0,0 +1,417 @@
+.User {
+  color: #FFFFFF;
+  text-align: center;
+}
+.User .RankImageWrapper {
+  position: absolute;
+  z-index: 2;
+}
+.User .RankImageWrapper {
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 120px;
+}
+
+.Amount {
+  width: 100%;
+  border: none;
+  outline: none;
+  position: relative;
+  white-space: nowrap;
+  z-index: 1;
+  color: #FFFFFF;
+  background: linear-gradient(0deg, #FFBB33, #FFE74D);
+}
+.Amount::before {
+  content: "";
+  position: absolute;
+  background: linear-gradient(0deg, #000 0%, #4D4D4D 100%);
+  z-index: -1;
+}
+.Amount::after {
+  content: attr(data);
+  background: linear-gradient(0deg, #FFBB33, #FFE74D);
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.Loader {
+  display: flex;
+  justify-content: center;
+}
+
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: rgb(99, 99, 99);
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+:host {
+  display: block;
+}
+
+.RootContainer {
+  background-color: #2D2D2D;
+  container-type: inline-size;
+  container-name: rootContainer;
+}
+
+.RootContainer .Logo {
+  flex: 1;
+  width: 100%;
+  height: 150px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.RootContainer .CoreContainer {
+  padding: 20px 30px 30px;
+}
+.RootContainer .Row {
+  display: flex;
+  justify-content: space-evenly;
+  gap: 20px;
+  margin-bottom: 10px;
+  align-items: center;
+}
+.RootContainer .Amount::before {
+  left: 2px;
+  right: 2px;
+  top: 2px;
+  bottom: 2px;
+}
+.RootContainer .Amount::after {
+  font-size: 16px;
+}
+.RootContainer .UserFirst {
+  flex: 2;
+  padding-left: 50px;
+}
+.RootContainer .UserFirst .Amount {
+  font-size: 32px;
+  padding: 15px 0;
+}
+.RootContainer .UserFirst .Amount, .RootContainer .UserFirst .Amount:before {
+  border-radius: 32px;
+}
+.RootContainer .UserFirst .RankImageWrapper {
+  height: 86.36px;
+  margin-top: -10px;
+  transform: translateX(-30px);
+}
+.RootContainer .UserOther {
+  flex: 1;
+  padding-left: 30px;
+}
+.RootContainer .UserOther .Amount {
+  font-size: 20px;
+  padding: 8px 0;
+}
+.RootContainer .UserOther .Amount, .RootContainer .UserOther .Amount:before {
+  border-radius: 32px;
+}
+.RootContainer .UserOther .RankImageWrapper {
+  height: 46.63px;
+  margin-top: -5px;
+  transform: translateX(-30px);
+}
+
+@container rootContainer (max-width: 720px) {
+  .RootContainer .Logo {
+    flex: 1;
+    width: 100%;
+    height: 120px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .RootContainer .CoreContainer {
+    padding: 16px 24px 24px;
+  }
+  .RootContainer .Row {
+    display: flex;
+    justify-content: space-evenly;
+    gap: 16px;
+    margin-bottom: 8px;
+    align-items: center;
+  }
+  .RootContainer .Amount::before {
+    left: 1.6px;
+    right: 1.6px;
+    top: 1.6px;
+    bottom: 1.6px;
+  }
+  .RootContainer .Amount::after {
+    font-size: 16px;
+  }
+  .RootContainer .UserFirst {
+    flex: 2;
+    padding-left: 40px;
+  }
+  .RootContainer .UserFirst .Amount {
+    font-size: 25.6px;
+    padding: 12px 0;
+  }
+  .RootContainer .UserFirst .Amount, .RootContainer .UserFirst .Amount:before {
+    border-radius: 25.6px;
+  }
+  .RootContainer .UserFirst .RankImageWrapper {
+    height: 69.088px;
+    margin-top: -8px;
+    transform: translateX(-24px);
+  }
+  .RootContainer .UserOther {
+    flex: 1;
+    padding-left: 24px;
+  }
+  .RootContainer .UserOther .Amount {
+    font-size: 16px;
+    padding: 6.4px 0;
+  }
+  .RootContainer .UserOther .Amount, .RootContainer .UserOther .Amount:before {
+    border-radius: 25.6px;
+  }
+  .RootContainer .UserOther .RankImageWrapper {
+    height: 37.304px;
+    margin-top: -4px;
+    transform: translateX(-24px);
+  }
+}
+@container rootContainer (max-width: 630px) {
+  .RootContainer .Logo {
+    flex: 1;
+    width: 100%;
+    height: 105px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .RootContainer .CoreContainer {
+    padding: 14px 21px 21px;
+  }
+  .RootContainer .Row {
+    display: flex;
+    justify-content: space-evenly;
+    gap: 14px;
+    margin-bottom: 7px;
+    align-items: center;
+  }
+  .RootContainer .Amount::before {
+    left: 1.4px;
+    right: 1.4px;
+    top: 1.4px;
+    bottom: 1.4px;
+  }
+  .RootContainer .Amount::after {
+    font-size: 16px;
+  }
+  .RootContainer .UserFirst {
+    flex: 2;
+    padding-left: 35px;
+  }
+  .RootContainer .UserFirst .Amount {
+    font-size: 22.4px;
+    padding: 10.5px 0;
+  }
+  .RootContainer .UserFirst .Amount, .RootContainer .UserFirst .Amount:before {
+    border-radius: 22.4px;
+  }
+  .RootContainer .UserFirst .RankImageWrapper {
+    height: 60.452px;
+    margin-top: -7px;
+    transform: translateX(-21px);
+  }
+  .RootContainer .UserOther {
+    flex: 1;
+    padding-left: 21px;
+  }
+  .RootContainer .UserOther .Amount {
+    font-size: 14px;
+    padding: 5.6px 0;
+  }
+  .RootContainer .UserOther .Amount, .RootContainer .UserOther .Amount:before {
+    border-radius: 22.4px;
+  }
+  .RootContainer .UserOther .RankImageWrapper {
+    height: 32.641px;
+    margin-top: -3.5px;
+    transform: translateX(-21px);
+  }
+}
+@container rootContainer (max-width: 540px) {
+  .RootContainer .Logo {
+    flex: 1;
+    width: 100%;
+    height: 90px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .RootContainer .CoreContainer {
+    padding: 12px 18px 18px;
+  }
+  .RootContainer .Row {
+    display: flex;
+    justify-content: space-evenly;
+    gap: 12px;
+    margin-bottom: 6px;
+    align-items: center;
+  }
+  .RootContainer .Amount::before {
+    left: 1.2px;
+    right: 1.2px;
+    top: 1.2px;
+    bottom: 1.2px;
+  }
+  .RootContainer .Amount::after {
+    font-size: 16px;
+  }
+  .RootContainer .UserFirst {
+    flex: 2;
+    padding-left: 30px;
+  }
+  .RootContainer .UserFirst .Amount {
+    font-size: 19.2px;
+    padding: 9px 0;
+  }
+  .RootContainer .UserFirst .Amount, .RootContainer .UserFirst .Amount:before {
+    border-radius: 19.2px;
+  }
+  .RootContainer .UserFirst .RankImageWrapper {
+    height: 51.816px;
+    margin-top: -6px;
+    transform: translateX(-18px);
+  }
+  .RootContainer .UserOther {
+    flex: 1;
+    padding-left: 18px;
+  }
+  .RootContainer .UserOther .Amount {
+    font-size: 12px;
+    padding: 4.8px 0;
+  }
+  .RootContainer .UserOther .Amount, .RootContainer .UserOther .Amount:before {
+    border-radius: 19.2px;
+  }
+  .RootContainer .UserOther .RankImageWrapper {
+    height: 27.978px;
+    margin-top: -3px;
+    transform: translateX(-18px);
+  }
+}
+@container rootContainer (max-width: 450px) {
+  .RootContainer .Logo {
+    flex: 1;
+    width: 100%;
+    height: 75px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .RootContainer .CoreContainer {
+    padding: 10px 15px 15px;
+  }
+  .RootContainer .Row {
+    display: flex;
+    justify-content: space-evenly;
+    gap: 10px;
+    margin-bottom: 5px;
+    align-items: center;
+  }
+  .RootContainer .Amount::before {
+    left: 1px;
+    right: 1px;
+    top: 1px;
+    bottom: 1px;
+  }
+  .RootContainer .Amount::after {
+    font-size: 16px;
+  }
+  .RootContainer .UserFirst {
+    flex: 2;
+    padding-left: 25px;
+  }
+  .RootContainer .UserFirst .Amount {
+    font-size: 16px;
+    padding: 7.5px 0;
+  }
+  .RootContainer .UserFirst .Amount, .RootContainer .UserFirst .Amount:before {
+    border-radius: 16px;
+  }
+  .RootContainer .UserFirst .RankImageWrapper {
+    height: 43.18px;
+    margin-top: -5px;
+    transform: translateX(-15px);
+  }
+  .RootContainer .UserOther {
+    flex: 1;
+    padding-left: 15px;
+  }
+  .RootContainer .UserOther .Amount {
+    font-size: 10px;
+    padding: 4px 0;
+  }
+  .RootContainer .UserOther .Amount, .RootContainer .UserOther .Amount:before {
+    border-radius: 16px;
+  }
+  .RootContainer .UserOther .RankImageWrapper {
+    height: 23.315px;
+    margin-top: -2.5px;
+    transform: translateX(-15px);
+  }
+}

package/dist/collection/components/casino-jackpot-winner/casino-jackpot-winner.js

@@ -0,0 +1,190 @@
+import { h } from "@stencil/core";
+import { RenderJackpotWinner } from "../../renders";
+import { getWinners } from "../../utils/business";
+import { setDefaultStyle } from "../../renders/images";
+export class CasinoJackpotWinner {
+    constructor() {
+        this.isComponentLoaded = false;
+        this.endpoint = undefined;
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.currency = 'EUR';
+        this.locale = undefined;
+        this.users = [];
+        this.isLoading = true;
+    }
+    render() {
+        const { isLoading, users, currency, locale } = this;
+        return (h(RenderJackpotWinner, { key: '9e70f595e00e43837f307403b93e08c36a9e8071', isLoading, users, currency, locale }));
+    }
+    async updateUsers() {
+        if (!this.endpoint)
+            return;
+        this.isLoading = true;
+        this.users = await getWinners(this.endpoint, this.language, this.currency);
+        this.isLoading = false;
+    }
+    watchForUpdateUsers() {
+        if (!this.isComponentLoaded)
+            return;
+        this.updateUsers();
+    }
+    /**
+     * define for @Style Decorator
+     */
+    componentDidLoad() {
+        setDefaultStyle(this.host.shadowRoot);
+        this.isComponentLoaded = true;
+        this.updateUsers();
+    }
+    /**
+     * define for @Locale and @Style
+     */
+    componentShouldUpdate() { }
+    /**
+     * define for @Locale
+     */
+    componentWillLoad() { }
+    static get is() { return "casino-jackpot-winner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-jackpot-winner.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-jackpot-winner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint URL for the source of data"
+                },
+                "attribute": "endpoint",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the widget"
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "translation via url"
+                },
+                "attribute": "translation-url",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "currency": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currency of the widget"
+                },
+                "attribute": "currency",
+                "reflect": false,
+                "defaultValue": "'EUR'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "locale": {},
+            "users": {},
+            "isLoading": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "endpoint",
+                "methodName": "watchForUpdateUsers"
+            }, {
+                "propName": "language",
+                "methodName": "watchForUpdateUsers"
+            }];
+    }
+}

package/dist/collection/components/casino-jackpot-winner/index.js

@@ -0,0 +1 @@
+export { CasinoJackpotWinner } from './casino-jackpot-winner';

package/dist/collection/decorators/base.decorator.js

@@ -0,0 +1,12 @@
+export const apply = (proto, lifecycle, run) => {
+    const existLifeCycle = proto[lifecycle];
+    if (!existLifeCycle) {
+        throw new Error('lifecycle ' + lifecycle + ' not defined');
+    }
+    proto[lifecycle] = function (...args) {
+        run.bind(this, ...args).call();
+        if (existLifeCycle) {
+            return existLifeCycle.bind(this, ...args).call();
+        }
+    };
+};

package/dist/collection/decorators/locale.decorator.js

@@ -0,0 +1,40 @@
+import { apply } from "./base.decorator";
+import { translation } from "../utils/translation";
+import { fetcher } from "../utils/fetch";
+const getLocale = (_translations, language) => {
+    return _translations[language] || _translations['en'];
+};
+function setLocale() {
+    this.locale = getLocale(this.translation, this.language);
+}
+async function setLocaleByUrl(isInit = true) {
+    if (this.translationUrl) {
+        this.translation = await fetcher(this.translationUrl);
+        setLocale.bind(this).call();
+    }
+    else {
+        if (!isInit) {
+            this.translation = translation;
+            setLocale.bind(this).call();
+        }
+    }
+}
+export const Locale = () => {
+    // @ts-ignore
+    return (proto, prop) => {
+        apply(proto, 'componentWillLoad', async function () {
+            this.translation = translation;
+            setLocale.bind(this).call();
+            setLocaleByUrl.bind(this, true).call();
+        });
+        // @ts-ignore
+        apply(proto, 'componentShouldUpdate', async function (newValue, oldValue, key) {
+            if (key === 'language') {
+                setLocale.bind(this).call();
+            }
+            if (key === 'translationUrl') {
+                setLocaleByUrl.bind(this, false).call();
+            }
+        });
+    };
+};