@everymatrix/casino-engagement-suite-modal 1.44.0 → 1.45.2

package/dist/cjs/loader.cjs.js

@@ -2,20 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f0b55429.js');
+const index = require('./index-63e7fad0.js');
+const appGlobals = require('./app-globals-3a1e7e63.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(() => {
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
   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);
-  });
 };
 
+exports.setNonce = index.setNonce;
 exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -1,11 +1,11 @@
 {
   "entries": [
-    "./components/casino-engagement-suite-modal/casino-engagement-suite-modal.js"
+    "components/casino-engagement-suite-modal/casino-engagement-suite-modal.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.15.2",
-    "typescriptVersion": "4.5.4"
+    "version": "4.20.0",
+    "typescriptVersion": "5.5.3"
   },
   "collections": [],
   "bundles": []

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

@@ -19,6 +19,14 @@ button:focus {
   outline: none;
 }
 
+.EngagementSuiteIconButton {
+  width: 24px;
+  height: 24px;
+}
+.EngagementSuiteIconButton.Close {
+  background: center/100% url(https://static.everymatrix.com/gic/img/engagement-suite/close.svg) no-repeat;
+}
+
 .ModalOverlay {
   display: none;
   position: fixed;
@@ -29,6 +37,7 @@ button:focus {
   background-color: rgba(0, 0, 0, 0.5);
   justify-content: center;
   align-items: center;
+  z-index: 1;
 }
 
 .ModalOverlay.Open {
@@ -41,11 +50,6 @@ button:focus {
   justify-content: end;
 }
 
-.IconCloseButton img {
-  width: 24px;
-  height: 24px;
-}
-
 .ModalBodyWrapper {
   flex: 1;
   min-height: 0;
@@ -57,20 +61,20 @@ button:focus {
   background: none;
 }
 .ModalBodyWrapper::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: var(--emw--color-background, #666178);
+  border-radius: var(--emw--border-radius-small, 4px);
+  background-color: var(--emw--color-gray-transparency-30, rgba(255, 255, 255, 0.3));
 }
 
 .ModalContent {
   display: flex;
   flex-direction: column;
   align-items: center;
-  font-family: "Montserrat", sans-serif;
+  font-family: var(--emw--font-family-secondary, "Montserrat", sans-serif);
   position: relative;
   color: var(--emw--color-typography, #FFFFFF);
   background-color: var(--emw--color-background, #1E1638);
   padding: 24px;
-  border-radius: 8px;
+  border-radius: var(--emw--border-radius-large, 8px);
   width: 450px;
   max-width: 100%;
   text-align: center;
@@ -84,14 +88,14 @@ button:focus {
   left: -1px;
   right: -1px;
   bottom: -1px;
-  border-radius: 9px;
+  border-radius: var(--emw--border-radius-large, 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: var(--emw--font-size-large, 24px);
+  font-size: var(--emw--font-size-large-plus, 24px);
   padding: 0 16px;
   margin-bottom: 16px;
 }
@@ -105,10 +109,9 @@ button:focus {
 }
 
 .ModalBody {
-  font-size: 16px;
-  font-family: "Inter", sans-serif;
+  font-size: var(--emw--font-size-medium, 16px);
   font-weight: var(--emw--font-weight-normal, 400);
-  color: var(--emw--color-gray-100, #BBB9C3);
+  color: var(--emw--color-secondary, #BBB9C3);
   padding: 0 16px;
 }
 
@@ -138,19 +141,19 @@ button:focus {
   animation: 6s rotate linear infinite;
 }
 
-.ModalOverlay.Mobile .IconCloseButton img {
+.ModalOverlay.Mobile .EngagementSuiteIconButton {
   width: 16px;
   height: 16px;
 }
 .ModalOverlay.Mobile .ModalBody {
-  font-size: 14px;
+  font-size: var(--emw--font-size-small, 14px);
 }
 .ModalOverlay.Mobile .ModalContent {
   width: 318px;
   padding: 12px;
 }
 .ModalOverlay.Mobile .ModalHeader h1 {
-  font-size: 20px;
+  font-size: var(--emw--font-size-large, 20px);
   padding: 0 60px;
 }
 .ModalOverlay.Mobile.ShowAnimation .ModalWinAnimation {

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

@@ -1,256 +1,249 @@
-import { Component, Prop, h, Event, State, Element } from '@stencil/core';
+import { h } from "@stencil/core";
 export class CasinoEngagementSuiteModal {
-  constructor() {
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-    * Client custom styling via url
-    */
-    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 = () => {
-      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);
-      });
-    };
-  }
-  componentDidRender() {
-    if (!this.limitStylingAppends && this.host) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+    constructor() {
+        this.handleCloseClick = () => {
+            if (this.isLoading)
+                return;
+            this.closeModal.emit(this.modalType);
+        };
+        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.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.isOpen = undefined;
+        this.isLoading = undefined;
+        this.header = undefined;
+        this.contentIcon = undefined;
+        this.modalType = undefined;
+        this.device = 'Mobile';
+        this.showAnimation = false;
+        this.limitStylingAppends = false;
     }
-  }
-  render() {
-    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%)`
-          } })) : null,
-        h("div", { class: "ModalHeader" },
-          h("h1", null, this.header)),
-        h("div", { class: "ModalBodyWrapper" },
-          h("div", { class: "ModalBody" },
-            h("slot", { name: "body" })),
-          h("div", { class: "ModalFooter" },
-            h("slot", { name: "footer" }))))));
-  }
-  static get is() { return "casino-engagement-suite-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["casino-engagement-suite-modal.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["casino-engagement-suite-modal.css"]
-  }; }
-  static get properties() { return {
-    "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": true,
-      "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": true,
-      "defaultValue": "''"
-    },
-    "isOpen": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-open",
-      "reflect": false
-    },
-    "isLoading": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-loading",
-      "reflect": false
-    },
-    "header": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "header",
-      "reflect": false
-    },
-    "contentIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "content-icon",
-      "reflect": false
-    },
-    "modalType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "modal-type",
-      "reflect": false
-    },
-    "device": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"Mobile\" | \"Tablet\" | \"Desktop\"",
-        "resolved": "\"Desktop\" | \"Mobile\" | \"Tablet\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "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"
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
     }
-  }; }
-  static get states() { return {
-    "limitStylingAppends": {}
-  }; }
-  static get events() { return [{
-      "method": "closeModal",
-      "name": "closeModal",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "host"; }
+    render() {
+        return (h("div", { key: '570a2289e990efeae5cceac8bc2152cbb9bb5221', class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device} ${this.showAnimation && 'ShowAnimation'}` }, h("div", { key: '9d40898f29b5a539907a7e50f3fdee02636aced6', class: "ModalWinAnimation" }), h("div", { key: '724ffe5cd946b40aa12f99ac926a6c832c1633da', class: "ModalContent GradientBorder" }, h("div", { key: '14bb1463ba0b5e9cdb545a81c13873a3e124f4c3', class: 'IconCloseContainer' }, h("button", { key: '1640c3c0881c65199a26f3f2217610189d626f91', class: "EngagementSuiteIconButton Close", onClick: this.handleCloseClick })), 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%)`
+            } })) : null, h("div", { key: 'c49ddc1152bb9c8af76ff11874816da8477ba821', class: "ModalHeader" }, h("h1", { key: '08352f25028b0b08c2c1a77b91ea80cc968aa4e1' }, this.header)), h("div", { key: '3420427d531aceb3861c1876394443ad664ff68b', class: "ModalBodyWrapper" }, h("div", { key: '3e453586b727029f5fca9688b376d4b3e8298dbf', class: "ModalBody" }, h("slot", { key: '0d82c3fa9b0faa9012005ccca85350313a684326', name: "body" })), h("div", { key: '9e7a078e4c912869f2e3573a533bb3cf82454a4c', class: "ModalFooter" }, h("slot", { key: 'df8e0568aeca79889cf8eb8f7fb33caf685b092e', name: "footer" }))))));
+    }
+    static get is() { return "casino-engagement-suite-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-engagement-suite-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-engagement-suite-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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": true,
+                "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": true,
+                "defaultValue": "''"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-open",
+                "reflect": false
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-loading",
+                "reflect": false
+            },
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "header",
+                "reflect": false
+            },
+            "contentIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "content-icon",
+                "reflect": false
+            },
+            "modalType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "modal-type",
+                "reflect": false
+            },
+            "device": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"Mobile\" | \"Tablet\" | \"Desktop\"",
+                    "resolved": "\"Desktop\" | \"Mobile\" | \"Tablet\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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 {
+            "limitStylingAppends": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeModal",
+                "name": "closeModal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
 }

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

@@ -0,0 +1 @@
+export { CasinoEngagementSuiteModal } from './casino-engagement-suite-modal';

package/dist/collection/utils/constants.js

@@ -1,4 +1,4 @@
 export const MODAL_TYPES = {
-  REWARD_MODAL: 'REWARD_MODAL',
-  TARGET_MODAL: 'TARGET_MODAL'
+    REWARD_MODAL: 'REWARD_MODAL',
+    TARGET_MODAL: 'TARGET_MODAL'
 };

package/dist/collection/utils/utils.js

@@ -1,3 +1,3 @@
 export function format(first, middle, last) {
-  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+    return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
 }

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };