@everymatrix/casino-engagement-suite-modal 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-63e7fad0.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-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

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

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

@@ -0,0 +1,141 @@
+: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;
+}
+
+.IconCloseButton img {
+  width: 24px;
+  height: 24px;
+}
+
+.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: 24px;
+  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: var(--emw--font-size-large, 24px);
+  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 .IconCloseButton img {
+  width: 16px;
+  height: 16px;
+}
+.ModalOverlay.Mobile .ModalBody {
+  font-size: 14px;
+}
+.ModalOverlay.Mobile .ModalContent {
+  width: 318px;
+  padding: 12px;
+}
+.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

@@ -0,0 +1,249 @@
+import { h } from "@stencil/core";
+export class CasinoEngagementSuiteModal {
+    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;
+    }
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+    }
+    render() {
+        return (h("div", { key: '8285e9a45ca4c3ce4fb17e67d5804bc9b6c503a5', class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device} ${this.showAnimation && 'ShowAnimation'}` }, h("div", { key: '9c0fca26014ebe7fa8ed9c5304ff2508b872f358', class: "ModalWinAnimation" }), h("div", { key: '7281f0aef2ae65ba58a7afee7d070c1caf34f1c3', class: "ModalContent GradientBorder" }, h("div", { key: '7db7f93904c057b80e78d982ee73baed6b91fc7b', class: 'IconCloseContainer' }, h("button", { key: '9ea9de79010807ff507c88897acddb4ca3d1ddcf', class: "IconCloseButton", onClick: this.handleCloseClick }, h("img", { key: '75f3155c2ccc0c98c0ae195057dd1ccf80939549', 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", { key: '11dc59541107ba88928c8d56d87bf4c1e879b28a', class: "ModalHeader" }, h("h1", { key: '0587e3a15ef19b4e087e5c0262f974709d269baf' }, this.header)), h("div", { key: '826992ac3be61bbdff34f51e9e089efb18d07ce5', class: "ModalBodyWrapper" }, h("div", { key: 'a80b16956ef7a1941638e99fb0c0ad7166137037', class: "ModalBody" }, h("slot", { key: '41882aa05cea337febb2b2c4dad7c0089239b181', name: "body" })), h("div", { key: '6f4e855d70851eaa7ba3f58389110aa35431f03f', class: "ModalFooter" }, h("slot", { key: '737fe84975e121d5162d7824c577b4028dc327eb', 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/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/utils/constants.js

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

package/dist/collection/utils/utils.js

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

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

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

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

@@ -0,0 +1,62 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-9157b8d6.js';
+
+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}.IconCloseButton img{width:24px;height:24px}.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:24px;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:var(--emw--font-size-large, 24px);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 .IconCloseButton img{width:16px;height:16px}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px;padding:12px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px}.ModalOverlay.Mobile.ShowAnimation .ModalWinAnimation{background-size:400px}";
+const CasinoEngagementSuiteModalStyle0 = casinoEngagementSuiteModalCss;
+
+const CasinoEngagementSuiteModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closeModal = createEvent(this, "closeModal", 7);
+        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;
+    }
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+    }
+    render() {
+        return (h("div", { key: '8285e9a45ca4c3ce4fb17e67d5804bc9b6c503a5', class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device} ${this.showAnimation && 'ShowAnimation'}` }, h("div", { key: '9c0fca26014ebe7fa8ed9c5304ff2508b872f358', class: "ModalWinAnimation" }), h("div", { key: '7281f0aef2ae65ba58a7afee7d070c1caf34f1c3', class: "ModalContent GradientBorder" }, h("div", { key: '7db7f93904c057b80e78d982ee73baed6b91fc7b', class: 'IconCloseContainer' }, h("button", { key: '9ea9de79010807ff507c88897acddb4ca3d1ddcf', class: "IconCloseButton", onClick: this.handleCloseClick }, h("img", { key: '75f3155c2ccc0c98c0ae195057dd1ccf80939549', 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", { key: '11dc59541107ba88928c8d56d87bf4c1e879b28a', class: "ModalHeader" }, h("h1", { key: '0587e3a15ef19b4e087e5c0262f974709d269baf' }, this.header)), h("div", { key: '826992ac3be61bbdff34f51e9e089efb18d07ce5', class: "ModalBodyWrapper" }, h("div", { key: 'a80b16956ef7a1941638e99fb0c0ad7166137037', class: "ModalBody" }, h("slot", { key: '41882aa05cea337febb2b2c4dad7c0089239b181', name: "body" })), h("div", { key: '6f4e855d70851eaa7ba3f58389110aa35431f03f', class: "ModalFooter" }, h("slot", { key: '737fe84975e121d5162d7824c577b4028dc327eb', name: "footer" }))))));
+    }
+    get host() { return getElement(this); }
+};
+CasinoEngagementSuiteModal.style = CasinoEngagementSuiteModalStyle0;
+
+export { CasinoEngagementSuiteModal as casino_engagement_suite_modal };

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

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-9157b8d6.js';
+export { s as setNonce } from './index-9157b8d6.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  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);
+});