@everymatrix/lottery-oddsbom-ticket-bet 0.0.1

package/dist/collection/components/lottery-oddsbom-ticket-bet/lottery-oddsbom-ticket-bet.js

@@ -0,0 +1,782 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { fetchRequest, generateCombinations, formatDate, showNotification, toQueryParams, formatNumber, thousandSeparator } from "../../utils/utils";
+import "../../../../../lottery-tipping-dialog/dist/types/index";
+import { MAX_DISPLAY_OPTION_NUM } from "../../model/index.type";
+import { isToday } from "date-fns";
+import "../../../../../../../libs/vaadin-facade/index";
+import { translate, resolveTranslationUrl } from "../../utils/locale.utils";
+import { fetchSaleStatistics } from "../../utils/api";
+export class LotteryOddsbomTicketBet {
+    constructor() {
+        this.onStakeChange = (e) => {
+            this.gameInfo = Object.assign(Object.assign({}, this.gameInfo), { stake: e.detail.value });
+        };
+        this.generateSelection = () => {
+            return this.ticketBoardInfo.map((item) => {
+                const addArr1 = item.addSelections[0].map((num) => String(num));
+                const arr1 = item.selections[0]
+                    .filter((bullet) => bullet.isSelected)
+                    .map((bullet) => String(bullet.text))
+                    .concat(addArr1);
+                const addArr2 = item.addSelections[1].map((num) => String(num));
+                const arr2 = item.selections[1]
+                    .filter((bullet) => bullet.isSelected)
+                    .map((bullet) => String(bullet.text))
+                    .concat(addArr2);
+                const combinations = generateCombinations(arr1, arr2);
+                return [[...combinations]];
+            });
+        };
+        this.endpoint = undefined;
+        this.endpointTicket = undefined;
+        this.endpointLotteryBe = undefined;
+        this.gameId = undefined;
+        this.sessionId = undefined;
+        this.drawId = undefined;
+        this.playerId = '';
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.isLoading = false;
+        this.isLoadingOdds = false;
+        this.isSubmitLoading = false;
+        this.matchInfo = undefined;
+        this.ticketBoardInfo = [];
+        this.gameConfig = {
+            minScore: 0,
+            maxScore: 10,
+            minCount: 1,
+            maxCount: 10,
+            stopTime: '',
+            gameBackEndId: '',
+            stakes: [
+                {
+                    label: '1',
+                    value: '1'
+                }
+            ]
+        };
+        this.addSelectionConfig = {
+            needAddMoreBtn: false,
+            maxOverScore: 0,
+            maxScore: 0
+        };
+        this.gameInfo = {
+            stake: 1,
+            quickPick: 2,
+            lines: 0
+        };
+        this.dialogConfig = {
+            title: '',
+            visible: false
+        };
+        this.oddsData = {
+            highest: '',
+            lowest: '',
+            filterdOdds: '',
+            isSearching: false
+        };
+        this.oddsInfo = {
+            count: 0,
+            items: [],
+            total: 0
+        };
+        this.oddsQuery = {
+            limit: 10,
+            offset: 0,
+            ascending: true
+        };
+        this.saleStatisticsInfo = {};
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+        this.initData();
+    }
+    async initData() {
+        await this.fetchGameData();
+        await this.fetchOddsData();
+    }
+    async fetchGameData() {
+        this.isLoading = true;
+        try {
+            await this.getGameConfig();
+            await this.getDrawEventData();
+            this.initTicketBoard();
+        }
+        catch (err) {
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async fetchOddsData() {
+        this.isLoadingOdds = true;
+        try {
+            const res = await this.getOddsData({ ascending: true, limit: 10, offset: 0 });
+            this.oddsData.lowest = res.minItem.odds;
+            this.oddsData.highest = res.maxItem.odds;
+            this.oddsInfo = res;
+        }
+        catch (err) {
+        }
+        finally {
+            this.isLoadingOdds = false;
+        }
+    }
+    async 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();
+    }
+    get canSubmit() {
+        return this.ticketBoardInfo.every((ticket) => {
+            return ticket.selections.every((selection, idx) => {
+                return (selection.filter((bullet) => bullet.isSelected).length + ticket.addSelections[idx].length >=
+                    this.gameConfig.minCount);
+            });
+        });
+    }
+    get oddsChartDialogWidth() {
+        var _a;
+        if (((_a = this.oddsInfo) === null || _a === void 0 ? void 0 : _a.total) == 0)
+            return '480px';
+        if (this.ticketBoardInfo.length <= 2)
+            return '360px';
+        else
+            return `${this.ticketBoardInfo.length * 180 + 48}px`;
+    }
+    formattedStopTime(stopTime) {
+        let _temp = '';
+        if (!stopTime) {
+            return _temp;
+        }
+        _temp = formatDate({ date: stopTime, format: 'dd/MM/yyyy HH:mm' });
+        if (isToday(new Date(stopTime))) {
+            _temp = formatDate({ date: stopTime, format: 'HH:mm' });
+        }
+        return _temp;
+    }
+    updateBulletDisabledState(ticketBoardInfo, matchIdx, selectionIdx, maxSelected) {
+        const targetMatch = ticketBoardInfo[matchIdx];
+        const targetSelection = targetMatch.selections[selectionIdx];
+        const targetAddSelection = targetMatch.addSelections[selectionIdx];
+        const selectedCount = targetSelection.filter((bullet) => bullet.isSelected).length + targetAddSelection.length;
+        const updatedSelection = targetSelection.map((bullet) => {
+            if (!bullet.isSelected) {
+                return Object.assign(Object.assign({}, bullet), { isDisabled: selectedCount === maxSelected });
+            }
+            return bullet;
+        });
+        ticketBoardInfo[matchIdx].selections[selectionIdx] = updatedSelection;
+        return ticketBoardInfo;
+    }
+    getMatchCombinationCount(match) {
+        const group1Selected = match.selections[0].filter((bullet) => bullet.isSelected).length;
+        const group1Add = match.addSelections[0].length;
+        const group1Total = group1Selected + group1Add;
+        const group2Selected = match.selections[1].filter((bullet) => bullet.isSelected).length;
+        const group2Add = match.addSelections[1].length;
+        const group2Total = group2Selected + group2Add;
+        return group1Total * group2Total;
+    }
+    calculateTotalLines() {
+        if (!this.canSubmit) {
+            return 0;
+        }
+        return this.ticketBoardInfo.reduce((total, match) => {
+            const matchCount = this.getMatchCombinationCount(match);
+            return total * matchCount;
+        }, 1);
+    }
+    updateLines() {
+        const newLines = this.calculateTotalLines();
+        this.gameInfo = Object.assign(Object.assign({}, this.gameInfo), { lines: newLines });
+    }
+    handleTicketBoardInfoChange() {
+        this.updateLines();
+    }
+    handleCanSubmitChange() {
+        this.updateLines();
+    }
+    initTicketBoard() {
+        const { minScore, maxScore } = this.gameConfig;
+        if (maxScore - minScore + 1 > MAX_DISPLAY_OPTION_NUM) {
+            this.addSelectionConfig.needAddMoreBtn = true;
+            this.addSelectionConfig.maxOverScore = minScore + MAX_DISPLAY_OPTION_NUM;
+            this.addSelectionConfig.maxScore = maxScore;
+        }
+        this.ticketBoardInfo = this.matchInfo.map((drawEvent) => {
+            return {
+                matchId: drawEvent.eventId,
+                matchName: drawEvent.eventName,
+                minScore: 0,
+                maxScore: 0,
+                selections: [[], []],
+                addSelections: [[], []]
+            };
+        });
+        this.ticketBoardInfo = this.ticketBoardInfo.map((ticketBoardItem) => {
+            let selection = new Array(maxScore - minScore + 1).fill(0).map((_, idx) => ({
+                text: idx + minScore,
+                idx,
+                isSelected: false,
+                isDisabled: false,
+                isAddMoreBtn: false
+            }));
+            if (this.addSelectionConfig.needAddMoreBtn) {
+                selection = selection.slice(0, MAX_DISPLAY_OPTION_NUM);
+                selection.push({
+                    text: this.addSelectionConfig.maxOverScore,
+                    idx: -1,
+                    isSelected: false,
+                    isDisabled: false,
+                    isAddMoreBtn: true
+                });
+            }
+            return Object.assign(Object.assign({}, ticketBoardItem), { minScore,
+                maxScore, selections: [selection, selection] });
+        });
+    }
+    async getGameConfig() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        try {
+            const res = await fetchRequest(`${this.endpoint}/games/${this.gameId}`, 'GET');
+            this.rawGameConfig = res;
+            console.log('in getgameconfig', res, this.rawGameConfig);
+            const { minRow = 0, maxRow = 0 } = (_f = (_e = (_d = (_c = (_b = (_a = res === null || res === void 0 ? void 0 : res.rules) === null || _a === void 0 ? void 0 : _a.poolGame) === null || _b === void 0 ? void 0 : _b.outcomeRanges) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.bettingType) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : {};
+            const { minCount = 0, maxCount = 0 } = (_m = (_l = (_k = (_j = (_h = (_g = res === null || res === void 0 ? void 0 : res.rules) === null || _g === void 0 ? void 0 : _g.poolGame) === null || _h === void 0 ? void 0 : _h.outcomeRanges) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.selectRule) === null || _l === void 0 ? void 0 : _l[0]) !== null && _m !== void 0 ? _m : {};
+            const minScore = minRow;
+            const maxScore = maxRow;
+            this.gameConfig = Object.assign(Object.assign({}, this.gameConfig), { minScore,
+                maxScore,
+                minCount,
+                maxCount, gameBackEndId: res.type });
+            this.gameConfig.stakes = res.rules.stakes.map((item) => {
+                return { value: item.value, label: item.value };
+            });
+            this.gameConfig.stopTime = res.currentDraw.wagerCloseTime;
+            this.dialogConfig.title = `${res.name} - ${translate('oddsChart', this.language)}`;
+            this.updateSaleStatistics();
+        }
+        catch (e) { }
+    }
+    async updateSaleStatistics() {
+        var _a;
+        this.saleStatisticsInfo = await fetchSaleStatistics({
+            endpoint: this.endpointLotteryBe,
+            gameId: (_a = this.rawGameConfig) === null || _a === void 0 ? void 0 : _a.type,
+            drawId: this.drawId
+        });
+    }
+    async getDrawEventData() {
+        try {
+            const res = await fetchRequest(`${this.endpoint}/games/${this.rawGameConfig.type}/draws/${this.drawId}/findDrawEvents`, 'GET');
+            this.matchInfo = res;
+        }
+        catch (e) { }
+    }
+    handleOddsBomBulletGroupToggle(event) {
+        const { bulletSelctionArr, matchIdx, selectionIdx } = event.detail;
+        let newTicketBoardInfo = [...this.ticketBoardInfo];
+        newTicketBoardInfo[matchIdx].selections[selectionIdx] = bulletSelctionArr;
+        newTicketBoardInfo = this.updateBulletDisabledState(newTicketBoardInfo, matchIdx, selectionIdx, this.gameConfig.maxCount);
+        this.ticketBoardInfo = [...newTicketBoardInfo];
+    }
+    handleOddsBomBulletAddedByMoreBtnDelete(event) {
+        const { delText, matchIdx, selectionIdx } = event.detail;
+        let newTicketBoardInfo = [...this.ticketBoardInfo];
+        newTicketBoardInfo[matchIdx].addSelections[selectionIdx] = newTicketBoardInfo[matchIdx].addSelections[selectionIdx].filter((item) => item !== delText);
+        newTicketBoardInfo = this.updateBulletDisabledState(newTicketBoardInfo, matchIdx, selectionIdx, this.gameConfig.maxCount);
+        this.ticketBoardInfo = [...newTicketBoardInfo];
+    }
+    handleOddsBomAddMoreToMatch(event) {
+        const { matchIdx, selectionIdx, value } = event.detail;
+        let newTicketBoardInfo = [...this.ticketBoardInfo];
+        const newAddSelections = [...newTicketBoardInfo[matchIdx].addSelections[selectionIdx], value].sort((a, b) => a - b);
+        newTicketBoardInfo[matchIdx].addSelections[selectionIdx] = newAddSelections;
+        newTicketBoardInfo = this.updateBulletDisabledState(newTicketBoardInfo, matchIdx, selectionIdx, this.gameConfig.maxCount);
+        this.ticketBoardInfo = [...newTicketBoardInfo];
+    }
+    handleOddsBomBoardClear() {
+        this.initTicketBoard();
+    }
+    handleOddsChartFillIn(event) {
+        const { fillInNums } = event.detail;
+        const match1FillInNums = fillInNums.map((item) => item.split(':')[0]).map((item) => Number(item));
+        const match2FillInNums = fillInNums.map((item) => item.split(':')[1]).map((item) => Number(item));
+        let newTicketBoardInfo = [...this.ticketBoardInfo];
+        newTicketBoardInfo = this.ticketBoardInfo.map((item, matchIdx) => {
+            let addSelction1 = [...item.addSelections[0]];
+            let addSelction2 = [...item.addSelections[1]];
+            if (match1FillInNums[matchIdx] >= this.addSelectionConfig.maxOverScore) {
+                addSelction1 = [...addSelction1, match1FillInNums[matchIdx]];
+            }
+            if (match2FillInNums[matchIdx] >= this.addSelectionConfig.maxOverScore) {
+                addSelction2 = [...addSelction2, match2FillInNums[matchIdx]];
+            }
+            return Object.assign(Object.assign({}, item), { selections: [
+                    item.selections[0].map((bullet) => {
+                        if (match1FillInNums[matchIdx] == Number(bullet.text)) {
+                            return Object.assign(Object.assign({}, bullet), { isSelected: true });
+                        }
+                        return bullet;
+                    }),
+                    item.selections[1].map((bullet) => {
+                        if (match2FillInNums[matchIdx] == Number(bullet.text)) {
+                            return Object.assign(Object.assign({}, bullet), { isSelected: true });
+                        }
+                        return bullet;
+                    })
+                ], addSelections: [addSelction1, addSelction2] });
+        });
+        this.ticketBoardInfo = [...newTicketBoardInfo];
+    }
+    async handleSubmit() {
+        var _a, _b, _c, _d;
+        const selection = this.generateSelection();
+        const body = {
+            playerId: this.playerId,
+            tickets: [
+                {
+                    startingDrawId: (_b = (_a = this.rawGameConfig) === null || _a === void 0 ? void 0 : _a.currentDraw) === null || _b === void 0 ? void 0 : _b.id,
+                    addon: false,
+                    amount: String(Number(this.gameInfo.stake) * this.gameInfo.lines),
+                    currency: this.rawGameConfig.rules.stakes[0].currency,
+                    selection: [
+                        {
+                            poolGameSelections: selection,
+                            multiplier: false,
+                            quickPick: false,
+                            betType: this.rawGameConfig.rules.poolGame.playTypes[0].betTypeId,
+                            betName: this.rawGameConfig.rules.betTypes[0].name,
+                            stake: Number(this.gameInfo.stake)
+                        }
+                    ],
+                    multiplier: false,
+                    multipierNum: 1,
+                    quickPick: false,
+                    gameName: this.rawGameConfig.name
+                }
+            ]
+        };
+        try {
+            this.isSubmitLoading = true;
+            const res = await fetchRequest(`${this.endpointTicket}/tickets`, 'POST', body, {
+                Authorization: `Bearer ${this.sessionId}`
+            });
+            if (res.state === 'Error') {
+                showNotification({ message: (_d = (_c = res === null || res === void 0 ? void 0 : res.errorDetail) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : 'Fail to purchase ticket.', theme: 'error' });
+            }
+            else {
+                showNotification({ message: translate('ticketSuccess', this.language), theme: 'success' });
+                this.updateSaleStatistics();
+            }
+            this.initTicketBoard();
+        }
+        catch (e) {
+            console.log(e);
+            showNotification({ message: e.message, theme: 'error' });
+        }
+        finally {
+            this.isSubmitLoading = false;
+        }
+    }
+    async getOddsData(query) {
+        try {
+            const { drawId } = this;
+            const params = Object.assign({ gameId: this.rawGameConfig.type, drawId }, query);
+            return await fetchRequest(`${this.endpointLotteryBe}/api/v1/lottery/core/widget/poolgame/statistic/realtime/odds${toQueryParams(params)}`, 'GET');
+        }
+        catch (_a) { }
+    }
+    handleOpenOddsChart() {
+        this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: true });
+        setTimeout(() => {
+            if (this.childRef) {
+                this.childRef.initOddsChart();
+            }
+            else {
+                console.warn('childRef is not defined');
+            }
+        }, 0);
+    }
+    handleCloseOddsChart() {
+        var _a;
+        this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: false });
+        (_a = this.childRef) === null || _a === void 0 ? void 0 : _a.closeOddsChart();
+        this.oddsQuery = Object.assign(Object.assign({}, this.oddsQuery), { limit: 10, offset: 0, ascending: true });
+    }
+    async handleOddsQueryChange(e) {
+        this.isLoadingOdds = true;
+        try {
+            const curOddsQuery = e.detail;
+            this.oddsQuery = Object.assign(Object.assign({}, this.oddsQuery), curOddsQuery);
+            this.oddsInfo = await this.getOddsData(this.oddsQuery);
+        }
+        catch (error) {
+            console.error('Failed to fetch odds data:', error);
+        }
+        finally {
+            this.isLoadingOdds = false;
+        }
+    }
+    async handleOddsQueryLineChange(e) {
+        var _a, _b;
+        this.oddsData = Object.assign(Object.assign({}, this.oddsData), { isSearching: true });
+        try {
+            const curOddsQuery = e.detail;
+            this.oddsQuery = Object.assign(Object.assign({}, this.oddsQuery), curOddsQuery);
+            const res = await this.getOddsData(this.oddsQuery);
+            this.oddsData.filterdOdds = (_b = (_a = res === null || res === void 0 ? void 0 : res.items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.odds;
+        }
+        catch (error) {
+            console.error('Failed to fetch odds data:', error);
+        }
+        finally {
+            this.oddsData = Object.assign(Object.assign({}, this.oddsData), { isSearching: false });
+        }
+    }
+    get formattedTurnover() {
+        var _a, _b;
+        const turnover = (_b = (_a = this.saleStatisticsInfo) === null || _a === void 0 ? void 0 : _a.wagerSegment) === null || _b === void 0 ? void 0 : _b.totalSalesCrossDraw;
+        if (turnover === null || turnover === undefined)
+            return '';
+        const unit = '€';
+        return `${unit}${turnover ? thousandSeparator(turnover) : 0}`;
+    }
+    render() {
+        var _a, _b, _c;
+        return (h("div", { key: '5e1e0a6e065edc83f9882fb1d062a188c7ec1dfe', class: "oddsbomTicketBet", ref: (el) => (this.stylingContainer = el) }, h("div", { key: 'c8bb06895030f9a98eb569f4bb620865161c2a40', class: "oddsbomTicketBet-banner" }, h("div", { key: 'd94848f9e1bd44c9e48871987c1db6eb9c5036f7', class: "oddsbomTicketBet-banner-title" }, (_a = this.rawGameConfig) === null || _a === void 0 ? void 0 : _a.name), h("div", { key: '0bd4f3ce88e6eb47f0954a699e5b906e0d063140', class: "oddsbomTicketBet-banner-info" }, h("div", { key: '8861fe255797345be626da811ac3c4b012ec7ebd', class: "oddsbomTicketBet-banner-info-stoptime" }, h("span", { key: '093a9080139aea482c6f062440d8c59abc5e7426', style: { fontWeight: 'bold', marginRight: '5px' } }, translate('stopAt', this.language)), h("span", { key: '732790eb3aff1a4ffb3806d1b16859671ef110ad' }, this.formattedStopTime(this.gameConfig.stopTime))), h("div", { key: '39e62a18b9644c23c94df03c45402735dbad2ef9', class: "oddsbomTicketBet-banner-info-turnover" }, h("span", { key: '14c92633246651198d463419f0277a7955702ca6', style: { fontWeight: 'bold', marginRight: '5px' } }, translate('turnover', this.language)), h("span", { key: '9620ae1b0c081c982ea258bf995a255033b2fab4' }, this.formattedTurnover)))), h("div", { key: '81f6d0bbaa6e96e518d367f2e6ea35fd79f428dd', class: "oddsbomTicketBet-content" }, h("div", { key: 'd6afe1f75bf31fa00811e8a12bb1594b9b570962', class: "oddsbomTicketBet-info" }, h("div", { key: 'dac6c5e2d22e993ea5bf98ad51c57c4954e9a4ba', class: "oddsbomTicketBet-info-game" }, h("div", { key: 'a9263b1a50e71a5eb87d828a676f7bd4cd95cffb', class: "oddsbomTicketBet-info--item" }, h("div", { key: '60dcbef471ec43662e87c716f54f7c4028753ae1', class: "oddsbomTicketBet-info--key" }, translate('stakePerLine', this.language)), h("div", { key: '5940e25e8f6735f4425a7ed37966023d8293b24c', class: "oddsbomTicketBet-info--value" }, h("vaadin-select", { key: '102066bc4db5b93a96258f1dc9365f4b1014c022', items: this.gameConfig.stakes, value: this.gameInfo.stake, "on-value-changed": this.onStakeChange.bind(this), "no-vertical-overlap": true, noVerticalOverlap: true })))), h("div", { key: '0bb1ef8c4a4a83a32d768f116f31abda1d2fd5f9', class: "oddsbomTicketBet-info-odds" }, h("div", { key: 'bc9ac4b4d8dfae301f1adcc175e5f6454c597545', class: "oddsbomTicketBet-info--item" }, h("div", { key: '328984e6e06eb394723cfb7367e6fe9d537a059c', class: "oddsbomTicketBet-info--key" }, translate('lowestOdds', this.language)), h("div", { key: '7608a59d710c0277f899596d93958833a29ec35f', class: "oddsbomTicketBet-info--value" }, !this.oddsData.lowest ? '-' : formatNumber(this.oddsData.lowest))), h("div", { key: 'ad834be654d4c9903c95d93712a4da8c78e1d9a7', class: "oddsbomTicketBet-info--item" }, h("div", { key: 'af4248fc5b8366ce124e0c37a826e5ff95bdc88d', class: "oddsbomTicketBet-info--key" }, translate('highestOdds', this.language)), h("div", { key: '5b0fb67de3cf85c0f8feb25f6f6b7d8fcad94b37', class: "oddsbomTicketBet-info--value" }, !this.oddsData.highest ? '-' : formatNumber(this.oddsData.highest))), h("div", { key: 'c67e7fce75e8001becbb30a48d15e6c3ef2f1233', class: "oddsbomTicketBet-info---chart" }, h("lottery-oddsbom-ticket-button", { key: 'd7908a92bad58fb68d7415a8781d19deebe1c241', onClick: this.handleOpenOddsChart.bind(this), text: translate('oddsChart', this.language), variant: "outline", language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl })))), h("div", { key: '5a566925de5c1a208d794ca75989a2377edbc858', class: "oddsbomTicketBet-ticketArea" }, h("div", { key: '5e627a176e5698645ab6e17e36c89238fcee71bc', class: "oddsbomTicketBet-ticketArea--left" }, this.isLoading ? (h("div", { class: "loading-wrap" }, h("div", { class: "skeleton-content" }, h("div", { class: "skeleton-item skeleton-animated", style: { height: '32px', width: '94%' } }), h("div", { class: "skeleton-item skeleton-animated", style: { height: '32px', width: '94%' } }), h("div", { class: "skeleton-item skeleton-animated", style: { height: '32px', width: '94%' } }), h("div", { class: "skeleton-item skeleton-animated", style: { height: '32px', width: '94%' } }), h("div", { class: "skeleton-item skeleton-animated", style: { height: '32px', width: '94%' } }), h("div", { class: "skeleton-item skeleton-animated", style: { height: '32px', width: '94%' } }), h("div", { class: "skeleton-item skeleton-animated", style: { height: '32px', width: '94%' } })))) : (h("div", null, h("lottery-oddsbom-ticket-board", { ticketBoardInfo: this.ticketBoardInfo, addSelectionConfig: this.addSelectionConfig, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl })))), h("div", { key: 'ae5e743cdbf5e3d6d0437c52b404bb55e478255e', class: "oddsbomTicketBet-ticketArea--right" }, h("div", { key: 'a1da1765b2aa53eb6d36a35b6c27f7d6eb0e2ab6', class: "oddsbomTicketBet-ticketArea--right-title" }, translate('orderSummary', this.language)), h("div", { key: '0adebc04e81f44067aff4be255b80b91a78a8ae0', class: "oddsbomTicketBet-ticketArea--right-info" }, h("div", { key: '6c3413fc1ee102bd71511468b33d5a0ff992b21b', class: "oddsbomTicketBet-ticketArea--right-ticketCount" }, `${translate('ticket', this.language)}: ${this.gameInfo.lines} ${translate('lines', this.language)} x ${this.gameInfo.stake} ${translate('euro', this.language)}`, ' '), h("div", { key: '34e8024ad809bed294cb581a60607652e6e32fa4', class: "oddsbomTicketBet-ticketArea--right-delimiter" }), h("div", { key: 'ea341ebbd0346a3c0c35ffd6e6e0d4abd9a3fdca', class: "oddsbomTicketBet-ticketArea--right-ticketTotal" }, `${translate('total', this.language)}: ${Number(this.gameInfo.stake) * this.gameInfo.lines} ${translate('euro', this.language)}`), h("div", { key: 'aad84df2f809a9d4a78e1ed1c1d3e5c198267b33', class: "oddsbomTicketBet-ticketArea--right-selection" }, h("lottery-oddsbom-ticket-selection", { key: '48f37706b402c330d64df8e706be59463271319e', ticketBoardInfo: this.ticketBoardInfo, language: this.language }))), h("div", { key: '686c35333a26ec749a809842b7ee22d2f4e27550', class: "oddsbomTicketBet-ticketArea--right-submitBtn" }, h("lottery-oddsbom-ticket-button", { key: 'ea2054dbdc6a5afbe6a0f7e992721453434e4d7f', text: translate('submit', this.language), variant: "primary", size: "large", disabled: !this.canSubmit, loading: this.isSubmitLoading, onClick: this.handleSubmit.bind(this), language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl }))))), h("lottery-tipping-dialog", { key: '2dc1050509a5b4a272a0eca9bc276b3e970c22c7', dialogTitle: this.dialogConfig.title, visible: this.dialogConfig.visible, onCancel: this.handleCloseOddsChart.bind(this), showFooter: false, width: this.oddsChartDialogWidth }, h("lottery-oddsbom-oddschart", { key: '7da6bacc7fb19e34ab5e04d7c41f1ee5d2c987eb', ref: (el) => (this.childRef = el), matchInfo: this.matchInfo, oddsInfo: (_b = this.oddsInfo) === null || _b === void 0 ? void 0 : _b.items, curPage: this.oddsQuery.offset / this.oddsQuery.limit, total: (_c = this.oddsInfo) === null || _c === void 0 ? void 0 : _c.total, limit: this.oddsQuery.limit, offset: this.oddsQuery.offset, isLoading: this.isLoadingOdds, isSearching: this.oddsData.isSearching, filterdOdds: this.oddsData.filterdOdds, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl }))));
+    }
+    static get is() { return "lottery-oddsbom-ticket-bet"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-oddsbom-ticket-bet.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-oddsbom-ticket-bet.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "endpointTicket": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "endpoint-ticket",
+                "reflect": true
+            },
+            "endpointLotteryBe": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "endpoint-lottery-be",
+                "reflect": true
+            },
+            "gameId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "game-id",
+                "reflect": true
+            },
+            "sessionId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "session-id",
+                "reflect": true
+            },
+            "drawId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "draw-id",
+                "reflect": true
+            },
+            "playerId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "player-id",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "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'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "isLoadingOdds": {},
+            "isSubmitLoading": {},
+            "matchInfo": {},
+            "ticketBoardInfo": {},
+            "gameConfig": {},
+            "addSelectionConfig": {},
+            "gameInfo": {},
+            "dialogConfig": {},
+            "oddsData": {},
+            "oddsInfo": {},
+            "oddsQuery": {},
+            "saleStatisticsInfo": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }, {
+                "propName": "ticketBoardInfo",
+                "methodName": "handleTicketBoardInfoChange"
+            }, {
+                "propName": "canSubmit",
+                "methodName": "handleCanSubmitChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "oddsbomBulletGroupToggle",
+                "method": "handleOddsBomBulletGroupToggle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "oddsbomBulletGroupAddedByMoreBtnDel",
+                "method": "handleOddsBomBulletAddedByMoreBtnDelete",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "oddsbomAddMoreToMatch",
+                "method": "handleOddsBomAddMoreToMatch",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "oddsbomBoardClear",
+                "method": "handleOddsBomBoardClear",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "oddschartFillIn",
+                "method": "handleOddsChartFillIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "oddsQueryChange",
+                "method": "handleOddsQueryChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "oddsQueryLineChange",
+                "method": "handleOddsQueryLineChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}