@everymatrix/lottery-tipping-ticket-controller 0.1.0

package/dist/cjs/lottery-tipping-ticket-controller.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-db2858c7.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('lottery-tipping-ticket-controller.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["general-tooltip_6.cjs",[[1,"lottery-tipping-ticket-controller",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"endpointTicket":[513,"endpoint-ticket"],"sessionId":[513,"session-id"],"gameId":[513,"game-id"],"playerId":[513,"player-id"],"drawId":[513,"draw-id"],"isLoading":[32],"bettingTypeOptions":[32],"playingModeOptions":[32],"selectedBettingType":[32],"selectedPlayingMode":[32],"hasSelectBullet":[32],"hasSelectAllBullet":[32],"totalLineCombination":[32],"submitLoading":[32],"rawData":[32],"dialogConfig":[32]},[[0,"lotteryTippingBulletBetSelect","lotteryTippingBulletGroupSelectionHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-tipping-ticket-bet",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"sessionId":[513,"session-id"],"endpoint":[513],"gameId":[513,"game-id"],"drawId":[513,"draw-id"],"totalPages":[1538,"total-pages"],"minTotalPages":[514,"min-total-pages"],"maxTotalPages":[514,"max-total-pages"],"mode":[513],"readPretty":[516,"read-pretty"],"defaultBulletConfigLineGroup":[513,"default-bullet-config-line-group"],"translationData":[32],"limitStylingAppends":[32],"clientStylingUrlContent":[32],"bulletConfigLineGroup":[32],"currentPage":[32],"isLoading":[32],"hasErrors":[32],"dialogConfig":[32],"ticketDataSource":[32],"resetBulletConfig":[64],"getData":[64]},[[0,"lotteryTippingBulletGroupToggle","lotteryTippingBulletGroupSelectionHandler"]],{"translationUrl":["handleNewTranslations"],"gameId":["fetchMatchData"],"sessionId":["fetchMatchData"],"drawId":["fetchMatchData"],"currentPage":["handleCurrentPageChange"]}],[1,"lottery-tipping-ticket-banner",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"stopTime":[1,"stop-time"],"period":[1]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-tipping-bullet-group",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"positionIdx":[513,"position-idx"],"theme":[513],"mode":[513],"bulletConfigContent":[513,"bullet-config-content"]},[[0,"lotteryTippingBulletToggle","lotteryTippingBulletSelectionHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"general-tooltip",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"position":[1],"delay":[2],"isVisible":[32],"_tooltipId":[32]},[[1,"mouseenter","handleMouseEnterOrFocus"],[0,"focusin","handleMouseEnterOrFocus"],[1,"mouseleave","handleMouseLeaveOrBlur"],[0,"focusout","handleMouseLeaveOrBlur"],[0,"keydown","handleKeyDown"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-tipping-bullet",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"positionIdx":[514,"position-idx"],"theme":[513],"value":[513],"disabled":[516],"isSelected":[516,"is-selected"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,28 @@
+{
+  "entries": [
+    "components/lottery-tipping-ticket-controller/lottery-tipping-ticket-controller.js",
+    "components/lottery-tipping-ticket-banner/lottery-tipping-ticket-banner.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/lottery-tipping-bullet-group",
+      "tags": [
+        "lottery-tipping-bullet",
+        "lottery-tipping-bullet-group"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-tipping-ticket-bet",
+      "tags": [
+        "general-tooltip",
+        "lottery-tipping-ticket-bet"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/lottery-tipping-ticket-banner/index.js

@@ -0,0 +1 @@
+export { LotteryTippingTicketBanner } from './lottery-tipping-ticket-banner';

package/dist/collection/components/lottery-tipping-ticket-banner/locale.utils.js

@@ -0,0 +1,35 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS = {
+    en: {
+        stop: 'Stop',
+        at: 'at'
+    },
+    ro: {
+        stop: 'Oprește',
+        at: 'la'
+    },
+    fr: {
+        stop: 'Arrêtez',
+        at: 'à'
+    },
+    ar: {
+        stop: 'توقف',
+        at: 'في'
+    },
+    hr: {
+        stop: 'Stop',
+        at: 'u'
+    }
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+export const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
+        }
+    });
+};

package/dist/collection/components/lottery-tipping-ticket-banner/lottery-tipping-ticket-banner.css

@@ -0,0 +1,68 @@
+.lottery-tipping-ticket-banner__container {
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+  container-type: inline-size;
+}
+
+.banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  background: var(--emw--color-primary, #fed275);
+  border-top: 2px solid var(--emw--color-primary-variant, #ffe66f);
+  border-bottom: 2px solid var(--emw--color-primary-variant, #ffe66f);
+  gap: 0.5rem;
+  white-space: nowrap;
+}
+
+.left {
+  flex: 1;
+  gap: 0.4rem;
+}
+
+.brand {
+  font-weight: 700;
+  color: var(--emw--color-gray-400, #000);
+}
+
+.mid {
+  flex: 1;
+  font-size: 1.5rem;
+  font-weight: 800;
+  font-style: italic;
+  letter-spacing: 0.04em;
+  color: var(--emw--color-gray-400, #000);
+  text-align: center;
+}
+
+.right {
+  flex: 1;
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+@container (max-width: 420px) {
+  .mid {
+    text-align: right;
+  }
+  .right {
+    justify-content: center;
+  }
+}
+.pill {
+  border: 2px solid var(--emw--color-gray-150, #6f6f6f);
+  border-radius: 0.4rem;
+  padding: 0.25rem 0.7rem;
+  font-size: 0.9rem;
+  color: var(--emw--color-gray-300, #333);
+  display: inline-flex;
+  align-items: baseline;
+}
+
+.pill > strong {
+  font-weight: 700;
+}

package/dist/collection/components/lottery-tipping-ticket-banner/lottery-tipping-ticket-banner.js

@@ -0,0 +1,224 @@
+import { getAssetPath, h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { isToday } from "date-fns";
+import { formatDate } from "../../utils/utils";
+import { translate } from "./locale.utils";
+import { resolveTranslationUrl } from "../../utils/locale.utils";
+export class LotteryTippingTicketBanner {
+    constructor() {
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.stopTime = '';
+        this.period = undefined;
+    }
+    get formattedStopTime() {
+        let _temp = '';
+        if (!this.stopTime) {
+            return _temp;
+        }
+        _temp = formatDate({ date: this.stopTime, format: 'dd/MM/yyyy HH:mm' });
+        if (isToday(new Date(this.stopTime))) {
+            _temp = formatDate({ date: this.stopTime, format: 'HH:mm' });
+        }
+        return _temp;
+    }
+    get formattedPeriod() {
+        let _temp = '';
+        _temp = formatDate({ date: this.period, format: 'EEEE' });
+        if (_temp.toLowerCase() === 'wednesday') {
+            _temp = 'MIDWEEK';
+        }
+        return _temp.toUpperCase();
+    }
+    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);
+        }
+    }
+    async 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();
+    }
+    render() {
+        const backgroundImagePath = getAssetPath('../static/tipping-full-color.svg');
+        return (h("div", { key: 'eb93e7946631d234963d841df9e8b753b651c795', ref: (el) => (this.stylingContainer = el), class: "lottery-tipping-ticket-banner__container" }, h("section", { key: '0133e845df14caa912b18e1734ad16c584b7359f', class: "banner" }, h("div", { key: '23bc3b34011dc5533bf70397f974936e238f04fe', class: "left" }, h("img", { key: '52110de0807e79c02d7934ec8a37c1322b73fe84', alt: "Betting", src: backgroundImagePath, class: "logo" })), h("div", { key: 'b5deae59d09b870777c913c5ebfca43886c3cf95', class: "mid period" }, this.formattedPeriod), h("div", { key: 'b404e474850233e2d5e139077fd774f178bc40fa', class: "right" }, h("span", { key: '3b9072c2165a033d17c9572c7cafe2a2c699447b', class: "pill" }, h("strong", { key: 'c560c2c27dc930a963b992c07e02745b18d0002f' }, translate('stop', this.language)), "\u00A0", translate('at', this.language), "\u00A0", this.formattedStopTime)))));
+    }
+    static get is() { return "lottery-tipping-ticket-banner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-tipping-ticket-banner.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-tipping-ticket-banner.css"]
+        };
+    }
+    static get assetsDirs() { return ["../static"]; }
+    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
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "stopTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "draw stop time"
+                },
+                "attribute": "stop-time",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "period": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "draw period"
+                },
+                "attribute": "period",
+                "reflect": false
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+}

package/dist/collection/components/lottery-tipping-ticket-controller/index.js

@@ -0,0 +1 @@
+export { LotteryTippingTicketController } from './lottery-tipping-ticket-controller';

package/dist/collection/components/lottery-tipping-ticket-controller/lottery-tipping-ticket-controller.css

@@ -0,0 +1,198 @@
+.lottery-tipping-ticket-controller__container {
+  display: block;
+  box-sizing: border-box;
+  font-size: 14px;
+  container-type: inline-size;
+}
+@container (max-width: 375px) {
+  .lottery-tipping-ticket-controller__container {
+    font-size: 12px;
+  }
+}
+
+.LotteryTippingTicketController__top {
+  padding: 1.8rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  margin: 0 auto;
+  max-width: 800px;
+}
+.LotteryTippingTicketController__row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.LotteryTippingTicketController__section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.LotteryTippingTicketController__label {
+  font-weight: 500;
+  white-space: nowrap;
+  width: 6rem;
+}
+.LotteryTippingTicketController__segmented-control {
+  height: 2.2rem;
+  display: inline-flex;
+  background-color: var(--emw--color-gray-100, #e6e6e6);
+  border-radius: 2rem;
+  padding: 0.2rem;
+}
+.LotteryTippingTicketController__segment {
+  background-color: transparent;
+  border: none;
+  padding: 0.3rem 0.8rem;
+  cursor: pointer;
+  font-weight: 500;
+  border-radius: 2rem;
+  outline: none;
+  transition: background-color 0.25s ease, color 0.25s ease;
+  white-space: nowrap;
+}
+.LotteryTippingTicketController__segment--active {
+  background-color: var(--emw--color-background, #ffffff);
+  color: var(--emw--color-gray-400, #000);
+  font-weight: 600;
+}
+.LotteryTippingTicketController__segment--disabled:hover {
+  cursor: not-allowed !important;
+}
+.LotteryTippingTicketController__segment:not(.LotteryTippingTicketController__segment--active):hover {
+  background-color: var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.gap-1 {
+  gap: 4px;
+}
+
+.LotteryTippingTicketController__main {
+  align-items: flex-start;
+  justify-content: center;
+  gap: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  flex-wrap: wrap;
+}
+.LotteryTippingTicketController__main--left {
+  border: 1px solid var(--emw--color-gray-50, #f5f5f5);
+  padding: 1rem;
+  border-radius: 1rem;
+  flex: 1.5;
+}
+.LotteryTippingTicketController__main--right {
+  padding: 1rem;
+  border-radius: 1rem;
+  flex: 1;
+}
+
+.order-summary {
+  max-width: 360px;
+  width: 100%;
+  background: var(--emw--color-background, #fff);
+}
+
+.order-summary__title {
+  margin-bottom: 16px;
+  text-align: center;
+  color: var(--emw--color-gray-400, #000);
+  text-transform: uppercase;
+}
+
+.order-summary__ticket-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  gap: 10px;
+}
+
+.order-summary__ticket {
+  font-weight: 500;
+  width: 50px;
+  text-align: right;
+}
+
+.order-summary__details {
+  display: flex;
+  align-items: center;
+}
+
+.order-summary__multiplier {
+  color: var(--emw--color-gray-150, #6f6f6f);
+  margin: 0 8px;
+}
+
+.order-summary__divider {
+  border: none;
+  border-top: 1px solid var(--emw--color-gray-100, #e6e6e6);
+  margin: 20px 0;
+}
+
+.order-summary__button-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.order-summary__button {
+  cursor: pointer;
+  padding: 0.5rem 4rem;
+  background: var(--emw--color-primary, #fed275);
+  color: var(--emw--color-gray-400, #000);
+  border-radius: var(--emw--button-border-radius, 4px);
+  border: 1px solid var(--emw--color-primary, #fed275);
+}
+
+.order-summary__button:not(.order-summary__button--disabled):not(.order-summary__button--loading):hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));
+  background: var(--emw--color-primary-variant, #ffe66f);
+}
+
+.order-summary__button--disabled {
+  background: var(--emw--color-gray-100, #e6e6e6);
+  color: var(--emw--color-typography, #555);
+  cursor: not-allowed;
+  border: 1px solid var(--emw--color-gray-100, #e6e6e6);
+}
+
+.skeleton-content {
+  display: flex;
+  flex-direction: column;
+  gap: 29px;
+  align-items: center;
+}
+
+.skeleton-item {
+  background: var(--emw--color-gray-50, #f5f5f5);
+  border-radius: 4px;
+  height: 40px;
+  width: 200px;
+}
+
+.skeleton-animated {
+  animation: skeleton-shimmer 1.5s infinite linear;
+  background: linear-gradient(90deg, var(--emw--color-gray-100, #e6e6e6) 25%, var(--emw--color-gray-50, #f5f5f5) 37%, var(--emw--color-gray-100, #e6e6e6) 63%);
+  background-size: 200% 100%;
+}
+
+@keyframes skeleton-shimmer {
+  to {
+    background-position: 100% 0;
+  }
+}