@everymatrix/casino-challenges-overlay-drawer 0.0.1

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

@@ -0,0 +1,260 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../../libs/common/src/styling/index";
+import { resolveTranslationUrl, translate } from "../../../utils/locale.utils";
+import { EPostMessageRequestType } from "../../../utils/types";
+export class CasinoChallengesClaimCode {
+    constructor() {
+        this.asciiPrintableRegex = /^[\x21-\x7E]+$/;
+        this.handleSubmit = async () => {
+            window.postMessage({
+                type: EPostMessageRequestType.ClaimChallengeByCode,
+                data: {
+                    ActivationCode: this.code
+                }
+            });
+        };
+        this.handleInput = (event) => {
+            this.code = event.target.value;
+            if (this.debounceTime) {
+                clearTimeout(this.debounceTime);
+            }
+            this.debounceTime = setTimeout(() => {
+                this.hasError = !this.validate(this.code);
+            }, 200);
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.endpoint = '';
+        this.domain = '';
+        this.isMobile = false;
+        this.loading = false;
+        this.hasError = false;
+        this.code = '';
+        this.notificationMessage = '';
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    validate(val) {
+        return val.length >= 3 && val.length <= 30 && this.asciiPrintableRegex.test(val);
+    }
+    render() {
+        return (h("div", { key: '962b80d0f6d65f98e40dff8b5917005b70b191d0', class: { Mobile: this.isMobile }, ref: (el) => (this.stylingContainer = el) }, h("div", { key: 'b048e851d5e3ee9755e425a43a1e33643949cc47', class: "code-container" }, h("p", { key: '951c3392b688dbeb77919946e3a0a7e906c10bf6', class: "code-container__title" }, translate('claimCodeTitle', this.language)), h("input", { key: '17fedbd5dfbcd87a01a78046b170b468c42efd80', name: "code", class: { 'code-input': true, errored: this.hasError }, type: "text", placeholder: "e.g. SPRING24", onInput: this.handleInput }), h("p", { key: '019b18b0c08d94eb4d48391eb82d466b68484d6a', class: { 'code-input__text': true, errored: this.hasError } }, this.hasError
+            ? translate('claimCodeError', this.language)
+            : translate('claimCodeInputLabel', this.language)), h("div", { key: '474f3fa03b5e29021c367b161625e19c343c25e7', class: "footer" }, h("p", { key: 'd30e171ec63d1aeffcc856f7d7367caa18bf1c43', class: "action-description" }, translate('claimCodeDescription', this.language)), h("button", { key: 'd451543ae78e991403f4cbd28e7c5fea293ea052', class: {
+                'code-container__button': true,
+                'action-button': true,
+                'footer-action-button': true
+            }, onClick: this.handleSubmit, disabled: this.loading || this.code.length < 3 || this.hasError }, translate('claimCodeBtnText', this.language))))));
+    }
+    static get is() { return "casino-challenges-claim-code"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenges-claim-code.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenges-claim-code.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via message bus"
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "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
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via css file url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom translation via json file url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom language for translation"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client endpoint to fetch data"
+                },
+                "attribute": "endpoint",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "domain": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Domain Id"
+                },
+                "attribute": "domain",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-mobile",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loading": {},
+            "hasError": {},
+            "code": {},
+            "notificationMessage": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+}

package/dist/collection/components/components/casino-challenges-empty-state/casino-challenges-empty-state.css

@@ -0,0 +1,35 @@
+.empty-state.Mobile {
+  margin: 10px auto 0 auto;
+}
+.empty-state.Mobile .title {
+  font-size: var(--emw--font-size-large, 18px);
+}
+
+.empty-state {
+  display: flex;
+  width: 343px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  height: 103px;
+  padding: 20px;
+  margin: 40px auto 0 auto;
+}
+.empty-state .title {
+  color: var(--emw--color-white, #fff);
+  text-align: center;
+  font-size: var(--emw--font-size-large-xl, 22px);
+  font-weight: var(--emw--font-weight-medium, 500);
+  margin: 0 0 12px 0;
+  line-height: 17px;
+}
+.empty-state .description {
+  color: var(--emw--color-empty-state, rgba(255, 255, 255, 0.7));
+  text-align: center;
+  font-size: var(--emw--font-size-medium, 16px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-normal, 400);
+  line-height: 23px;
+  margin: 0;
+}

package/dist/collection/components/components/casino-challenges-empty-state/casino-challenges-empty-state.js

@@ -0,0 +1,80 @@
+import { h, Host } from "@stencil/core";
+export class CasinoChallengesEmptyState {
+    constructor() {
+        this.header = '';
+        this.description = '';
+        this.isMobile = false;
+    }
+    render() {
+        return (h(Host, { key: 'bb24bd872bfafcf1d0c621b10bbb1341e0a06204' }, h("div", { key: 'b3d70d025daf3ded61b3c6f7614f6c3203820701', class: { 'empty-state': true, Mobile: this.isMobile } }, h("h2", { key: 'ce463238053df0378f35c6462ca1050526512d8b', class: "title" }, this.header), h("p", { key: '01053587d93ef6ef89a0f5a28a233c907b34fbeb', class: "description" }, this.description))));
+    }
+    static get is() { return "casino-challenges-empty-state"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenges-empty-state.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenges-empty-state.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "header",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "description",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-mobile",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/components/casino-challenges-overlay-drawer-history/casino-challenges-overlay-drawer-history.css

@@ -0,0 +1,37 @@
+.Mobile.history {
+  padding: 0 12px;
+  gap: 10px;
+  height: calc(100dvh - 58px - 36px - 16px);
+}
+
+.history {
+  width: 100%;
+  padding: 0 24px;
+  box-sizing: border-box;
+  display: flex;
+  gap: 12px;
+  flex-direction: column;
+  height: calc(100dvh - 74px - 36px - 48px - 76px - 24px);
+  overflow-y: auto;
+}
+
+@container challenges-drawer (width <= 500px) {
+  .history {
+    padding: 0 20px;
+  }
+}
+@container challenges-drawer (width <= 400px) {
+  .history {
+    padding: 0 15px;
+  }
+}
+@container challenges-drawer (height <= 760px) {
+  .history {
+    height: calc(100dvh - 74px - 48px - 76px - 28px);
+  }
+}
+@container challenges-game-page (height <= 850px) {
+  .history {
+    height: calc(100dvh - 74px - 48px - 72px);
+  }
+}