@everymatrix/lottery-tipping-ticket-buy 0.0.1

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

@@ -0,0 +1,806 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { fetchRequest, fetchSaleStatistics, toQueryParams } from "../../utils/api";
+import { formattedTurnover, getTotalLinesAndCheckIfNotComplete } from "../../utils/utils";
+import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
+import { isAfter, isBefore, parseISO } from "date-fns";
+import "../../../../../lottery-banner/dist/types/index";
+import "../../../../../lottery-order-summary/dist/types/index";
+import "../../../../../lottery-tipping-bet-slip/dist/types/index";
+import "../lottery-segmented/lottery-segmented";
+import "../../../../../../../libs/vaadin-facade/index";
+export class LotteryTippingTicketBuy {
+    constructor() {
+        this.SPLIT_TOKEN = ',';
+        this.EVENT_PART_MAP = {
+            '3': 'Full Time',
+            '5': 'Half Time'
+        };
+        this.endpoint = '';
+        this.sessionId = undefined;
+        this.playerId = '';
+        this.gameId = '';
+        this.drawId = '';
+        this.currency = 'EUR';
+        this.tippingBetOptions = '1,X,2';
+        this.tippingBetOptionNames = 'Home,Draw,Away';
+        this.groupBy = 'BettingType,EventPart,Event';
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.bulletSelectionsLineGroup = [[[]]];
+        this.draw = undefined;
+        this.isLoading = false;
+        this.betCurrentPage = 1;
+        this.betTotalPages = undefined;
+        this.dialogConfig = { visible: false };
+        this.submitLoading = undefined;
+        this.betHasErrors = false;
+        this.gameUnavailable = false;
+        this.isSalesActive = false;
+        this.currentStake = undefined;
+        this.gameConfig = undefined;
+        this.turnover = undefined;
+        this.betTypes = undefined;
+        this.curBetType = undefined;
+        this.eventPartIds = undefined;
+        this.curEventPartId = undefined;
+        this.boardRange = {
+            min: 1,
+            max: 3
+        };
+        this.eventMap = undefined;
+        this.eventPart2EventOutcomeMap = undefined;
+        this.betTypeOptions = [];
+        this.eventPartOptions = [];
+        this.stakeOptions = [];
+    }
+    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);
+        }
+    }
+    connectedCallback() {
+        if (this.endpoint && this.gameId && this.drawId) {
+            this.getTippingInfo();
+        }
+        else {
+            console.log('no fetch');
+        }
+    }
+    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();
+    }
+    parsedOutcome(tippingInfo) {
+        const { outcomes } = tippingInfo;
+        const eventPartIdList = [];
+        for (const bettingTypeId in outcomes) {
+            const eventParts = outcomes[bettingTypeId];
+            this.eventPart2EventOutcomeMap = eventParts;
+            for (const eventPartId in eventParts) {
+                eventPartIdList.push(eventPartId);
+            }
+        }
+        if (eventPartIdList.length > 0) {
+            this.eventPartIds = eventPartIdList;
+            this.curEventPartId = eventPartIdList[0];
+        }
+    }
+    updateDrawSalesStatus() {
+        const currentDraw = this.draw;
+        if (!currentDraw) {
+            this.gameUnavailable = true;
+            this.isSalesActive = false;
+            return;
+        }
+        const now = new Date();
+        const wagerStartTime = currentDraw.wagerStartTime ? parseISO(currentDraw.wagerStartTime) : null;
+        const wagerCloseTime = currentDraw.wagerCloseTime ? parseISO(currentDraw.wagerCloseTime) : null;
+        // Rule 1: If the current time < the opening - sale time → display "Start in" countDown and disable the button.
+        if (wagerStartTime && isBefore(now, wagerStartTime)) {
+            this.isSalesActive = false;
+            this.gameUnavailable = false;
+        }
+        // Rule 2: If the opening-sale time < the current time < the closing time → display "Stop at xx time" to remind the player.
+        else if (wagerStartTime && wagerCloseTime && isAfter(now, wagerStartTime) && isBefore(now, wagerCloseTime)) {
+            this.isSalesActive = true;
+            this.gameUnavailable = false;
+        }
+        // Rule 3: If the current time > the closing time → the game is unavailable.
+        else {
+            this.gameUnavailable = true;
+            this.isSalesActive = false;
+        }
+    }
+    async getTippingInfo() {
+        try {
+            this.isLoading = true;
+            const { gameId, drawId, endpoint, groupBy } = this;
+            const res = await fetchRequest(`${endpoint}/poolgames/${gameId}/draws/${drawId}/bettingSelections${toQueryParams({
+                groupBy
+            })}`, 'GET');
+            const { game, eventMap } = res;
+            this.gameConfig = res;
+            this.draw = game.currentDraw;
+            this.betTypes = game.rules.betTypes;
+            this._setBetType(this.betTypes[0]);
+            this.currentStake = String(game.rules.stakes[0].value);
+            this.eventMap = eventMap;
+            this.parsedOutcome(res);
+            const betTypeOptions = this.betTypes.map((bt) => ({ label: bt.name, value: bt.name }));
+            this.betTypeOptions = betTypeOptions;
+            const eventPartOptions = this.eventPartIds.map((id) => ({ label: this.EVENT_PART_MAP[id], value: id }));
+            this.eventPartOptions = eventPartOptions;
+            const stakeOptions = game.rules.stakes.map((stake) => ({ label: stake.value, value: stake.value }));
+            this.stakeOptions = stakeOptions;
+            this.updateDrawSalesStatus();
+            this.updateSaleStatistics();
+        }
+        catch (err) {
+            this.betHasErrors = true;
+            console.error('Failed to get tipping info:', err);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    updateSaleStatistics() {
+        var _a, _b, _c;
+        return fetchSaleStatistics({
+            endpoint: this.endpoint,
+            gameId: (_b = (_a = this.gameConfig) === null || _a === void 0 ? void 0 : _a.game) === null || _b === void 0 ? void 0 : _b.type,
+            drawId: (_c = this.draw) === null || _c === void 0 ? void 0 : _c.id
+        }).then((res) => {
+            var _a;
+            this.turnover = (_a = res === null || res === void 0 ? void 0 : res.wagerSegment) === null || _a === void 0 ? void 0 : _a.totalSalesCrossDraw;
+        });
+    }
+    handleSelectionChange(event) {
+        const { newSelections, matchId, boardId } = event.detail;
+        const boardIndex = parseInt(boardId, 10);
+        const matchIndex = parseInt(matchId, 10);
+        const newBulletSelectionsLineGroup = this.bulletSelectionsLineGroup.map((board, index) => {
+            if (index !== boardIndex)
+                return board;
+            const newBoard = [...board];
+            newBoard[matchIndex] = newSelections;
+            return newBoard;
+        });
+        // console.log('newBulletSelectionsLineGroup', newBulletSelectionsLineGroup);
+        this.bulletSelectionsLineGroup = newBulletSelectionsLineGroup;
+    }
+    handleClearAll() {
+        this._resetBulletConfig();
+        this.onClearAll.emit();
+    }
+    handlePageChange(event) {
+        const { newPage } = event.detail;
+        if (newPage >= 1 && newPage <= this.betTotalPages) {
+            this.betCurrentPage = newPage;
+        }
+    }
+    handleAddLine() {
+        if (this.betTotalPages < this.boardRange.max) {
+            this.bulletSelectionsLineGroup = [...this.bulletSelectionsLineGroup, this.initLineForBulletConfig()];
+            this.betTotalPages++;
+            this.betCurrentPage = this.betTotalPages;
+        }
+    }
+    handleRemoveLine(event) {
+        const { boardId, close } = event.detail;
+        if (this.betTotalPages > this.boardRange.min) {
+            const closeDialog = () => {
+                this.dialogConfig = { visible: false };
+            };
+            const doRemove = () => {
+                this.bulletSelectionsLineGroup = this.bulletSelectionsLineGroup.filter((_, index) => index !== boardId);
+                this.betTotalPages--;
+                const removedPage = boardId + 1;
+                if (this.betCurrentPage > removedPage) {
+                    this.betCurrentPage--;
+                }
+                if (this.betCurrentPage > this.betTotalPages) {
+                    this.betCurrentPage = this.betTotalPages;
+                }
+                close(closeDialog);
+            };
+            this.dialogConfig = {
+                visible: true,
+                content: translate('selectionOnLineCleared', this.language),
+                onConfirm: doRemove,
+                onCancel: closeDialog
+            };
+        }
+    }
+    handleSubmitTickets() {
+        const params = this.buildTicketParam();
+        this.lotteryTicketParamsReady.emit(params);
+    }
+    handleTicketSubmitSuccess() {
+        this._resetBulletConfig();
+        this.updateSaleStatistics();
+    }
+    buildTicketParam() {
+        let body = {
+            tickets: []
+        };
+        body.tickets.push({
+            gameName: this.gameConfig.game.name,
+            startingDrawId: this.draw.id,
+            amount: this.calculateTotalAmount(),
+            currency: this.currency,
+            selection: this.bulletSelectionsLineGroup.map((boardInfo) => {
+                const matchList = boardInfo.map((matchSelection, matchIdx) => {
+                    const curBettingTypeMatches = matchSelection.map((bet) => {
+                        return {
+                            betOn: bet,
+                            id: this.parsedEvent[matchIdx].outcomes.find((outcome) => outcome.betOn === bet).id
+                        };
+                    });
+                    return [curBettingTypeMatches];
+                });
+                return {
+                    betType: this.curBetType.id,
+                    prizePool: this.parsedEvent[0].outcomes[0].prizePools[0],
+                    stake: this.currentStake,
+                    poolGameSelections: matchList
+                };
+            })
+        });
+        return body;
+    }
+    initLineForBulletConfig() {
+        return [[]];
+    }
+    _resetBulletConfig() {
+        this.bulletSelectionsLineGroup = Array.from({ length: this.betTotalPages }).map(this.initLineForBulletConfig.bind(this));
+        this.betCurrentPage = 1;
+    }
+    calculateTotalAmount() {
+        const stake = this.currentStake;
+        if (!stake) {
+            return '0';
+        }
+        let totalAmount = +stake * this.totalLineCombination;
+        return totalAmount.toString();
+    }
+    get hasSelection() {
+        return this.bulletSelectionsLineGroup.some((board) => board.some((match) => match && match.length > 0));
+    }
+    get parsedEvent() {
+        if (!this.eventPart2EventOutcomeMap || !this.curEventPartId || !this.eventMap) {
+            return [];
+        }
+        const curEventObj = this.eventPart2EventOutcomeMap[this.curEventPartId];
+        const flatEvents = [];
+        for (const eventId in curEventObj) {
+            const curEventOutcomeArr = curEventObj[eventId];
+            const eventDetail = this.eventMap[eventId];
+            const { eventName, startTime, order } = eventDetail;
+            flatEvents.push({
+                eventName,
+                startTime,
+                order,
+                outcomes: curEventOutcomeArr.map((outcome) => {
+                    const { betOn, outcomeId, prizePools } = outcome;
+                    return {
+                        betOn,
+                        id: outcomeId,
+                        prizePools
+                    };
+                })
+            });
+        }
+        flatEvents.sort((a, b) => a.order - b.order);
+        // console.log('flatEvents', flatEvents);
+        return flatEvents;
+    }
+    get _selectionStats() {
+        const { combinations: minCombinations = 1, maxCombinations = 1 } = this.curBetType || {};
+        return getTotalLinesAndCheckIfNotComplete(this.bulletSelectionsLineGroup, this.parsedEvent.length, minCombinations, maxCombinations);
+    }
+    get totalLineCombination() {
+        return this._selectionStats.totalLines;
+    }
+    get hasSelectAllBullet() {
+        return !this._selectionStats.notComplete;
+    }
+    _setBetType(betType) {
+        if (!betType)
+            return;
+        this.curBetType = betType;
+        this.boardRange.min = Math.min(...betType.boardsAllowed);
+        this.boardRange.max = Math.max(...betType.boardsAllowed);
+        this.betTotalPages = betType.defaultBoards;
+        this._resetBulletConfig();
+    }
+    handleBetTypeChange(event) {
+        const newBetTypeName = event.detail;
+        if (newBetTypeName === this.curBetType.name) {
+            return;
+        }
+        const switchBetType = () => {
+            const newBetType = this.betTypes.find((bt) => bt.name === newBetTypeName);
+            this._setBetType(newBetType);
+            this.dialogConfig = { visible: false };
+        };
+        this.handleSwitchWithConfirmation(switchBetType);
+    }
+    handleEventPartChange(event) {
+        const newEventPartId = event.detail;
+        if (newEventPartId === this.curEventPartId) {
+            return;
+        }
+        const switchEventPart = () => {
+            this.curEventPartId = newEventPartId;
+            this._resetBulletConfig();
+            this.dialogConfig = { visible: false };
+        };
+        this.handleSwitchWithConfirmation(switchEventPart);
+    }
+    onStakeChange(event) {
+        this.currentStake = event.detail.value;
+    }
+    handleSwitchWithConfirmation(switchAction) {
+        const closeDialog = () => {
+            this.dialogConfig = { visible: false };
+        };
+        const doConfirm = () => {
+            switchAction();
+            closeDialog();
+        };
+        if (this.hasSelection) {
+            this.dialogConfig = {
+                visible: true,
+                content: translate('selectionCleared', this.language),
+                onConfirm: doConfirm,
+                onCancel: closeDialog
+            };
+        }
+        else {
+            switchAction();
+        }
+    }
+    _renderSkeletonBlock(style) {
+        return h("div", { class: "skeleton-block", style: style });
+    }
+    renderSkeletons() {
+        return (h("div", { class: "lottery-tipping-ticket-buy", ref: (el) => (this.stylingContainer = el) }, this._renderSkeletonBlock({ height: '60px', marginBottom: '16px' }), this._renderSkeletonBlock({ width: '60%', margin: '0 auto', height: '80px', marginBottom: '16px' }), h("div", { class: "bet-board", style: { display: 'flex', gap: '16px' } }, this._renderSkeletonBlock({ flex: '2', height: '400px' }), this._renderSkeletonBlock({ flex: '1', height: '400px' }))));
+    }
+    renderErrorContent() {
+        return h("p", null, translate('error', this.language));
+    }
+    renderNoActiveDraw() {
+        return (h("div", { class: "lottery-tipping-ticket-buy", ref: (el) => (this.stylingContainer = el) }, h("div", { class: "no-active-draw" }, translate('gameNotAvailable', this.language))));
+    }
+    get ticketDataSourceForBetSlip() {
+        return this.parsedEvent.map(({ eventName, startTime, outcomes }) => ({
+            eventName,
+            startTime,
+            outcomes: outcomes.map(({ betOn }) => ({ betOn }))
+        }));
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (this.isLoading) {
+            return this.renderSkeletons();
+        }
+        else if (this.betHasErrors) {
+            return this.renderErrorContent();
+        }
+        else if (this.gameUnavailable) {
+            return this.renderNoActiveDraw();
+        }
+        else {
+            return (h("div", { class: "lottery-tipping-ticket-buy", ref: (el) => (this.stylingContainer = el) }, h("lottery-banner", { clientStylingUrl: this.clientStylingUrl, stopTime: (_a = this.draw) === null || _a === void 0 ? void 0 : _a.wagerCloseTime, startTime: (_b = this.draw) === null || _b === void 0 ? void 0 : _b.wagerStartTime, "banner-title": (_d = (_c = this.gameConfig) === null || _c === void 0 ? void 0 : _c.game) === null || _d === void 0 ? void 0 : _d.name, turnover: formattedTurnover(this.turnover), language: this.language, "translation-url": this.translationUrl, onLotteryBannerWagerStarted: () => this.updateDrawSalesStatus() }), h("div", { class: "bet-selector" }, h("div", { class: "bet-selector-line" }, h("div", { class: "bet-selector-line-segments" }, h("lottery-segmented", { class: "event-part-selector", label: "Event Part", options: this.eventPartOptions, value: this.curEventPartId.toString(), onValueChange: this.handleEventPartChange.bind(this) }), h("lottery-segmented", { label: "Bet Type", options: this.betTypeOptions, value: ((_e = this.curBetType) === null || _e === void 0 ? void 0 : _e.name) || '', onValueChange: this.handleBetTypeChange.bind(this) }))), h("div", { class: "bet-selector-line" }, h("div", { class: "bet-selector-line-label" }, translate('stakePerLine', this.language)), h("div", { class: "bet-selector-line-input" }, this.stakeOptions.length > 1 ? (h("vaadin-select", { items: this.stakeOptions, value: this.currentStake, "on-value-changed": this.onStakeChange.bind(this), "no-vertical-overlap": true })) : (this.currentStake)))), h("div", { class: "bet-board" }, h("div", { class: "bet-board-slip" }, h("lottery-tipping-bet-slip", { language: this.language, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl, "current-page": this.betCurrentPage, "total-pages": this.betTotalPages, "max-total-pages": this.boardRange.max, "min-total-pages": this.boardRange.min, mode: ((_f = this.curBetType) === null || _f === void 0 ? void 0 : _f.combinations) > 1 ? 'multi' : 'single', readPretty: false, bulletTexts: this.tippingBetOptions, bulletNames: this.tippingBetOptionNames, bulletTextsSplitToken: this.SPLIT_TOKEN, "ticket-data-source-str": JSON.stringify(this.ticketDataSourceForBetSlip), "bullet-selections-line-group-str": JSON.stringify(this.bulletSelectionsLineGroup), showClearButton: true })), h("div", { class: "bet-board-order" }, h("lottery-order-summary", { "client-styling": this.clientStyling, clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource, language: this.language, "translation-url": this.translationUrl, endpoint: this.endpoint, sessionId: this.sessionId, orderSummaryTitle: translate('orderSummaryTitle', this.language), ticketsLabel: translate('orderSummaryTickets', this.language), totalLabel: translate('orderSummaryTotal', this.language), "show-divider": true, submitLoading: this.submitLoading, submitDisabled: !this.hasSelectAllBullet || this.submitLoading || !this.isSalesActive, submitButtonText: translate('orderSummarySubmit', this.language) }, h("div", { class: "order-summary__details", slot: "orderSummaryTicketDetail" }, h("span", { class: "order-summary__line-count" }, `${this.totalLineCombination} ${this.totalLineCombination > 1 ? translate('lines', this.language) : translate('line', this.language)}`), h("div", null, h("span", { class: "order-summary__multiplier" }, "x"), h("span", { class: "order-summary__stake" }, `${this.currentStake} ${this.currency}`))), h("span", { class: "order-summary__details", slot: "orderSummaryTotalDetail" }, `${this.calculateTotalAmount()} ${this.currency}`)))), this.dialogConfig.visible && (h("vaadin-confirm-dialog", { rejectButtonVisible: true, rejectText: translate('cancel', this.language), confirmText: translate('confirm', this.language), opened: (_g = this.dialogConfig) === null || _g === void 0 ? void 0 : _g.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_h = this.dialogConfig) === null || _h === void 0 ? void 0 : _h.content))));
+        }
+    }
+    static get is() { return "lottery-tipping-ticket-buy"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-tipping-ticket-buy.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-tipping-ticket-buy.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "API endpoint for data fetching."
+                },
+                "attribute": "endpoint",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "sessionId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User's session ID for authenticated requests."
+                },
+                "attribute": "session-id",
+                "reflect": true
+            },
+            "playerId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the player."
+                },
+                "attribute": "player-id",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "gameId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the pool game."
+                },
+                "attribute": "game-id",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "drawId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the specific draw."
+                },
+                "attribute": "draw-id",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "currency": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The currency to be used for stakes and display."
+                },
+                "attribute": "currency",
+                "reflect": true,
+                "defaultValue": "'EUR'"
+            },
+            "tippingBetOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Comma-separated string of bet options (e.g., '1,X,2')."
+                },
+                "attribute": "tipping-bet-options",
+                "reflect": true,
+                "defaultValue": "'1,X,2'"
+            },
+            "tippingBetOptionNames": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Comma-separated string of display names for bet options (e.g., 'Home,Draw,Away')."
+                },
+                "attribute": "tipping-bet-option-names",
+                "reflect": true,
+                "defaultValue": "'Home,Draw,Away'"
+            },
+            "groupBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Comma-separated string to group betting selections by."
+                },
+                "attribute": "group-by",
+                "reflect": true,
+                "defaultValue": "'BettingType,EventPart,Event'"
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Source for message bus styling."
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom styling passed as a string."
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to a CSS file for custom styling."
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to a JSON file for custom translations."
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The language for translations."
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "bulletSelectionsLineGroup": {},
+            "draw": {},
+            "isLoading": {},
+            "betCurrentPage": {},
+            "betTotalPages": {},
+            "dialogConfig": {},
+            "submitLoading": {},
+            "betHasErrors": {},
+            "gameUnavailable": {},
+            "isSalesActive": {},
+            "currentStake": {},
+            "gameConfig": {},
+            "turnover": {},
+            "betTypes": {},
+            "curBetType": {},
+            "eventPartIds": {},
+            "curEventPartId": {},
+            "boardRange": {},
+            "eventMap": {},
+            "eventPart2EventOutcomeMap": {},
+            "betTypeOptions": {},
+            "eventPartOptions": {},
+            "stakeOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onClearAll",
+                "name": "lotteryTippingSelectionClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the \"Clear All\" action is triggered"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "lotteryTicketParamsReady",
+                "name": "lotteryTicketParamsReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "lotteryTippingBetSelectionChange",
+                "method": "handleSelectionChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "lotteryTippingBetClearAll",
+                "method": "handleClearAll",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "lotteryTippingBetPageChange",
+                "method": "handlePageChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "lotteryTippingBetAddLine",
+                "method": "handleAddLine",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "lotteryTippingBetRemoveLine",
+                "method": "handleRemoveLine",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "orderSummarySubmit",
+                "method": "handleSubmitTickets",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "lotteryTicketSubmitSuccess",
+                "method": "handleTicketSubmitSuccess",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}