@everymatrix/casino-engagement-suite-modal 1.36.0 → 1.36.1

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

@@ -1 +1 @@
-import{p as n,b as e}from"./p-d68e9c79.js";(()=>{const e=import.meta.url,t={};return""!==e&&(t.resourcesUrl=new URL(".",e).href),n(t)})().then((n=>e([["p-888fb26b",[[1,"casino-engagement-suite-modal",{clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],isOpen:[4,"is-open"],header:[1],icon:[1],contentIcon:[1,"content-icon"],modalType:[1,"modal-type"],device:[1],limitStylingAppends:[32]}]]]],n)));
+import{p as n,b as i}from"./p-d68e9c79.js";(()=>{const i=import.meta.url,e={};return""!==i&&(e.resourcesUrl=new URL(".",i).href),n(e)})().then((n=>i([["p-0a5349e9",[[1,"casino-engagement-suite-modal",{clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],isOpen:[4,"is-open"],isLoading:[1028,"is-loading"],header:[1],contentIcon:[1,"content-icon"],modalType:[1,"modal-type"],device:[1],showAnimation:[4,"show-animation"],limitStylingAppends:[32]}]]]],n)));

package/dist/casino-engagement-suite-modal/p-0a5349e9.entry.js

@@ -0,0 +1 @@
+import{r as t,c as o,h as e,g as i}from"./p-d68e9c79.js";const n=class{constructor(e){t(this,e),this.closeModal=o(this,"closeModal",7),this.clientStyling="",this.clientStylingUrl="",this.device="Mobile",this.showAnimation=!1,this.limitStylingAppends=!1,this.handleCloseClick=()=>{this.isLoading||this.closeModal.emit(this.modalType)},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.host.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),o=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{o.innerHTML=t,setTimeout((()=>{this.host.prepend(o)}),1)})).catch((t=>{console.log("Error ",t)}))}}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){return e("div",{class:`ModalOverlay ${this.isOpen&&"Open"} ${this.device} ${this.showAnimation&&"ShowAnimation"}`},e("div",{class:"ModalWinAnimation"}),e("div",{class:"ModalContent GradientBorder"},e("div",{class:"IconCloseContainer"},e("button",{class:"IconCloseButton",onClick:this.handleCloseClick},e("img",{src:"https://static.everymatrix.com/gic/img/engagement-suite/close.svg",alt:"Сlose modal"}))),this.contentIcon?e("div",{class:"ModalIcon",style:{background:`url(${this.contentIcon}) no-repeat center, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%)`}}):null,e("div",{class:"ModalHeader"},e("h1",null,this.header)),e("div",{class:"ModalBody"},e("slot",{name:"body"})),e("div",{class:"ModalFooter"},e("slot",{name:"footer"}))))}get host(){return i(this)}};n.style=':host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ModalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center}.ModalOverlay.Open{display:flex}.IconCloseContainer{width:100%;display:flex;justify-content:end}.ModalContent{display:flex;flex-direction:column;align-items:center;font-family:"Montserrat", sans-serif;position:relative;color:var(--emw--color-typography, #FFFFFF);background-color:var(--emw--color-background, #1E1638);padding:12px;border-radius:8px;width:450px;max-width:100%;text-align:center}.GradientBorder::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:9px;background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #FF9401 82.77%);z-index:-1}.ModalHeader h1{font-weight:var(--emw--font-weight-semibold, 600);font-size:20px;margin-top:12px;padding:0 16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;margin-top:12px}.ModalBody{margin-top:20px;font-size:16px;font-family:"Inter", sans-serif;font-weight:var(--emw--font-weight-normal, 400);color:var(--emw--color-gray-100, #BBB9C3);padding:0 16px}.ModalFooter{margin-top:40px;margin-bottom:28px;padding:0 16px;width:100%}@keyframes rotate{100%{transform:rotate(1turn)}}.ModalOverlay .ModalWinAnimation{display:none}.ModalOverlay.ShowAnimation .ModalWinAnimation{display:block;position:absolute;width:100%;height:100%;inset:0;background:center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/light.svg) no-repeat, center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/win.svg) no-repeat;animation:6s rotate linear infinite}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px}.ModalOverlay.Mobile.ShowAnimation .ModalWinAnimation{background-size:400px}';export{n as casino_engagement_suite_modal}

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

