@everymatrix/casino-jackpot-winner 1.32.4 → 1.33.1

package/dist/cjs/index.cjs.js

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

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a0c6f675.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  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]}]]]], options);
+  });
+};
+
+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": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "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: #636363;
+  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,208 @@
+import { __decorate, __metadata } from "tslib";
+import { Component, Prop, State, Watch, h, Element } from '@stencil/core';
+import { Style } from '../../decorators/style.decorator';
+import { Locale } from '../../decorators/locale.decorator';
+import { RenderJackpotWinner } from '../../renders';
+import { getWinners } from '../../utils/business';
+import { setDefaultStyle } from '../../renders/images';
+export class CasinoJackpotWinner {
+  constructor() {
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+    * Client custom styling via string
+    */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * translation via url
+     */
+    this.translationUrl = '';
+    /**
+     * Currency of the widget
+     */
+    this.currency = 'EUR';
+    this.users = [];
+    this.isLoading = true;
+    this.isComponentLoaded = false;
+  }
+  render() {
+    const { isLoading, users, currency, locale } = this;
+    return (h(RenderJackpotWinner, Object.assign({}, { 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"
+    }]; }
+}
+__decorate([
+  Locale(),
+  __metadata("design:type", String)
+], CasinoJackpotWinner.prototype, "language", void 0);
+__decorate([
+  Style(),
+  __metadata("design:type", String)
+], CasinoJackpotWinner.prototype, "clientStyling", void 0);
+__decorate([
+  Style(),
+  __metadata("design:type", String)
+], CasinoJackpotWinner.prototype, "clientStylingUrl", void 0);

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();
+      }
+    });
+  };
+};