@everymatrix/lottery-tipping-ticket-history 1.77.30 → 1.77.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/cjs/general-multi-select_10.cjs.entry.js +49 -17
  2. package/dist/cjs/index.cjs.js +1 -1
  3. package/dist/collection/components/lottery-tipping-panel/lottery-tipping-panel.js +2 -2
  4. package/dist/collection/components/lottery-tipping-ticket-history/lottery-tipping-ticket-history.js +4 -4
  5. package/dist/esm/general-multi-select_10.entry.js +50 -18
  6. package/dist/esm/index.js +1 -1
  7. package/dist/lottery-tipping-ticket-history/general-multi-select_10.entry.js +78 -78
  8. package/dist/lottery-tipping-ticket-history/index.esm.js +1 -1
  9. package/dist/lottery-tipping-ticket-history/lottery-tipping-ticket-history-90df9a64.js +1 -0
  10. package/dist/types/components/lottery-tipping-ticket-history/lottery-tipping-ticket-history.d.ts +2 -2
  11. package/package.json +1 -1
  12. package/dist/lottery-tipping-ticket-history/lottery-tipping-ticket-history-1c57b065.js +0 -1
  13. package/dist/static/add.svg +0 -8
  14. package/dist/static/delete.svg +0 -37
  15. package/dist/static/info.svg +0 -6
  16. package/dist/static/left-arrow.svg +0 -15
  17. package/dist/static/loading.svg +0 -10
  18. package/dist/static/right-arrow.svg +0 -15
  19. package/dist/cjs/{lottery-tipping-ticket-history-5d5f9bd8.js → lottery-tipping-ticket-history-39cd3d64.js} +188 -188
  20. package/dist/esm/{lottery-tipping-ticket-history-1c57b065.js → lottery-tipping-ticket-history-90df9a64.js} +188 -188
package/dist/cjs/general-multi-select_10.cjs.entry.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-d505438d.js');
6
- const lotteryTippingTicketHistory = require('./lottery-tipping-ticket-history-5d5f9bd8.js');
6
+ const lotteryTippingTicketHistory = require('./lottery-tipping-ticket-history-39cd3d64.js');
7
7
 