@@ -4,12 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f0b55429.js');
 
-const MODAL_TYPES = {
-  REWARD_MODAL: 'REWARD_MODAL',
-  TARGET_MODAL: 'TARGET_MODAL'
-};
-
-const casinoEngagementSuiteModalCss = ":host{display:block}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ModalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center}.ModalOverlay.Open{display:flex}.IconCloseContainer{width:100%;display:flex;justify-content:end}.ModalContent{display:flex;flex-direction:column;align-items:center;font-family:\"Montserrat\", sans-serif;position:relative;color:var(--emw--color-typography, #FFFFFF);background-color:var(--emw--color-background, #1E1638);padding:12px;border-radius:8px;width:450px;max-width:100%;text-align:center}.GradientBorder::before{content:\"\";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:9px;background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #FF9401 82.77%);z-index:-1}.ModalHeader{font-weight:var(--emw--font-weight-semibold, 600);font-size:20px;margin-top:12px;padding:0 16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;background-position:center;background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/leaderboard.svg\");margin-top:12px}.ModalBody{margin-top:20px;font-size:16px;font-family:\"Inter\", sans-serif;font-weight:var(--emw--font-weight-normal, 400);color:var(--emw--color-gray-100, #BBB9C3);padding:0 16px}.ModalFooter{margin-top:40px;margin-bottom:28px;padding:0 16px;width:100%}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px}";
+const casinoEngagementSuiteModalCss = ":host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ModalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center}.ModalOverlay.Open{display:flex}.IconCloseContainer{width:100%;display:flex;justify-content:end}.ModalContent{display:flex;flex-direction:column;align-items:center;font-family:\"Montserrat\", sans-serif;position:relative;color:var(--emw--color-typography, #FFFFFF);background-color:var(--emw--color-background, #1E1638);padding:12px;border-radius:8px;width:450px;max-width:100%;text-align:center}.GradientBorder::before{content:\"\";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:9px;background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #FF9401 82.77%);z-index:-1}.ModalHeader h1{font-weight:var(--emw--font-weight-semibold, 600);font-size:20px;margin-top:12px;padding:0 16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;margin-top:12px}.ModalBody{margin-top:20px;font-size:16px;font-family:\"Inter\", sans-serif;font-weight:var(--emw--font-weight-normal, 400);color:var(--emw--color-gray-100, #BBB9C3);padding:0 16px}.ModalFooter{margin-top:40px;margin-bottom:28px;padding:0 16px;width:100%}@keyframes rotate{100%{transform:rotate(1turn)}}.ModalOverlay .ModalWinAnimation{display:none}.ModalOverlay.ShowAnimation .ModalWinAnimation{display:block;position:absolute;width:100%;height:100%;inset:0;background:center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/light.svg) no-repeat, center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/win.svg) no-repeat;animation:6s rotate linear infinite}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px}.ModalOverlay.Mobile.ShowAnimation .ModalWinAnimation{background-size:400px}";
 
 const CasinoEngagementSuiteModal = class {
   constructor(hostRef) {
@@ -24,8 +19,14 @@ const CasinoEngagementSuiteModal = class {
     */
     this.clientStylingUrl = '';
     this.device = 'Mobile';
+    /**
+     * Show win animation
+     */
+    this.showAnimation = false;
     this.limitStylingAppends = false;
     this.handleCloseClick = () => {
+      if (this.isLoading)
+        return;
       this.closeModal.emit(this.modalType);
     };
     this.setClientStyling = () => {
@@ -57,9 +58,9 @@ const CasinoEngagementSuiteModal = class {
     }
   }
   render() {
-    return (index.h("div", { class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device}` }, index.h("div", { class: "ModalContent GradientBorder" }, index.h("div", { class: 'IconCloseContainer' }, index.h("button", { class: "IconCloseButton", onClick: this.handleCloseClick }, index.h("img", { src: this.icon, alt: "\u0421lose modal" }))), this.contentIcon ? (index.h("div", { class: "ModalIcon", style: {
+    return (index.h("div", { class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device} ${this.showAnimation && 'ShowAnimation'}` }, index.h("div", { class: "ModalWinAnimation" }), index.h("div", { class: "ModalContent GradientBorder" }, index.h("div", { class: 'IconCloseContainer' }, index.h("button", { class: "IconCloseButton", onClick: this.handleCloseClick }, index.h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "\u0421lose modal" }))), this.contentIcon ? (index.h("div", { class: "ModalIcon", style: {
         background: `url(${this.contentIcon}) no-repeat center, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%)`
-      } })) : this.modalType === MODAL_TYPES.REWARD_MODAL ? (index.h("div", { class: "ModalIcon" })) : null, index.h("div", { class: "ModalHeader" }, index.h("h1", null, this.header)), index.h("div", { class: "ModalBody" }, index.h("slot", { name: "body" })), index.h("div", { class: "ModalFooter" }, index.h("slot", { name: "footer" })))));
+      } })) : null, index.h("div", { class: "ModalHeader" }, index.h("h1", null, this.header)), index.h("div", { class: "ModalBody" }, index.h("slot", { name: "body" })), index.h("div", { class: "ModalFooter" }, index.h("slot", { name: "footer" })))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/casino-engagement-suite-modal.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["casino-engagement-suite-modal.cjs",[[1,"casino-engagement-suite-modal",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[4,"is-open"],"header":[1],"icon":[1],"contentIcon":[1,"content-icon"],"modalType":[1,"modal-type"],"device":[1],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["casino-engagement-suite-modal.cjs",[[1,"casino-engagement-suite-modal",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[4,"is-open"],"isLoading":[1028,"is-loading"],"header":[1],"contentIcon":[1,"content-icon"],"modalType":[1,"modal-type"],"device":[1],"showAnimation":[4,"show-animation"],"limitStylingAppends":[32]}]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["casino-engagement-suite-modal.cjs",[[1,"casino-engagement-suite-modal",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[4,"is-open"],"header":[1],"icon":[1],"contentIcon":[1,"content-icon"],"modalType":[1,"modal-type"],"device":[1],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["casino-engagement-suite-modal.cjs",[[1,"casino-engagement-suite-modal",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[4,"is-open"],"isLoading":[1028,"is-loading"],"header":[1],"contentIcon":[1,"content-icon"],"modalType":[1,"modal-type"],"device":[1],"showAnimation":[4,"show-animation"],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

package/dist/collection/components/casino-engagement-suite-modal/casino-engagement-suite-modal.css

@@ -1,5 +1,6 @@
 :host {
   display: block;
+  font-family: inherit;
 }
 
 * {
@@ -66,7 +67,7 @@ button:focus {
   z-index: -1;
 }
 
-.ModalHeader {
+.ModalHeader h1 {
   font-weight: var(--emw--font-weight-semibold, 600);
   font-size: 20px;
   margin-top: 12px;
@@ -78,8 +79,6 @@ button:focus {
   height: 44px;
   border-radius: 50%;
   background-size: cover;
-  background-position: center;
-  background-image: url("https://static.everymatrix.com/gic/img/engagement-suite/bar/leaderboard.svg");
   margin-top: 12px;
 }
 
@@ -99,15 +98,34 @@ button:focus {
   width: 100%;
 }
 
-.ModalOverlay.Mobile .ModalBody,
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+.ModalOverlay .ModalWinAnimation {
+  display: none;
+}
+
+.ModalOverlay.ShowAnimation .ModalWinAnimation {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  background: center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/light.svg) no-repeat, center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/win.svg) no-repeat;
+  animation: 6s rotate linear infinite;
+}
+
 .ModalOverlay.Mobile .ModalBody {
   font-size: 14px;
 }
-.ModalOverlay.Mobile .ModalContent,
 .ModalOverlay.Mobile .ModalContent {
   width: 318px;
 }
-.ModalOverlay.Mobile .ModalHeader h1,
 .ModalOverlay.Mobile .ModalHeader h1 {
   font-size: 20px;
+}
+.ModalOverlay.Mobile.ShowAnimation .ModalWinAnimation {
+  background-size: 400px;
 }

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

@@ -1,5 +1,4 @@
 import { Component, Prop, h, Event, State, Element } from '@stencil/core';
-import { MODAL_TYPES } from '../../utils/constants';
 export class CasinoEngagementSuiteModal {
   constructor() {
     /**
@@ -11,8 +10,14 @@ export class CasinoEngagementSuiteModal {
     */
     this.clientStylingUrl = '';
     this.device = 'Mobile';
+    /**
+     * Show win animation
+     */
+    this.showAnimation = false;
     this.limitStylingAppends = false;
     this.handleCloseClick = () => {
+      if (this.isLoading)
+        return;
       this.closeModal.emit(this.modalType);
     };
     this.setClientStyling = () => {
@@ -44,14 +49,15 @@ export class CasinoEngagementSuiteModal {
     }
   }
   render() {
-    return (h("div", { class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device}` },
+    return (h("div", { class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device} ${this.showAnimation && 'ShowAnimation'}` },
+      h("div", { class: "ModalWinAnimation" }),
       h("div", { class: "ModalContent GradientBorder" },
         h("div", { class: 'IconCloseContainer' },
           h("button", { class: "IconCloseButton", onClick: this.handleCloseClick },
-            h("img", { src: this.icon, alt: "\u0421lose modal" }))),
+            h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "\u0421lose modal" }))),
         this.contentIcon ? (h("div", { class: "ModalIcon", style: {
             background: `url(${this.contentIcon}) no-repeat center, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%)`
-          } })) : this.modalType === MODAL_TYPES.REWARD_MODAL ? (h("div", { class: "ModalIcon" })) : null,
+          } })) : null,
         h("div", { class: "ModalHeader" },
           h("h1", null, this.header)),
         h("div", { class: "ModalBody" },
@@ -121,12 +127,12 @@ export class CasinoEngagementSuiteModal {
       "attribute": "is-open",
       "reflect": false
     },
-    "header": {
-      "type": "string",
-      "mutable": false,
+    "isLoading": {
+      "type": "boolean",
+      "mutable": true,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
@@ -135,10 +141,10 @@ export class CasinoEngagementSuiteModal {
         "tags": [],
         "text": ""
       },
-      "attribute": "header",
+      "attribute": "is-loading",
       "reflect": false
     },
-    "icon": {
+    "header": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -152,7 +158,7 @@ export class CasinoEngagementSuiteModal {
         "tags": [],
         "text": ""
       },
-      "attribute": "icon",
+      "attribute": "header",
       "reflect": false
     },
     "contentIcon": {
@@ -206,6 +212,24 @@ export class CasinoEngagementSuiteModal {
       "attribute": "device",
       "reflect": false,
       "defaultValue": "'Mobile' as 'Mobile' | 'Tablet' | 'Desktop'"
+    },
+    "showAnimation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show win animation"
+      },
+      "attribute": "show-animation",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

package/dist/components/casino-engagement-suite-modal.js

@@ -1,11 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const MODAL_TYPES = {
-  REWARD_MODAL: 'REWARD_MODAL',
-  TARGET_MODAL: 'TARGET_MODAL'
-};
-
-const casinoEngagementSuiteModalCss = ":host{display:block}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ModalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center}.ModalOverlay.Open{display:flex}.IconCloseContainer{width:100%;display:flex;justify-content:end}.ModalContent{display:flex;flex-direction:column;align-items:center;font-family:\"Montserrat\", sans-serif;position:relative;color:var(--emw--color-typography, #FFFFFF);background-color:var(--emw--color-background, #1E1638);padding:12px;border-radius:8px;width:450px;max-width:100%;text-align:center}.GradientBorder::before{content:\"\";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:9px;background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #FF9401 82.77%);z-index:-1}.ModalHeader{font-weight:var(--emw--font-weight-semibold, 600);font-size:20px;margin-top:12px;padding:0 16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;background-position:center;background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/leaderboard.svg\");margin-top:12px}.ModalBody{margin-top:20px;font-size:16px;font-family:\"Inter\", sans-serif;font-weight:var(--emw--font-weight-normal, 400);color:var(--emw--color-gray-100, #BBB9C3);padding:0 16px}.ModalFooter{margin-top:40px;margin-bottom:28px;padding:0 16px;width:100%}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px}";
+const casinoEngagementSuiteModalCss = ":host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ModalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center}.ModalOverlay.Open{display:flex}.IconCloseContainer{width:100%;display:flex;justify-content:end}.ModalContent{display:flex;flex-direction:column;align-items:center;font-family:\"Montserrat\", sans-serif;position:relative;color:var(--emw--color-typography, #FFFFFF);background-color:var(--emw--color-background, #1E1638);padding:12px;border-radius:8px;width:450px;max-width:100%;text-align:center}.GradientBorder::before{content:\"\";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:9px;background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #FF9401 82.77%);z-index:-1}.ModalHeader h1{font-weight:var(--emw--font-weight-semibold, 600);font-size:20px;margin-top:12px;padding:0 16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;margin-top:12px}.ModalBody{margin-top:20px;font-size:16px;font-family:\"Inter\", sans-serif;font-weight:var(--emw--font-weight-normal, 400);color:var(--emw--color-gray-100, #BBB9C3);padding:0 16px}.ModalFooter{margin-top:40px;margin-bottom:28px;padding:0 16px;width:100%}@keyframes rotate{100%{transform:rotate(1turn)}}.ModalOverlay .ModalWinAnimation{display:none}.ModalOverlay.ShowAnimation .ModalWinAnimation{display:block;position:absolute;width:100%;height:100%;inset:0;background:center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/light.svg) no-repeat, center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/win.svg) no-repeat;animation:6s rotate linear infinite}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px}.ModalOverlay.Mobile.ShowAnimation .ModalWinAnimation{background-size:400px}";
 
 const CasinoEngagementSuiteModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -22,8 +17,14 @@ const CasinoEngagementSuiteModal$1 = /*@__PURE__*/ proxyCustomElement(class exte
     */
     this.clientStylingUrl = '';
     this.device = 'Mobile';
+    /**
+     * Show win animation
+     */
+    this.showAnimation = false;
     this.limitStylingAppends = false;
     this.handleCloseClick = () => {
+      if (this.isLoading)
+        return;
       this.closeModal.emit(this.modalType);
     };
     this.setClientStyling = () => {
@@ -55,9 +56,9 @@ const CasinoEngagementSuiteModal$1 = /*@__PURE__*/ proxyCustomElement(class exte
     }
   }
   render() {
-    return (h("div", { class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device}` }, h("div", { class: "ModalContent GradientBorder" }, h("div", { class: 'IconCloseContainer' }, h("button", { class: "IconCloseButton", onClick: this.handleCloseClick }, h("img", { src: this.icon, alt: "\u0421lose modal" }))), this.contentIcon ? (h("div", { class: "ModalIcon", style: {
+    return (h("div", { class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device} ${this.showAnimation && 'ShowAnimation'}` }, h("div", { class: "ModalWinAnimation" }), h("div", { class: "ModalContent GradientBorder" }, h("div", { class: 'IconCloseContainer' }, h("button", { class: "IconCloseButton", onClick: this.handleCloseClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "\u0421lose modal" }))), this.contentIcon ? (h("div", { class: "ModalIcon", style: {
         background: `url(${this.contentIcon}) no-repeat center, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%)`
-      } })) : this.modalType === MODAL_TYPES.REWARD_MODAL ? (h("div", { class: "ModalIcon" })) : null, h("div", { class: "ModalHeader" }, h("h1", null, this.header)), h("div", { class: "ModalBody" }, h("slot", { name: "body" })), h("div", { class: "ModalFooter" }, h("slot", { name: "footer" })))));
+      } })) : null, h("div", { class: "ModalHeader" }, h("h1", null, this.header)), h("div", { class: "ModalBody" }, h("slot", { name: "body" })), h("div", { class: "ModalFooter" }, h("slot", { name: "footer" })))));
   }
   get host() { return this; }
   static get style() { return casinoEngagementSuiteModalCss; }
@@ -65,11 +66,12 @@ const CasinoEngagementSuiteModal$1 = /*@__PURE__*/ proxyCustomElement(class exte
     "clientStyling": [513, "client-styling"],
     "clientStylingUrl": [513, "client-styling-url"],
     "isOpen": [4, "is-open"],
+    "isLoading": [1028, "is-loading"],
     "header": [1],
-    "icon": [1],
     "contentIcon": [1, "content-icon"],
     "modalType": [1, "modal-type"],
     "device": [1],
+    "showAnimation": [4, "show-animation"],
     "limitStylingAppends": [32]
   }]);
 function defineCustomElement$1() {

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

@@ -1,11 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-263f8cbc.js';
 
-const MODAL_TYPES = {
-  REWARD_MODAL: 'REWARD_MODAL',
-  TARGET_MODAL: 'TARGET_MODAL'
-};
-
-const casinoEngagementSuiteModalCss = ":host{display:block}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ModalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center}.ModalOverlay.Open{display:flex}.IconCloseContainer{width:100%;display:flex;justify-content:end}.ModalContent{display:flex;flex-direction:column;align-items:center;font-family:\"Montserrat\", sans-serif;position:relative;color:var(--emw--color-typography, #FFFFFF);background-color:var(--emw--color-background, #1E1638);padding:12px;border-radius:8px;width:450px;max-width:100%;text-align:center}.GradientBorder::before{content:\"\";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:9px;background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #FF9401 82.77%);z-index:-1}.ModalHeader{font-weight:var(--emw--font-weight-semibold, 600);font-size:20px;margin-top:12px;padding:0 16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;background-position:center;background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/leaderboard.svg\");margin-top:12px}.ModalBody{margin-top:20px;font-size:16px;font-family:\"Inter\", sans-serif;font-weight:var(--emw--font-weight-normal, 400);color:var(--emw--color-gray-100, #BBB9C3);padding:0 16px}.ModalFooter{margin-top:40px;margin-bottom:28px;padding:0 16px;width:100%}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px}";
+const casinoEngagementSuiteModalCss = ":host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ModalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center}.ModalOverlay.Open{display:flex}.IconCloseContainer{width:100%;display:flex;justify-content:end}.ModalContent{display:flex;flex-direction:column;align-items:center;font-family:\"Montserrat\", sans-serif;position:relative;color:var(--emw--color-typography, #FFFFFF);background-color:var(--emw--color-background, #1E1638);padding:12px;border-radius:8px;width:450px;max-width:100%;text-align:center}.GradientBorder::before{content:\"\";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:9px;background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #FF9401 82.77%);z-index:-1}.ModalHeader h1{font-weight:var(--emw--font-weight-semibold, 600);font-size:20px;margin-top:12px;padding:0 16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;margin-top:12px}.ModalBody{margin-top:20px;font-size:16px;font-family:\"Inter\", sans-serif;font-weight:var(--emw--font-weight-normal, 400);color:var(--emw--color-gray-100, #BBB9C3);padding:0 16px}.ModalFooter{margin-top:40px;margin-bottom:28px;padding:0 16px;width:100%}@keyframes rotate{100%{transform:rotate(1turn)}}.ModalOverlay .ModalWinAnimation{display:none}.ModalOverlay.ShowAnimation .ModalWinAnimation{display:block;position:absolute;width:100%;height:100%;inset:0;background:center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/light.svg) no-repeat, center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/win.svg) no-repeat;animation:6s rotate linear infinite}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px}.ModalOverlay.Mobile.ShowAnimation .ModalWinAnimation{background-size:400px}";
 
 const CasinoEngagementSuiteModal = class {
   constructor(hostRef) {
@@ -20,8 +15,14 @@ const CasinoEngagementSuiteModal = class {
     */
     this.clientStylingUrl = '';
     this.device = 'Mobile';
+    /**
+     * Show win animation
+     */
+    this.showAnimation = false;
     this.limitStylingAppends = false;
     this.handleCloseClick = () => {
+      if (this.isLoading)
+        return;
       this.closeModal.emit(this.modalType);
     };
     this.setClientStyling = () => {
@@ -53,9 +54,9 @@ const CasinoEngagementSuiteModal = class {
     }
   }
   render() {
-    return (h("div", { class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device}` }, h("div", { class: "ModalContent GradientBorder" }, h("div", { class: 'IconCloseContainer' }, h("button", { class: "IconCloseButton", onClick: this.handleCloseClick }, h("img", { src: this.icon, alt: "\u0421lose modal" }))), this.contentIcon ? (h("div", { class: "ModalIcon", style: {
+    return (h("div", { class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device} ${this.showAnimation && 'ShowAnimation'}` }, h("div", { class: "ModalWinAnimation" }), h("div", { class: "ModalContent GradientBorder" }, h("div", { class: 'IconCloseContainer' }, h("button", { class: "IconCloseButton", onClick: this.handleCloseClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "\u0421lose modal" }))), this.contentIcon ? (h("div", { class: "ModalIcon", style: {
         background: `url(${this.contentIcon}) no-repeat center, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%)`
-      } })) : this.modalType === MODAL_TYPES.REWARD_MODAL ? (h("div", { class: "ModalIcon" })) : null, h("div", { class: "ModalHeader" }, h("h1", null, this.header)), h("div", { class: "ModalBody" }, h("slot", { name: "body" })), h("div", { class: "ModalFooter" }, h("slot", { name: "footer" })))));
+      } })) : null, h("div", { class: "ModalHeader" }, h("h1", null, this.header)), h("div", { class: "ModalBody" }, h("slot", { name: "body" })), h("div", { class: "ModalFooter" }, h("slot", { name: "footer" })))));
   }
   get host() { return getElement(this); }
 };

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

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["casino-engagement-suite-modal",[[1,"casino-engagement-suite-modal",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[4,"is-open"],"header":[1],"icon":[1],"contentIcon":[1,"content-icon"],"modalType":[1,"modal-type"],"device":[1],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["casino-engagement-suite-modal",[[1,"casino-engagement-suite-modal",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[4,"is-open"],"isLoading":[1028,"is-loading"],"header":[1],"contentIcon":[1,"content-icon"],"modalType":[1,"modal-type"],"device":[1],"showAnimation":[4,"show-animation"],"limitStylingAppends":[32]}]]]], options);
 });

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["casino-engagement-suite-modal",[[1,"casino-engagement-suite-modal",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[4,"is-open"],"header":[1],"icon":[1],"contentIcon":[1,"content-icon"],"modalType":[1,"modal-type"],"device":[1],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["casino-engagement-suite-modal",[[1,"casino-engagement-suite-modal",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[4,"is-open"],"isLoading":[1028,"is-loading"],"header":[1],"contentIcon":[1,"content-icon"],"modalType":[1,"modal-type"],"device":[1],"showAnimation":[4,"show-animation"],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

package/dist/types/components/casino-engagement-suite-modal/casino-engagement-suite-modal.d.ts

@@ -9,11 +9,15 @@ export declare class CasinoEngagementSuiteModal {
   */
   clientStylingUrl: string;
   isOpen: boolean;
+  isLoading: boolean;
   header: string;
-  icon: string;
   contentIcon: string;
   modalType: string;
   device: "Mobile" | "Tablet" | "Desktop";
+  /**
+   * Show win animation
+   */
+  showAnimation: boolean;
   private limitStylingAppends;
   host: HTMLElement;
   closeModal: EventEmitter<any>;

package/dist/types/components.d.ts

@@ -18,9 +18,13 @@ export namespace Components {
         "contentIcon": string;
         "device": "Mobile" | "Tablet" | "Desktop";
         "header": string;
-        "icon": string;
+        "isLoading": boolean;
         "isOpen": boolean;
         "modalType": string;
+        /**
+          * Show win animation
+         */
+        "showAnimation": boolean;
     }
 }
 declare global {
@@ -47,10 +51,14 @@ declare namespace LocalJSX {
         "contentIcon"?: string;
         "device"?: "Mobile" | "Tablet" | "Desktop";
         "header"?: string;
-        "icon"?: string;
+        "isLoading"?: boolean;
         "isOpen"?: boolean;
         "modalType"?: string;
         "onCloseModal"?: (event: CustomEvent<any>) => void;
+        /**
+          * Show win animation
+         */
+        "showAnimation"?: boolean;
     }
     interface IntrinsicElements {
         "casino-engagement-suite-modal": CasinoEngagementSuiteModal;

package/package.json

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

package/dist/casino-engagement-suite-modal/p-888fb26b.entry.js

@@ -1 +0,0 @@
-import{r as o,c as t,h as e,g as i}from"./p-d68e9c79.js";const n=class{constructor(e){o(this,e),this.closeModal=t(this,"closeModal",7),this.clientStyling="",this.clientStylingUrl="",this.device="Mobile",this.limitStylingAppends=!1,this.handleCloseClick=()=>{this.closeModal.emit(this.modalType)},this.setClientStyling=()=>{let o=document.createElement("style");o.innerHTML=this.clientStyling,this.host.prepend(o)},this.setClientStylingURL=()=>{let o=new URL(this.clientStylingUrl),t=document.createElement("style");fetch(o.href).then((o=>o.text())).then((o=>{t.innerHTML=o,setTimeout((()=>{this.host.prepend(t)}),1)})).catch((o=>{console.log("Error ",o)}))}}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){return e("div",{class:`ModalOverlay ${this.isOpen&&"Open"} ${this.device}`},e("div",{class:"ModalContent GradientBorder"},e("div",{class:"IconCloseContainer"},e("button",{class:"IconCloseButton",onClick:this.handleCloseClick},e("img",{src:this.icon,alt:"Сlose modal"}))),this.contentIcon?e("div",{class:"ModalIcon",style:{background:`url(${this.contentIcon}) no-repeat center, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%)`}}):"REWARD_MODAL"===this.modalType?e("div",{class:"ModalIcon"}):null,e("div",{class:"ModalHeader"},e("h1",null,this.header)),e("div",{class:"ModalBody"},e("slot",{name:"body"})),e("div",{class:"ModalFooter"},e("slot",{name:"footer"}))))}get host(){return i(this)}};n.style=':host{display:block}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ModalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center}.ModalOverlay.Open{display:flex}.IconCloseContainer{width:100%;display:flex;justify-content:end}.ModalContent{display:flex;flex-direction:column;align-items:center;font-family:"Montserrat", sans-serif;position:relative;color:var(--emw--color-typography, #FFFFFF);background-color:var(--emw--color-background, #1E1638);padding:12px;border-radius:8px;width:450px;max-width:100%;text-align:center}.GradientBorder::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:9px;background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #FF9401 82.77%);z-index:-1}.ModalHeader{font-weight:var(--emw--font-weight-semibold, 600);font-size:20px;margin-top:12px;padding:0 16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;background-position:center;background-image:url("https://static.everymatrix.com/gic/img/engagement-suite/bar/leaderboard.svg");margin-top:12px}.ModalBody{margin-top:20px;font-size:16px;font-family:"Inter", sans-serif;font-weight:var(--emw--font-weight-normal, 400);color:var(--emw--color-gray-100, #BBB9C3);padding:0 16px}.ModalFooter{margin-top:40px;margin-bottom:28px;padding:0 16px;width:100%}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px}';export{n as casino_engagement_suite_modal}