@everymatrix/casino-challenges-overlay-drawer 0.0.1

package/dist/collection/components/casino-challenges-overlay-drawer/index.js

@@ -0,0 +1 @@
+export { CasinoChallengesOverlayDrawer } from './casino-challenges-overlay-drawer';

package/dist/collection/components/components/casino-challenge-opt-out-modal/casino-challenge-opt-out-modal.css

@@ -0,0 +1,141 @@
+.Mobile casino-challenges-modal::part(modal-content) {
+  width: 258px;
+  padding-bottom: 24px;
+}
+.Mobile .opt-out-icon-circle {
+  width: 38px;
+  height: 38px;
+}
+.Mobile .modal-header-title {
+  font-size: var(--emw--font-size-large, 18px);
+}
+.Mobile .modal-body-description {
+  font-size: var(--emw--font-size-small, 14px);
+}
+.Mobile .modal-footer {
+  margin-top: 24px;
+}
+.Mobile .modal-footer-button {
+  width: 92px;
+  height: 28px;
+  font-size: var(--emw--font-size-x-small, 12px);
+}
+
+casino-challenges-modal::part(modal-content) {
+  padding: 42px 22px 32px 22px;
+  background: var(--emw--color-black-150, rgba(9, 9, 9, 0.5));
+  border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  backdrop-filter: blur(16.0588245392px);
+  width: 365px;
+  min-width: 258px;
+  font-family: var(--emw--font-family-primary, "Teachers"), sans-serif;
+}
+
+casino-challenges-modal::part(modal-backdrop) {
+  border-radius: 26px;
+  background: var(--emw--color-black-200, rgba(9, 9, 9, 0.8));
+  backdrop-filter: blur(11.47px);
+}
+
+casino-challenges-modal::part(close-button) {
+  border-radius: 20px;
+  border: 1.5px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  background: var(--emw--color-black-150, rgba(9, 9, 9, 0.5));
+  width: 26px;
+  height: 26px;
+}
+
+casino-challenges-modal::part(close-icon) {
+  width: 18px;
+  height: 18px;
+}
+
+casino-challenges-modal::part(inner-container) {
+  padding: 0;
+  width: 100%;
+  background: transparent;
+}
+
+.opt-out-icon-circle {
+  width: 44px;
+  height: 44px;
+  padding: 10px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 99px;
+  border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  background: var(--emw--background-error-notification, rgba(9, 9, 9, 0.4));
+  margin: 0 auto 12px auto;
+}
+
+.opt-out-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.modal-header-title {
+  color: var(--emw--color-white, #ffffff);
+  text-align: center;
+  font-style: normal;
+  line-height: normal;
+  font-family: var(--emw--font-family-primary, "Teachers"), sans-serif;
+  font-size: var(--emw--font-size-large-xl, 22px);
+  font-weight: var(--emw--font-weight-semibold, 600);
+  text-transform: none;
+  margin: 0 0 16px 0;
+}
+
+.modal-body-description {
+  font-family: var(--emw--font-family-primary, "Teachers"), sans-serif;
+  font-size: var(--emw--font-size-medium, 16px);
+  font-style: normal;
+  margin: 0;
+  color: var(--emw--color-white-150, rgba(255, 255, 255, 0.7));
+  text-align: center;
+  font-weight: var(--emw--font-weight-normal, 400);
+  line-height: normal;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 32px;
+}
+
+.modal-footer-button {
+  height: 36px;
+  padding: 14px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: var(--emw--button-border-radius, 99px);
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid var(--emw--color-white-150, rgba(255, 255, 255, 0.7));
+  width: 145px;
+  font-size: var(--emw--font-size-small, 14px);
+}
+
+.modal-footer-button.cancel {
+  color: var(--emw--color-white, #ffffff);
+  text-align: center;
+  font-family: inherit;
+  font-style: normal;
+  font-weight: var(--emw--font-weight-bold, 700);
+  line-height: normal;
+}
+
+.modal-footer-button.confirm {
+  border-radius: var(--emw--button-border-radius, 99px);
+  color: var(--emw--color-white, #ffffff);
+  text-align: center;
+  font-family: inherit;
+  font-style: normal;
+  font-weight: var(--emw--font-weight-bold, 700);
+  line-height: normal;
+}

package/dist/collection/components/components/casino-challenge-opt-out-modal/casino-challenge-opt-out-modal.js

@@ -0,0 +1,124 @@
+import { h } from "@stencil/core";
+import { translate } from "../../../utils/locale.utils";
+import optOutIcon from "../../../assets/opt-out.svg";
+import "../../../../../../casino-challenges-modal/dist/types/index";
+export class CasinoChallengeDetailsOptOut {
+    constructor() {
+        this.handleCloseOptOut = () => {
+            var _a;
+            (_a = this.closeOptOutModal) === null || _a === void 0 ? void 0 : _a.emit(true);
+        };
+        this.handleConfirmOptOut = () => {
+            var _a;
+            (_a = this.confirmOptOut) === null || _a === void 0 ? void 0 : _a.emit(true);
+        };
+        this.language = 'en';
+        this.isMobile = false;
+        this.open = false;
+    }
+    render() {
+        return (h("casino-challenges-modal", { key: '313981094c4deb08622e70d64544b270f5d58927', isOpen: this.open, onClose: this.handleCloseOptOut, showBackdrop: true, showCloseButton: true }, h("div", { key: '3eb309a2073df2b0be66192eb3d5b3e2c47ddaac', slot: "header" }, h("div", { key: '74d0886975cffde599597100445431488aa3aab8', class: "opt-out-icon-circle" }, h("img", { key: 'f9cef6d393f458425b2406c077dd3b5e615a70ce', class: "opt-out-icon", src: optOutIcon, height: 20, width: 20 })), h("h2", { key: 'da5484c8cf059ae66d82eb4e493992b17c91139d', class: "modal-header-title" }, translate('optOutModalTitle', this.language))), h("div", { key: '9baafd6078ea53dfcb2e440b0e18afc7b20d72a0', slot: "body" }, h("p", { key: '5a758912278c08dc681e1d0021f5213892ac0da8', class: "modal-body-description" }, translate('optOudModalDescription', this.language))), h("div", { key: '34e1e80b7a2435c28788aafea072adba10aff836', class: "modal-footer", slot: "footer" }, h("button", { key: '8a476048cdc8c297f9bba9174c85555e58362204', class: "modal-footer-button confirm", onClick: this.handleCloseOptOut }, translate('optOutModalCancel', this.language)), h("button", { key: 'e993c82f39a4ce6d6faa7581c11b3edde33d04f6', class: "modal-footer-button cancel", onClick: this.handleConfirmOptOut }, translate('optOutModalConfirm', this.language)))));
+    }
+    static get is() { return "casino-challenge-opt-out-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenge-opt-out-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenge-opt-out-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeOptOutModal",
+                "name": "closeOptOutModal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "confirmOptOut",
+                "name": "confirmOptOut",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/components/casino-challenge-overlay-background/casino-challenge-overlay-background.css

@@ -0,0 +1,89 @@
+.glow {
+  position: absolute;
+  border-radius: 999px;
+  filter: blur(70px);
+  opacity: 0.55;
+}
+
+.glows--top .glow:nth-child(1) {
+  width: 180px;
+  height: 110px;
+  background: var(--emw--glowing-top-color, #58d56d);
+  top: 120px;
+  right: 35px;
+  transform: rotate(30deg);
+}
+
+.glows--top .glow:nth-child(2) {
+  width: 170px;
+  height: 120px;
+  background: var(--emw--glowing-top-color-100, #61d67c);
+  top: 170px;
+  right: 85px;
+  transform: rotate(-20deg);
+}
+
+.glows--top .glow:nth-child(3) {
+  width: 150px;
+  height: 120px;
+  background: var(--emw--glowing-top-color-200, #c8c5bf);
+  top: 205px;
+  right: -10px;
+}
+
+.glows--top .glow:nth-child(4) {
+  width: 170px;
+  height: 130px;
+  background: var(--emw--glowing-top-color-300, #6b3952);
+  top: 235px;
+  right: 75px;
+}
+
+.glows--top .glow:nth-child(5) {
+  width: 120px;
+  height: 120px;
+  background: var(--emw--glowing-top-color-400, #2c2c2c);
+  top: 170px;
+  right: 120px;
+}
+
+.glows--bottom .glow:nth-child(1) {
+  width: 220px;
+  height: 150px;
+  left: -20px;
+  top: 560px;
+  background: var(--emw--glowing-bottom-color, #59d970);
+}
+
+.glows--bottom .glow:nth-child(2) {
+  width: 190px;
+  height: 140px;
+  left: 120px;
+  top: 540px;
+  background: var(--emw--glowing-bottom-color-100, #5fd877);
+  transform: rotate(18deg);
+}
+
+.glows--bottom .glow:nth-child(3) {
+  width: 170px;
+  height: 130px;
+  left: 190px;
+  top: 560px;
+  background: var(--emw--glowing-bottom-color-200, #d2ccc4);
+}
+
+.glows--bottom .glow:nth-child(4) {
+  width: 200px;
+  height: 150px;
+  left: 330px;
+  top: 570px;
+  background: var(--emw--glowing-bottom-color-300, #6d3b53);
+}
+
+.glows--bottom .glow:nth-child(5) {
+  width: 150px;
+  height: 110px;
+  left: 250px;
+  top: 600px;
+  background: var(--emw--glowing-bottom-color-400, #2f2f2f);
+}

package/dist/collection/components/components/casino-challenge-overlay-background/casino-challenge-overlay-background.js

@@ -0,0 +1,44 @@
+import { Host, h } from "@stencil/core";
+import "../../../../../../casino-challenges-modal/dist/types/index";
+export class CasinoChallengeDetailsOptOut {
+    constructor() {
+        this.glowes = [1, 2, 3, 4, 5];
+        this.empty = false;
+    }
+    render() {
+        return (h(Host, { key: 'bf8f6a2e6c46fdd5487f93a4b04f73c188bab81b' }, h("div", { key: '8995de744200769679fb95498f1cc1c89024f01d', class: "glows glows--top" }, this.glowes.map(glow => h("div", { key: glow, class: "glow" }))), !this.empty && h("div", { key: 'f3f74fe448d60b51b68ac9fbd87b9d953296d2f9', class: "glows glows--bottom" }, this.glowes.map(glow => h("div", { key: glow, class: "glow" })))));
+    }
+    static get is() { return "casino-challenge-overlay-background"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenge-overlay-background.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenge-overlay-background.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "empty": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "empty",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/components/casino-challenges-claim-code/casino-challenges-claim-code.css

@@ -0,0 +1,143 @@
+.Mobile .code-container {
+  margin-top: 0;
+  padding: 20px 12px;
+}
+.Mobile .code-container__title {
+  font-size: var(--emw--font-size-small, 14px);
+  width: 263px;
+}
+.Mobile .code-container .code-input {
+  border-radius: 14px;
+  padding: 12px 20px;
+  font-size: var(--emw--font-size-large, 18px);
+  line-height: 22px;
+  width: 327px;
+}
+.Mobile .code-container .code-input__text {
+  margin-top: 4px;
+  font-size: var(--emw--font-size-2x-small, 11px);
+}
+.Mobile .code-container__button {
+  height: 36px;
+  font-size: var(--emw--font-size-small, 14px);
+}
+.Mobile .footer {
+  border-top: 2px solid var(--emw--gradient-blue, #003e5c);
+  background: var(--emw--backdrop-background, rgba(9, 9, 9, 0.8));
+  backdrop-filter: blur(16px);
+  padding: 12px;
+  border-radius: 0;
+}
+.Mobile .action-description {
+  margin: 0;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  max-height: 28px;
+  min-height: 14px;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--emw--font-size-x-small, 12px);
+}
+
+.code-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 24px;
+  padding: 20px 24px;
+  text-align: center;
+}
+.code-container__title {
+  font-size: var(--emw--font-size-medium, 16px);
+  font-weight: var(--emw--font-weight-normal, 400);
+  line-height: 22px;
+  color: var(--emw--color-white-150, rgba(255, 255, 255, 0.7));
+  margin: 0 0 46px;
+}
+.code-container__button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  min-width: 129px;
+  border-radius: var(--emw--button-border-radius, 99px);
+  border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  font-size: var(--emw--font-size-medium, 16px);
+  font-weight: var(--emw--font-weight-bold, 700);
+  color: var(--emw--color-black-100, #090909);
+  background: var(--emw--color-green, #00fa5a);
+  cursor: pointer;
+}
+.code-container__button:hover:not(:disabled) {
+  color: var(--emw--color-gray-300, #083b17);
+  border-color: transparent;
+  box-shadow: 0 0 4px 0 rgba(188, 252, 177, 0.2), 0 0 20px 0 rgba(0, 183, 79, 0.5);
+}
+.code-container__button:disabled, .code-container__button:disabled:hover {
+  background: var(--emw--color-button-disabled, rgba(255, 255, 255, 0.2));
+  color: var(--emw--color-button-disabled, rgba(255, 255, 255, 0.2));
+  border: none;
+  cursor: not-allowed;
+}
+
+.code-input {
+  border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  background: var(--emw--color-black-150, rgba(9, 9, 9, 0.5));
+  border-radius: 20px;
+  padding: 20px;
+  line-height: 24px;
+  color: var(--emw--color-white, #ffffff);
+  text-align: center;
+  font-size: var(--emw--font-size-large-xl, 22px);
+  width: 100%;
+  font-weight: var(--emw--font-weight-medium, 500);
+  box-sizing: border-box;
+}
+.code-input::placeholder {
+  color: var(--emw--color-gray-250, rgba(255, 255, 255, 0.5));
+}
+.code-input:focus {
+  outline: 1px solid var(--emw--input-focus-outline-color, #d6ffdc);
+}
+.code-input:focus.errored {
+  outline-color: var(--emw--status-badge-red-bg, #d63d1e);
+}
+.code-input.errored {
+  border-color: var(--emw--status-badge-red-bg, #d63d1e);
+}
+.code-input__text {
+  margin: 8px 0 0;
+  line-height: 22px;
+  font-size: var(--emw--font-size-small, 14px);
+  font-weight: var(--emw--font-weight-normal, 400);
+  color: var(--emw--color-gray-250, rgba(255, 255, 255, 0.5));
+}
+.code-input__text.errored {
+  color: var(--emw--status-badge-red-bg, #d63d1e);
+}
+
+.footer {
+  position: fixed;
+  box-sizing: border-box;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  width: 100%;
+  padding: 20px 24px 24px 24px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  border-top: 1px solid var(--emw--gradient-blue, #003e5c);
+  background: var(--emw--backdrop-background, rgba(9, 9, 9, 0.8));
+  backdrop-filter: blur(16.05px);
+  border-radius: 0 0 30px 30px;
+}
+
+.action-description {
+  font-size: var(--emw--font-size-small, 14px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-semibold, 600);
+  line-height: normal;
+  color: var(--emw--color-white, #ffffff);
+}