8
8
  /**
9
9
  * Days in 1 week.
@@ -260,7 +260,7 @@ function validateTimezone(_hours, minutes) {
260
260
  return minutes >= 0 && minutes <= 59;
261
261
  }
262
262
 
263
- const generalMultiSelectCss = ".multi-select-container{position:relative;font-family:\"Inter\", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:8px 12px;padding-right:4px;border-radius:4px;background:var(--emw-selector-color-background, #e8ebef);cursor:pointer}.control{flex:1;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.control:focus-within{border-color:var(--emw--color-primary, #fed275);box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.chip{display:inline-flex;align-items:center;background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-typography, #555);border-radius:4px;padding:2px 8px;margin-right:6px;font-size:0.875rem;line-height:1.2;justify-content:space-between;flex:0 1 auto;min-width:0}.chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-chip{background:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-300, #333);width:20px;text-align:center;display:block}.remove-btn{background:none;border:none;font-size:1rem;margin-left:6px;cursor:pointer;color:var(--emw--color-gray-150, #6f6f6f)}.remove-btn:hover{color:var(--emw--color-error, red)}.placeholder{color:var(--emw--color-gray-150, #6f6f6f);font-size:0.875rem;padding:3px 8px;line-height:1.2}.arrow{margin-left:auto;font-size:0.8rem;width:20px;color:var(--emw--color-gray-150, #6f6f6f)}.dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:240px;overflow-y:auto;border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:10}.dropdown-item{padding:10px 14px;cursor:pointer;font-size:0.875rem;line-height:1.4;transition:background 0.2s}.dropdown-item:hover{background:var(--emw--color-gray-100, #f4f5f7)}.dropdown-item.selected{background:var(--emw--color-primary-variant, #bae7ff);color:var(--emw--color-primary, #0050b3);font-weight:500}.overflow-popover{position:absolute;top:var(--overflow-top, 0px);left:var(--overflow-left, 0px);max-width:200px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--emw--color-gray-100, #d0d5dd);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:20}";
263
+ const generalMultiSelectCss = ".multi-select-container{position:relative;font-family:\"Inter\", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:8px 12px;padding-right:4px;border-radius:4px;background:var(--emw-selector-color-background, #e8ebef);cursor:pointer}.control{flex:1;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.control:focus-within{border-color:var(--emw--color-primary, #fed275);box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.chip{display:inline-flex;align-items:center;background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-dialog-typography, #000);border-radius:4px;padding:2px 8px;margin-right:6px;font-size:0.875rem;line-height:1.2;justify-content:space-between;flex:0 1 auto;min-width:0}.chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-chip{background:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-300, #333);width:20px;text-align:center;display:block}.remove-btn{background:none;border:none;font-size:1rem;margin-left:6px;cursor:pointer;color:var(--emw--color-gray-150, #6f6f6f)}.remove-btn:hover{color:var(--emw--color-error, red)}.placeholder{color:var(--emw--color-gray-150, #6f6f6f);font-size:0.875rem;padding:3px 8px;line-height:1.2}.arrow{margin-left:auto;font-size:0.8rem;width:20px;color:var(--emw--color-gray-150, #6f6f6f)}.dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:240px;overflow-y:auto;border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;background:var(--emw--color-dialog-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:10}.dropdown-item{padding:10px 14px;cursor:pointer;font-size:0.875rem;line-height:1.4;transition:background 0.2s}.dropdown-item:hover{background:var(--emw--color-background-tertiary, #ccc);color:var(--emw--color-typography, #000)}.dropdown-item.selected{background:var(--emw--color-background-secondary, #f5f5f5);color:var(--emw--color-typography, #000);font-weight:500}.overflow-popover{position:absolute;top:var(--overflow-top, 0px);left:var(--overflow-left, 0px);max-width:200px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--emw--color-gray-100, #d0d5dd);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:20}";
264
264
  const GeneralMultiSelectStyle0 = generalMultiSelectCss;
265
265
 
266
266
  const GeneralMultiSelect = class {
@@ -695,7 +695,7 @@ const getTranslations$1 = (data) => {
695
695
  });
696
696
  };
697
697
 
698
- const lotteryTippingDialogCss = ".dialog-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:1;z-index:199}.dialog-wrapper-visible{visibility:visible}.mask{position:fixed;inset:0;background-color:rgba(0, 0, 0, 0.5);opacity:0;z-index:1000;transition:opacity var(--duration) linear}.mask-enter{opacity:1}.mask-leave{opacity:0}.dialog{position:relative;background:var(--emw--color-dialog-background, #fff);border-radius:12px;box-shadow:0 4px 32px rgba(0, 0, 0, 0.15);opacity:0;transform:scale(0.9);transition:all var(--duration) linear;width:100%;max-width:100vw;min-height:200px;overflow:hidden;z-index:1000}.dialog-enter{opacity:1;transform:scale(1)}.dialog-leave{opacity:0}.dialog.fullscreen{width:100vw !important;height:100vh;overflow:auto;max-height:none;border-radius:0;overflow:hidden}.dialog-header{padding:16px 16px 0 16px;display:flex;justify-content:space-between;align-items:center}.dialog-header .dialog-title{margin:0;font-size:1.25rem;font-weight:500;color:var(--emw--color-dialog-typography, #000)}.dialog-header .close-btn{background:transparent;border:none;font-size:1.5rem;width:2rem;height:2rem;color:var(--emw--color-gray-150, #6f6f6f);cursor:pointer;border-radius:4px}.dialog-header .close-btn:hover{background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-gray-300, #333)}.dialog-content{padding:24px;font-size:0.95rem;line-height:1.6;color:var(--emw--color-dialog-typography, #000);flex:1;overflow-y:auto;max-height:calc(100vh - 200px)}.dialog.fullscreen .dialog-content{max-height:none}.dialog-footer{padding:0 16px 16px 16px;display:flex;justify-content:center;gap:12px}.dialog-footer .cancel-btn,.dialog-footer .confirm-btn{padding:10px 24px;border-radius:6px;font-size:0.9rem;cursor:pointer;transition:all 0.3s linear}.dialog-footer .cancel-btn{border:var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));color:var(--emw--color-gray-300, #333);background:var(--emw--color-gray-400, #fff)}.dialog-footer .cancel-btn:hover{border-color:var(--emw--color-gray-100, #e6e6e6)}.dialog-footer .confirm-btn{border:none;color:var(--emw--color-gray-400, #fff);background:var(--emw-pool-game-acition-normal, #4a90e2);box-shadow:0 2px 4px rgba(74, 144, 226, 0.2)}.dialog-footer .confirm-btn:hover{background:var(--emw-pool-game-action-hover, #357abd)}@media screen and (max-width: 480px){.dialog.fullscreen .dialog-content{padding:12px}}";
698
+ const lotteryTippingDialogCss = ".dialog-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:1;z-index:199}.dialog-wrapper-visible{visibility:visible}.mask{position:fixed;inset:0;background-color:rgba(0, 0, 0, 0.5);opacity:0;z-index:1000;transition:opacity var(--duration) linear}.mask-enter{opacity:1}.mask-leave{opacity:0}.dialog{position:relative;background:var(--emw--color-dialog-background, #fff);border-radius:12px;box-shadow:0 4px 32px rgba(0, 0, 0, 0.15);opacity:0;transform:scale(0.9);transition:all var(--duration) linear;width:100%;max-width:100vw;min-height:200px;overflow:hidden;z-index:1000}.dialog-enter{opacity:1;transform:scale(1)}.dialog-leave{opacity:0}.dialog.fullscreen{width:100vw !important;height:100vh;overflow:auto;max-height:none;border-radius:0;overflow:hidden}.dialog-header{padding:16px 16px 0 16px;display:flex;justify-content:space-between;align-items:center}.dialog-header .dialog-title{margin:0;font-size:1.25rem;font-weight:500;color:var(--emw--color-dialog-typography, #000)}.dialog-header .close-btn{background:transparent;border:none;font-size:1.5rem;width:2rem;height:2rem;color:var(--emw--color-gray-150, #6f6f6f);cursor:pointer;border-radius:4px}.dialog-header .close-btn:hover{background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-gray-300, #333)}.dialog-content{padding:24px;font-size:0.95rem;line-height:1.6;color:var(--emw--color-dialog-typography, #000);flex:1;overflow-y:auto;max-height:calc(100vh - 200px)}.dialog.fullscreen .dialog-content{max-height:none}.dialog-footer{padding:0 16px 16px 16px;display:flex;justify-content:center;gap:12px}.dialog-footer .cancel-btn,.dialog-footer .confirm-btn{padding:10px 24px;border-radius:6px;font-size:0.9rem;cursor:pointer;transition:all 0.3s linear}.dialog-footer .cancel-btn{border:var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));color:var(--emw--color-gray-300, #333);background:var(--emw--color-gray-400, #fff)}.dialog-footer .cancel-btn:hover{border-color:var(--emw--color-gray-100, #e6e6e6)}.dialog-footer .confirm-btn{border:none;color:var(--emw--color-gray-400, #fff);background:var(--emw--color-primary, #009993)}.dialog-footer .confirm-btn:hover{background:var(--emw--color-primary-variant, #004d4a)}@media screen and (max-width: 480px){.dialog.fullscreen .dialog-content{padding:12px}}";
699
699
  const LotteryTippingDialogStyle0 = lotteryTippingDialogCss;
700
700
 
701
701
  const LotteryTippingDialog = class {
@@ -7748,10 +7748,30 @@ const LotteryTippingPagination = class {
7748
7748
  };
7749
7749
  LotteryTippingPagination.style = LotteryTippingPaginationStyle0;
7750
7750
 
7751
+ // This icon file is generated automatically.
7752
+ var DeleteOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" } }] }, "name": "delete", "theme": "outlined" };
7753
+ const DeleteOutlined$1 = DeleteOutlined;
7754
+
7751
7755
  // This icon file is generated automatically.
7752
7756
  var DownOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" } }] }, "name": "down", "theme": "outlined" };
7753
7757
  const DownOutlined$1 = DownOutlined;
7754
7758
 
7759
+ // This icon file is generated automatically.
7760
+ var InfoCircleOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" } }, { "tag": "path", "attrs": { "d": "M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" } }] }, "name": "info-circle", "theme": "outlined" };
7761
+ const InfoCircleOutlined$1 = InfoCircleOutlined;
7762
+
7763
+ // This icon file is generated automatically.
7764
+ var LeftOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" } }] }, "name": "left", "theme": "outlined" };
7765
+ const LeftOutlined$1 = LeftOutlined;
7766
+
7767
+ // This icon file is generated automatically.
7768
+ var PlusSquareOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" } }, { "tag": "path", "attrs": { "d": "M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z" } }] }, "name": "plus-square", "theme": "outlined" };
7769
+ const PlusSquareOutlined$1 = PlusSquareOutlined;
7770
+
7771
+ // This icon file is generated automatically.
7772
+ var RightOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z" } }] }, "name": "right", "theme": "outlined" };
7773
+ const RightOutlined$1 = RightOutlined;
7774
+
7755
7775
  var __assign = (undefined && undefined.__assign) || function () {
7756
7776
  __assign = Object.assign || function(t) {
7757
7777
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -7801,7 +7821,7 @@ const lotteryTippingPanelCss = ".panel-container{border:2px solid var(--emw--col
7801
7821
  const LotteryTippingPanelStyle0 = lotteryTippingPanelCss;
7802
7822
 
7803
7823
  const downIcon = renderIconDefinitionToSVGElement(DownOutlined$1, {
7804
- extraSVGAttrs: { width: '16px', height: '16px', fill: '' }
7824
+ extraSVGAttrs: { width: '16px', height: '16px', fill: 'currentColor' }
7805
7825
  });
7806
7826
  const lotteryTippingPanel = class {
7807
7827
  constructor(hostRef) {
@@ -7844,7 +7864,7 @@ const lotteryTippingPanel = class {
7844
7864
  this.stylingSubscription && this.stylingSubscription.unsubscribe();
7845
7865
  }
7846
7866
  render() {
7847
- return (index.h("div", { key: 'aad4bd39648c6e9df1191429caa1f8b35424d31c', class: "panel-container", ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '685317142a2fe2d110bbec41c6561446f1229b5b', class: { 'panel-header': true, active: this.expanded }, onClick: this.togglePanel }, index.h("div", { key: 'bf42af64a3eac7e8998cb9fe75c465eeaf44b7ba', class: "header-content" }, index.h("slot", { key: '181469c7a4cbe6030f64d4a08eb3e11390a4f569', name: "header" }, index.h("span", { key: '25db3b952ba81bff3a17d67ab9c960365abb6852' }, this.headerTitle))), index.h("span", { key: 'fc10e5fe178aa9b6bbae680b6fe58ca66c3a7df3', class: `arrow ${this.expanded ? 'expanded' : ''}`, innerHTML: downIcon })), index.h("div", { key: '8ae6e1a6b51eb398625d11d0b94fdbebf3cbcbc1', class: `panel-body ${this.expanded ? 'open' : 'closed'}` }, index.h("slot", { key: '9fdf6862787be818e8e9655f151630fd2913c4fd', name: "content" }))));
7867
+ return (index.h("div", { key: 'a924b69afd386d9a4eea9cd7e68b7421dd3949fc', class: "panel-container", ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '250ffcdb2c188a099c3323b8bdb983cb01c56d66', class: { 'panel-header': true, active: this.expanded }, onClick: this.togglePanel }, index.h("div", { key: '09ff482c092c4bc534c9e053bd964ac8aad0311a', class: "header-content" }, index.h("slot", { key: 'eb463418cd334b070272d7f32edef2c63a2ad583', name: "header" }, index.h("span", { key: 'ca745afa0ee74494e17e10cf06430ecdaca04070' }, this.headerTitle))), index.h("span", { key: 'ff58468a38f1d37c9d4fe902e528584c8e43a721', class: `arrow ${this.expanded ? 'expanded' : ''}`, innerHTML: downIcon })), index.h("div", { key: '725f0bc8350e4cc5604b500384c1eca3196c60f3', class: `panel-body ${this.expanded ? 'open' : 'closed'}` }, index.h("slot", { key: 'a10bee4011b55784271817a396eaa8aad64c3c0e', name: "content" }))));
7848
7868
  }
7849
7869
  get el() { return index.getElement(this); }
7850
7870
  static get watchers() { return {
@@ -7981,16 +8001,30 @@ const showNotification = ({ message, theme = 'success' }) => {
7981
8001
  });
7982
8002
  };
7983
8003
 
7984
- const lotteryTippingTicketBetCss = ".LotteryTippingTicketBet__container {\n display: block; /* Or inline-block, depending on desired layout flow */\n font-size: 14px;\n line-height: 1.5715;\n color: var(--emw--color-typography, #000);\n background: var(--emw--color-background, #fff);\n overflow: hidden;\n min-width: 300px;\n container-type: inline-size;\n}\n@container (max-width: 375px) {\n .LotteryTippingTicketBet__container {\n font-size: 12px;\n }\n}\n\n.table-wrapper {\n overflow-x: auto; /* Handle horizontal scroll if content overflows */\n}\n\n.my-table-component {\n width: 100%;\n border-collapse: collapse; /* Important for borders */\n text-align: left;\n border-radius: 0.1rem; /* Ant Design like subtle rounding */\n border-spacing: 0;\n}\n\n/* Header */\n.my-table-component th {\n background: var(--emw--color-background-secondary, #f5f5f5);\n color: var(--emw--color-typography, #000);\n font-weight: 500;\n padding: 0.4rem 0.5rem;\n transition: background 0.3s ease;\n}\n\n/* Cells */\n.my-table-component td {\n padding: 0.4rem 0.5rem;\n color: var(--emw--color-typography, #000);\n background: var(--emw--color-background, #fff);\n transition: background 0.3s;\n}\n@container (max-width: 400px) {\n .my-table-component td {\n padding: 0.3rem 0.3rem;\n }\n}\n\n.my-table-component.bordered th,\n.my-table-component.bordered td {\n border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n/* Bordered style */\n.my-table-component.grid th,\n.my-table-component.grid td {\n border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n.my-table-component.grid th {\n border-bottom-width: 1px; /* Ensure bottom border is consistent */\n}\n\n.my-table-component.grid {\n border: 1px solid var(--emw--color-gray-100, #e6e6e6); /* Outer border */\n border-right-width: 0;\n border-bottom-width: 0;\n}\n\n.my-table-component.grid th:last-child,\n.my-table-component.grid td:last-child {\n border-right: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n.my-table-component.grid tr:last-child td {\n border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n/* Striped style */\n.my-table-component.striped tbody tr:nth-child(even) td {\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n/* Hover (optional, but nice) */\n.my-table-component tbody tr:hover td {\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n.flex {\n display: flex;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.gap-1 {\n gap: 4px;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.align-center {\n align-items: center;\n}\n\n.gap-1 {\n gap: 0.5rem;\n}\n\n.btn {\n color: var(--emw--color-typography, #000);\n background: var(--emw--color-background, #fff);\n font-size: 14px;\n transition: all 0.2s ease;\n}\n.btn:hover {\n cursor: pointer;\n}\n\n.btn:hover {\n background-color: var(--emw--color-gray-100, #e6e6e6);\n}\n\n.btn.disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n.btn.disabled:hover {\n cursor: not-allowed !important;\n}\n\n.LotteryTippingTicketBet__tableToolbar {\n width: 100%;\n margin-bottom: 1rem;\n}\n\n.LotteryTippingTicketBet__tableToolbar--item {\n background-color: transparent;\n cursor: pointer;\n font-weight: 500;\n white-space: nowrap;\n display: inline-flex;\n border-radius: 1.6rem;\n border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n margin-right: 2rem;\n color: var(--emw--color-typography, #000);\n}\n.LotteryTippingTicketBet__tableToolbar--item.mr-0 {\n margin-right: 0rem !important;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup {\n flex-basis: 2rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border-radius: 8px;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 2rem;\n height: 2rem;\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n color: var(--emw--color-typography, #000);\n border-radius: 8px;\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover {\n transform: scale(1.1);\n box-shadow: 0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item img {\n width: 20px;\n height: 20px;\n transition: filter 0.2s ease-in-out;\n filter: grayscale(0.3);\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover img {\n filter: grayscale(0);\n transform: rotate(3deg);\n}\n\ndiv.border-line {\n margin-top: 1rem;\n height: 1px;\n width: 100%;\n box-sizing: border-box;\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n transition: all 0.3s ease;\n}\n\n.LotteryTippingTicketBet__footer {\n padding: 0.5rem;\n}\n\n.my-pagination {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 1rem;\n font-size: 0.8rem;\n color: var(--emw--color-typography-secondary, #333);\n}\n\n.my-pagination span {\n font-weight: 500;\n user-select: none;\n}\n\n.my-pagination .btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n transition: all 0.3s ease;\n cursor: pointer;\n opacity: 0.9;\n color: var(--emw--color-typography, #000);\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n.my-pagination .btn img {\n width: 20px;\n height: 20px;\n transition: transform 0.2s ease;\n}\n\n.my-pagination .btn:hover {\n transform: scale(1.1);\n box-shadow: 0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));\n}\n\n.my-pagination .btn.disabled {\n background-color: var(--emw--color-background-tertiary, #ccc);\n cursor: not-allowed;\n opacity: 0.5;\n transform: scale(1);\n}\n\n.match-info-item {\n display: flex;\n}\n\n.match-info-item-label {\n margin-right: 6px;\n}\n\n.info-icon:hover {\n cursor: pointer;\n}\n\n.LotteryTippingTicketBet__empty p {\n text-align: center;\n}\n\n.no-wrap {\n white-space: nowrap;\n overflow: hidden;\n}\n\n.eventNameContainer__item {\n line-height: 1rem;\n}\n.eventNameContainer__item--title {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 300px;\n}\n@container (max-width: 600px) {\n .eventNameContainer__item--title {\n max-width: 180px;\n }\n}\n@container (max-width: 500px) {\n .eventNameContainer__item--title {\n max-width: 150px;\n }\n}\n@container (max-width: 400px) {\n .eventNameContainer__item--title {\n max-width: 100px;\n }\n}\n@container (max-width: 330px) {\n .eventNameContainer__item--title {\n max-width: 70px;\n }\n}\n\n.LotteryTippingTicketBet__main {\n perspective: 800px;\n will-change: transform, opacity;\n backface-visibility: hidden;\n}\n\n@container (max-width: 520px) {\n .LotteryTippingTicketBet__main {\n flex-wrap: wrap;\n justify-content: center;\n }\n .LotteryTippingTicketBet__tableToolbar--item {\n margin-right: 0 !important;\n }\n}\n/* Fade-In Keyframes */\n@keyframes fadeInLeft {\n from {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n/* Fade-Out Keyframes */\n@keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes fadeInRight {\n from {\n opacity: 0;\n transform: translateX(-100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@-webkit-keyframes slide-left {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n 100% {\n -webkit-transform: translateX(-100px);\n transform: translateX(-100px);\n }\n}\n@keyframes slide-left {\n 0% {\n -webkit-transform: translateX(100%);\n transform: translateX(100%);\n }\n 100% {\n -webkit-transform: translateX(0px);\n transform: translateX(0px);\n }\n}\n@-webkit-keyframes slide-right {\n 0% {\n -webkit-transform: translateX(-100%);\n transform: translateX(-100%);\n }\n 100% {\n -webkit-transform: translateX(0px);\n transform: translateX(0px);\n }\n}\n@keyframes slide-right {\n 0% {\n -webkit-transform: translateX(-100px);\n transform: translateX(-100px);\n }\n 100% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n@-webkit-keyframes slide-top {\n 0% {\n -webkit-transform: translateY(-100px);\n transform: translateY(-100px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n@keyframes slide-top {\n 0% {\n -webkit-transform: translateY(-100px);\n transform: translateY(-100px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n/* Apply to your card classes */\n.card-in-left {\n -webkit-animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-left {\n animation: fadeOut 0.2s ease-out both;\n}\n\n.card-in-right {\n -webkit-animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-right {\n animation: fadeOut 0.2s ease-out both;\n}\n\n.card-in-up {\n -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-down {\n animation: fadeOut 0.2s ease-out both;\n}";
8004
+ const lotteryTippingTicketBetCss = ".LotteryTippingTicketBet__container {\n display: block; /* Or inline-block, depending on desired layout flow */\n font-size: 14px;\n line-height: 1.5715;\n color: var(--emw--color-typography, #000);\n background: var(--emw--color-background, #fff);\n overflow: hidden;\n min-width: 300px;\n container-type: inline-size;\n}\n@container (max-width: 375px) {\n .LotteryTippingTicketBet__container {\n font-size: 12px;\n }\n}\n\n.table-wrapper {\n overflow-x: auto; /* Handle horizontal scroll if content overflows */\n}\n\n.my-table-component {\n width: 100%;\n border-collapse: collapse; /* Important for borders */\n text-align: left;\n border-radius: 0.1rem; /* Ant Design like subtle rounding */\n border-spacing: 0;\n}\n\n/* Header */\n.my-table-component th {\n background: var(--emw--color-background-secondary, #f5f5f5);\n color: var(--emw--color-typography, #000);\n font-weight: 500;\n padding: 0.4rem 0.5rem;\n transition: background 0.3s ease;\n}\n\n/* Cells */\n.my-table-component td {\n padding: 0.4rem 0.5rem;\n color: var(--emw--color-typography, #000);\n background: var(--emw--color-background, #fff);\n transition: background 0.3s;\n}\n@container (max-width: 400px) {\n .my-table-component td {\n padding: 0.3rem 0.3rem;\n }\n}\n\n.my-table-component.bordered th,\n.my-table-component.bordered td {\n border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n/* Bordered style */\n.my-table-component.grid th,\n.my-table-component.grid td {\n border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n.my-table-component.grid th {\n border-bottom-width: 1px; /* Ensure bottom border is consistent */\n}\n\n.my-table-component.grid {\n border: 1px solid var(--emw--color-gray-100, #e6e6e6); /* Outer border */\n border-right-width: 0;\n border-bottom-width: 0;\n}\n\n.my-table-component.grid th:last-child,\n.my-table-component.grid td:last-child {\n border-right: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n.my-table-component.grid tr:last-child td {\n border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n/* Striped style */\n.my-table-component.striped tbody tr:nth-child(even) td {\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n/* Hover (optional, but nice) */\n.my-table-component tbody tr:hover td {\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n.flex {\n display: flex;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.gap-1 {\n gap: 4px;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.align-center {\n align-items: center;\n}\n\n.gap-1 {\n gap: 0.5rem;\n}\n\n.btn {\n color: var(--emw--color-typography, #000);\n background: var(--emw--color-background, #fff);\n font-size: 14px;\n transition: all 0.2s ease;\n}\n.btn:hover {\n cursor: pointer;\n}\n\n.btn:hover {\n background-color: var(--emw--color-gray-100, #e6e6e6);\n}\n\n.btn.disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n.btn.disabled:hover {\n cursor: not-allowed !important;\n}\n\n.LotteryTippingTicketBet__tableToolbar {\n width: 100%;\n margin-bottom: 1rem;\n}\n\n.LotteryTippingTicketBet__tableToolbar--item {\n background-color: transparent;\n cursor: pointer;\n font-weight: 500;\n white-space: nowrap;\n display: inline-flex;\n border-radius: 1.6rem;\n border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n margin-right: 2rem;\n color: var(--emw--color-typography, #000);\n}\n.LotteryTippingTicketBet__tableToolbar--item.mr-0 {\n margin-right: 0rem !important;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup {\n flex-basis: 2rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border-radius: 8px;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 2rem;\n height: 2rem;\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n color: var(--emw--color-typography, #000);\n border-radius: 8px;\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover {\n transform: scale(1.1);\n box-shadow: 0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item .icon {\n width: 20px;\n height: 20px;\n transition: filter 0.2s ease-in-out;\n filter: grayscale(0.3);\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover .icon {\n filter: grayscale(0);\n transform: rotate(3deg);\n}\n\ndiv.border-line {\n margin-top: 1rem;\n height: 1px;\n width: 100%;\n box-sizing: border-box;\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n transition: all 0.3s ease;\n}\n\n.LotteryTippingTicketBet__footer {\n padding: 0.5rem;\n}\n\n.my-pagination {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 1rem;\n font-size: 0.8rem;\n color: var(--emw--color-typography-secondary, #333);\n}\n\n.my-pagination span {\n font-weight: 500;\n user-select: none;\n}\n\n.my-pagination .btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n transition: all 0.3s ease;\n cursor: pointer;\n opacity: 0.9;\n color: var(--emw--color-typography, #000);\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n.my-pagination .btn .icon {\n width: 20px;\n height: 20px;\n transition: transform 0.2s ease;\n}\n\n.my-pagination .btn:hover {\n transform: scale(1.1);\n box-shadow: 0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));\n}\n\n.my-pagination .btn.disabled {\n background-color: var(--emw--color-background-tertiary, #ccc);\n cursor: not-allowed;\n opacity: 0.5;\n transform: scale(1);\n}\n\n.match-info-item {\n display: flex;\n}\n\n.match-info-item-label {\n margin-right: 6px;\n}\n\n.info-icon:hover {\n cursor: pointer;\n}\n\n.LotteryTippingTicketBet__empty p {\n text-align: center;\n}\n\n.no-wrap {\n white-space: nowrap;\n overflow: hidden;\n}\n\n.eventNameContainer__item--title {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 300px;\n}\n@container (max-width: 600px) {\n .eventNameContainer__item--title {\n max-width: 180px;\n }\n}\n@container (max-width: 500px) {\n .eventNameContainer__item--title {\n max-width: 150px;\n }\n}\n@container (max-width: 400px) {\n .eventNameContainer__item--title {\n max-width: 100px;\n }\n}\n@container (max-width: 330px) {\n .eventNameContainer__item--title {\n max-width: 70px;\n }\n}\n\n.LotteryTippingTicketBet__main {\n perspective: 800px;\n will-change: transform, opacity;\n backface-visibility: hidden;\n}\n\n@container (max-width: 520px) {\n .LotteryTippingTicketBet__main {\n flex-wrap: wrap;\n justify-content: center;\n }\n .LotteryTippingTicketBet__tableToolbar--item {\n margin-right: 0 !important;\n }\n}\n/* Fade-In Keyframes */\n@keyframes fadeInLeft {\n from {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n/* Fade-Out Keyframes */\n@keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes fadeInRight {\n from {\n opacity: 0;\n transform: translateX(-100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@-webkit-keyframes slide-left {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n 100% {\n -webkit-transform: translateX(-100px);\n transform: translateX(-100px);\n }\n}\n@keyframes slide-left {\n 0% {\n -webkit-transform: translateX(100%);\n transform: translateX(100%);\n }\n 100% {\n -webkit-transform: translateX(0px);\n transform: translateX(0px);\n }\n}\n@-webkit-keyframes slide-right {\n 0% {\n -webkit-transform: translateX(-100%);\n transform: translateX(-100%);\n }\n 100% {\n -webkit-transform: translateX(0px);\n transform: translateX(0px);\n }\n}\n@keyframes slide-right {\n 0% {\n -webkit-transform: translateX(-100px);\n transform: translateX(-100px);\n }\n 100% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n@-webkit-keyframes slide-top {\n 0% {\n -webkit-transform: translateY(-100px);\n transform: translateY(-100px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n@keyframes slide-top {\n 0% {\n -webkit-transform: translateY(-100px);\n transform: translateY(-100px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n/* Apply to your card classes */\n.card-in-left {\n -webkit-animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-left {\n animation: fadeOut 0.2s ease-out both;\n}\n\n.card-in-right {\n -webkit-animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-right {\n animation: fadeOut 0.2s ease-out both;\n}\n\n.card-in-up {\n -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-down {\n animation: fadeOut 0.2s ease-out both;\n}\n\n.loading-wrap {\n margin: 20px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 40vh;\n}\n.loading-wrap .dots-container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n.loading-wrap .dot {\n height: 14px;\n width: 14px;\n margin-right: 14px;\n border-radius: 14px;\n background-color: var(--emw--color-gray-300, #333);\n animation: pulse 1.5s infinite ease-in-out;\n}\n.loading-wrap .dot:last-child {\n margin-right: 0;\n}\n.loading-wrap .dot:nth-child(1) {\n animation-delay: -0.3s;\n}\n.loading-wrap .dot:nth-child(2) {\n animation-delay: -0.1s;\n}\n.loading-wrap .dot:nth-child(3) {\n animation-delay: 0.1s;\n}\n@keyframes pulse {\n 0% {\n transform: scale(0.8);\n background-color: var(--emw--color-gray-300, #333);\n }\n 50% {\n transform: scale(1.2);\n background-color: var(--emw--color-gray-100, #e6e6e6);\n }\n 100% {\n transform: scale(0.8);\n background-color: var(--emw--color-gray-150, #6f6f6f);\n }\n}";
7985
8005
  const LotteryTippingTicketBetStyle0 = lotteryTippingTicketBetCss;
7986
8006
 
8007
+ const addImagePath = renderIconDefinitionToSVGElement(PlusSquareOutlined$1, {
8008
+ extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
8009
+ });
8010
+ const deleteImagePath = renderIconDefinitionToSVGElement(DeleteOutlined$1, {
8011
+ extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
8012
+ });
8013
+ const infoImagePath = renderIconDefinitionToSVGElement(InfoCircleOutlined$1, {
8014
+ extraSVGAttrs: { width: '16px', height: '16px', fill: 'currentColor' }
8015
+ });
8016
+ const leftImagePath = renderIconDefinitionToSVGElement(LeftOutlined$1, {
8017
+ extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
8018
+ });
8019
+ const rightImagePath = renderIconDefinitionToSVGElement(RightOutlined$1, {
8020
+ extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
8021
+ });
7987
8022
  const LotteryTippingTicketBet = class {
7988
8023
  constructor(hostRef) {
7989
8024
  index.registerInstance(this, hostRef);
7990
8025
  this.lotteryTippingBulletBetEvent = index.createEvent(this, "lotteryTippingBulletBetSelect", 7);
7991
8026
  this.lotteryTippingCurrentPageChangeEvent = index.createEvent(this, "lotteryTippingCurrentPageChange", 7);
7992
- this.infoImagePath = index.getAssetPath('../static/info.svg');
7993
- this.eventNameRender = (item, value) => (index.h("div", { class: "flex gap-1 eventNameContainer__item" }, index.h("span", { class: "eventNameContainer__item--title" }, value), index.h("general-tooltip", null, index.h("img", { slot: "trigger", class: "info-icon", src: this.infoImagePath, style: { width: '18px' } }), index.h("div", { slot: "content" }, index.h("div", { class: "match-info" }, index.h("div", { class: "match-info-item" }, index.h("div", { class: "match-info-item-label" }, translate('homeTeam', this.language)), index.h("div", { class: "match-info-item-value" }, item.homeName)), index.h("div", { class: "match-info-item" }, index.h("div", { class: "match-info-item-label" }, translate('awayTeam', this.language)), index.h("div", { class: "match-info-item-value" }, item.awayName)))))));
8027
+ this.eventNameRender = (item, value) => (index.h("div", { class: "flex gap-1 eventNameContainer__item" }, index.h("span", { class: "eventNameContainer__item--title" }, value), index.h("general-tooltip", null, index.h("span", { slot: "trigger", class: "icon info-icon", innerHTML: infoImagePath, style: { width: '18px' } }), index.h("div", { slot: "content" }, index.h("div", { class: "match-info" }, index.h("div", { class: "match-info-item" }, index.h("div", { class: "match-info-item-label" }, translate('homeTeam', this.language)), index.h("div", { class: "match-info-item-value" }, item.homeName)), index.h("div", { class: "match-info-item" }, index.h("div", { class: "match-info-item-label" }, translate('awayTeam', this.language)), index.h("div", { class: "match-info-item-value" }, item.awayName)))))));
7994
8028
  this.columns = [
7995
8029
  { title: '', value: 'index', width: 3 },
7996
8030
  {
@@ -8256,11 +8290,13 @@ const LotteryTippingTicketBet = class {
8256
8290
  handleCurrentPageChange() {
8257
8291
  this.lotteryTippingCurrentPageChangeEvent.emit({ currentPage: this.currentPage });
8258
8292
  }
8293
+ renderLoading() {
8294
+ return (index.h("div", { class: "loading-wrap" }, index.h("section", { class: "dots-container" }, index.h("div", { class: "dot" }), index.h("div", { class: "dot" }), index.h("div", { class: "dot" }), index.h("div", { class: "dot" }), index.h("div", { class: "dot" }))));
8295
+ }
8259
8296
  render() {
8260
8297
  var _a, _b, _c, _d;
8261
- const loadingImagePath = index.getAssetPath('../static/loading.svg');
8262
8298
  if (this.isLoading) {
8263
- return (index.h("div", { ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, index.h("div", { class: "flex align-center gap-1" }, index.h("p", null, translate('loading', this.language)), index.h("img", { src: loadingImagePath }))));
8299
+ return this.renderLoading();
8264
8300
  }
8265
8301
  if (this.hasErrors) {
8266
8302
  return (index.h("div", { ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, index.h("p", null, translate('error', this.language))));
@@ -8269,10 +8305,6 @@ const LotteryTippingTicketBet = class {
8269
8305
  var _a;
8270
8306
  return (index.h("th", { key: column.value, style: { width: column.width + '%', textAlign: column.align } }, typeof column.title === 'string' ? column.title : (_a = column.title) === null || _a === void 0 ? void 0 : _a.call(column)));
8271
8307
  })))), index.h("tbody", null, dataSource.map((row, index$1) => (index.h("tr", { key: index$1 }, columns.map((column) => (index.h("td", { key: column.value, style: { width: column.width + '%', textAlign: column.align }, class: { 'no-wrap': column.nowrap } }, column.render ? column.render(row, row[column.value], index$1) : row[column.value])))))))));
8272
- const deleteImagePath = index.getAssetPath('../static/delete.svg');
8273
- const addImagePath = index.getAssetPath('../static/add.svg');
8274
- const leftImagePath = index.getAssetPath('../static/left-arrow.svg');
8275
- const rightImagePath = index.getAssetPath('../static/right-arrow.svg');
8276
8308
  const lineOperatorAddShow = this.totalPages < this.maxTotalPages && this.currentPage === this.totalPages ? true : false;
8277
8309
  const lineOperatorRemoveShow = this.totalPages > this.minTotalPages ? true : false;
8278
8310
  if (this.ticketDataSource.length === 0 || this.minTotalPages === 0 || this.maxTotalPages === 0) {
@@ -8282,16 +8314,16 @@ const LotteryTippingTicketBet = class {
8282
8314
  return (index.h("div", { class: "LotteryTippingTicketBet__container", ref: (el) => (this.stylingContainer = el) }, index.h("div", { class: "LotteryTippingTicketBet__main", ref: (el) => (this.mainContainer = el) }, index.h(MyTable, { columns: this.columns, dataSource: ((_a = this.ticketDataSource) === null || _a === void 0 ? void 0 : _a.map((item, index) => (Object.assign(Object.assign({}, item), { index: index + 1 })))) || [], hideHead: false, grid: false, bordered: false }), this.totalPages > 1 && (index.h("div", null, index.h("div", { class: 'border-line' }), index.h("div", { class: "LotteryTippingTicketBet__footer" }, index.h("div", { class: "my-pagination flex justify-between" }, index.h("span", null, translate('lineInfo', this.language, {
8283
8315
  currentPage: this.currentPage,
8284
8316
  totalPages: this.totalPages
8285
- })), index.h("div", { class: 'flex gap-1' }, index.h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, index.h("img", { src: leftImagePath })), index.h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, index.h("img", { src: rightImagePath }))))))))));
8317
+ })), index.h("div", { class: 'flex gap-1' }, index.h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, index.h("span", { class: "icon", innerHTML: leftImagePath })), index.h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, index.h("span", { class: "icon", innerHTML: rightImagePath }))))))))));
8286
8318
  }
