@everymatrix/lottery-oddsbom-ticket-bet 0.0.1

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

@@ -0,0 +1,609 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import "../../../../../lottery-oddsbom-bullet/dist/types/index";
+import { ArrowUpOutlined, InfoCircleFilled, LeftOutlined, RightOutlined } from "@ant-design/icons-svg";
+import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers";
+import { showNotification, stringToBase64, formatNumber } from "../../utils/utils";
+import { translate, resolveTranslationUrl } from "../../utils/locale.utils";
+const upIcon = renderIconDefinitionToSVGElement(ArrowUpOutlined, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: '' }
+});
+const infoIcon = renderIconDefinitionToSVGElement(InfoCircleFilled, {
+    extraSVGAttrs: { width: '18px', height: '18px', fill: '#0d196e' }
+});
+const infoIcon1 = renderIconDefinitionToSVGElement(InfoCircleFilled, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: '#1367e7' }
+});
+const leftArrowIcon = renderIconDefinitionToSVGElement(LeftOutlined, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: '' }
+});
+const rightArrowIcon = renderIconDefinitionToSVGElement(RightOutlined, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: '' }
+});
+export class LotteryOddsbomOddschart {
+    constructor() {
+        this.handleSearch = async () => {
+            const inputs = this.matchItemsContainer.querySelectorAll('lottery-oddsbom-oddschart-input');
+            const values = await Promise.all(Array.from(inputs).map((input) => input.getValue()));
+            if (values.length != 2 * this.matchInfo.length) {
+                showNotification({
+                    theme: 'warning',
+                    message: translate('pleaseFillIn', this.language)
+                });
+                return;
+            }
+            const newMatchSelection = [...this.matchSelection];
+            const lineSelection = [];
+            for (let i = 0; i < values.length; i += 2) {
+                const val1 = values[i];
+                const val2 = values[i + 1];
+                const index = i / 2;
+                if (val1 && val2) {
+                    lineSelection.push([[`${val1}:${val2}`]]);
+                    newMatchSelection[index] = [val1, val2];
+                }
+            }
+            this.matchSelection = [...newMatchSelection];
+            if (lineSelection.length > 0) {
+                const lineSelectionBase64 = await stringToBase64(JSON.stringify(lineSelection));
+                this.oddsQueryLineChangeEvent.emit({
+                    lineSelectionBase64: lineSelectionBase64,
+                    offset: 0
+                });
+                this.hasFillInSelection = true;
+            }
+        };
+        this.handleGroupClick = (index) => {
+            this.selectedGroupIndex = index;
+        };
+        this.toggleFilterIcon = () => {
+            this.isAscend = !this.isAscend;
+            this.selectedGroupIndex = -1;
+            this.oddsQueryChangeEvent.emit({
+                ascending: this.isAscend,
+                offset: 0,
+                lineSelectionBase64: ''
+            });
+        };
+        this.handlePrevPage = () => {
+            if (this.curPage >= 1) {
+                this.selectedGroupIndex = -1;
+                this.oddsQueryChangeEvent.emit({
+                    offset: this.offset - this.limit,
+                    lineSelectionBase64: ''
+                });
+            }
+        };
+        this.handleNextPage = () => {
+            if (this.curPage < this.totalPage - 1) {
+                this.selectedGroupIndex = -1;
+                this.oddsQueryChangeEvent.emit({
+                    offset: this.offset + this.limit,
+                    lineSelectionBase64: ''
+                });
+            }
+        };
+        this.matchInfo = undefined;
+        this.oddsInfo = undefined;
+        this.total = undefined;
+        this.curPage = undefined;
+        this.limit = undefined;
+        this.offset = undefined;
+        this.filterdOdds = undefined;
+        this.isSearching = undefined;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.isLoading = false;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.isAscend = true;
+        this.selectedGroupIndex = -1;
+        this.matchSelection = [];
+        this.hasFillInSelection = false;
+    }
+    async initOddsChart() {
+        this.oddsQueryChangeEvent.emit({
+            offset: 0,
+            ascending: true,
+            lineSelectionBase64: ''
+        });
+    }
+    async closeOddsChart() {
+        this.hasFillInSelection = false;
+        this.selectedGroupIndex = -1;
+        this.matchSelection = [];
+        this.isAscend = true;
+        if (this.matchItemsContainer) {
+            const inputs = this.matchItemsContainer.querySelectorAll('lottery-oddsbom-oddschart-input');
+            inputs.forEach((input) => {
+                input.clearValue();
+            });
+        }
+    }
+    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);
+        }
+    }
+    handleMatchInfoChange(newValue) {
+        this.matchSelection = newValue.map(() => [-1, -1]);
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+    }
+    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 totalPage() {
+        return Math.ceil(this.total / this.limit);
+    }
+    generateBulletGroup(line, odds, groupIndex) {
+        let lineArr;
+        try {
+            lineArr = JSON.parse(line);
+        }
+        catch (error) {
+            console.error('Failed to parse line JSON:', error);
+            return h("div", { class: "error-message" }, "Invalid data format");
+        }
+        let group = lineArr.map((arr) => arr[0]).map((arr1) => arr1[0]);
+        const isSelected = this.selectedGroupIndex === groupIndex;
+        return (h("div", { class: "oddsbom-oddschart-selection--group", onClick: this.handleGroupClick.bind(this, groupIndex) }, h("div", { class: "oddsbom-oddschart-selection--group-wrap", style: { flexBasis: `${160 * group.length}px` } }, group.map((item, index) => {
+            const selection = item.split(':');
+            return (h("div", { class: "oddsbom-oddschart-selection-item", key: index }, h("div", { class: "oddsbom-oddschart-selection-item--1" }, h("lottery-oddsbom-bullet", { text: selection[0], "is-reading": true, "is-selected": isSelected })), h("div", { class: "oddsbom-oddschart-selection-item--2" }, h("lottery-oddsbom-bullet", { text: selection[1], "is-reading": true, "is-selected": isSelected }))));
+        })), h("div", { class: "oddsbom-oddschart-selection-odds" }, h("div", { class: "oddsbom-oddschart-selection-odds--text" }, formatNumber(odds)), isSelected && (h("div", { class: "oddsbom-oddschart-selection-odds--fillIn" }, h("lottery-oddsbom-ticket-button", { text: translate('fillIn', this.language), size: "small", variant: "outline", onClick: this.handleFillIn.bind(this, group), language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl }))))));
+    }
+    handleFillIn(nums) {
+        this.oddschartFillInEvent.emit({ fillInNums: nums });
+    }
+    clearMatchSelection() {
+        this.hasFillInSelection = false;
+        if (this.matchItemsContainer) {
+            const inputs = this.matchItemsContainer.querySelectorAll('lottery-oddsbom-oddschart-input');
+            inputs.forEach((input) => {
+                input.clearValue();
+            });
+        }
+    }
+    fillInMatchSelection() {
+        const nums = [];
+        this.matchSelection.forEach((selection) => {
+            nums.push(`${selection[0]}:${selection[1]}`);
+        });
+        this.handleFillIn(nums);
+    }
+    render() {
+        var _a, _b;
+        return (h("div", { key: 'b160d1870184937cdd013a233a4841545d8f769a', class: "oddsbom-oddschart", ref: (el) => (this.stylingContainer = el) }, !((_a = this.matchInfo) === null || _a === void 0 ? void 0 : _a.length) || !((_b = this.oddsInfo) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "empty-wrap" }, h("span", { innerHTML: infoIcon, style: { marginRight: '6px', height: '18px' } }), h("span", { class: "empty-wrap-text", style: { fontSize: '18px' } }, translate('noBets', this.language)))) : (this.matchInfo && (h("div", { class: "oddsbom-oddschart-container" }, h("div", { class: "oddsbom-oddschart-wrap" }, h("div", { class: "oddsbom-oddschart-match", ref: (el) => (this.matchItemsContainer = el) }, this.matchInfo.map((match, idx) => {
+            return (h("div", { class: "oddsbom-oddschart-match-item", key: idx }, h("div", { class: "oddsbom-oddschart-match-item-name" }, h("div", { class: "oddsbom-oddschart-match-item-name--home" }, `${idx + 1}. ${match.eventName.split('vs')[0]}`), h("div", { class: "oddsbom-oddschart-match-item-name--delimiter" }, "vs"), h("div", { class: "oddsbom-oddschart-match-item-name--away" }, `${match.eventName.split('vs')[1]}`)), h("div", { class: "oddsbom-oddschart-match-item-input" }, h("lottery-oddsbom-oddschart-input", null), h("lottery-oddsbom-oddschart-input", null))));
+        }), h("div", { class: "oddsbom-oddschart-match-search" }, h("lottery-oddsbom-ticket-button", { text: translate('search', this.language), variant: "outline", onClick: this.handleSearch }))), this.hasFillInSelection &&
+            !this.isSearching &&
+            (this.filterdOdds ? (h("div", { class: "oddsbom-oddschart-input-wrap" }, h("div", { class: "oddsbom-oddschart-input" }, this.matchSelection.map((arr) => {
+                return (h("div", { class: "oddsbom-oddschart-input-item" }, h("lottery-oddsbom-bullet", { text: arr[0], "is-reading": true, "is-selected": true }), h("lottery-oddsbom-bullet", { text: arr[1], "is-reading": true, "is-selected": true })));
+            }), h("div", { class: "oddsbom-oddschart-input-odds" }, formatNumber(this.filterdOdds))), h("div", { class: "oddsbom-oddschart-input-operation" }, h("lottery-oddsbom-ticket-button", { text: translate('clear', this.language), variant: "outline", size: "small", onClick: this.clearMatchSelection.bind(this) }), h("lottery-oddsbom-ticket-button", { text: translate('fillIn', this.language), variant: "outline", size: "small", onClick: this.fillInMatchSelection.bind(this) })))) : (h("div", { class: "oddsbom-oddschart-input-empty" }, h("div", null, h("span", { innerHTML: infoIcon1, style: { marginRight: '6px', height: '16px' } }), h("span", { style: { fontSize: '14px' } }, translate('noBets', this.language))), h("div", { class: "oddsbom-oddschart-input-empty-operation" }, h("lottery-oddsbom-ticket-button", { text: translate('clear', this.language), variant: "text", size: "small", onClick: this.clearMatchSelection.bind(this) }), h("lottery-oddsbom-ticket-button", { text: translate('fillIn', this.language), variant: "text", size: "small", onClick: this.fillInMatchSelection.bind(this) }))))), h("div", { class: "oddsbom-oddschart-match-filter" }, (this.isLoading || this.isSearching) && h("div", { class: "progress-bar" }), h("span", { onClick: this.toggleFilterIcon, class: `arrow ${this.isAscend ? 'ascend' : ''}`, innerHTML: upIcon })), h("div", { class: "oddsbom-oddschart-selection" }, this.oddsInfo.map((oddsItem, idx) => {
+            return this.generateBulletGroup(oddsItem.lineSelection, oddsItem.odds, idx);
+        })), h("div", { class: "oddsbom-oddschart-pagination" }, h("div", { class: "oddsbom-oddschart-pagination-wrap" }, h("div", { class: `oddsbom-oddschart-pagination-prev ${this.curPage < 1 ? 'disabled' : ''}`, onClick: this.handlePrevPage }, h("div", { class: "oddsbom-oddschart-pagination-icon", innerHTML: leftArrowIcon })), h("div", { class: "oddsbom-oddschart-pagination-page" }, `${this.curPage + 1} / ${this.totalPage}`), h("div", { class: `oddsbom-oddschart-pagination-next ${this.curPage >= this.totalPage - 1 ? 'disabled' : ''}`, onClick: this.handleNextPage }, h("div", { class: "oddsbom-oddschart-pagination-icon", innerHTML: rightArrowIcon }))))))))));
+    }
+    static get is() { return "lottery-oddsbom-oddschart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-oddsbom-oddschart.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-oddsbom-oddschart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "matchInfo": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<DrawEvent>",
+                    "resolved": "DrawEvent[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "DrawEvent": {
+                            "location": "import",
+                            "path": "../../model/index.type",
+                            "id": "../../../../packages/stencil/lottery-oddsbom-ticket-bet/src/model/index.type.ts::DrawEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "oddsInfo": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<LineOddItem>",
+                    "resolved": "LineOddItem[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "LineOddItem": {
+                            "location": "import",
+                            "path": "../../model/index.type",
+                            "id": "../../../../packages/stencil/lottery-oddsbom-ticket-bet/src/model/index.type.ts::LineOddItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "total",
+                "reflect": false
+            },
+            "curPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "cur-page",
+                "reflect": false
+            },
+            "limit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "limit",
+                "reflect": false
+            },
+            "offset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "offset",
+                "reflect": false
+            },
+            "filterdOdds": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "filterd-odds",
+                "reflect": false
+            },
+            "isSearching": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-searching",
+                "reflect": false
+            },
+            "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
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isAscend": {},
+            "selectedGroupIndex": {},
+            "matchSelection": {},
+            "hasFillInSelection": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "oddsQueryLineChangeEvent",
+                "name": "oddsQueryLineChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "OddsQuery",
+                    "resolved": "OddsQuery",
+                    "references": {
+                        "OddsQuery": {
+                            "location": "import",
+                            "path": "../../model/index.type",
+                            "id": "../../../../packages/stencil/lottery-oddsbom-ticket-bet/src/model/index.type.ts::OddsQuery"
+                        }
+                    }
+                }
+            }, {
+                "method": "oddschartFillInEvent",
+                "name": "oddschartFillIn",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    fillInNums: Array<string>;\n  }",
+                    "resolved": "{ fillInNums: string[]; }",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                }
+            }, {
+                "method": "oddsQueryChangeEvent",
+                "name": "oddsQueryChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "OddsQuery",
+                    "resolved": "OddsQuery",
+                    "references": {
+                        "OddsQuery": {
+                            "location": "import",
+                            "path": "../../model/index.type",
+                            "id": "../../../../packages/stencil/lottery-oddsbom-ticket-bet/src/model/index.type.ts::OddsQuery"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "initOddsChart": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "closeOddsChart": {
+                "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"
+            }, {
+                "propName": "matchInfo",
+                "methodName": "handleMatchInfoChange"
+            }];
+    }
+}

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

@@ -0,0 +1,40 @@
+.oddscharts-input {
+  display: inline-flex;
+  padding: 2px;
+}
+.oddscharts-input input {
+  width: 32px;
+  height: 32px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 32px;
+  border: 2px solid var(--emw--color-gray-100, #e6e6e6);
+  border-radius: 4px;
+  padding: 0;
+  margin: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: var(--emw--color-background, #fff);
+  color: var(--emw--color-typography, #000);
+  text-transform: uppercase;
+}
+.oddscharts-input input:focus {
+  outline: none;
+  border-color: var(--emw--color-primary, #0d196e);
+  box-shadow: 0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));
+  border-width: 2px;
+}
+.oddscharts-input input:disabled {
+  background-color: var(--emw--color-gray-50, #f5f5f5);
+  border-color: var(--emw--color-gray-100, #e6e6e6);
+  color: var(--emw--color-gray-150, #6f6f6f);
+  cursor: not-allowed;
+}
+.oddscharts-input input.error {
+  border-color: var(--emw--color-error, #ff3d00);
+}
+.oddscharts-input input.error:focus {
+  box-shadow: 0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));
+}