@everymatrix/casino-challenges-overlay-drawer 0.0.1

package/dist/collection/components/components/casino-challenges-overlay-loader/casino-challenges-overlay-loader.css

@@ -0,0 +1,83 @@
+:host {
+  display: block;
+}
+
+:host(.full) {
+  width: 100%;
+  height: 100%;
+}
+:host(.full) .backdrop {
+  border-radius: 0;
+}
+
+.Mobile.backdrop {
+  border-radius: 0;
+}
+.Mobile .wrapper {
+  top: calc(50% - 16px);
+  left: calc(50% - 22px);
+}
+.Mobile .wrapper .loader {
+  width: 32px;
+  height: 44px;
+}
+.Mobile .wrapper .loader span {
+  width: 6px;
+  height: 28px;
+}
+
+.backdrop {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  background: var(--emw--backdrop-background, rgba(9, 9, 9, 0.8));
+  backdrop-filter: blur(6.882352829px);
+  z-index: 3;
+  border-radius: 30px;
+}
+
+.wrapper {
+  position: absolute;
+  top: calc(50% - 40px);
+  left: calc(50% - 27px);
+}
+.wrapper .loader {
+  width: 54px;
+  height: 80px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.wrapper .loader span {
+  width: 10px;
+  height: 52px;
+  background: var(--emw--color-green, #00fa5a);
+  border-radius: var(--emw--button-border-xl, 999px);
+  opacity: 0.15;
+  animation: bars 1s infinite linear;
+}
+.wrapper .loader span:nth-child(1) {
+  animation-delay: 0s;
+}
+.wrapper .loader span:nth-child(2) {
+  animation-delay: 0.33s;
+}
+.wrapper .loader span:nth-child(3) {
+  animation-delay: 0.66s;
+}
+
+@keyframes bars {
+  0%, 100% {
+    height: 50%;
+    opacity: 0.15;
+  }
+  20% {
+    height: 100%;
+    opacity: 1;
+  }
+  40% {
+    height: 50%;
+    opacity: 0.15;
+  }
+}

package/dist/collection/components/components/casino-challenges-overlay-loader/casino-challenges-overlay-loader.js

@@ -0,0 +1,63 @@
+import { h, Host } from "@stencil/core";
+export class CasinoChallengesOverlayLoader {
+    constructor() {
+        this.fullSize = false;
+        this.isMobile = false;
+    }
+    render() {
+        return (h(Host, { key: 'f15937c1bdc456e2d0e0f9bed18774470df1afd9', class: {
+                full: this.fullSize
+            } }, h("div", { key: 'b40ec5c8aa4c31c22d06eb033bba49836768de39', class: { backdrop: true, Mobile: this.isMobile } }, h("div", { key: '2f9e58b3c79e9b7d62168ebeb70f8459fb19a103', class: { wrapper: true } }, h("div", { key: 'd86fb87597d2a45581b975a666a1f385674621dd', class: "loader" }, h("span", { key: '412c7854b4b8621de5306e2d0a97011fd8dfc779' }), h("span", { key: 'aab014759e6fa04bd4df97dc12ede209a0aafbbe' }), h("span", { key: 'dfd8a7b6ed9f4b34f425f6009e473ff1f1953c5f' }))))));
+    }
+    static get is() { return "casino-challenges-overlay-loader"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenges-overlay-loader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenges-overlay-loader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fullSize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "full-size",
+                "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": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/components/casino-challenges-overlay-tabs/casino-challenges-overlay-tabs.css

@@ -0,0 +1,116 @@
+.challenges__tabs-wrapper.Mobile {
+  width: auto;
+  margin: 0 16px;
+}
+.challenges__tabs-wrapper.Mobile .challenges__tabs {
+  height: 34px;
+  padding: 2px 5px;
+  margin: 12px 0;
+  font-size: var(--emw--font-size-small, 14px);
+}
+.challenges__tabs-wrapper.Mobile .challenges__tabs.challenges__tabs--promo {
+  min-width: 84px;
+  border: 1px solid transparent;
+}
+.challenges__tabs-wrapper.Mobile .challenges__tab {
+  height: 28px;
+  min-width: auto;
+  border: 1px solid transparent;
+}
+.challenges__tabs-wrapper.Mobile .challenges-tab--promo {
+  min-width: auto;
+}
+.challenges__tabs-wrapper.Mobile .challenges-tab--promo.active {
+  background: var(--emw--active-tab-background, rgba(9, 9, 9, 0.4));
+  backdrop-filter: blur(11.4705886841px);
+}
+.challenges__tabs-wrapper.Mobile .challenges-tab--promo span {
+  margin-right: 4px;
+}
+
+.challenges__tabs-wrapper {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 24px;
+}
+.challenges__tabs-wrapper .challenges__tabs {
+  width: 100%;
+  box-sizing: border-box;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  margin: 16px 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  border-radius: var(--emw--border-radius-large, 99px);
+  border: 1px solid var(--emw--color-gray-100, rgba(255, 255, 255, 0.1));
+  background: var(--emw--tabs-background, linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.1) 100%));
+  color: var(--emw--color-white, #fff);
+  font-size: var(--emw--font-size-medium, 16px);
+  font-weight: var(--emw--font-weight-medium, 500);
+}
+.challenges__tabs-wrapper .challenges__tabs.challenges__tabs--promo {
+  min-width: 89px;
+  margin-right: 10px;
+  padding: 0;
+  overflow-x: hidden;
+  width: initial;
+}
+.challenges__tabs-wrapper .challenges__tab {
+  box-sizing: border-box;
+  height: 34px;
+  width: 25%;
+  min-width: 75px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  text-align: center;
+  border-radius: var(--emw--border-radius-large, 99px);
+  border: 1px solid transparent;
+}
+.challenges__tabs-wrapper .challenges__tab.active {
+  background: var(--emw--active-tab-background, rgba(9, 9, 9, 0.4));
+  backdrop-filter: blur(6.882352829px);
+  border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+}
+.challenges__tabs-wrapper .challenges__tab.challenges__tab--promo {
+  box-sizing: content-box;
+  min-width: 65px;
+  padding: 8px 12px;
+  background: var(--emw--color-gray-200, rgba(255, 255, 255, 0.2));
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 4px 4px 0 rgba(0, 0, 0, 0.05), 0 10px 10px 0 rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+}
+.challenges__tabs-wrapper .challenges__tab.challenges__tab--promo.active {
+  background: var(--emw--active-tab-background, rgba(9, 9, 9, 0.4));
+  backdrop-filter: blur(11.4705886841px);
+  border: 1px solid transparent;
+}
+
+@container challenges-drawer (width <= 500px) {
+  .challenges__tabs-wrapper {
+    margin: 0 20px;
+  }
+  .challenges__tabs-wrapper .challenges__tabs {
+    font-size: var(--emw--font-size-small, 14px);
+  }
+}
+@container challenges-drawer (width <= 400px) {
+  .challenges__tabs-wrapper {
+    margin: 0 15px;
+  }
+}
+@container challenges-drawer (height <= 760px) {
+  .challenges__tabs-wrapper .challenges__tabs {
+    margin: 0 0 10px;
+  }
+}

package/dist/collection/components/components/casino-challenges-overlay-tabs/casino-challenges-overlay-tabs.js

@@ -0,0 +1,171 @@
+import { h, Host } from "@stencil/core";
+import { translate } from "../../../utils/locale.utils";
+import { EChallengesTabs } from "../../../utils/types";
+import notificationIcon from "../../../assets/notification.svg";
+import crownIcon from "../../../assets/crown.svg";
+export class CasinoChallengeOverlayTabs {
+    constructor() {
+        this.handleTabClick = (index) => () => {
+            this.tabClick.emit(index);
+        };
+        this.language = 'en';
+        this.isMobile = false;
+        this.activeTabIndex = EChallengesTabs.Active;
+        this.activeTabHasNotification = false;
+        this.pendingTabHasNotification = false;
+    }
+    get tabs() {
+        return [
+            { label: translate('promo', this.language) },
+            { label: translate('active', this.language) },
+            { label: translate('pendingTab', this.language) },
+            { label: translate('finishedTab', this.language) },
+            { label: translate('codeTab', this.language) }
+        ];
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'ee3ef4b4bc68c97e9d2cf09fdb18bd07c89fa393' }, h("div", { key: '7c5ad9fa44f4fb9593be61b4c47fe28d793913c4', class: { 'challenges__tabs-wrapper': true, Mobile: this.isMobile } }, h("div", { key: '2188b25224bd3f9bb2a69b1946490d7eeac49bf4', class: "challenges__tabs challenges__tabs--promo" }, h("div", { key: '6545accdd8c223d1f28c4344497b5aa236653b84', class: {
+                challenges__tab: true,
+                'challenges__tab--promo': true,
+                active: this.activeTabIndex === EChallengesTabs.Promo
+            }, onClick: this.handleTabClick(EChallengesTabs.Promo) }, h("span", { key: 'e145f5bf9fc6c87df0c86bedc70b97c77f1f6021' }, (_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.label), h("img", { key: 'd7d2e925a73673ec536f9aeea11211bb8db7988c', src: crownIcon }))), h("div", { key: 'd24f27763e7b288a939252f3b0d2214372e5b922', class: "challenges__tabs" }, this.tabs.map((tab, index) => {
+            if (index === EChallengesTabs.Promo)
+                return;
+            return (h("div", { class: {
+                    challenges__tab: true,
+                    active: index === this.activeTabIndex
+                }, onClick: this.handleTabClick(index) }, tab.label, ((index === EChallengesTabs.Active && this.activeTabHasNotification) ||
+                (index === EChallengesTabs.Pending && this.pendingTabHasNotification)) && (h("img", { src: notificationIcon }))));
+        })))));
+    }
+    static get is() { return "casino-challenges-overlay-tabs"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenges-overlay-tabs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenges-overlay-tabs.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'"
+            },
+            "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"
+            },
+            "activeTabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "EChallengesTabs",
+                    "resolved": "EChallengesTabs.Active | EChallengesTabs.Code | EChallengesTabs.Finished | EChallengesTabs.Pending | EChallengesTabs.Promo",
+                    "references": {
+                        "EChallengesTabs": {
+                            "location": "import",
+                            "path": "../../../utils/types",
+                            "id": "../../../../packages/stencil/casino-challenges-overlay-drawer/src/utils/types.ts::EChallengesTabs"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active-tab-index",
+                "reflect": true,
+                "defaultValue": "EChallengesTabs.Active"
+            },
+            "activeTabHasNotification": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active-tab-has-notification",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "pendingTabHasNotification": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "pending-tab-has-notification",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tabClick",
+                "name": "tabClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/components/swipe-up/swipe-up.css

@@ -0,0 +1,61 @@
+:host {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: transform 120ms linear, opacity 120ms linear;
+  will-change: transform, opacity;
+  margin-bottom: 16px;
+}
+
+.swipe-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  padding: 14px 28px;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  width: 39px;
+  height: 16px;
+  margin: 0 auto;
+}
+
+.content {
+  overflow: hidden;
+  transform-origin: top center;
+  transition: transform 120ms linear, height 120ms linear, border-radius 120ms linear;
+  will-change: transform, height, border-radius;
+  border-radius: 20px 20px 0 0;
+  border-top: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  background: var(--emw--color-black-200, rgba(9, 9, 9, 0.8));
+}
+
+.swipe-down-handle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 0;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+
+.swipe-btn {
+  border: none;
+  border-radius: 999px;
+  padding: 14px 28px;
+  font-size: var(--emw--font-size-large, 18px);
+  background: transparent;
+  color: black;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}

package/dist/collection/components/components/swipe-up/swipe-up.js

@@ -0,0 +1,155 @@
+import { h } from "@stencil/core";
+import swipe from "../../../assets/swipe.svg";
+export class SwipeUp {
+    constructor() {
+        this.startY = 0;
+        this.startProgress = 0;
+        this.dragging = false;
+        this.isOpened = false;
+        this.maxSwipe = 260;
+        this.clamp = (v) => Math.max(0, Math.min(1, v));
+        this.onPointerDown = (e) => {
+            this.dragging = true;
+            this.startY = e.clientY;
+            this.startProgress = this.progress;
+            window.addEventListener('pointermove', this.onPointerMove);
+            window.addEventListener('pointerup', this.onPointerUp);
+            e.currentTarget.setPointerCapture(e.pointerId);
+        };
+        this.onPointerMove = (e) => {
+            if (!this.dragging)
+                return;
+            const deltaY = this.startY - e.clientY;
+            const deltaProgress = deltaY / this.maxSwipe;
+            const next = this.startProgress + deltaProgress;
+            this.progress = this.clamp(next);
+        };
+        this.snap = () => {
+            this.progress = this.progress > 0.5 ? 1 : 0;
+        };
+        this.onPointerUp = () => {
+            if (!this.dragging)
+                return;
+            this.dragging = false;
+            this.snap();
+            window.removeEventListener('pointermove', this.onPointerMove);
+            window.removeEventListener('pointerup', this.onPointerUp);
+        };
+        this.progress = 0;
+        this.isMobile = false;
+        this.isOneSlider = false;
+    }
+    onIsOneSliderChange(newValue) {
+        this.maxSwipe = newValue ? 250 : 260;
+    }
+    onSwipeChange(newValue) {
+        var _a;
+        (_a = this.swippedUp) === null || _a === void 0 ? void 0 : _a.emit({ progress: newValue, swipped: newValue === 1 });
+        if (newValue === 1) {
+            this.isOpened = true;
+        }
+        else if (newValue === 0) {
+            this.isOpened = false;
+        }
+    }
+    render() {
+        const heroTranslate = this.progress * -this.maxSwipe;
+        const heroOpacity = 1 - this.progress;
+        const contentTranslate = this.progress * -this.maxSwipe;
+        if (this.isMobile) {
+            return (h("div", { style: { display: 'flex', height: '100%', 'flex-direction': 'column', overflow: 'auto' } }, h("header", { class: "hero", style: {
+                    transform: `translateY(${heroTranslate}px)`,
+                    opacity: `${heroOpacity}`
+                } }, h("slot", { name: "header" })), h("main", { class: "content", style: {
+                    transform: `translateY(${contentTranslate}px)`,
+                    'margin-bottom': `-${this.maxSwipe}px`,
+                    height: '100%',
+                    overflow: this.isOpened ? 'auto' : 'hidden'
+                } }, this.isOpened ? (h("button", { class: "swipe-btn", onPointerDown: this.onPointerDown, style: { position: 'sticky', zIndex: '123', left: 'calc(50% - 40px)' } }, h("img", { src: swipe, width: 23, height: 6, style: { rotate: '180deg' } }))) : (h("button", { class: "swipe-btn", onPointerDown: this.onPointerDown }, h("img", { src: swipe, width: 23, height: 6 }))), h("slot", { name: "details" }))));
+        }
+        return (h("div", { style: { display: 'flex', height: '100%', 'flex-direction': 'column' } }, h("slot", { name: "header" }), h("slot", { name: "details" })));
+    }
+    static get is() { return "swipe-up"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["swipe-up.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["swipe-up.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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"
+            },
+            "isOneSlider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-one-slider",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "progress": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "swippedUp",
+                "name": "swippedUp",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "isOneSlider",
+                "methodName": "onIsOneSliderChange"
+            }, {
+                "propName": "progress",
+                "methodName": "onSwipeChange"
+            }];
+    }
+}