8287
8319
  return (index.h("div", { ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, index.h("div", { class: "LotteryTippingTicketBet__tableToolbar flex justify-end gap-1" }, index.h("button", { class: {
8288
8320
  'LotteryTippingTicketBet__tableToolbar--item': true,
8289
8321
  'mr-0': !(lineOperatorAddShow || lineOperatorRemoveShow)
8290
8322
  }, onClick: this.handleClearAll.bind(this) }, translate('clearAll', this.language))), index.h("div", { class: "flex align-center LotteryTippingTicketBet__main", ref: (el) => (this.mainContainer = el) }, index.h(MyTable, { columns: this.columns, dataSource: ((_b = this.ticketDataSource) === null || _b === void 0 ? void 0 : _b.map((item, index) => (Object.assign(Object.assign({}, item), { index: index + 1 })))) || [], hideHead: false, grid: false, bordered: false }), (lineOperatorAddShow || lineOperatorRemoveShow) && (index.h("div", { class: "LotteryTippingTicketBet__lineOperatorGroup" }, lineOperatorAddShow && (index.h("div", { class: {
8291
8323
  'LotteryTippingTicketBet__lineOperatorGroup--item': true
8292
- }, onClick: this.handleAddLine.bind(this) }, index.h("img", { src: addImagePath }))), lineOperatorRemoveShow && (index.h("div", { class: {
8324
+ }, onClick: this.handleAddLine.bind(this) }, index.h("span", { class: "icon", innerHTML: addImagePath }))), lineOperatorRemoveShow && (index.h("div", { class: {
8293
8325
  'LotteryTippingTicketBet__lineOperatorGroup--item': true
8294
- }, onClick: this.handleRemoveLine.bind(this) }, index.h("img", { src: deleteImagePath })))))), index.h("div", { class: 'border-line' }), index.h("div", { class: "LotteryTippingTicketBet__footer" }, index.h("div", { class: "my-pagination flex justify-between" }, index.h("span", null, translate('lineInfo', this.language, { currentPage: this.currentPage, totalPages: this.totalPages })), index.h("div", { class: 'flex gap-1' }, index.h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, index.h("img", { src: leftImagePath })), index.h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, index.h("img", { src: rightImagePath }))))), this.dialogConfig.visible && (index.h("vaadin-confirm-dialog", { rejectButtonVisible: true, rejectText: translate('cancel', this.language), confirmText: translate('confirm', this.language), opened: (_c = this.dialogConfig) === null || _c === void 0 ? void 0 : _c.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_d = this.dialogConfig) === null || _d === void 0 ? void 0 : _d.content))));
8326
+ }, onClick: this.handleRemoveLine.bind(this) }, index.h("span", { class: "icon", innerHTML: deleteImagePath })))))), index.h("div", { class: 'border-line' }), index.h("div", { class: "LotteryTippingTicketBet__footer" }, index.h("div", { class: "my-pagination flex justify-between" }, index.h("span", null, translate('lineInfo', this.language, { currentPage: this.currentPage, totalPages: this.totalPages })), index.h("div", { class: 'flex gap-1' }, index.h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, index.h("span", { class: "icon", innerHTML: leftImagePath })), index.h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, index.h("span", { class: "icon", innerHTML: rightImagePath }))))), this.dialogConfig.visible && (index.h("vaadin-confirm-dialog", { rejectButtonVisible: true, rejectText: translate('cancel', this.language), confirmText: translate('confirm', this.language), opened: (_c = this.dialogConfig) === null || _c === void 0 ? void 0 : _c.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_d = this.dialogConfig) === null || _d === void 0 ? void 0 : _d.content))));
8295
8327
  }
