@everymatrix/lottery-hakuna-ticket 0.0.1

package/dist/cjs/lottery-hakuna-ticket-a4c6f2d2.js

@@ -0,0 +1,384 @@
+'use strict';
+
+const index = require('./index-14ac4886.js');
+
+var CurSelectionBtnType;
+(function (CurSelectionBtnType) {
+    CurSelectionBtnType["UNSELECTED"] = "unselected";
+    CurSelectionBtnType["SELECTED"] = "selected";
+})(CurSelectionBtnType || (CurSelectionBtnType = {}));
+
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  if (!stylingContainer || !clientStylingUrl) return;
+
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ */
+function setStreamStyling(stylingContainer, domain, subscription) {
+  if (window.emMessageBus) {
+    const sheet = document.createElement('style');
+
+    window.emMessageBus.subscribe(domain, (data) => {
+      sheet.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(sheet);
+      }
+    });
+  }
+}
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
+const TRANSLATIONS = {
+    en: {
+        ticket: 'Ticket',
+        loading: 'Loading, please wait ...',
+        error: 'It was an error while trying to fetch the data',
+        quickPick: 'Quick Pick',
+        submit: 'SUBMIT'
+    },
+    ro: {
+        loading: 'Se incarca, va rugam asteptati ...',
+        error: 'A fost o eroare in timp ce asteptam datele',
+        multiplier: 'Multiplicator',
+        numberOfDraws: 'Numarul de extrageri',
+        wagerPerDraw: 'Pariul per extragere',
+        resetButton: 'Reseteaza',
+        autoButton: 'quick pick',
+        lines: 'Select how many lines you want to buy',
+        lineName: 'Line',
+        playType: 'Select one play type you want to buy'
+    },
+    fr: {
+        loading: 'Loading, please wait ...',
+        error: 'It was an error while trying to fetch the data',
+        multiplier: 'Multiplier',
+        numberOfDraws: 'Number of Draws',
+        wagerPerDraw: 'Wager per Draw',
+        resetButton: 'Reset',
+        autoButton: 'quick pick',
+        lines: 'Select how many lines you want to buy',
+        lineName: 'Line',
+        playType: 'Select one play type you want to buy'
+    },
+    ar: {
+        loading: 'Loading, please wait ...',
+        error: 'It was an error while trying to fetch the data',
+        multiplier: 'Multiplier',
+        numberOfDraws: 'Number of Draws',
+        wagerPerDraw: 'Wager per Draw',
+        resetButton: 'Reset',
+        autoButton: 'quick pick',
+        lines: 'Select how many lines you want to buy',
+        lineName: 'Line',
+        playType: 'Select one play type you want to buy'
+    },
+    hr: {
+        loading: 'Učitavanje, molimo pričekajte ...',
+        error: 'Došlo je do pogreške prilikom pokušaja dohvaćanja podataka',
+        multiplier: 'Multiplikator',
+        numberOfDraws: 'Broj izvlačenja',
+        wagerPerDraw: 'Ulog po izvlačenju',
+        resetButton: 'Resetiraj',
+        autoButton: 'quick pick',
+        lines: 'Select how many lines you want to buy',
+        lineName: 'Line',
+        playType: 'Select one play type you want to buy'
+    }
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl = async (translationUrl) => {
+    if (translationUrl) {
+        try {
+            const response = await fetch(translationUrl);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const translations = await response.json();
+            getTranslations(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+const lotteryHakunaTicketCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{--emw--color-background-secondary:var(--emw-hakuna-bg-secondary, #120505);--emw--color-primary:var(--emw-hakuna-color-primary, #c52217);--emw--color-background:var(--emw-hakuna-bg-primary, #2c2525);--emw--color-background-tertiary:var(--emw-hakuna-bg-tertiary, #4f2421);--lottery-button-outline-active-bg:var(--emw-hakuna-bg-tertiary, #4f2421);--lottery-selection-background:var(--emw-hakuna-bg-primary, #2c2525);--lottery-selection-color:var(--emw-hakuna-text-secondary, #b4a5a5);--lottery-selection-group-bullets-gap:10px;--lottery-selection-disabled-background:#392f2f;--lottery-selection-disabled-color:var(--emw-hakuna-bg-secondary, #120505);--lottery-selection-border-radius:6px;--lottery-selection-hover-background:var(--emw-hakuna-bg-tertiary, #4f2421);--lottery-selection-hover-color:var(--emw-hakuna-text-secondary, #b4a5a5)}.hakuna-ticket .icon-btn{display:flex;align-items:center;justify-content:center;height:32px;cursor:pointer;color:var(--emw-hakuna-text-secondary, #b4a5a5);transition:color 0.2s ease, opacity 0.2s ease}.hakuna-ticket .icon-btn.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}.hakuna-ticket-content-selection{display:flex;align-items:center;gap:12px}.hakuna-ticket-content-selection-text{color:var(--emw-hakuna-text-secondary, #b4a5a5);font-size:12px;font-style:normal;font-weight:500;line-height:normal}.hakuna-ticket-content-selection-dots{display:flex;align-items:center;justify-content:center;gap:4px}.hakuna-ticket-content-selection-dots-item{width:10px;height:10px;border-radius:50%;background-color:var(--emw-hakuna-bg-tertiary, #4f2421);transition:background-color 0.3s ease, transform 0.3s ease;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.15)}.hakuna-ticket-content-selection-dots-item.active{background-color:var(--emw-hakuna-color-primary, #c52217);transform:scale(1.06)}.hakuna-ticket-content-bullets{margin:20px 0}.hakuna-ticket-content-bullets.disabled{pointer-events:none;cursor:not-allowed}.hakuna-ticket-content-operation{display:flex;justify-content:space-between}.hakuna-ticket-content-operation--right{display:flex;gap:8px;align-items:center}.hakuna-ticket .cur-selection-btn{display:flex;width:32px;height:32px;justify-content:center;align-items:center;border-radius:6px;background:var(--emw-hakuna-bg-primary, #2c2525);box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.15);font-size:14px;font-weight:500;color:var(--emw-hakuna-text-secondary, #b4a5a5)}.hakuna-ticket .cur-selection-btn.active{color:var(--emw-hakuna-text-primary, #ffffff);font-weight:700;font-size:16px;background:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), var(--emw-hakuna-color-primary, #c52217);box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.15)}.hakuna-ticket-summary-item{display:flex;justify-content:space-between;align-items:center}.hakuna-ticket-summary-selection{display:flex;gap:6px;align-items:center}.hakuna-ticket-summary-operation{display:flex;align-items:center;gap:10px;margin-left:20px}";
+const LotteryHakunaTicketStyle0 = lotteryHakunaTicketCss;
+
+const LotteryHakunaTicket = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ticketUpdateEvent = index.createEvent(this, "ticketUpdate", 7);
+        this.deleteTicket = index.createEvent(this, "deleteTicket", 7);
+        this.editTicket = index.createEvent(this, "editTicket", 7);
+        this.saveTicket = index.createEvent(this, "saveTicket", 7);
+        this.MAIN_SELECTION_NAME = 'mainSelection';
+        this.gameName = 'South Africa';
+        this.allowQuickPick = true;
+        this.highNumber = 6;
+        this.lowNumber = 6;
+        this.maximumAllowed = 6;
+        this.minimumAllowed = 2;
+        this.numberRange = [6];
+        this.useCollapse = true;
+        this.isSubmitted = false;
+        this.ticketId = 1;
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.mbSource = undefined;
+        this.translationUrl = undefined;
+        this.disableDelete = false;
+        this.grids = [];
+        this.ticketDone = [];
+        this.quickPicks = [];
+    }
+    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`);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+        this.fillInGrids(1);
+    }
+    toggleAutoSelection(index) {
+        this.ticketDone = [...this.ticketDone.slice(0, index), true, ...this.ticketDone.slice(index + 1)];
+        this.quickPicks[index] = true;
+        this.clearSingleGrid(index);
+        this.quickPickSelection(index);
+    }
+    toggleResetSelection(index) {
+        this.ticketDone = [...this.ticketDone.slice(0, index), false, ...this.ticketDone.slice(index + 1)];
+        const newQuickPicks = [...this.quickPicks];
+        newQuickPicks[index] = false;
+        this.quickPicks = newQuickPicks;
+        this.clearSingleGrid(index);
+    }
+    clearAllGrid() {
+        this.grids.forEach((_, index) => {
+            this.toggleResetSelection(index);
+        });
+    }
+    toggleResetAllSelection() {
+        this.fillInGrids(1);
+        this.ticketDone = [false];
+        this.quickPicks = [false];
+        this.updateGridStatus([], this.MAIN_SELECTION_NAME, 0);
+        this.editTicket.emit({ ticketId: this.ticketId });
+    }
+    updateGridStatus(arr, selectionType, gridIdx) {
+        const ticket = {
+            selectionType,
+            id: this.ticketId,
+            index: gridIdx,
+            selectedNumbers: arr,
+            quickPicks: this.quickPicks
+        };
+        this.ticketUpdateEvent.emit(ticket);
+    }
+    bulletGroupUpdateSelectionHandler(event) {
+        var _a;
+        event.stopPropagation();
+        const { newSelectedBulletTexts, selectionGroupId } = event.detail;
+        if (!selectionGroupId) {
+            console.error('Miss selectionGroupId');
+            return;
+        }
+        const selectionGroupIdArray = selectionGroupId.split('-');
+        const gridIdx = Number(selectionGroupIdArray[0]);
+        const groupType = selectionGroupIdArray[1];
+        const newSelectedBulletTextsArray = newSelectedBulletTexts
+            ? (_a = newSelectedBulletTexts.split(',')) === null || _a === void 0 ? void 0 : _a.sort((a, b) => Number(a) - Number(b))
+            : [];
+        this.grids = this.grids.map((grid, index) => {
+            if (index === gridIdx) {
+                if (groupType === this.MAIN_SELECTION_NAME) {
+                    return Object.assign(Object.assign({}, grid), { selection: newSelectedBulletTexts });
+                }
+            }
+            return grid;
+        });
+        if (this.numberRange.includes(newSelectedBulletTextsArray.length)) {
+            this.ticketDone = [...this.ticketDone.slice(0, gridIdx), true, ...this.ticketDone.slice(gridIdx + 1)];
+        }
+        else {
+            this.ticketDone = [...this.ticketDone.slice(0, gridIdx), false, ...this.ticketDone.slice(gridIdx + 1)];
+        }
+        this.quickPicks = [...this.quickPicks.slice(0, gridIdx), false, ...this.quickPicks.slice(gridIdx + 1)];
+        this.updateGridStatus(newSelectedBulletTextsArray, groupType, gridIdx);
+    }
+    shuffleArray(array) {
+        const result = [];
+        while (array.length > 0) {
+            const randomIndex = Math.floor(Math.random() * array.length);
+            result.push(array.splice(randomIndex, 1)[0]);
+        }
+        return result;
+    }
+    quickPickSelection(gridIdx) {
+        const { highNumber, lowNumber } = this;
+        const curAllowedSelectionNum = this.numberRange[0];
+        let array = Array.from({ length: highNumber - lowNumber + 1 }, (_, index) => lowNumber + index);
+        array = this.shuffleArray(array);
+        array = array.slice(0, curAllowedSelectionNum);
+        array.sort((a, b) => a - b);
+        this.grids = this.grids.map((grid, index) => {
+            if (index === gridIdx) {
+                return Object.assign(Object.assign({}, grid), { selection: array.join(',') });
+            }
+            return grid;
+        });
+        // qucikpick is only available for the main selection?
+        this.updateGridStatus(array.map((item) => item.toString()), this.MAIN_SELECTION_NAME, gridIdx);
+    }
+    clearSingleGrid(gridIdx) {
+        this.grids = this.grids.map((grid, index) => {
+            if (index === gridIdx) {
+                return Object.assign(Object.assign({}, grid), { selection: '' });
+            }
+            return grid;
+        });
+        this.updateGridStatus([], this.MAIN_SELECTION_NAME, gridIdx);
+    }
+    fillInGrids(numberOfGrids) {
+        const { highNumber, lowNumber } = this;
+        this.grids = Array.from({ length: numberOfGrids }, (_, index) => ({
+            selection: '',
+            bulletTexts: Array.from({ length: highNumber - lowNumber + 1 }, (_, i) => lowNumber + i).join(','),
+            groupIdx: index,
+            isSubmitted: false
+        }));
+    }
+    renderMainPlaceBet() {
+        const curAllowedSelectionNum = this.numberRange[0];
+        return (index.h("div", { class: "hakuna-ticket-content" }, this.grids.map((item, index$1) => {
+            const isGridEmpty = !item.selection;
+            const selectedCount = item.selection ? item.selection.split(',').filter(Boolean).length : 0;
+            return (index.h("div", null, index.h("div", { class: "hakuna-ticket-content-selection" }, index.h("div", { class: "hakuna-ticket-content-selection-text" }, "Pick ", curAllowedSelectionNum, " numbers"), index.h("div", { class: "hakuna-ticket-content-selection-dots" }, Array.from({ length: curAllowedSelectionNum }, (_, i) => i + 1).map((dotIndex) => (index.h("div", { key: dotIndex, class: {
+                    'hakuna-ticket-content-selection-dots-item': true,
+                    active: dotIndex <= selectedCount
+                } }))))), index.h("div", { class: { 'hakuna-ticket-content-bullets': true, disabled: this.isSubmitted } }, index.h("lottery-selection-group", { type: "bet", hasBorder: false, bulletTexts: item.bulletTexts, selectionGroupId: `${item.groupIdx}-${this.MAIN_SELECTION_NAME}`, "selected-bullet-texts": item.selection, maxSelectedCount: curAllowedSelectionNum, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource })), index.h("div", { class: "hakuna-ticket-content-operation", style: { display: 'flex', alignItems: 'center' } }, index.h("div", { class: "hakuna-ticket-content-operation--left" }, index.h("div", { class: { 'icon-btn': true, disabled: isGridEmpty || this.isSubmitted }, onClick: () => !isGridEmpty && this.toggleResetSelection(index$1) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0.833374 9.99996C0.833374 5.39759 4.56433 1.66663 9.16671 1.66663C11.4687 1.66663 13.554 2.60112 15.0613 4.10944C15.5943 4.64284 16.1651 5.30202 16.6667 5.91199V3.33329C16.6667 2.87306 17.0398 2.49996 17.5 2.49996C17.9603 2.49996 18.3334 2.87306 18.3334 3.33329V8.33329C18.3334 8.79353 17.9603 9.16663 17.5 9.16663H12.5C12.0398 9.16663 11.6667 8.79353 11.6667 8.33329C11.6667 7.87306 12.0398 7.49996 12.5 7.49996H15.8077C15.2309 6.77602 14.5138 5.91942 13.8824 5.28755C12.6749 4.07924 11.0087 3.33329 9.16671 3.33329C5.48481 3.33329 2.50004 6.31806 2.50004 9.99996C2.50004 13.6819 5.48481 16.6666 9.16671 16.6666C12.2048 16.6666 14.7703 14.6337 15.5729 11.8523C15.7005 11.4101 16.1624 11.155 16.6046 11.2826C17.0468 11.4102 17.3018 11.8721 17.1742 12.3143C16.1713 15.79 12.9671 18.3333 9.16671 18.3333C4.56433 18.3333 0.833374 14.6023 0.833374 9.99996Z", fill: "currentColor" })))), index.h("div", { class: "hakuna-ticket-content-operation--right" }, this.allowQuickPick && (index.h("lottery-button", { variant: "outline", color: "var(--emw-hakuna-color-primary, #C52217)", size: "small", onClick: this.toggleAutoSelection.bind(this, index$1), disabled: this.isSubmitted }, index.h("span", { slot: "icon-left" }, index.h("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.81557 0.631525C8.05311 0.734641 8.19424 0.982014 8.16212 1.23897L7.66075 5.24995L11.2745 5.24995C11.4151 5.24992 11.5575 5.2499 11.6738 5.26043C11.7838 5.27039 11.9945 5.29674 12.1772 5.44439C12.3864 5.61342 12.5062 5.86924 12.5021 6.13814C12.4986 6.37303 12.384 6.55174 12.3212 6.64264C12.2548 6.73875 12.1636 6.84811 12.0736 6.95609L6.86476 13.2067C6.69898 13.4057 6.42189 13.4715 6.18435 13.3684C5.94681 13.2653 5.80568 13.0179 5.8378 12.7609L6.33917 8.74995L2.72543 8.74995C2.58485 8.74998 2.44246 8.75001 2.32613 8.73947C2.21611 8.72951 2.00543 8.70316 1.82272 8.55551C1.61355 8.38648 1.49373 8.13066 1.49778 7.86176C1.50132 7.62688 1.61595 7.44816 1.67873 7.35726C1.74512 7.26115 1.8363 7.15177 1.92632 7.04379C1.93078 7.03844 1.93523 7.0331 1.93968 7.02776L7.13516 0.793177C7.30094 0.59424 7.57803 0.52841 7.81557 0.631525ZM2.9954 7.58328H6.99996C7.16728 7.58328 7.32654 7.65513 7.43727 7.78057C7.548 7.906 7.59954 8.07295 7.57879 8.23897L7.24224 10.9314L11.0045 6.41662H6.99996C6.83264 6.41662 6.67338 6.34477 6.56265 6.21934C6.45192 6.0939 6.40038 5.92696 6.42113 5.76093L6.75768 3.06855L2.9954 7.58328Z", fill: "white" }))), index.h("span", { style: { color: '#fff' } }, translate('quickPick', this.language)))), index.h("lottery-button", { variant: "primary", color: "var(--emw-hakuna-color-primary, #C52217)", size: "small", text: translate('submit', this.language), disabled: !this.ticketDone[index$1] || this.isSubmitted, onClick: this.handleSaveTicket.bind(this) })))));
+        })));
+    }
+    renderCurSelectionButton(status, text) {
+        if (status === CurSelectionBtnType.UNSELECTED) {
+            return index.h("div", { class: "cur-selection-btn unselected" }, "?");
+        }
+        else {
+            return index.h("div", { class: "cur-selection-btn active" }, " ", text);
+        }
+    }
+    handleEditTicket() {
+        var _a;
+        const { ticketId } = this;
+        this.editTicket.emit({ ticketId });
+        (_a = this.collapseComponent) === null || _a === void 0 ? void 0 : _a.toggle();
+    }
+    handleDelTicket() {
+        const { ticketId } = this;
+        this.deleteTicket.emit({ ticketId });
+    }
+    handleSaveTicket() {
+        var _a;
+        this.saveTicket.emit({ ticketId: this.ticketId });
+        (_a = this.collapseComponent) === null || _a === void 0 ? void 0 : _a.toggle();
+    }
+    renderCurSelection() {
+        const curAllowedSelectionNum = this.numberRange[0];
+        return (index.h("div", { class: "hakuna-ticket-summary" }, this.grids.map((item, gridIndex) => {
+            const selectionArr = item.selection ? item.selection.split(',').filter(Boolean) : [];
+            selectionArr.sort((a, b) => Number(a) - Number(b));
+            return (index.h("div", { key: gridIndex, class: "hakuna-ticket-summary-item" }, index.h("div", { class: "hakuna-ticket-summary-selection" }, Array.from({ length: curAllowedSelectionNum }).map((_, idx) => this.renderCurSelectionButton(idx < selectionArr.length && this.isSubmitted
+                ? CurSelectionBtnType.SELECTED
+                : CurSelectionBtnType.UNSELECTED, selectionArr[idx]))), index.h("div", { class: "hakuna-ticket-summary-operation" }, index.h("div", { class: { 'icon-btn': true, disabled: !this.isSubmitted }, onClick: () => this.isSubmitted && this.handleEditTicket() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "19", height: "19", viewBox: "0 0 19 19", fill: "none" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.9173 0.757664C14.9276 -0.252556 16.5654 -0.252554 17.5757 0.757667C18.5859 1.76789 18.5859 3.40578 17.5757 4.41601L9.65042 12.3413C9.63402 12.3577 9.61776 12.3739 9.60164 12.3901C9.36341 12.6288 9.15337 12.8392 8.90014 12.9944C8.67769 13.1307 8.43517 13.2312 8.18147 13.2921C7.89269 13.3614 7.59538 13.3611 7.25815 13.3608C7.23533 13.3608 7.21232 13.3608 7.18912 13.3608H5.80132C5.34361 13.3608 4.97256 12.9897 4.97256 12.532V11.1442C4.97256 11.121 4.97254 11.098 4.97251 11.0752C4.9722 10.738 4.97192 10.4406 5.04125 10.1519C5.10216 9.89817 5.20262 9.65564 5.33894 9.43319C5.49411 9.17997 5.70454 8.96993 5.94322 8.7317C5.95937 8.71557 5.97566 8.69932 5.99206 8.68291L13.9173 0.757664ZM16.4036 1.92971C16.0407 1.5668 15.4523 1.5668 15.0894 1.92971L7.16411 9.85496C6.84954 10.1695 6.79154 10.2351 6.75221 10.2992C6.70677 10.3734 6.67328 10.4542 6.65298 10.5388C6.63541 10.612 6.63008 10.6994 6.63008 11.1442V11.7032H7.18912C7.63398 11.7032 7.72134 11.6979 7.79453 11.6803C7.8791 11.66 7.95994 11.6265 8.03409 11.5811C8.09827 11.5418 8.16381 11.4838 8.47837 11.1692L16.4036 3.24396C16.7665 2.88104 16.7665 2.29263 16.4036 1.92971ZM4.7726 1.75807L8.28763 1.75807C8.74535 1.75807 9.11639 2.12912 9.11639 2.58684C9.11639 3.04455 8.74535 3.4156 8.28763 3.4156H4.80683C4.09693 3.4156 3.61434 3.41624 3.24132 3.44672C2.87798 3.47641 2.69217 3.53021 2.56255 3.59626C2.25067 3.75517 1.9971 4.00874 1.83819 4.32062C1.77214 4.45024 1.71833 4.63605 1.68865 4.9994C1.65817 5.37241 1.65753 5.855 1.65753 6.5649V13.5265C1.65753 14.2364 1.65817 14.719 1.68865 15.092C1.71833 15.4554 1.77214 15.6412 1.83819 15.7708C1.9971 16.0827 2.25067 16.3362 2.56255 16.4951C2.69217 16.5612 2.87798 16.615 3.24132 16.6447C3.61434 16.6752 4.09692 16.6758 4.80683 16.6758H11.7684C12.4783 16.6758 12.9609 16.6752 13.3339 16.6447C13.6973 16.615 13.8831 16.5612 14.0127 16.4951C14.3246 16.3362 14.5782 16.0827 14.7371 15.7708C14.8031 15.6412 14.8569 15.4554 14.8866 15.092C14.9171 14.719 14.9177 14.2364 14.9177 13.5265V10.0457C14.9177 9.58799 15.2888 9.21694 15.7465 9.21694C16.2042 9.21694 16.5753 9.58799 16.5753 10.0457V13.5608C16.5753 14.2279 16.5753 14.7785 16.5386 15.227C16.5006 15.6928 16.4189 16.1211 16.2139 16.5233C15.8961 17.1471 15.389 17.6542 14.7652 17.972C14.363 18.177 13.9348 18.2586 13.4689 18.2967C13.0204 18.3334 12.4698 18.3333 11.8027 18.3333H4.77258C4.10546 18.3333 3.55487 18.3334 3.10635 18.2967C2.6405 18.2586 2.21228 18.177 1.81005 17.972C1.18628 17.6542 0.679145 17.1471 0.36132 16.5233C0.156374 16.1211 0.0746879 15.6928 0.0366268 15.227C-1.89071e-05 14.7785 -1.02138e-05 14.2279 3.57439e-07 13.5607V6.53067C-1.02138e-05 5.86354 -1.89071e-05 5.31294 0.0366268 4.86442C0.0746879 4.39858 0.156374 3.97035 0.36132 3.56812C0.679145 2.94436 1.18628 2.43722 1.81005 2.11939C2.21228 1.91445 2.6405 1.83276 3.10635 1.7947C3.55487 1.75805 4.10547 1.75806 4.7726 1.75807Z", fill: "currentColor" }))), index.h("div", { class: { 'icon-btn': true, disabled: this.disableDelete }, onClick: () => !this.disableDelete && this.handleDelTicket() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.30123 0.833253H10.6988C11.1381 0.833238 11.5171 0.833225 11.8292 0.858728C12.1587 0.885646 12.4863 0.945075 12.8017 1.10574C13.2721 1.34542 13.6545 1.72787 13.8942 2.19828C14.0549 2.51359 14.1143 2.84128 14.1412 3.17073C14.1641 3.45054 14.1664 3.78406 14.1667 4.16659H17.5C17.9603 4.16659 18.3334 4.53968 18.3334 4.99992C18.3334 5.46016 17.9603 5.83325 17.5 5.83325H16.6667V14.3677C16.6667 15.0385 16.6667 15.5921 16.6299 16.0431C16.5916 16.5115 16.5095 16.9421 16.3034 17.3466C15.9838 17.9738 15.4739 18.4837 14.8467 18.8033C14.4422 19.0094 14.0116 19.0915 13.5432 19.1298C13.0922 19.1666 12.5386 19.1666 11.8678 19.1666H8.13225C7.46145 19.1666 6.90782 19.1666 6.45683 19.1298C5.98842 19.0915 5.55783 19.0094 5.15339 18.8033C4.52618 18.4837 4.01624 17.9738 3.69667 17.3466C3.49059 16.9421 3.40845 16.5115 3.37018 16.0431C3.33333 15.5921 3.33334 15.0385 3.33335 14.3677L3.33335 5.83325H2.50002C2.03978 5.83325 1.66669 5.46016 1.66669 4.99992C1.66669 4.53968 2.03978 4.16659 2.50002 4.16659H5.83338C5.83361 3.78406 5.83597 3.45054 5.85883 3.17073C5.88575 2.84128 5.94518 2.51359 6.10584 2.19828C6.34552 1.72787 6.72797 1.34542 7.19838 1.10574C7.51369 0.945075 7.84138 0.885646 8.17083 0.858728C8.48297 0.833225 8.86194 0.833238 9.30123 0.833253ZM5.00002 5.83325V14.3333C5.00002 15.0471 5.00067 15.5323 5.03131 15.9074C5.06116 16.2727 5.11527 16.4596 5.18168 16.5899C5.34146 16.9035 5.59643 17.1585 5.91004 17.3183C6.04037 17.3847 6.22721 17.4388 6.59255 17.4686C6.96763 17.4993 7.45287 17.4999 8.16669 17.4999H11.8334C12.5472 17.4999 13.0324 17.4993 13.4075 17.4686C13.7728 17.4388 13.9597 17.3847 14.09 17.3183C14.4036 17.1585 14.6586 16.9035 14.8184 16.5899C14.8848 16.4596 14.9389 16.2727 14.9687 15.9074C14.9994 15.5323 15 15.0471 15 14.3333V5.83325H5.00002ZM12.5 4.16659H7.50008C7.50045 3.779 7.503 3.51407 7.51996 3.30645C7.53846 3.08006 7.56985 2.99613 7.59085 2.95493C7.67074 2.79813 7.79823 2.67064 7.95503 2.59075C7.99623 2.56975 8.08016 2.53836 8.30655 2.51986C8.54266 2.50057 8.85289 2.49992 9.33335 2.49992H10.6667C11.1471 2.49992 11.4574 2.50057 11.6935 2.51986C11.9199 2.53836 12.0038 2.56975 12.045 2.59075C12.2018 2.67064 12.3293 2.79813 12.4092 2.95493C12.4302 2.99613 12.4616 3.08006 12.4801 3.30645C12.497 3.51407 12.4996 3.779 12.5 4.16659ZM8.33335 8.74992C8.79359 8.74992 9.16669 9.12302 9.16669 9.58325V13.7499C9.16669 14.2102 8.79359 14.5833 8.33335 14.5833C7.87312 14.5833 7.50002 14.2102 7.50002 13.7499V9.58325C7.50002 9.12302 7.87312 8.74992 8.33335 8.74992ZM11.6667 8.74992C12.1269 8.74992 12.5 9.12302 12.5 9.58325V13.7499C12.5 14.2102 12.1269 14.5833 11.6667 14.5833C11.2064 14.5833 10.8334 14.2102 10.8334 13.7499V9.58325C10.8334 9.12302 11.2064 8.74992 11.6667 8.74992Z", fill: "currentColor" }))))));
+        })));
+    }
+    render() {
+        return (index.h("div", { key: 'ec4162e1484e14c2ae0ac18961288319ef4bda2b', class: "hakuna-ticket", ref: (el) => (this.stylingContainer = el) }, index.h("lottery-hakuna-collapse", { key: 'f8ab5f8595947e840fdeb549dca5582eb5d54f0a', ref: (el) => (this.collapseComponent = el), "header-title": `${this.gameName} #${this.ticketId}`, footer: true, collapsed: false, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }, this.renderMainPlaceBet(), index.h("div", { key: 'e68dd5bd71f166d26d75b73d747bc3749bd8edd2', slot: "summary" }, this.renderCurSelection()))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryHakunaTicket.style = LotteryHakunaTicketStyle0;
+
+exports.LotteryHakunaTicket = LotteryHakunaTicket;
+exports.setClientStyling = setClientStyling;
+exports.setClientStylingURL = setClientStylingURL;
+exports.setStreamStyling = setStreamStyling;

package/dist/cjs/lottery-hakuna-ticket.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-14ac4886.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-hakuna-ticket.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([["lottery-button_6.cjs",[[1,"lottery-hakuna-ticket",{"gameName":[513,"game-name"],"allowQuickPick":[516,"allow-quick-pick"],"highNumber":[514,"high-number"],"lowNumber":[514,"low-number"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"numberRange":[16],"useCollapse":[516,"use-collapse"],"isSubmitted":[516,"is-submitted"],"ticketId":[514,"ticket-id"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"],"translationUrl":[520,"translation-url"],"disableDelete":[516,"disable-delete"],"grids":[32],"ticketDone":[32],"quickPicks":[32]},[[4,"resetAllTicketSelection","toggleResetAllSelection"],[0,"bulletGroupUpdateSelection","bulletGroupUpdateSelectionHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-selection-group",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"splitToken":[513,"split-token"],"selectionGroupId":[513,"selection-group-id"],"selectionGroupLabel":[513,"selection-group-label"],"type":[513],"selectedBulletTexts":[513,"selected-bullet-texts"],"maxSelectedCount":[514,"max-selected-count"],"maxDisplayBulletsCount":[514,"max-display-bullets-count"],"bulletTexts":[513,"bullet-texts"],"maxIntegerBulletText":[514,"max-integer-bullet-text"],"minIntegerBulletText":[514,"min-integer-bullet-text"],"bulletTextType":[513,"bullet-text-type"],"hasBorder":[516,"has-border"],"hasBackground":[516,"has-background"],"dialogTitle":[513,"dialog-title"],"dialogInputPlaceholder":[513,"dialog-input-placeholder"],"dialogConfig":[32],"inputInfo":[32]},[[0,"lotteryBulletClick","lotteryBulletClickHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-hakuna-collapse",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"headerTitle":[513,"header-title"],"collapsed":[516],"isOpen":[32],"hasSummary":[32],"toggle":[64]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-button",{"variant":[513],"size":[513],"color":[513],"disabled":[516],"loading":[516],"text":[513],"mbSource":[513,"mb-source"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"ripples":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-selection",{"value":[520],"text":[513],"idx":[514],"type":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"hasBorder":[516,"has-border"],"hasBackground":[516,"has-background"],"deleteIconSvg":[513,"delete-icon-svg"],"deleteIconWidth":[513,"delete-icon-width"],"deleteIconHeight":[513,"delete-icon-height"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-tipping-dialog",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"visible":[516],"dialogTitle":[1,"dialog-title"],"width":[1],"closable":[4],"mask":[4],"maskClosable":[4,"mask-closable"],"animationDuration":[2,"animation-duration"],"fullscreen":[4],"showFooter":[4,"show-footer"],"showCancelBtn":[4,"show-cancel-btn"],"language":[513],"translationUrl":[520,"translation-url"],"dialogClass":[1,"dialog-class"],"dialogStyle":[16]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,43 @@
+{
+  "entries": [
+    "components/lottery-hakuna-ticket/lottery-hakuna-ticket.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/lottery-button",
+      "tags": [
+        "lottery-button"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-hakuna-collapse",
+      "tags": [
+        "lottery-hakuna-collapse"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-selection",
+      "tags": [
+        "lottery-selection"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-selection-group",
+      "tags": [
+        "lottery-selection-group"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-tipping-dialog",
+      "tags": [
+        "lottery-tipping-dialog"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/lottery-hakuna-ticket/index.js

@@ -0,0 +1 @@
+export { LotteryHakunaTicket } from './lottery-hakuna-ticket';

package/dist/collection/components/lottery-hakuna-ticket/lottery-hakuna-ticket.css

@@ -0,0 +1,113 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
+:host {
+  --emw--color-background-secondary: var(--emw-hakuna-bg-secondary, #120505);
+  --emw--color-primary: var(--emw-hakuna-color-primary, #c52217);
+  --emw--color-background: var(--emw-hakuna-bg-primary, #2c2525);
+  --emw--color-background-tertiary: var(--emw-hakuna-bg-tertiary, #4f2421);
+  --lottery-button-outline-active-bg: var(--emw-hakuna-bg-tertiary, #4f2421);
+  --lottery-selection-background: var(--emw-hakuna-bg-primary, #2c2525);
+  --lottery-selection-color: var(--emw-hakuna-text-secondary, #b4a5a5);
+  --lottery-selection-group-bullets-gap: 10px;
+  --lottery-selection-disabled-background: #392f2f;
+  --lottery-selection-disabled-color: var(--emw-hakuna-bg-secondary, #120505);
+  --lottery-selection-border-radius: 6px;
+  --lottery-selection-hover-background: var(--emw-hakuna-bg-tertiary, #4f2421);
+  --lottery-selection-hover-color: var(--emw-hakuna-text-secondary, #b4a5a5);
+}
+
+.hakuna-ticket .icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  cursor: pointer;
+  color: var(--emw-hakuna-text-secondary, #b4a5a5);
+  transition: color 0.2s ease, opacity 0.2s ease;
+}
+.hakuna-ticket .icon-btn.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+.hakuna-ticket-content-selection {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.hakuna-ticket-content-selection-text {
+  color: var(--emw-hakuna-text-secondary, #b4a5a5);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.hakuna-ticket-content-selection-dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+.hakuna-ticket-content-selection-dots-item {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: var(--emw-hakuna-bg-tertiary, #4f2421);
+  transition: background-color 0.3s ease, transform 0.3s ease;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+}
+.hakuna-ticket-content-selection-dots-item.active {
+  background-color: var(--emw-hakuna-color-primary, #c52217);
+  transform: scale(1.06);
+}
+.hakuna-ticket-content-bullets {
+  margin: 20px 0;
+}
+.hakuna-ticket-content-bullets.disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.hakuna-ticket-content-operation {
+  display: flex;
+  justify-content: space-between;
+}
+.hakuna-ticket-content-operation--right {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.hakuna-ticket .cur-selection-btn {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  background: var(--emw-hakuna-bg-primary, #2c2525);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--emw-hakuna-text-secondary, #b4a5a5);
+}
+.hakuna-ticket .cur-selection-btn.active {
+  color: var(--emw-hakuna-text-primary, #ffffff);
+  font-weight: 700;
+  font-size: 16px;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), var(--emw-hakuna-color-primary, #c52217);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+}
+.hakuna-ticket-summary-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.hakuna-ticket-summary-selection {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.hakuna-ticket-summary-operation {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: 20px;
+}