@everymatrix/lottery-oddsbom-ticket-bet 0.0.1

package/dist/collection/components/lottery-oddsbom-oddschart-input/lottery-oddsbom-oddschart-input.js

@@ -0,0 +1,213 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+export class LotteryOddsbomOddschartInput {
+    constructor() {
+        this.handleInputChange = (e) => {
+            const input = e.target;
+            const value = input.value.trim();
+            this.valueChange.emit(value);
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter') {
+                this.inputElement.blur();
+            }
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.value = '';
+    }
+    async getValue() {
+        return this.inputElement.value;
+    }
+    async clearValue() {
+        if (this.inputElement) {
+            this.inputElement.value = '';
+        }
+        this.value = '';
+    }
+    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);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    render() {
+        return (h("div", { key: 'eb973f7978b7452788f72a43da5424abbe845361', class: "oddscharts-input", ref: (el) => (this.stylingContainer = el) }, h("input", { key: 'f24fba10175b944af328b71f8e257d8ad1386af2', ref: (el) => (this.inputElement = el), type: "text", inputMode: "numeric", value: this.value, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, autocomplete: "one-time-code" })));
+    }
+    static get is() { return "lottery-oddsbom-oddschart-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-oddsbom-oddschart-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-oddsbom-oddschart-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "clearValue": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+}

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

@@ -0,0 +1 @@
+export { LotteryOddsbomTicketBet } from './lottery-oddsbom-ticket-bet';

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

@@ -0,0 +1,193 @@
+:host {
+  --vaadin-input-field-background: var(--emw--color-gray-50, #f5f5f5);
+  --vaadin-input-field-border-color: var(--emw--color-gray-100, #e6e6e6);
+  --vaadin-input-field-invalid-hover-highlight: var(--emw--color-gray-50, #f5f5f5);
+  --vaadin-input-field-hover-highlight: var(--emw--color-gray-50, #f5f5f5);
+  --vaadin-input-field-border-width: 1px;
+}
+
+.oddsbomTicketBet {
+  container-type: inline-size;
+  background-color: var(--emw--color-background, #fff);
+}
+.oddsbomTicketBet-banner {
+  background-color: var(--emw--color-primary, #0d196e);
+  height: 52px;
+  padding: 0 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  color: var(--emw--color-background, #fff);
+}
+.oddsbomTicketBet-banner-title {
+  font-size: 22px;
+  font-style: italic;
+  font-weight: bold;
+}
+.oddsbomTicketBet-banner-info {
+  position: absolute;
+  right: 20px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+.oddsbomTicketBet-banner-info-stoptime, .oddsbomTicketBet-banner-info-turnover {
+  color: var(--emw--color-typography-inverse, #fff);
+  background-color: var(--emw--color-secondary, #405c8b);
+  height: 36px;
+  line-height: 36px;
+  border-radius: 4px;
+  padding: 0 8px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.oddsbomTicketBet-ticketArea {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 18px 0;
+}
+.oddsbomTicketBet-ticketArea--left {
+  max-width: 60%;
+  min-width: 50%;
+  margin-bottom: 12px;
+}
+.oddsbomTicketBet-ticketArea--right {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.oddsbomTicketBet-ticketArea--right-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: var(--emw--color-typography, #000);
+}
+.oddsbomTicketBet-ticketArea--right-info {
+  width: 96%;
+  padding-left: 4%;
+}
+.oddsbomTicketBet-ticketArea--right-ticketCount, .oddsbomTicketBet-ticketArea--right-ticketTotal {
+  height: 40px;
+  line-height: 40px;
+  font-size: 18px;
+  user-select: none;
+  color: var(--emw--color-typography, #000);
+}
+.oddsbomTicketBet-ticketArea--right-ticketCount {
+  margin-top: 40px;
+}
+.oddsbomTicketBet-ticketArea--right-delimiter {
+  width: 100%;
+  border: 1px solid var(--emw--color-gray-100, #e6e6e6);
+}
+.oddsbomTicketBet-ticketArea--right-submitBtn {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+}
+.oddsbomTicketBet-info {
+  margin-left: 5%;
+  padding: 18px;
+}
+.oddsbomTicketBet-info-game, .oddsbomTicketBet-info-odds {
+  display: flex;
+  flex-wrap: wrap;
+}
+.oddsbomTicketBet-info-game {
+  gap: 24px;
+  margin-bottom: 20px;
+}
+.oddsbomTicketBet-info-odds {
+  gap: 26px;
+}
+.oddsbomTicketBet-info--item {
+  display: flex;
+  align-items: center;
+}
+.oddsbomTicketBet-info--key {
+  font-weight: bold;
+  margin-right: 12px;
+  color: var(--emw--color-typography, #000);
+}
+.oddsbomTicketBet-info--value {
+  color: var(--emw--color-typography, #000);
+}
+@container (max-width: 430px) {
+  .oddsbomTicketBet-banner-title {
+    font-size: 20px;
+    position: absolute;
+    left: 6px;
+  }
+  .oddsbomTicketBet-banner-info {
+    right: 4px;
+    gap: 4px;
+  }
+  .oddsbomTicketBet-banner-info-stoptime, .oddsbomTicketBet-banner-info-turnover {
+    height: 32px;
+    line-height: 32px;
+    font-weight: bold;
+    font-size: 16px;
+  }
+  .oddsbomTicketBet-ticketArea {
+    width: 100%;
+  }
+  .oddsbomTicketBet-ticketArea--left {
+    max-width: 100%;
+    width: 100%;
+  }
+  .oddsbomTicketBet-ticketArea--right {
+    width: 100%;
+  }
+  .oddsbomTicketBet-ticketArea--right-info {
+    width: 90%;
+    padding-left: unset;
+  }
+}
+@container (min-width: 1680px) {
+  .oddsbomTicketBet-ticketArea {
+    width: 80%;
+  }
+  .oddsbomTicketBet-ticketArea--left {
+    width: 50%;
+  }
+  .oddsbomTicketBet-ticketArea--right {
+    width: 50%;
+  }
+  .oddsbomTicketBet-info {
+    margin-left: 10%;
+  }
+}
+
+.loading-wrap {
+  border: 1px solid var(--emw--color-gray-100, #e6e6e6);
+  border-radius: 4px;
+  padding: 20px 0;
+}
+
+.skeleton-content {
+  display: flex;
+  flex-direction: column;
+  gap: 29px;
+  align-items: center;
+}
+
+.skeleton-item {
+  background: var(--emw--color-gray-50, #f5f5f5);
+  border-radius: 4px;
+}
+
+.skeleton-animated {
+  animation: skeleton-shimmer 1.5s infinite linear;
+  background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 37%, #f0f0f0 63%);
+  background-size: 200% 100%;
+}
+
+@keyframes skeleton-shimmer {
+  to {
+    background-position: 100% 0;
+  }
+}