8296
8328
  static get assetsDirs() { return ["../static"]; }
8297
8329
  static get watchers() { return {
package/dist/cjs/index.cjs.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const lotteryTippingTicketHistory = require('./lottery-tipping-ticket-history-5d5f9bd8.js');
5
+ const lotteryTippingTicketHistory = require('./lottery-tipping-ticket-history-39cd3d64.js');
6
6
  require('./index-d505438d.js');
7
7
 
8
8
 
package/dist/collection/components/lottery-tipping-panel/lottery-tipping-panel.js CHANGED
@@ -3,7 +3,7 @@ import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../.
3
3
  import { DownOutlined } from "@ant-design/icons-svg";
4
4
  import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers";
5
5
  const downIcon = renderIconDefinitionToSVGElement(DownOutlined, {
6
- extraSVGAttrs: { width: '16px', height: '16px', fill: '' }
6
+ extraSVGAttrs: { width: '16px', height: '16px', fill: 'currentColor' }
7
7
  });
8
8
  export class lotteryTippingPanel {
9
9
  constructor() {
@@ -45,7 +45,7 @@ export class lotteryTippingPanel {
45
45
  this.stylingSubscription && this.stylingSubscription.unsubscribe();
46
46
  }
47
47
  render() {
48
- return (h("div", { key: 'aad4bd39648c6e9df1191429caa1f8b35424d31c', class: "panel-container", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '685317142a2fe2d110bbec41c6561446f1229b5b', class: { 'panel-header': true, active: this.expanded }, onClick: this.togglePanel }, h("div", { key: 'bf42af64a3eac7e8998cb9fe75c465eeaf44b7ba', class: "header-content" }, h("slot", { key: '181469c7a4cbe6030f64d4a08eb3e11390a4f569', name: "header" }, h("span", { key: '25db3b952ba81bff3a17d67ab9c960365abb6852' }, this.headerTitle))), h("span", { key: 'fc10e5fe178aa9b6bbae680b6fe58ca66c3a7df3', class: `arrow ${this.expanded ? 'expanded' : ''}`, innerHTML: downIcon })), h("div", { key: '8ae6e1a6b51eb398625d11d0b94fdbebf3cbcbc1', class: `panel-body ${this.expanded ? 'open' : 'closed'}` }, h("slot", { key: '9fdf6862787be818e8e9655f151630fd2913c4fd', name: "content" }))));
48
+ return (h("div", { key: 'a924b69afd386d9a4eea9cd7e68b7421dd3949fc', class: "panel-container", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '250ffcdb2c188a099c3323b8bdb983cb01c56d66', class: { 'panel-header': true, active: this.expanded }, onClick: this.togglePanel }, h("div", { key: '09ff482c092c4bc534c9e053bd964ac8aad0311a', class: "header-content" }, h("slot", { key: 'eb463418cd334b070272d7f32edef2c63a2ad583', name: "header" }, h("span", { key: 'ca745afa0ee74494e17e10cf06430ecdaca04070' }, this.headerTitle))), h("span", { key: 'ff58468a38f1d37c9d4fe902e528584c8e43a721', class: `arrow ${this.expanded ? 'expanded' : ''}`, innerHTML: downIcon })), h("div", { key: '725f0bc8350e4cc5604b500384c1eca3196c60f3', class: `panel-body ${this.expanded ? 'open' : 'closed'}` }, h("slot", { key: 'a10bee4011b55784271817a396eaa8aad64c3c0e', name: "content" }))));
49
49
  }
50
50
  static get is() { return "lottery-tipping-panel"; }
51
51
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/lottery-tipping-ticket-history/lottery-tipping-ticket-history.js CHANGED
@@ -1,11 +1,11 @@
1
+ import "../../../../../lottery-tipping-dialog/dist/types/index";
2
+ import "../../../../../lottery-tipping-ticket-bet/dist/types/index";
1
3
  import { h } from "@stencil/core";
2
4
  import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
3
- import { fetchRequest, toQueryParams, parseEachLineNumber, thousandSeperator, isMobile, fetcher, showNotification } from "../../utils/utils";
4
- import { DrawResult } from "../../models";
5
5
  import { format } from "date-fns";
6
- import "../../../../../lottery-tipping-dialog/dist/types/index";
7
- import "../../../../../lottery-tipping-ticket-bet/dist/types/index";
6
+ import { DrawResult } from "../../models";
8
7
  import { getTranslations, translate } from "../../utils/locale.utils";
8
+ import { fetcher, fetchRequest, isMobile, parseEachLineNumber, showNotification, thousandSeperator, toQueryParams } from "../../utils/utils";
9
9
  export class LotteryTippingTicketHistory {
10
10
  constructor() {
11
11
  this.ticketTypeMap = {
package/dist/esm/general-multi-select_10.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, c as createEvent, g as getAssetPath, h, a as getElement } from './index-4e926388.js';
2
- import { r as requiredArgs, t as toInteger, s as setClientStyling, a as setClientStylingURL, b as setStreamStyling, g as getTranslations$2, c as translate$2, f as format, i as isMobile } from './lottery-tipping-ticket-history-1c57b065.js';
3
- export { L as lottery_tipping_ticket_history } from './lottery-tipping-ticket-history-1c57b065.js';
2
+ import { r as requiredArgs, t as toInteger, s as setClientStyling, a as setClientStylingURL, b as setStreamStyling, g as getTranslations$2, c as translate$2, f as format, i as isMobile } from './lottery-tipping-ticket-history-90df9a64.js';
3
+ export { L as lottery_tipping_ticket_history } from './lottery-tipping-ticket-history-90df9a64.js';
4
4
 
5
5
  /**
6
6
  * Days in 1 week.
@@ -257,7 +257,7 @@ function validateTimezone(_hours, minutes) {
257
257
  return minutes >= 0 && minutes <= 59;
258
258
  }
259
259
 
260
- const generalMultiSelectCss = ".multi-select-container{position:relative;font-family:\"Inter\", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:8px 12px;padding-right:4px;border-radius:4px;background:var(--emw-selector-color-background, #e8ebef);cursor:pointer}.control{flex:1;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.control:focus-within{border-color:var(--emw--color-primary, #fed275);box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.chip{display:inline-flex;align-items:center;background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-typography, #555);border-radius:4px;padding:2px 8px;margin-right:6px;font-size:0.875rem;line-height:1.2;justify-content:space-between;flex:0 1 auto;min-width:0}.chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-chip{background:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-300, #333);width:20px;text-align:center;display:block}.remove-btn{background:none;border:none;font-size:1rem;margin-left:6px;cursor:pointer;color:var(--emw--color-gray-150, #6f6f6f)}.remove-btn:hover{color:var(--emw--color-error, red)}.placeholder{color:var(--emw--color-gray-150, #6f6f6f);font-size:0.875rem;padding:3px 8px;line-height:1.2}.arrow{margin-left:auto;font-size:0.8rem;width:20px;color:var(--emw--color-gray-150, #6f6f6f)}.dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:240px;overflow-y:auto;border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:10}.dropdown-item{padding:10px 14px;cursor:pointer;font-size:0.875rem;line-height:1.4;transition:background 0.2s}.dropdown-item:hover{background:var(--emw--color-gray-100, #f4f5f7)}.dropdown-item.selected{background:var(--emw--color-primary-variant, #bae7ff);color:var(--emw--color-primary, #0050b3);font-weight:500}.overflow-popover{position:absolute;top:var(--overflow-top, 0px);left:var(--overflow-left, 0px);max-width:200px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--emw--color-gray-100, #d0d5dd);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:20}";
260
+ const generalMultiSelectCss = ".multi-select-container{position:relative;font-family:\"Inter\", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:8px 12px;padding-right:4px;border-radius:4px;background:var(--emw-selector-color-background, #e8ebef);cursor:pointer}.control{flex:1;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.control:focus-within{border-color:var(--emw--color-primary, #fed275);box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.chip{display:inline-flex;align-items:center;background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-dialog-typography, #000);border-radius:4px;padding:2px 8px;margin-right:6px;font-size:0.875rem;line-height:1.2;justify-content:space-between;flex:0 1 auto;min-width:0}.chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-chip{background:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-300, #333);width:20px;text-align:center;display:block}.remove-btn{background:none;border:none;font-size:1rem;margin-left:6px;cursor:pointer;color:var(--emw--color-gray-150, #6f6f6f)}.remove-btn:hover{color:var(--emw--color-error, red)}.placeholder{color:var(--emw--color-gray-150, #6f6f6f);font-size:0.875rem;padding:3px 8px;line-height:1.2}.arrow{margin-left:auto;font-size:0.8rem;width:20px;color:var(--emw--color-gray-150, #6f6f6f)}.dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:240px;overflow-y:auto;border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;background:var(--emw--color-dialog-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:10}.dropdown-item{padding:10px 14px;cursor:pointer;font-size:0.875rem;line-height:1.4;transition:background 0.2s}.dropdown-item:hover{background:var(--emw--color-background-tertiary, #ccc);color:var(--emw--color-typography, #000)}.dropdown-item.selected{background:var(--emw--color-background-secondary, #f5f5f5);color:var(--emw--color-typography, #000);font-weight:500}.overflow-popover{position:absolute;top:var(--overflow-top, 0px);left:var(--overflow-left, 0px);max-width:200px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--emw--color-gray-100, #d0d5dd);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:20}";
261
261
  const GeneralMultiSelectStyle0 = generalMultiSelectCss;
262
262
 
263
263
  const GeneralMultiSelect = class {
@@ -692,7 +692,7 @@ const getTranslations$1 = (data) => {
692
692
  });
693
693
  };
694
694
 
695
- const lotteryTippingDialogCss = ".dialog-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:1;z-index:199}.dialog-wrapper-visible{visibility:visible}.mask{position:fixed;inset:0;background-color:rgba(0, 0, 0, 0.5);opacity:0;z-index:1000;transition:opacity var(--duration) linear}.mask-enter{opacity:1}.mask-leave{opacity:0}.dialog{position:relative;background:var(--emw--color-dialog-background, #fff);border-radius:12px;box-shadow:0 4px 32px rgba(0, 0, 0, 0.15);opacity:0;transform:scale(0.9);transition:all var(--duration) linear;width:100%;max-width:100vw;min-height:200px;overflow:hidden;z-index:1000}.dialog-enter{opacity:1;transform:scale(1)}.dialog-leave{opacity:0}.dialog.fullscreen{width:100vw !important;height:100vh;overflow:auto;max-height:none;border-radius:0;overflow:hidden}.dialog-header{padding:16px 16px 0 16px;display:flex;justify-content:space-between;align-items:center}.dialog-header .dialog-title{margin:0;font-size:1.25rem;font-weight:500;color:var(--emw--color-dialog-typography, #000)}.dialog-header .close-btn{background:transparent;border:none;font-size:1.5rem;width:2rem;height:2rem;color:var(--emw--color-gray-150, #6f6f6f);cursor:pointer;border-radius:4px}.dialog-header .close-btn:hover{background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-gray-300, #333)}.dialog-content{padding:24px;font-size:0.95rem;line-height:1.6;color:var(--emw--color-dialog-typography, #000);flex:1;overflow-y:auto;max-height:calc(100vh - 200px)}.dialog.fullscreen .dialog-content{max-height:none}.dialog-footer{padding:0 16px 16px 16px;display:flex;justify-content:center;gap:12px}.dialog-footer .cancel-btn,.dialog-footer .confirm-btn{padding:10px 24px;border-radius:6px;font-size:0.9rem;cursor:pointer;transition:all 0.3s linear}.dialog-footer .cancel-btn{border:var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));color:var(--emw--color-gray-300, #333);background:var(--emw--color-gray-400, #fff)}.dialog-footer .cancel-btn:hover{border-color:var(--emw--color-gray-100, #e6e6e6)}.dialog-footer .confirm-btn{border:none;color:var(--emw--color-gray-400, #fff);background:var(--emw-pool-game-acition-normal, #4a90e2);box-shadow:0 2px 4px rgba(74, 144, 226, 0.2)}.dialog-footer .confirm-btn:hover{background:var(--emw-pool-game-action-hover, #357abd)}@media screen and (max-width: 480px){.dialog.fullscreen .dialog-content{padding:12px}}";
695
+ const lotteryTippingDialogCss = ".dialog-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:1;z-index:199}.dialog-wrapper-visible{visibility:visible}.mask{position:fixed;inset:0;background-color:rgba(0, 0, 0, 0.5);opacity:0;z-index:1000;transition:opacity var(--duration) linear}.mask-enter{opacity:1}.mask-leave{opacity:0}.dialog{position:relative;background:var(--emw--color-dialog-background, #fff);border-radius:12px;box-shadow:0 4px 32px rgba(0, 0, 0, 0.15);opacity:0;transform:scale(0.9);transition:all var(--duration) linear;width:100%;max-width:100vw;min-height:200px;overflow:hidden;z-index:1000}.dialog-enter{opacity:1;transform:scale(1)}.dialog-leave{opacity:0}.dialog.fullscreen{width:100vw !important;height:100vh;overflow:auto;max-height:none;border-radius:0;overflow:hidden}.dialog-header{padding:16px 16px 0 16px;display:flex;justify-content:space-between;align-items:center}.dialog-header .dialog-title{margin:0;font-size:1.25rem;font-weight:500;color:var(--emw--color-dialog-typography, #000)}.dialog-header .close-btn{background:transparent;border:none;font-size:1.5rem;width:2rem;height:2rem;color:var(--emw--color-gray-150, #6f6f6f);cursor:pointer;border-radius:4px}.dialog-header .close-btn:hover{background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-gray-300, #333)}.dialog-content{padding:24px;font-size:0.95rem;line-height:1.6;color:var(--emw--color-dialog-typography, #000);flex:1;overflow-y:auto;max-height:calc(100vh - 200px)}.dialog.fullscreen .dialog-content{max-height:none}.dialog-footer{padding:0 16px 16px 16px;display:flex;justify-content:center;gap:12px}.dialog-footer .cancel-btn,.dialog-footer .confirm-btn{padding:10px 24px;border-radius:6px;font-size:0.9rem;cursor:pointer;transition:all 0.3s linear}.dialog-footer .cancel-btn{border:var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));color:var(--emw--color-gray-300, #333);background:var(--emw--color-gray-400, #fff)}.dialog-footer .cancel-btn:hover{border-color:var(--emw--color-gray-100, #e6e6e6)}.dialog-footer .confirm-btn{border:none;color:var(--emw--color-gray-400, #fff);background:var(--emw--color-primary, #009993)}.dialog-footer .confirm-btn:hover{background:var(--emw--color-primary-variant, #004d4a)}@media screen and (max-width: 480px){.dialog.fullscreen .dialog-content{padding:12px}}";
696
696
  const LotteryTippingDialogStyle0 = lotteryTippingDialogCss;
697
697
 
698
698
  const LotteryTippingDialog = class {
@@ -7745,10 +7745,30 @@ const LotteryTippingPagination = class {
7745
7745
  };
7746
7746
  LotteryTippingPagination.style = LotteryTippingPaginationStyle0;
7747
7747
 
7748
+ // This icon file is generated automatically.
7749
+ var DeleteOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" } }] }, "name": "delete", "theme": "outlined" };
7750
+ const DeleteOutlined$1 = DeleteOutlined;
7751
+
7748
7752
  // This icon file is generated automatically.
7749
7753
  var DownOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" } }] }, "name": "down", "theme": "outlined" };
7750
7754
  const DownOutlined$1 = DownOutlined;
7751
7755
 
7756
+ // This icon file is generated automatically.
7757
+ var InfoCircleOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" } }, { "tag": "path", "attrs": { "d": "M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" } }] }, "name": "info-circle", "theme": "outlined" };
7758
+ const InfoCircleOutlined$1 = InfoCircleOutlined;
7759
+
7760
+ // This icon file is generated automatically.
7761
+ var LeftOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" } }] }, "name": "left", "theme": "outlined" };
7762
+ const LeftOutlined$1 = LeftOutlined;
7763
+
7764
+ // This icon file is generated automatically.
7765
+ var PlusSquareOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" } }, { "tag": "path", "attrs": { "d": "M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z" } }] }, "name": "plus-square", "theme": "outlined" };
7766
+ const PlusSquareOutlined$1 = PlusSquareOutlined;
7767
+
7768
+ // This icon file is generated automatically.
7769
+ var RightOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z" } }] }, "name": "right", "theme": "outlined" };
7770
+ const RightOutlined$1 = RightOutlined;
7771
+
7752
7772
  var __assign = (undefined && undefined.__assign) || function () {
7753
7773
  __assign = Object.assign || function(t) {
7754
7774
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -7798,7 +7818,7 @@ const lotteryTippingPanelCss = ".panel-container{border:2px solid var(--emw--col
7798
7818
  const LotteryTippingPanelStyle0 = lotteryTippingPanelCss;
7799
7819
 
7800
7820
  const downIcon = renderIconDefinitionToSVGElement(DownOutlined$1, {
7801
- extraSVGAttrs: { width: '16px', height: '16px', fill: '' }
7821
+ extraSVGAttrs: { width: '16px', height: '16px', fill: 'currentColor' }
7802
7822
  });
7803
7823
  const lotteryTippingPanel = class {
7804
7824
  constructor(hostRef) {
@@ -7841,7 +7861,7 @@ const lotteryTippingPanel = class {
7841
7861
  this.stylingSubscription && this.stylingSubscription.unsubscribe();
7842
7862
  }
7843
7863
  render() {
7844
- return (h("div", { key: 'aad4bd39648c6e9df1191429caa1f8b35424d31c', class: "panel-container", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '685317142a2fe2d110bbec41c6561446f1229b5b', class: { 'panel-header': true, active: this.expanded }, onClick: this.togglePanel }, h("div", { key: 'bf42af64a3eac7e8998cb9fe75c465eeaf44b7ba', class: "header-content" }, h("slot", { key: '181469c7a4cbe6030f64d4a08eb3e11390a4f569', name: "header" }, h("span", { key: '25db3b952ba81bff3a17d67ab9c960365abb6852' }, this.headerTitle))), h("span", { key: 'fc10e5fe178aa9b6bbae680b6fe58ca66c3a7df3', class: `arrow ${this.expanded ? 'expanded' : ''}`, innerHTML: downIcon })), h("div", { key: '8ae6e1a6b51eb398625d11d0b94fdbebf3cbcbc1', class: `panel-body ${this.expanded ? 'open' : 'closed'}` }, h("slot", { key: '9fdf6862787be818e8e9655f151630fd2913c4fd', name: "content" }))));
7864
+ return (h("div", { key: 'a924b69afd386d9a4eea9cd7e68b7421dd3949fc', class: "panel-container", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '250ffcdb2c188a099c3323b8bdb983cb01c56d66', class: { 'panel-header': true, active: this.expanded }, onClick: this.togglePanel }, h("div", { key: '09ff482c092c4bc534c9e053bd964ac8aad0311a', class: "header-content" }, h("slot", { key: 'eb463418cd334b070272d7f32edef2c63a2ad583', name: "header" }, h("span", { key: 'ca745afa0ee74494e17e10cf06430ecdaca04070' }, this.headerTitle))), h("span", { key: 'ff58468a38f1d37c9d4fe902e528584c8e43a721', class: `arrow ${this.expanded ? 'expanded' : ''}`, innerHTML: downIcon })), h("div", { key: '725f0bc8350e4cc5604b500384c1eca3196c60f3', class: `panel-body ${this.expanded ? 'open' : 'closed'}` }, h("slot", { key: 'a10bee4011b55784271817a396eaa8aad64c3c0e', name: "content" }))));
7845
7865
  }
7846
7866
  get el() { return getElement(this); }
7847
7867
  static get watchers() { return {
@@ -7978,16 +7998,30 @@ const showNotification = ({ message, theme = 'success' }) => {
7978
7998
  });
7979
7999
  };
7980
8000
 
7981
- const lotteryTippingTicketBetCss = ".LotteryTippingTicketBet__container {\n display: block; /* Or inline-block, depending on desired layout flow */\n font-size: 14px;\n line-height: 1.5715;\n color: var(--emw--color-typography, #000);\n background: var(--emw--color-background, #fff);\n overflow: hidden;\n min-width: 300px;\n container-type: inline-size;\n}\n@container (max-width: 375px) {\n .LotteryTippingTicketBet__container {\n font-size: 12px;\n }\n}\n\n.table-wrapper {\n overflow-x: auto; /* Handle horizontal scroll if content overflows */\n}\n\n.my-table-component {\n width: 100%;\n border-collapse: collapse; /* Important for borders */\n text-align: left;\n border-radius: 0.1rem; /* Ant Design like subtle rounding */\n border-spacing: 0;\n}\n\n/* Header */\n.my-table-component th {\n background: var(--emw--color-background-secondary, #f5f5f5);\n color: var(--emw--color-typography, #000);\n font-weight: 500;\n padding: 0.4rem 0.5rem;\n transition: background 0.3s ease;\n}\n\n/* Cells */\n.my-table-component td {\n padding: 0.4rem 0.5rem;\n color: var(--emw--color-typography, #000);\n background: var(--emw--color-background, #fff);\n transition: background 0.3s;\n}\n@container (max-width: 400px) {\n .my-table-component td {\n padding: 0.3rem 0.3rem;\n }\n}\n\n.my-table-component.bordered th,\n.my-table-component.bordered td {\n border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n/* Bordered style */\n.my-table-component.grid th,\n.my-table-component.grid td {\n border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n.my-table-component.grid th {\n border-bottom-width: 1px; /* Ensure bottom border is consistent */\n}\n\n.my-table-component.grid {\n border: 1px solid var(--emw--color-gray-100, #e6e6e6); /* Outer border */\n border-right-width: 0;\n border-bottom-width: 0;\n}\n\n.my-table-component.grid th:last-child,\n.my-table-component.grid td:last-child {\n border-right: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n.my-table-component.grid tr:last-child td {\n border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n/* Striped style */\n.my-table-component.striped tbody tr:nth-child(even) td {\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n/* Hover (optional, but nice) */\n.my-table-component tbody tr:hover td {\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n.flex {\n display: flex;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.gap-1 {\n gap: 4px;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.align-center {\n align-items: center;\n}\n\n.gap-1 {\n gap: 0.5rem;\n}\n\n.btn {\n color: var(--emw--color-typography, #000);\n background: var(--emw--color-background, #fff);\n font-size: 14px;\n transition: all 0.2s ease;\n}\n.btn:hover {\n cursor: pointer;\n}\n\n.btn:hover {\n background-color: var(--emw--color-gray-100, #e6e6e6);\n}\n\n.btn.disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n.btn.disabled:hover {\n cursor: not-allowed !important;\n}\n\n.LotteryTippingTicketBet__tableToolbar {\n width: 100%;\n margin-bottom: 1rem;\n}\n\n.LotteryTippingTicketBet__tableToolbar--item {\n background-color: transparent;\n cursor: pointer;\n font-weight: 500;\n white-space: nowrap;\n display: inline-flex;\n border-radius: 1.6rem;\n border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n margin-right: 2rem;\n color: var(--emw--color-typography, #000);\n}\n.LotteryTippingTicketBet__tableToolbar--item.mr-0 {\n margin-right: 0rem !important;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup {\n flex-basis: 2rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border-radius: 8px;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 2rem;\n height: 2rem;\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n color: var(--emw--color-typography, #000);\n border-radius: 8px;\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover {\n transform: scale(1.1);\n box-shadow: 0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item img {\n width: 20px;\n height: 20px;\n transition: filter 0.2s ease-in-out;\n filter: grayscale(0.3);\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover img {\n filter: grayscale(0);\n transform: rotate(3deg);\n}\n\ndiv.border-line {\n margin-top: 1rem;\n height: 1px;\n width: 100%;\n box-sizing: border-box;\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n transition: all 0.3s ease;\n}\n\n.LotteryTippingTicketBet__footer {\n padding: 0.5rem;\n}\n\n.my-pagination {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 1rem;\n font-size: 0.8rem;\n color: var(--emw--color-typography-secondary, #333);\n}\n\n.my-pagination span {\n font-weight: 500;\n user-select: none;\n}\n\n.my-pagination .btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n transition: all 0.3s ease;\n cursor: pointer;\n opacity: 0.9;\n color: var(--emw--color-typography, #000);\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n.my-pagination .btn img {\n width: 20px;\n height: 20px;\n transition: transform 0.2s ease;\n}\n\n.my-pagination .btn:hover {\n transform: scale(1.1);\n box-shadow: 0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));\n}\n\n.my-pagination .btn.disabled {\n background-color: var(--emw--color-background-tertiary, #ccc);\n cursor: not-allowed;\n opacity: 0.5;\n transform: scale(1);\n}\n\n.match-info-item {\n display: flex;\n}\n\n.match-info-item-label {\n margin-right: 6px;\n}\n\n.info-icon:hover {\n cursor: pointer;\n}\n\n.LotteryTippingTicketBet__empty p {\n text-align: center;\n}\n\n.no-wrap {\n white-space: nowrap;\n overflow: hidden;\n}\n\n.eventNameContainer__item {\n line-height: 1rem;\n}\n.eventNameContainer__item--title {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 300px;\n}\n@container (max-width: 600px) {\n .eventNameContainer__item--title {\n max-width: 180px;\n }\n}\n@container (max-width: 500px) {\n .eventNameContainer__item--title {\n max-width: 150px;\n }\n}\n@container (max-width: 400px) {\n .eventNameContainer__item--title {\n max-width: 100px;\n }\n}\n@container (max-width: 330px) {\n .eventNameContainer__item--title {\n max-width: 70px;\n }\n}\n\n.LotteryTippingTicketBet__main {\n perspective: 800px;\n will-change: transform, opacity;\n backface-visibility: hidden;\n}\n\n@container (max-width: 520px) {\n .LotteryTippingTicketBet__main {\n flex-wrap: wrap;\n justify-content: center;\n }\n .LotteryTippingTicketBet__tableToolbar--item {\n margin-right: 0 !important;\n }\n}\n/* Fade-In Keyframes */\n@keyframes fadeInLeft {\n from {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n/* Fade-Out Keyframes */\n@keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes fadeInRight {\n from {\n opacity: 0;\n transform: translateX(-100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@-webkit-keyframes slide-left {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n 100% {\n -webkit-transform: translateX(-100px);\n transform: translateX(-100px);\n }\n}\n@keyframes slide-left {\n 0% {\n -webkit-transform: translateX(100%);\n transform: translateX(100%);\n }\n 100% {\n -webkit-transform: translateX(0px);\n transform: translateX(0px);\n }\n}\n@-webkit-keyframes slide-right {\n 0% {\n -webkit-transform: translateX(-100%);\n transform: translateX(-100%);\n }\n 100% {\n -webkit-transform: translateX(0px);\n transform: translateX(0px);\n }\n}\n@keyframes slide-right {\n 0% {\n -webkit-transform: translateX(-100px);\n transform: translateX(-100px);\n }\n 100% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n@-webkit-keyframes slide-top {\n 0% {\n -webkit-transform: translateY(-100px);\n transform: translateY(-100px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n@keyframes slide-top {\n 0% {\n -webkit-transform: translateY(-100px);\n transform: translateY(-100px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n/* Apply to your card classes */\n.card-in-left {\n -webkit-animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-left {\n animation: fadeOut 0.2s ease-out both;\n}\n\n.card-in-right {\n -webkit-animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-right {\n animation: fadeOut 0.2s ease-out both;\n}\n\n.card-in-up {\n -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-down {\n animation: fadeOut 0.2s ease-out both;\n}";
8001
+ const lotteryTippingTicketBetCss = ".LotteryTippingTicketBet__container {\n display: block; /* Or inline-block, depending on desired layout flow */\n font-size: 14px;\n line-height: 1.5715;\n color: var(--emw--color-typography, #000);\n background: var(--emw--color-background, #fff);\n overflow: hidden;\n min-width: 300px;\n container-type: inline-size;\n}\n@container (max-width: 375px) {\n .LotteryTippingTicketBet__container {\n font-size: 12px;\n }\n}\n\n.table-wrapper {\n overflow-x: auto; /* Handle horizontal scroll if content overflows */\n}\n\n.my-table-component {\n width: 100%;\n border-collapse: collapse; /* Important for borders */\n text-align: left;\n border-radius: 0.1rem; /* Ant Design like subtle rounding */\n border-spacing: 0;\n}\n\n/* Header */\n.my-table-component th {\n background: var(--emw--color-background-secondary, #f5f5f5);\n color: var(--emw--color-typography, #000);\n font-weight: 500;\n padding: 0.4rem 0.5rem;\n transition: background 0.3s ease;\n}\n\n/* Cells */\n.my-table-component td {\n padding: 0.4rem 0.5rem;\n color: var(--emw--color-typography, #000);\n background: var(--emw--color-background, #fff);\n transition: background 0.3s;\n}\n@container (max-width: 400px) {\n .my-table-component td {\n padding: 0.3rem 0.3rem;\n }\n}\n\n.my-table-component.bordered th,\n.my-table-component.bordered td {\n border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n/* Bordered style */\n.my-table-component.grid th,\n.my-table-component.grid td {\n border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n.my-table-component.grid th {\n border-bottom-width: 1px; /* Ensure bottom border is consistent */\n}\n\n.my-table-component.grid {\n border: 1px solid var(--emw--color-gray-100, #e6e6e6); /* Outer border */\n border-right-width: 0;\n border-bottom-width: 0;\n}\n\n.my-table-component.grid th:last-child,\n.my-table-component.grid td:last-child {\n border-right: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n.my-table-component.grid tr:last-child td {\n border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n/* Striped style */\n.my-table-component.striped tbody tr:nth-child(even) td {\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n/* Hover (optional, but nice) */\n.my-table-component tbody tr:hover td {\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n.flex {\n display: flex;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.gap-1 {\n gap: 4px;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.align-center {\n align-items: center;\n}\n\n.gap-1 {\n gap: 0.5rem;\n}\n\n.btn {\n color: var(--emw--color-typography, #000);\n background: var(--emw--color-background, #fff);\n font-size: 14px;\n transition: all 0.2s ease;\n}\n.btn:hover {\n cursor: pointer;\n}\n\n.btn:hover {\n background-color: var(--emw--color-gray-100, #e6e6e6);\n}\n\n.btn.disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n.btn.disabled:hover {\n cursor: not-allowed !important;\n}\n\n.LotteryTippingTicketBet__tableToolbar {\n width: 100%;\n margin-bottom: 1rem;\n}\n\n.LotteryTippingTicketBet__tableToolbar--item {\n background-color: transparent;\n cursor: pointer;\n font-weight: 500;\n white-space: nowrap;\n display: inline-flex;\n border-radius: 1.6rem;\n border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n margin-right: 2rem;\n color: var(--emw--color-typography, #000);\n}\n.LotteryTippingTicketBet__tableToolbar--item.mr-0 {\n margin-right: 0rem !important;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup {\n flex-basis: 2rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border-radius: 8px;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 2rem;\n height: 2rem;\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n color: var(--emw--color-typography, #000);\n border-radius: 8px;\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover {\n transform: scale(1.1);\n box-shadow: 0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item .icon {\n width: 20px;\n height: 20px;\n transition: filter 0.2s ease-in-out;\n filter: grayscale(0.3);\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover .icon {\n filter: grayscale(0);\n transform: rotate(3deg);\n}\n\ndiv.border-line {\n margin-top: 1rem;\n height: 1px;\n width: 100%;\n box-sizing: border-box;\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n transition: all 0.3s ease;\n}\n\n.LotteryTippingTicketBet__footer {\n padding: 0.5rem;\n}\n\n.my-pagination {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 1rem;\n font-size: 0.8rem;\n color: var(--emw--color-typography-secondary, #333);\n}\n\n.my-pagination span {\n font-weight: 500;\n user-select: none;\n}\n\n.my-pagination .btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n transition: all 0.3s ease;\n cursor: pointer;\n opacity: 0.9;\n color: var(--emw--color-typography, #000);\n background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n.my-pagination .btn .icon {\n width: 20px;\n height: 20px;\n transition: transform 0.2s ease;\n}\n\n.my-pagination .btn:hover {\n transform: scale(1.1);\n box-shadow: 0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));\n}\n\n.my-pagination .btn.disabled {\n background-color: var(--emw--color-background-tertiary, #ccc);\n cursor: not-allowed;\n opacity: 0.5;\n transform: scale(1);\n}\n\n.match-info-item {\n display: flex;\n}\n\n.match-info-item-label {\n margin-right: 6px;\n}\n\n.info-icon:hover {\n cursor: pointer;\n}\n\n.LotteryTippingTicketBet__empty p {\n text-align: center;\n}\n\n.no-wrap {\n white-space: nowrap;\n overflow: hidden;\n}\n\n.eventNameContainer__item--title {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 300px;\n}\n@container (max-width: 600px) {\n .eventNameContainer__item--title {\n max-width: 180px;\n }\n}\n@container (max-width: 500px) {\n .eventNameContainer__item--title {\n max-width: 150px;\n }\n}\n@container (max-width: 400px) {\n .eventNameContainer__item--title {\n max-width: 100px;\n }\n}\n@container (max-width: 330px) {\n .eventNameContainer__item--title {\n max-width: 70px;\n }\n}\n\n.LotteryTippingTicketBet__main {\n perspective: 800px;\n will-change: transform, opacity;\n backface-visibility: hidden;\n}\n\n@container (max-width: 520px) {\n .LotteryTippingTicketBet__main {\n flex-wrap: wrap;\n justify-content: center;\n }\n .LotteryTippingTicketBet__tableToolbar--item {\n margin-right: 0 !important;\n }\n}\n/* Fade-In Keyframes */\n@keyframes fadeInLeft {\n from {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n/* Fade-Out Keyframes */\n@keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes fadeInRight {\n from {\n opacity: 0;\n transform: translateX(-100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@-webkit-keyframes slide-left {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n 100% {\n -webkit-transform: translateX(-100px);\n transform: translateX(-100px);\n }\n}\n@keyframes slide-left {\n 0% {\n -webkit-transform: translateX(100%);\n transform: translateX(100%);\n }\n 100% {\n -webkit-transform: translateX(0px);\n transform: translateX(0px);\n }\n}\n@-webkit-keyframes slide-right {\n 0% {\n -webkit-transform: translateX(-100%);\n transform: translateX(-100%);\n }\n 100% {\n -webkit-transform: translateX(0px);\n transform: translateX(0px);\n }\n}\n@keyframes slide-right {\n 0% {\n -webkit-transform: translateX(-100px);\n transform: translateX(-100px);\n }\n 100% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n@-webkit-keyframes slide-top {\n 0% {\n -webkit-transform: translateY(-100px);\n transform: translateY(-100px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n@keyframes slide-top {\n 0% {\n -webkit-transform: translateY(-100px);\n transform: translateY(-100px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n/* Apply to your card classes */\n.card-in-left {\n -webkit-animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-left {\n animation: fadeOut 0.2s ease-out both;\n}\n\n.card-in-right {\n -webkit-animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-right {\n animation: fadeOut 0.2s ease-out both;\n}\n\n.card-in-up {\n -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-down {\n animation: fadeOut 0.2s ease-out both;\n}\n\n.loading-wrap {\n margin: 20px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 40vh;\n}\n.loading-wrap .dots-container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n.loading-wrap .dot {\n height: 14px;\n width: 14px;\n margin-right: 14px;\n border-radius: 14px;\n background-color: var(--emw--color-gray-300, #333);\n animation: pulse 1.5s infinite ease-in-out;\n}\n.loading-wrap .dot:last-child {\n margin-right: 0;\n}\n.loading-wrap .dot:nth-child(1) {\n animation-delay: -0.3s;\n}\n.loading-wrap .dot:nth-child(2) {\n animation-delay: -0.1s;\n}\n.loading-wrap .dot:nth-child(3) {\n animation-delay: 0.1s;\n}\n@keyframes pulse {\n 0% {\n transform: scale(0.8);\n background-color: var(--emw--color-gray-300, #333);\n }\n 50% {\n transform: scale(1.2);\n background-color: var(--emw--color-gray-100, #e6e6e6);\n }\n 100% {\n transform: scale(0.8);\n background-color: var(--emw--color-gray-150, #6f6f6f);\n }\n}";
7982
8002
  const LotteryTippingTicketBetStyle0 = lotteryTippingTicketBetCss;
7983
8003
 
8004
+ const addImagePath = renderIconDefinitionToSVGElement(PlusSquareOutlined$1, {
8005
+ extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
8006
+ });
8007
+ const deleteImagePath = renderIconDefinitionToSVGElement(DeleteOutlined$1, {
8008
+ extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
8009
+ });
8010
+ const infoImagePath = renderIconDefinitionToSVGElement(InfoCircleOutlined$1, {
8011
+ extraSVGAttrs: { width: '16px', height: '16px', fill: 'currentColor' }
8012
+ });
8013
+ const leftImagePath = renderIconDefinitionToSVGElement(LeftOutlined$1, {
8014
+ extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
8015
+ });
8016
+ const rightImagePath = renderIconDefinitionToSVGElement(RightOutlined$1, {
8017
+ extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
8018
+ });
7984
8019
  const LotteryTippingTicketBet = class {
7985
8020
  constructor(hostRef) {
7986
8021
  registerInstance(this, hostRef);
7987
8022
  this.lotteryTippingBulletBetEvent = createEvent(this, "lotteryTippingBulletBetSelect", 7);
7988
8023
  this.lotteryTippingCurrentPageChangeEvent = createEvent(this, "lotteryTippingCurrentPageChange", 7);
7989
- this.infoImagePath = getAssetPath('../static/info.svg');
7990
- this.eventNameRender = (item, value) => (h("div", { class: "flex gap-1 eventNameContainer__item" }, h("span", { class: "eventNameContainer__item--title" }, value), h("general-tooltip", null, h("img", { slot: "trigger", class: "info-icon", src: this.infoImagePath, style: { width: '18px' } }), h("div", { slot: "content" }, h("div", { class: "match-info" }, h("div", { class: "match-info-item" }, h("div", { class: "match-info-item-label" }, translate('homeTeam', this.language)), h("div", { class: "match-info-item-value" }, item.homeName)), h("div", { class: "match-info-item" }, h("div", { class: "match-info-item-label" }, translate('awayTeam', this.language)), h("div", { class: "match-info-item-value" }, item.awayName)))))));
8024
+ this.eventNameRender = (item, value) => (h("div", { class: "flex gap-1 eventNameContainer__item" }, h("span", { class: "eventNameContainer__item--title" }, value), h("general-tooltip", null, h("span", { slot: "trigger", class: "icon info-icon", innerHTML: infoImagePath, style: { width: '18px' } }), h("div", { slot: "content" }, h("div", { class: "match-info" }, h("div", { class: "match-info-item" }, h("div", { class: "match-info-item-label" }, translate('homeTeam', this.language)), h("div", { class: "match-info-item-value" }, item.homeName)), h("div", { class: "match-info-item" }, h("div", { class: "match-info-item-label" }, translate('awayTeam', this.language)), h("div", { class: "match-info-item-value" }, item.awayName)))))));
7991
8025
  this.columns = [
7992
8026
  { title: '', value: 'index', width: 3 },
7993
8027
  {
@@ -8253,11 +8287,13 @@ const LotteryTippingTicketBet = class {
8253
8287
  handleCurrentPageChange() {
8254
8288
  this.lotteryTippingCurrentPageChangeEvent.emit({ currentPage: this.currentPage });
8255
8289
  }
8290
+ renderLoading() {
8291
+ return (h("div", { class: "loading-wrap" }, h("section", { class: "dots-container" }, h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }))));
8292
+ }
8256
8293
  render() {
8257
8294
  var _a, _b, _c, _d;
8258
- const loadingImagePath = getAssetPath('../static/loading.svg');
8259
8295
  if (this.isLoading) {
8260
- return (h("div", { ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, h("div", { class: "flex align-center gap-1" }, h("p", null, translate('loading', this.language)), h("img", { src: loadingImagePath }))));
8296
+ return this.renderLoading();
8261
8297
  }
8262
8298
  if (this.hasErrors) {
8263
8299
  return (h("div", { ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, h("p", null, translate('error', this.language))));
@@ -8266,10 +8302,6 @@ const LotteryTippingTicketBet = class {
8266
8302
  var _a;
8267
8303
  return (h("th", { key: column.value, style: { width: column.width + '%', textAlign: column.align } }, typeof column.title === 'string' ? column.title : (_a = column.title) === null || _a === void 0 ? void 0 : _a.call(column)));
8268
8304
  })))), h("tbody", null, dataSource.map((row, index) => (h("tr", { key: index }, columns.map((column) => (h("td", { key: column.value, style: { width: column.width + '%', textAlign: column.align }, class: { 'no-wrap': column.nowrap } }, column.render ? column.render(row, row[column.value], index) : row[column.value])))))))));
8269
- const deleteImagePath = getAssetPath('../static/delete.svg');
8270
- const addImagePath = getAssetPath('../static/add.svg');
8271
- const leftImagePath = getAssetPath('../static/left-arrow.svg');
8272
- const rightImagePath = getAssetPath('../static/right-arrow.svg');
8273
8305
  const lineOperatorAddShow = this.totalPages < this.maxTotalPages && this.currentPage === this.totalPages ? true : false;
8274
8306
  const lineOperatorRemoveShow = this.totalPages > this.minTotalPages ? true : false;
8275
8307
  if (this.ticketDataSource.length === 0 || this.minTotalPages === 0 || this.maxTotalPages === 0) {
@@ -8279,16 +8311,16 @@ const LotteryTippingTicketBet = class {
8279
8311
  return (h("div", { class: "LotteryTippingTicketBet__container", ref: (el) => (this.stylingContainer = el) }, h("div", { class: "LotteryTippingTicketBet__main", ref: (el) => (this.mainContainer = el) }, h(MyTable, { columns: this.columns, dataSource: ((_a = this.ticketDataSource) === null || _a === void 0 ? void 0 : _a.map((item, index) => (Object.assign(Object.assign({}, item), { index: index + 1 })))) || [], hideHead: false, grid: false, bordered: false }), this.totalPages > 1 && (h("div", null, h("div", { class: 'border-line' }), h("div", { class: "LotteryTippingTicketBet__footer" }, h("div", { class: "my-pagination flex justify-between" }, h("span", null, translate('lineInfo', this.language, {
8280
8312
  currentPage: this.currentPage,
8281
8313
  totalPages: this.totalPages
8282
- })), h("div", { class: 'flex gap-1' }, h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, h("img", { src: leftImagePath })), h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, h("img", { src: rightImagePath }))))))))));
8314
+ })), h("div", { class: 'flex gap-1' }, h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, h("span", { class: "icon", innerHTML: leftImagePath })), h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, h("span", { class: "icon", innerHTML: rightImagePath }))))))))));
8283
8315
  }
