@everymatrix/casino-challenges-overlay-drawer 0.0.1

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

@@ -0,0 +1,335 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../../libs/common/src/styling/index";
+import { resolveTranslationUrl } from "../../../utils/locale.utils";
+export class CasinoChallengesOverlayDrawerHistory {
+    constructor() {
+        this.setLastItemRef = (el) => {
+            if (!el)
+                return;
+            if (this.lastItemRef && this.observer) {
+                this.observer.unobserve(this.lastItemRef);
+            }
+            this.lastItemRef = el;
+            if (this.observer && !this.loading) {
+                this.observer.observe(el);
+            }
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.isMobile = false;
+        this.loading = false;
+        this.hasMore = true;
+        this.historyItems = [];
+        this.openItems = [];
+        this.pageSize = 20;
+        this.pageNumber = 0;
+    }
+    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);
+        }
+    }
+    handlePlayerHistoryChange() {
+        var _a;
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.lastItemRef && !this.loading) {
+            (_a = this.observer) === null || _a === void 0 ? void 0 : _a.observe(this.lastItemRef);
+        }
+        this.openItems = this.historyItems.map(() => false);
+    }
+    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);
+        }
+        this.openItems = this.historyItems.map(() => false);
+    }
+    setupObserver() {
+        if (!this.lastItemRef || this.loading || !this.hasMore)
+            return;
+        if (!this.observer) {
+            this.observer = new IntersectionObserver(([entry]) => {
+                var _a;
+                if (!entry.isIntersecting)
+                    return;
+                (_a = this.observer) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);
+                if (!this.loading && this.hasMore) {
+                    this.loadMore.emit({ PageSize: this.pageSize, PageNumber: ++this.pageNumber });
+                }
+            }, {
+                root: null,
+                rootMargin: '150px 0px',
+                threshold: 0
+            });
+        }
+        this.observer.disconnect();
+        this.observer.observe(this.lastItemRef);
+    }
+    componentDidRender() {
+        this.setupObserver();
+    }
+    disconnectedCallback() {
+        var _a;
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer = undefined;
+    }
+    toggle(index) {
+        this.openItems = this.openItems.map((open, i) => (i === index ? !open : open));
+    }
+    render() {
+        return (h("div", { key: 'd38ff1e2884e929d6d28ba409b672bccf83285bb', class: {
+                Mobile: this.isMobile,
+                history: true
+            }, ref: (el) => (this.stylingContainer = el) }, this.historyItems.map((item, index) => (h("casino-challenge-drawer-history-item", { language: this.language, historyItem: item, isOpen: this.openItems[index], index: index, itemRef: index === this.historyItems.length - 1 ? this.setLastItemRef.bind(this) : null, toggle: this.toggle.bind(this), isMobile: this.isMobile })))));
+    }
+    static get is() { return "casino-challenges-overlay-drawer-history"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenges-overlay-drawer-history.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenges-overlay-drawer-history.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "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"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "loading",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hasMore": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "has-more",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "historyItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IHistoryItem[]",
+                    "resolved": "IHistoryItem[]",
+                    "references": {
+                        "IHistoryItem": {
+                            "location": "import",
+                            "path": "../../../utils/types",
+                            "id": "../../../../packages/stencil/casino-challenges-overlay-drawer/src/utils/types.ts::IHistoryItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "openItems": {},
+            "pageSize": {},
+            "pageNumber": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "loadMore",
+                "name": "loadMore",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IPaginationOptions",
+                    "resolved": "IPaginationOptions",
+                    "references": {
+                        "IPaginationOptions": {
+                            "location": "import",
+                            "path": "../../../utils/types",
+                            "id": "../../../../packages/stencil/casino-challenges-overlay-drawer/src/utils/types.ts::IPaginationOptions"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }, {
+                "propName": "historyItems",
+                "methodName": "handlePlayerHistoryChange"
+            }];
+    }
+}

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

@@ -0,0 +1,170 @@
+.Mobile.item .header {
+  padding: 14px;
+  font-size: var(--emw--font-size-small, 14px);
+}
+.Mobile.item .header .banner {
+  width: 60px;
+  height: 45px;
+  border-radius: 5.8px;
+}
+.Mobile.item .header .arrow {
+  width: 26px;
+  height: 26px;
+}
+.Mobile.item .header .arrow img {
+  width: 14px;
+}
+.Mobile.item .content .terms,
+.Mobile.item .content .row,
+.Mobile.item .content .reward {
+  font-size: var(--emw--font-size-x-small, 12px);
+  line-height: 14px;
+}
+.Mobile.item .content .terms {
+  margin: 6px 0 14px;
+  padding: 2px;
+}
+.Mobile.item .content .list-header {
+  margin-top: 6px;
+  padding: 5px 6px 5px 10px;
+}
+.Mobile.item .content .level-container {
+  padding: 10px 8px;
+}
+.Mobile.item .content .col-2 {
+  width: 92px;
+}
+.Mobile.item .content .reward {
+  margin: 8px 0 0;
+  gap: 4px;
+}
+
+.item {
+  border: 1px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));
+  background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));
+  backdrop-filter: blur(11.5px);
+  border-radius: 20px;
+}
+.item .header {
+  cursor: pointer;
+  border: none;
+  text-align: left;
+  background: transparent;
+  color: var(--emw--color-white, white);
+  font-size: var(--emw--font-size-medium, 16px);
+  font-weight: var(--emw--font-weight-bold, 700);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 16px;
+}
+.item .header .arrow {
+  border-radius: 20px;
+  border: 1.5px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));
+  background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));
+  backdrop-filter: blur(6.8px);
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.item .header div {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  margin-right: 5px;
+}
+.item .header div .banner {
+  width: 80px;
+  height: 60px;
+  flex-shrink: 0;
+  aspect-ratio: 1;
+  margin-right: 12px;
+  border-radius: 7.5px;
+  object-fit: cover;
+}
+
+.content {
+  max-height: 0;
+  padding: 0 14px;
+  overflow: auto;
+  transition: max-height 0.3s ease;
+  background: transparent;
+  color: var(--emw--color-white, white);
+}
+.content.open {
+  max-height: 400px;
+}
+.content .terms {
+  margin: 10px 0 14px;
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 4px;
+  font-size: var(--emw--font-size-small, 14px);
+  font-weight: var(--emw--font-weight-bold, 700);
+  line-height: 17px;
+  color: var(--emw--background-green-color, #00b541);
+  text-decoration: none;
+  border-bottom: 1px solid var(--emw--background-green-color, #00b541);
+}
+.content .terms .icon {
+  margin-left: 4px;
+  width: 16px;
+  height: 16px;
+}
+.content .level-container:last-child {
+  margin-bottom: 14px;
+}
+.content .level-container {
+  padding: 16px 6px 16px 8px;
+  border-bottom: 1px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));
+}
+.content .row {
+  display: flex;
+  box-sizing: border-box;
+  line-height: 17px;
+  font-size: var(--emw--font-size-small, 14px);
+  font-weight: var(--emw--font-weigh-normal, 400);
+  color: var(--emw--color-white, #fff);
+}
+.content .row .col-1 {
+  flex: 1 1 0;
+}
+.content .row .col-1.errored {
+  color: var(--emw--color-error, #d6421e);
+}
+.content .row .col-2 {
+  width: 99px;
+}
+.content .reward {
+  margin: 6px 0 0;
+  font-size: var(--emw--font-size-small, 14px);
+  font-weight: var(--emw--font-weigh-normal, 400);
+  line-height: 17px;
+  color: var(--emw--border-success-color, #00b74f);
+  display: flex;
+  gap: 6px;
+  overflow: hidden;
+}
+.content .reward img {
+  width: 13px;
+  height: 13px;
+  margin-top: 2px;
+}
+.content .reward.grayed {
+  color: var(--emw--color-gray-100, #727672);
+}
+.content .list-header {
+  margin-top: 10px;
+  padding: 8px 6px 8px 10px;
+  border-radius: 16px;
+  border-bottom: 1px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));
+  background-color: var(--emw--history-item-header-background, rgba(114, 118, 114, 0.2));
+  backdrop-filter: blur(6.9px);
+  color: var(--emw--status-badge-gray-bg, rgba(255, 255, 255, 0.5019607843));
+  text-transform: capitalize;
+}

package/dist/collection/components/components/casino-challenges-overlay-drawer-history/components/casino-challenge-drawer-history-item/casino-challenge-drawer-history-item.js

@@ -0,0 +1,173 @@
+import { h, Host } from "@stencil/core";
+import { translate } from "../../../../../utils/locale.utils";
+import { EHistoryItemLevelStatus, HistoryItemLevelStatusDictionary } from "../../../../../utils/types";
+import { format } from "date-fns";
+import giftIcon from "../../../../../assets/gift.svg";
+import arrowUpIcon from "../../../../../assets/arrow-up.svg";
+import arrowDownIcon from "../../../../../assets/arrow-down.svg";
+import termAndCondition from "../../../../../assets/term-and-condition.svg";
+export class CasinoChallengeDrawerHistoryItem {
+    constructor() {
+        this.language = 'en';
+        this.index = undefined;
+        this.historyItem = undefined;
+        this.itemRef = undefined;
+        this.isOpen = false;
+        this.isMobile = false;
+        this.toggle = undefined;
+    }
+    renderLevel(level) {
+        return (h("div", { class: "level-container" }, h("div", { class: "row" }, h("span", { class: "col-1" }, `${translate('level', this.language)} ${level.OrderNumber + 1}`), h("span", { class: `col-1 ${level.Status === EHistoryItemLevelStatus.Forfeited ? 'errored' : ''}` }, HistoryItemLevelStatusDictionary[level.Status]), h("span", { class: "col-2" }, format(new Date(level.Time), 'dd/MM/yy HH:mm'))), (level === null || level === void 0 ? void 0 : level.CustomRewardMessage) && (h("p", { class: {
+                reward: true,
+                grayed: level.Status !== EHistoryItemLevelStatus.Completed
+            } }, h("img", { src: giftIcon }), level.CustomRewardMessage))));
+    }
+    render() {
+        return (h(Host, { key: '3c2f60d4327d6443ca1532f0a16e38759b1920a0' }, h("div", { key: '3d15e6158e3a73ef152b2a9e6d6e1fcf667660a3', class: {
+                Mobile: this.isMobile,
+                item: true
+            }, ref: this.itemRef }, h("div", { key: '9168effe013361bd306bf1492ff969835756580d', class: "header", onClick: () => this.toggle(this.index) }, h("div", { key: '33352fda7db60cea64dbb24ff192d27e4fa24d25' }, h("img", { key: '99e5e51289998b491053e0a8766ba0aad43c080e', class: "banner", src: this.historyItem.BannerUrl }), h("span", { key: '1dec9ee7ee974905932e4f0da87e22d67944b231' }, this.historyItem.Name)), h("div", { key: '312f60f7dfc7cebdc04235caad2e8a012081771b', class: "arrow" }, h("img", { key: 'd51d098309ca5ad9919d0ed2eee4999522f8575f', src: this.isOpen ? arrowUpIcon : arrowDownIcon }))), h("div", { key: '0b11a490354c07fad1ba52f32d167843846f5039', class: { open: this.isOpen, content: true } }, this.historyItem.TermsAndConditionsUrl && (h("a", { key: 'ae6594e99b8e6ce8317cdd35cf7c5efe239dff2b', class: "terms", href: this.historyItem.TermsAndConditionsUrl, target: "_blank" }, translate('terms', this.language), h("img", { key: '2e038f21be58716ee39d82c309e04880fb93014b', class: "icon", src: termAndCondition }))), h("div", { key: '69764d2b8512ab92fcebe4c009ccee12d2420d57', class: "row list-header" }, h("span", { key: '4b79c7f4b6eb250b55355c97397d3ea290f625f7', class: "col-1" }, translate('level', this.language)), h("span", { key: 'f2255accb2edc572e554d729012404de19075e14', class: "col-1" }, translate('status', this.language)), h("span", { key: '337106504f623e789cb77353b77ad2869a7d28f7', class: "col-2" }, translate('time', this.language))), this.historyItem.Levels.map((level) => this.renderLevel(level))))));
+    }
+    static get is() { return "casino-challenge-drawer-history-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenge-drawer-history-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenge-drawer-history-item.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": true,
+                "defaultValue": "'en'"
+            },
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "index",
+                "reflect": true
+            },
+            "historyItem": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IHistoryItem",
+                    "resolved": "IHistoryItem",
+                    "references": {
+                        "IHistoryItem": {
+                            "location": "import",
+                            "path": "../../../../../utils/types",
+                            "id": "../../../../packages/stencil/casino-challenges-overlay-drawer/src/utils/types.ts::IHistoryItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "itemRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(el: HTMLDivElement) => void",
+                    "resolved": "(el: HTMLDivElement) => void",
+                    "references": {
+                        "HTMLDivElement": {
+                            "location": "global",
+                            "id": "global::HTMLDivElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "toggle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(index: number) => void",
+                    "resolved": "(index: number) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+}