@everymatrix/lottery-tipping-ticket-buy 0.0.1

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8a0b513b.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('lottery-tipping-ticket-buy.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([["app-tooltip_11.cjs",[[1,"lottery-tipping-ticket-buy",{"endpoint":[513],"sessionId":[513,"session-id"],"playerId":[513,"player-id"],"gameId":[513,"game-id"],"drawId":[513,"draw-id"],"currency":[513],"tippingBetOptions":[513,"tipping-bet-options"],"tippingBetOptionNames":[513,"tipping-bet-option-names"],"groupBy":[513,"group-by"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"bulletSelectionsLineGroup":[32],"draw":[32],"isLoading":[32],"betCurrentPage":[32],"betTotalPages":[32],"dialogConfig":[32],"submitLoading":[32],"betHasErrors":[32],"gameUnavailable":[32],"isSalesActive":[32],"currentStake":[32],"gameConfig":[32],"turnover":[32],"betTypes":[32],"curBetType":[32],"eventPartIds":[32],"curEventPartId":[32],"boardRange":[32],"eventMap":[32],"eventPart2EventOutcomeMap":[32],"betTypeOptions":[32],"eventPartOptions":[32],"stakeOptions":[32]},[[0,"lotteryTippingBetSelectionChange","handleSelectionChange"],[0,"lotteryTippingBetClearAll","handleClearAll"],[0,"lotteryTippingBetPageChange","handlePageChange"],[0,"lotteryTippingBetAddLine","handleAddLine"],[0,"lotteryTippingBetRemoveLine","handleRemoveLine"],[0,"orderSummarySubmit","handleSubmitTickets"],[0,"lotteryTicketSubmitSuccess","handleTicketSubmitSuccess"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-tipping-bet-slip",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"totalPages":[514,"total-pages"],"minTotalPages":[514,"min-total-pages"],"maxTotalPages":[514,"max-total-pages"],"bulletTexts":[513,"bullet-texts"],"bulletNames":[513,"bullet-names"],"bulletTextsSplitToken":[513,"bullet-texts-split-token"],"showClearButton":[516,"show-clear-button"],"addImage":[1,"add-image"],"deleteImage":[1,"delete-image"],"infoImage":[1,"info-image"],"leftImage":[1,"left-image"],"rightImage":[1,"right-image"],"mode":[513],"readPretty":[516,"read-pretty"],"ticketDataSourceStr":[1,"ticket-data-source-str"],"bulletSelectionsLineGroupStr":[1,"bullet-selections-line-group-str"],"currentPage":[514,"current-page"],"bulletSelectionsLineGroup":[32],"ticketDataSource":[32],"betIsLoading":[32],"betHasErrors":[32]},[[0,"bulletGroupUpdateSelection","bulletGroupUpdateSelectionHandler"]],{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"ticketDataSourceStr":["parseTicketDataSource"],"bulletSelectionsLineGroupStr":["parseBulletSelectionsLineGroup"]}],[1,"lottery-banner",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"logoUrl":[513,"logo-url"],"stopTime":[1,"stop-time"],"startTime":[1,"start-time"],"bannerTitle":[1,"banner-title"],"turnover":[1],"layout":[1],"isWagerStarted":[32],"formattedStopTime":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"startTime":["handleTimeChange"],"stopTime":["handleTimeChange"]}],[1,"lottery-order-summary",{"endpoint":[513],"sessionId":[513,"session-id"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"orderSummaryTitle":[1,"order-summary-title"],"ticketsLabel":[1,"tickets-label"],"totalLabel":[1,"total-label"],"showColon":[4,"show-colon"],"showDivider":[4,"show-divider"],"submitDisabled":[4,"submit-disabled"],"submitButtonText":[1,"submit-button-text"],"submitLoading":[32]},[[8,"lotteryTicketParamsReady","handleLotteryTicketParamsReady"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-segmented",{"label":[1],"options":[16],"value":[520]},[[9,"resize","handleWindowResize"]],{"value":["handleValueChange"]}],[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"],"disabledBulletTexts":[513,"disabled-bullet-texts"],"dialogConfig":[32],"inputInfo":[32]},[[0,"lotteryBulletClick","lotteryBulletClickHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"app-tooltip",{"visible":[32]}],[1,"helper-count-down",{"value":[520],"format":[513],"prefix":[513],"suffix":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"endTime":[32],"timeObj":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"value":["handleValueChange"]}],[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],"confirmLoading":[4,"confirm-loading"]},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"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,63 @@
+{
+  "entries": [
+    "components/lottery-segmented/lottery-segmented.js",
+    "components/lottery-tipping-ticket-buy/lottery-tipping-ticket-buy.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/helper-count-down",
+      "tags": [
+        "helper-count-down"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-banner",
+      "tags": [
+        "lottery-banner"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-button",
+      "tags": [
+        "lottery-button"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-order-summary",
+      "tags": [
+        "lottery-order-summary"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-selection",
+      "tags": [
+        "lottery-selection"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-selection-group",
+      "tags": [
+        "lottery-selection-group"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-tipping-bet-slip",
+      "tags": [
+        "app-tooltip",
+        "lottery-tipping-bet-slip"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-tipping-dialog",
+      "tags": [
+        "lottery-tipping-dialog"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/lottery-segmented/lottery-segmented.css

@@ -0,0 +1,52 @@
+:host {
+  display: block;
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.label {
+  font-size: 16px;
+  color: var(--emw-segmented-label-color, #333);
+  font-weight: 500;
+}
+
+.segmented-container {
+  display: inline-flex;
+  position: relative;
+  background-color: var(--emw-segmented-bg, #f0f0f0);
+  border-radius: 20px;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.option {
+  position: relative;
+  z-index: 1;
+  border: none;
+  background-color: transparent;
+  padding: 12px 18px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--emw-segmented-text-color, #555);
+  transition: color 0.3s ease;
+  white-space: nowrap;
+}
+.option.active {
+  color: var(--emw-segmented-active-text-color, #000);
+  font-weight: bold;
+}
+
+.active-indicator {
+  position: absolute;
+  z-index: 0;
+  top: 2px;
+  bottom: 2px;
+  background-color: var(--emw-segmented-active-bg, #fff);
+  border-radius: 22px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}

package/dist/collection/components/lottery-segmented/lottery-segmented.js

@@ -0,0 +1,151 @@
+import { h } from "@stencil/core";
+export class LotterySegmented {
+    constructor() {
+        this.optionRefs = [];
+        this.label = undefined;
+        this.options = [];
+        this.value = undefined;
+    }
+    handleValueChange() {
+        this.updateActiveIndicator();
+    }
+    componentWillLoad() {
+        if (!this.value && this.options.length > 0) {
+            // Default to the first option if no value is provided
+            this.value = this.options[0].value;
+        }
+    }
+    componentDidLoad() {
+        // Use requestAnimationFrame to ensure layout is calculated
+        requestAnimationFrame(() => this.updateActiveIndicator());
+    }
+    handleWindowResize() {
+        this.updateActiveIndicator();
+    }
+    updateActiveIndicator() {
+        const selectedIndex = this.options.findIndex((opt) => opt.value === this.value);
+        if (selectedIndex === -1 || !this.activeIndicator || !this.optionRefs[selectedIndex]) {
+            return;
+        }
+        const selectedOptionEl = this.optionRefs[selectedIndex];
+        const containerEl = this.activeIndicator.parentElement;
+        const containerRect = containerEl.getBoundingClientRect();
+        const optionRect = selectedOptionEl.getBoundingClientRect();
+        this.activeIndicator.style.transform = `translateX(${optionRect.left - containerRect.left}px)`;
+        this.activeIndicator.style.width = `${optionRect.width}px`;
+    }
+    onOptionClick(optionValue) {
+        if (this.value !== optionValue) {
+            this.valueChange.emit(optionValue);
+        }
+    }
+    render() {
+        return (h("div", { key: '675f17d5fd8ddef56324416fda27ffd130ddafa3', class: "wrapper" }, this.label && h("label", { key: 'd6dfc897e2014a7ce57cc4ddca57b1e6173eb1a5', class: "label" }, this.label), h("div", { key: 'e89097f2a9536ada1e0edf52e0d50cdd8f88c52e', class: "segmented-container" }, h("div", { key: 'f720dc7b9b8957cb6d363fd6a2313978eba6988e', class: "active-indicator", ref: (el) => (this.activeIndicator = el) }), this.options.map((option, index) => (h("button", { class: { option: true, active: this.value === option.value }, onClick: () => this.onOptionClick(option.value), ref: (el) => (this.optionRefs[index] = el) }, option.label))))));
+    }
+    static get is() { return "lottery-segmented"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-segmented.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-segmented.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the segmented control."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SegmentedOption[]",
+                    "resolved": "SegmentedOption[]",
+                    "references": {
+                        "SegmentedOption": {
+                            "location": "local",
+                            "path": "/builds/emfe-widgets/widgets-monorepo/packages/stencil/lottery-tipping-ticket-buy/src/components/lottery-segmented/lottery-segmented.tsx",
+                            "id": "../../../../packages/stencil/lottery-tipping-ticket-buy/src/components/lottery-segmented/lottery-segmented.tsx::SegmentedOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The options for the segmented control.\ne.g., `[{ label: 'System', value: 'system' }, { label: 'Banker', value: 'banker' }]`"
+                },
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently selected value."
+                },
+                "attribute": "value",
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

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

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

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

@@ -0,0 +1,122 @@
+:host {
+  --vaadin-input-field-background: var(--emw--color-background, #fff);
+  --vaadin-input-field-border-color: var(--emw--color-gray-100, #e6e6e6);
+  --vaadin-input-field-invalid-hover-highlight: var(--emw--color-background, #fff);
+  --vaadin-input-field-hover-highlight: var(--emw--color-background, #fff);
+  --vaadin-input-field-border-width: 1px;
+  --lottery-selection-border-color: #e6e6e6;
+  --lottery-selection-hover-border-color: #e6e6e6;
+  --lottery-selection-selected-border-color: #e6e6e6;
+  --lottery-selection-selected-color: #fed275;
+  --lottery-button-primary-active-bg: #fed275;
+  --lottery-selection-selected-background: #000;
+  --lottery-button-text-color: #000;
+}
+
+.lottery-tipping-ticket-buy {
+  container-type: inline-size;
+  container-name: lottery-tipping-ticket-buy;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.order-summary__details {
+  display: flex;
+  align-items: center;
+  color: var(--emw--color-typography, #000);
+}
+
+.order-summary__multiplier {
+  color: var(--emw--color-typography-secondary, #333);
+  margin: 0 8px;
+}
+
+.bet-selector {
+  display: flex;
+  gap: 18px;
+  flex-direction: column;
+  width: 80%;
+  max-width: 800px;
+  margin: 20px auto;
+}
+.bet-selector-line {
+  display: flex;
+  align-items: center;
+}
+.bet-selector-line-segments {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  justify-content: space-between;
+}
+.bet-selector-line-label {
+  font-size: 16px;
+  margin-right: 8px;
+  color: var(--emw--color-typography, #000);
+}
+
+.bet-board {
+  display: flex;
+  width: 84vw;
+  max-width: 1200px;
+  margin: 0px auto;
+  gap: 30px;
+  flex-wrap: wrap;
+}
+.bet-board-slip {
+  min-width: 460px;
+  flex: 1.6;
+}
+.bet-board-order {
+  flex: 1;
+  min-width: 200px;
+}
+
+@container lottery-tipping-ticket-buy (max-width: 768px) {
+  .bet-board {
+    width: 94%;
+  }
+  .bet-board-slip {
+    min-width: 100%;
+  }
+}
+.skeleton-block {
+  background-color: var(--emw--color-background-tertiary, #e0e0e0);
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+}
+.skeleton-block::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, var(--emw--color-background-secondary, rgba(255, 255, 255, 0.4)), transparent);
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+.no-active-draw {
+  margin: 100px auto;
+  padding: 24px;
+  border: 2px solid var(--emw--color-primary, #fed275);
+  border-radius: 4px;
+  width: 280px;
+  color: var(--emw--color-typography, #000);
+}