8284
8316
  return (h("div", { ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, h("div", { class: "LotteryTippingTicketBet__tableToolbar flex justify-end gap-1" }, h("button", { class: {
8285
8317
  'LotteryTippingTicketBet__tableToolbar--item': true,
8286
8318
  'mr-0': !(lineOperatorAddShow || lineOperatorRemoveShow)
8287
8319
  }, onClick: this.handleClearAll.bind(this) }, translate('clearAll', this.language))), h("div", { class: "flex align-center LotteryTippingTicketBet__main", ref: (el) => (this.mainContainer = el) }, h(MyTable, { columns: this.columns, dataSource: ((_b = this.ticketDataSource) === null || _b === void 0 ? void 0 : _b.map((item, index) => (Object.assign(Object.assign({}, item), { index: index + 1 })))) || [], hideHead: false, grid: false, bordered: false }), (lineOperatorAddShow || lineOperatorRemoveShow) && (h("div", { class: "LotteryTippingTicketBet__lineOperatorGroup" }, lineOperatorAddShow && (h("div", { class: {
8288
8320
  'LotteryTippingTicketBet__lineOperatorGroup--item': true
8289
- }, onClick: this.handleAddLine.bind(this) }, h("img", { src: addImagePath }))), lineOperatorRemoveShow && (h("div", { class: {
8321
+ }, onClick: this.handleAddLine.bind(this) }, h("span", { class: "icon", innerHTML: addImagePath }))), lineOperatorRemoveShow && (h("div", { class: {
8290
8322
  'LotteryTippingTicketBet__lineOperatorGroup--item': true
8291
- }, onClick: this.handleRemoveLine.bind(this) }, h("img", { src: deleteImagePath })))))), h("div", { class: 'border-line' }), h("div", { class: "LotteryTippingTicketBet__footer" }, h("div", { class: "my-pagination flex justify-between" }, h("span", null, translate('lineInfo', this.language, { currentPage: this.currentPage, totalPages: this.totalPages })), h("div", { class: 'flex gap-1' }, h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, h("img", { src: leftImagePath })), h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, h("img", { src: rightImagePath }))))), this.dialogConfig.visible && (h("vaadin-confirm-dialog", { rejectButtonVisible: true, rejectText: translate('cancel', this.language), confirmText: translate('confirm', this.language), opened: (_c = this.dialogConfig) === null || _c === void 0 ? void 0 : _c.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_d = this.dialogConfig) === null || _d === void 0 ? void 0 : _d.content))));
8323
+ }, onClick: this.handleRemoveLine.bind(this) }, h("span", { class: "icon", innerHTML: deleteImagePath })))))), h("div", { class: 'border-line' }), h("div", { class: "LotteryTippingTicketBet__footer" }, h("div", { class: "my-pagination flex justify-between" }, h("span", null, translate('lineInfo', this.language, { currentPage: this.currentPage, totalPages: this.totalPages })), h("div", { class: 'flex gap-1' }, h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, h("span", { class: "icon", innerHTML: leftImagePath })), h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, h("span", { class: "icon", innerHTML: rightImagePath }))))), this.dialogConfig.visible && (h("vaadin-confirm-dialog", { rejectButtonVisible: true, rejectText: translate('cancel', this.language), confirmText: translate('confirm', this.language), opened: (_c = this.dialogConfig) === null || _c === void 0 ? void 0 : _c.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_d = this.dialogConfig) === null || _d === void 0 ? void 0 : _d.content))));
8292
8324
  }
8293
8325
  static get assetsDirs() { return ["../static"]; }
8294
8326
  static get watchers() { return {
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { L as LotteryTippingTicketHistory } from './lottery-tipping-ticket-history-1c57b065.js';
1
+ export { L as LotteryTippingTicketHistory } from './lottery-tipping-ticket-history-90df9a64.js';
2
2
  import './index-4e926388.js';