@everymatrix/lottery-tipping-ticket-bet 0.1.1 → 0.2.0

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 (12) hide show
  1. package/dist/cjs/general-tooltip_4.cjs.entry.js +2 -2
  2. package/dist/cjs/index.cjs.js +1 -1
  3. package/dist/cjs/{lottery-tipping-ticket-bet-fefb3fd2.js → lottery-tipping-ticket-bet-9b1b67bb.js} +4 -4
  4. package/dist/collection/components/lottery-tipping-ticket-bet/lottery-tipping-ticket-bet.css +13 -11
  5. package/dist/collection/components/lottery-tipping-ticket-bet/lottery-tipping-ticket-bet.js +3 -3
  6. package/dist/esm/general-tooltip_4.entry.js +2 -2
  7. package/dist/esm/index.js +1 -1
  8. package/dist/esm/{lottery-tipping-ticket-bet-c1ba00bc.js → lottery-tipping-ticket-bet-8f5a763c.js} +4 -4
  9. package/dist/lottery-tipping-ticket-bet/general-tooltip_4.entry.js +1 -1
  10. package/dist/lottery-tipping-ticket-bet/index.esm.js +1 -1
  11. package/dist/lottery-tipping-ticket-bet/{lottery-tipping-ticket-bet-c1ba00bc.js → lottery-tipping-ticket-bet-8f5a763c.js} +53 -53
  12. package/package.json +1 -1
package/dist/cjs/general-tooltip_4.cjs.entry.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-1e2543a3.js');
6
- const lotteryTippingTicketBet = require('./lottery-tipping-ticket-bet-fefb3fd2.js');
6
+ const lotteryTippingTicketBet = require('./lottery-tipping-ticket-bet-9b1b67bb.js');
7
7
 
8
8
  /**
9
9
  * @name setClientStyling
@@ -203,7 +203,7 @@ const LotteryTippingBullet = class {
203
203
  LotteryTippingBullet__segment: true,
204
204
  'LotteryTippingBullet__segment--disabled': this.disabled,
205
205
  'LotteryTippingBullet__segment--active': this.isSelected
206
- }, onClick: () => this.handleClick() }, this.isSelected ? 'X' : this.value))));
206
+ }, onClick: this.handleClick.bind(this) }, this.isSelected ? 'X' : this.value))));
207
207
  }
208
208
  static get watchers() { return {
209
209
  "clientStyling": ["handleClientStylingChange"],
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 lotteryTippingTicketBet = require('./lottery-tipping-ticket-bet-fefb3fd2.js');
5
+ const lotteryTippingTicketBet = require('./lottery-tipping-ticket-bet-9b1b67bb.js');
6
6
  require('./index-1e2543a3.js');
7
7
 
8
8
 
package/dist/cjs/{lottery-tipping-ticket-bet-fefb3fd2.js → lottery-tipping-ticket-bet-9b1b67bb.js} RENAMED
@@ -10554,7 +10554,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
10554
10554
  </div>
10555
10555
  `}static get is(){return "vaadin-confirm-dialog"}ready(){super.ready(),this._overlayElement=this.$.dialog.$.overlay,this._initOverlay(this._overlayElement);}}x(tm);
10556
10556
 
10557
- const lotteryTippingTicketBetCss = ".LotteryTippingTicketBet__container{display:block;font-size:14px;line-height:1.5715;color:var(--emw--color-gray-400, #000);overflow:hidden}@media screen and (max-width: 375px){.LotteryTippingTicketBet__container{font-size:12px}}.table-wrapper{overflow-x:auto;}.my-table-component{width:100%;border-collapse:collapse;text-align:left;border-radius:0.1rem;border-spacing:0}.my-table-component th{background-color:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-gray-400, #000);font-weight:500;padding:0.4rem 0.5rem;transition:background 0.3s ease}.my-table-component td{padding:0.4rem 0.5rem;color:var(--emw--color-gray-400, #000);transition:background 0.3s}@media screen and (max-width: 400px){.my-table-component td{padding:0.3rem 0.3rem}}.my-table-component.bordered th,.my-table-component.bordered td{border-bottom:1px solid var(--emw--color-gray-100, #e6e6e6)}.my-table-component.grid th,.my-table-component.grid td{border:1px solid var(--emw--color-gray-100, #e6e6e6)}.my-table-component.grid th{border-bottom-width:1px;}.my-table-component.grid{border:1px solid var(--emw--color-gray-100, #e6e6e6);border-right-width:0;border-bottom-width:0}.my-table-component.grid th:last-child,.my-table-component.grid td:last-child{border-right:1px solid var(--emw--color-gray-100, #e6e6e6)}.my-table-component.grid tr:last-child td{border-bottom:1px solid var(--emw--color-gray-100, #e6e6e6)}.my-table-component.striped tbody tr:nth-child(even) td{background-color:var(--emw--color-gray-50, #f5f5f5)}.my-table-component tbody tr:hover td{background-color:var(--emw--color-gray-50, #f5f5f5)}.flex{display:flex}.justify-end{justify-content:flex-end}.gap-1{gap:4px}.justify-between{justify-content:space-between}.align-center{align-items:center}.gap-1{gap:0.5rem}.btn{background:transparent;font-size:14px;transition:all 0.2s ease}.btn:hover{cursor:pointer}.btn:hover{background-color:var(--emw--color-gray-100, #e6e6e6)}.btn.disabled{opacity:0.5;pointer-events:none}.btn.disabled:hover{cursor:not-allowed !important}.LotteryTippingTicketBet__tableToolbar{width:100%;margin-bottom:1rem}.LotteryTippingTicketBet__tableToolbar--item{background-color:transparent;cursor:pointer;font-weight:500;white-space:nowrap;display:inline-flex;border-radius:1.6rem;border:1px solid var(--emw--color-gray-100, #e6e6e6);padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:1rem;margin-right:2rem}.LotteryTippingTicketBet__tableToolbar--item.mr-0{margin-right:0rem !important}.LotteryTippingTicketBet__lineOperatorGroup{flex-basis:2rem;display:flex;flex-direction:column;gap:1rem;border-radius:8px}.LotteryTippingTicketBet__lineOperatorGroup--item{display:flex;justify-content:center;align-items:center;width:2rem;height:2rem;background-color:var(--emw--color-background, #fff);border-radius:8px;box-shadow:0 1px 4px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));transition:all 0.2s ease-in-out;cursor:pointer}.LotteryTippingTicketBet__lineOperatorGroup--item:hover{background-color:var(--emw--color-gray-50, #f5f5f5);box-shadow:0 2px 6px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));transform:scale(1.05)}.LotteryTippingTicketBet__lineOperatorGroup--item img{width:20px;height:20px;transition:filter 0.2s ease-in-out;filter:grayscale(0.3)}.LotteryTippingTicketBet__lineOperatorGroup--item:hover img{filter:grayscale(0);transform:rotate(3deg)}div.border-line{margin-top:1rem;height:1px;width:100%;box-sizing:border-box;background-color:var(--emw--color-gray-100, #e6e6e6);transition:all 0.3s ease}.LotteryTippingTicketBet__footer{padding:0.5rem}.my-pagination{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:0.8rem;color:var(--emw--color-gray-300, #333)}.my-pagination span{font-weight:500;user-select:none}.my-pagination .btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;color:white;transition:all 0.3s ease;cursor:pointer;box-shadow:0 4px 10px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));opacity:0.9}.my-pagination .btn img{width:20px;height:20px;transition:transform 0.2s ease}.my-pagination .btn:hover{transform:scale(1.1);box-shadow:0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09))}.my-pagination .btn.disabled{background:var(--emw--color-gray-100, #e6e6e6);cursor:not-allowed;opacity:0.5;transform:scale(1)}.match-info-item{display:flex}.match-info-item-label{margin-right:6px}.info-icon:hover{cursor:pointer}.LotteryTippingTicketBet__empty p{text-align:center}.no-wrap{white-space:nowrap;overflow:hidden}.eventNameContainer__item{line-height:1rem}.eventNameContainer__item--title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}@media screen and (max-width: 720px){.eventNameContainer__item--title{max-width:240px}}@media screen and (max-width: 570px){.eventNameContainer__item--title{max-width:180px}}@media screen and (max-width: 480px){.eventNameContainer__item--title{max-width:150px}}@media screen and (max-width: 440px){.eventNameContainer__item--title{max-width:100px}}.LotteryTippingTicketBet__main{perspective:800px;will-change:transform, opacity;backface-visibility:hidden}@media screen and (max-width: 520px){.LotteryTippingTicketBet__main{flex-wrap:wrap;justify-content:center}.LotteryTippingTicketBet__tableToolbar--item{margin-right:0 !important}}@keyframes fadeInLeft{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeInRight{from{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}@keyframes fadeInUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes slide-left{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(-100px);transform:translateX(-100px)}}@keyframes slide-left{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@-webkit-keyframes slide-right{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes slide-right{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slide-top{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}100%{-webkit-transform:translateY(0px);transform:translateY(0px)}}@keyframes slide-top{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}100%{-webkit-transform:translateY(0px);transform:translateY(0px)}}.card-in-left{-webkit-animation:slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.card-out-left{animation:fadeOut 0.2s ease-out both}.card-in-right{-webkit-animation:slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.card-out-right{animation:fadeOut 0.2s ease-out both}.card-in-up{-webkit-animation:slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.card-out-down{animation:fadeOut 0.2s ease-out both}";
10557
+ 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-gray-400, #000);\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-color: var(--emw--color-gray-50, #f5f5f5);\n color: var(--emw--color-gray-400, #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-gray-400, #000);\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-gray-50, #f5f5f5);\n}\n\n/* Hover (optional, but nice) */\n.my-table-component tbody tr:hover td {\n background-color: var(--emw--color-gray-50, #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 background: transparent;\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}\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, #fff);\n border-radius: 8px;\n box-shadow: 0 1px 4px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover {\n background-color: var(--emw--color-gray-50, #f5f5f5);\n box-shadow: 0 2px 6px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));\n transform: scale(1.05);\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-gray-100, #e6e6e6);\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-gray-300, #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 color: white;\n transition: all 0.3s ease;\n cursor: pointer;\n box-shadow: 0 4px 10px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));\n opacity: 0.9;\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: var(--emw--color-gray-100, #e6e6e6);\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}";
10558
10558
  const LotteryTippingTicketBetStyle0 = lotteryTippingTicketBetCss;
10559
10559
 
10560
10560
  const LotteryTippingTicketBet = class {
@@ -10864,11 +10864,11 @@ const LotteryTippingTicketBet = class {
10864
10864
  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: {
10865
10865
  'LotteryTippingTicketBet__tableToolbar--item': true,
10866
10866
  'mr-0': !(lineOperatorAddShow || lineOperatorRemoveShow)
10867
- }, onClick: () => this.handleClearAll() }, 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: {
10867
+ }, 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: {
10868
10868
  'LotteryTippingTicketBet__lineOperatorGroup--item': true
10869
- }, onClick: () => this.handleAddLine() }, index.h("img", { src: addImagePath }))), lineOperatorRemoveShow && (index.h("div", { class: {
10869
+ }, onClick: this.handleAddLine.bind(this) }, index.h("img", { src: addImagePath }))), lineOperatorRemoveShow && (index.h("div", { class: {
10870
10870
  'LotteryTippingTicketBet__lineOperatorGroup--item': true
10871
- }, onClick: () => this.handleRemoveLine() }, 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))));
10871
+ }, 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))));
10872
10872
  }
10873
10873
  static get assetsDirs() { return ["../static"]; }
10874
10874
  static get watchers() { return {
package/dist/collection/components/lottery-tipping-ticket-bet/lottery-tipping-ticket-bet.css CHANGED
@@ -4,8 +4,10 @@
4
4
  line-height: 1.5715;
5
5
  color: var(--emw--color-gray-400, #000);
6
6
  overflow: hidden;
7
+ min-width: 300px;
8
+ container-type: inline-size;
7
9
  }
8
- @media screen and (max-width: 375px) {
10
+ @container (max-width: 375px) {
9
11
  .LotteryTippingTicketBet__container {
10
12
  font-size: 12px;
11
13
  }
@@ -38,7 +40,7 @@
38
40
  color: var(--emw--color-gray-400, #000);
39
41
  transition: background 0.3s;
40
42
  }
41
- @media screen and (max-width: 400px) {
43
+ @container (max-width: 400px) {
42
44
  .my-table-component td {
43
45
  padding: 0.3rem 0.3rem;
44
46
  }
@@ -280,26 +282,26 @@ div.border-line {
280
282
  text-overflow: ellipsis;
281
283
  max-width: 300px;
282
284
  }
283
- @media screen and (max-width: 720px) {
284
- .eventNameContainer__item--title {
285
- max-width: 240px;
286
- }
287
- }
288
- @media screen and (max-width: 570px) {
285
+ @container (max-width: 600px) {
289
286
  .eventNameContainer__item--title {
290
287
  max-width: 180px;
291
288
  }
292
289
  }
293
- @media screen and (max-width: 480px) {
290
+ @container (max-width: 500px) {
294
291
  .eventNameContainer__item--title {
295
292
  max-width: 150px;
296
293
  }
297
294
  }
298
- @media screen and (max-width: 440px) {
295
+ @container (max-width: 400px) {
299
296
  .eventNameContainer__item--title {
300
297
  max-width: 100px;
301
298
  }
302
299
  }
300
+ @container (max-width: 330px) {
301
+ .eventNameContainer__item--title {
302
+ max-width: 70px;
303
+ }
304
+ }
303
305
 
304
306
  .LotteryTippingTicketBet__main {
305
307
  perspective: 800px;
@@ -307,7 +309,7 @@ div.border-line {
307
309
  backface-visibility: hidden;
308
310
  }
309
311
 
310
- @media screen and (max-width: 520px) {
312
+ @container (max-width: 520px) {
311
313
  .LotteryTippingTicketBet__main {
312
314
  flex-wrap: wrap;
313
315
  justify-content: center;
package/dist/collection/components/lottery-tipping-ticket-bet/lottery-tipping-ticket-bet.js CHANGED
@@ -307,11 +307,11 @@ export class LotteryTippingTicketBet {
307
307
  return (h("div", { ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, h("div", { class: "LotteryTippingTicketBet__tableToolbar flex justify-end gap-1" }, h("button", { class: {
308
308
  'LotteryTippingTicketBet__tableToolbar--item': true,
309
309
  'mr-0': !(lineOperatorAddShow || lineOperatorRemoveShow)
310
- }, onClick: () => this.handleClearAll() }, 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: {
310
+ }, 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: {
311
311
  'LotteryTippingTicketBet__lineOperatorGroup--item': true
312
- }, onClick: () => this.handleAddLine() }, h("img", { src: addImagePath }))), lineOperatorRemoveShow && (h("div", { class: {
312
+ }, onClick: this.handleAddLine.bind(this) }, h("img", { src: addImagePath }))), lineOperatorRemoveShow && (h("div", { class: {
313
313
  'LotteryTippingTicketBet__lineOperatorGroup--item': true
314
- }, onClick: () => this.handleRemoveLine() }, 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))));
314
+ }, 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))));
315
315
  }
316
316
  static get is() { return "lottery-tipping-ticket-bet"; }
317
317
  static get encapsulation() { return "shadow"; }
package/dist/esm/general-tooltip_4.entry.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, h, a as getElement, c as createEvent } from './index-220905ab.js';
2
- export { L as lottery_tipping_ticket_bet } from './lottery-tipping-ticket-bet-c1ba00bc.js';
2
+ export { L as lottery_tipping_ticket_bet } from './lottery-tipping-ticket-bet-8f5a763c.js';
3
3
 
4
4
  /**
5
5
  * @name setClientStyling
@@ -199,7 +199,7 @@ const LotteryTippingBullet = class {
199
199
  LotteryTippingBullet__segment: true,
200
200
  'LotteryTippingBullet__segment--disabled': this.disabled,
201
201
  'LotteryTippingBullet__segment--active': this.isSelected
202
- }, onClick: () => this.handleClick() }, this.isSelected ? 'X' : this.value))));
202
+ }, onClick: this.handleClick.bind(this) }, this.isSelected ? 'X' : this.value))));
203
203
  }
204
204
  static get watchers() { return {
205
205
  "clientStyling": ["handleClientStylingChange"],
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { L as LotteryTippingTicketBet } from './lottery-tipping-ticket-bet-c1ba00bc.js';
1
+ export { L as LotteryTippingTicketBet } from './lottery-tipping-ticket-bet-8f5a763c.js';
2
2
  import './index-220905ab.js';
package/dist/esm/{lottery-tipping-ticket-bet-c1ba00bc.js → lottery-tipping-ticket-bet-8f5a763c.js} RENAMED
@@ -10552,7 +10552,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
10552
10552
  </div>
10553
10553
  `}static get is(){return "vaadin-confirm-dialog"}ready(){super.ready(),this._overlayElement=this.$.dialog.$.overlay,this._initOverlay(this._overlayElement);}}x(tm);
10554
10554
 
10555
- const lotteryTippingTicketBetCss = ".LotteryTippingTicketBet__container{display:block;font-size:14px;line-height:1.5715;color:var(--emw--color-gray-400, #000);overflow:hidden}@media screen and (max-width: 375px){.LotteryTippingTicketBet__container{font-size:12px}}.table-wrapper{overflow-x:auto;}.my-table-component{width:100%;border-collapse:collapse;text-align:left;border-radius:0.1rem;border-spacing:0}.my-table-component th{background-color:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-gray-400, #000);font-weight:500;padding:0.4rem 0.5rem;transition:background 0.3s ease}.my-table-component td{padding:0.4rem 0.5rem;color:var(--emw--color-gray-400, #000);transition:background 0.3s}@media screen and (max-width: 400px){.my-table-component td{padding:0.3rem 0.3rem}}.my-table-component.bordered th,.my-table-component.bordered td{border-bottom:1px solid var(--emw--color-gray-100, #e6e6e6)}.my-table-component.grid th,.my-table-component.grid td{border:1px solid var(--emw--color-gray-100, #e6e6e6)}.my-table-component.grid th{border-bottom-width:1px;}.my-table-component.grid{border:1px solid var(--emw--color-gray-100, #e6e6e6);border-right-width:0;border-bottom-width:0}.my-table-component.grid th:last-child,.my-table-component.grid td:last-child{border-right:1px solid var(--emw--color-gray-100, #e6e6e6)}.my-table-component.grid tr:last-child td{border-bottom:1px solid var(--emw--color-gray-100, #e6e6e6)}.my-table-component.striped tbody tr:nth-child(even) td{background-color:var(--emw--color-gray-50, #f5f5f5)}.my-table-component tbody tr:hover td{background-color:var(--emw--color-gray-50, #f5f5f5)}.flex{display:flex}.justify-end{justify-content:flex-end}.gap-1{gap:4px}.justify-between{justify-content:space-between}.align-center{align-items:center}.gap-1{gap:0.5rem}.btn{background:transparent;font-size:14px;transition:all 0.2s ease}.btn:hover{cursor:pointer}.btn:hover{background-color:var(--emw--color-gray-100, #e6e6e6)}.btn.disabled{opacity:0.5;pointer-events:none}.btn.disabled:hover{cursor:not-allowed !important}.LotteryTippingTicketBet__tableToolbar{width:100%;margin-bottom:1rem}.LotteryTippingTicketBet__tableToolbar--item{background-color:transparent;cursor:pointer;font-weight:500;white-space:nowrap;display:inline-flex;border-radius:1.6rem;border:1px solid var(--emw--color-gray-100, #e6e6e6);padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:1rem;margin-right:2rem}.LotteryTippingTicketBet__tableToolbar--item.mr-0{margin-right:0rem !important}.LotteryTippingTicketBet__lineOperatorGroup{flex-basis:2rem;display:flex;flex-direction:column;gap:1rem;border-radius:8px}.LotteryTippingTicketBet__lineOperatorGroup--item{display:flex;justify-content:center;align-items:center;width:2rem;height:2rem;background-color:var(--emw--color-background, #fff);border-radius:8px;box-shadow:0 1px 4px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));transition:all 0.2s ease-in-out;cursor:pointer}.LotteryTippingTicketBet__lineOperatorGroup--item:hover{background-color:var(--emw--color-gray-50, #f5f5f5);box-shadow:0 2px 6px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));transform:scale(1.05)}.LotteryTippingTicketBet__lineOperatorGroup--item img{width:20px;height:20px;transition:filter 0.2s ease-in-out;filter:grayscale(0.3)}.LotteryTippingTicketBet__lineOperatorGroup--item:hover img{filter:grayscale(0);transform:rotate(3deg)}div.border-line{margin-top:1rem;height:1px;width:100%;box-sizing:border-box;background-color:var(--emw--color-gray-100, #e6e6e6);transition:all 0.3s ease}.LotteryTippingTicketBet__footer{padding:0.5rem}.my-pagination{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:0.8rem;color:var(--emw--color-gray-300, #333)}.my-pagination span{font-weight:500;user-select:none}.my-pagination .btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;color:white;transition:all 0.3s ease;cursor:pointer;box-shadow:0 4px 10px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));opacity:0.9}.my-pagination .btn img{width:20px;height:20px;transition:transform 0.2s ease}.my-pagination .btn:hover{transform:scale(1.1);box-shadow:0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09))}.my-pagination .btn.disabled{background:var(--emw--color-gray-100, #e6e6e6);cursor:not-allowed;opacity:0.5;transform:scale(1)}.match-info-item{display:flex}.match-info-item-label{margin-right:6px}.info-icon:hover{cursor:pointer}.LotteryTippingTicketBet__empty p{text-align:center}.no-wrap{white-space:nowrap;overflow:hidden}.eventNameContainer__item{line-height:1rem}.eventNameContainer__item--title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}@media screen and (max-width: 720px){.eventNameContainer__item--title{max-width:240px}}@media screen and (max-width: 570px){.eventNameContainer__item--title{max-width:180px}}@media screen and (max-width: 480px){.eventNameContainer__item--title{max-width:150px}}@media screen and (max-width: 440px){.eventNameContainer__item--title{max-width:100px}}.LotteryTippingTicketBet__main{perspective:800px;will-change:transform, opacity;backface-visibility:hidden}@media screen and (max-width: 520px){.LotteryTippingTicketBet__main{flex-wrap:wrap;justify-content:center}.LotteryTippingTicketBet__tableToolbar--item{margin-right:0 !important}}@keyframes fadeInLeft{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeInRight{from{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}@keyframes fadeInUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes slide-left{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(-100px);transform:translateX(-100px)}}@keyframes slide-left{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@-webkit-keyframes slide-right{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes slide-right{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slide-top{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}100%{-webkit-transform:translateY(0px);transform:translateY(0px)}}@keyframes slide-top{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}100%{-webkit-transform:translateY(0px);transform:translateY(0px)}}.card-in-left{-webkit-animation:slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.card-out-left{animation:fadeOut 0.2s ease-out both}.card-in-right{-webkit-animation:slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.card-out-right{animation:fadeOut 0.2s ease-out both}.card-in-up{-webkit-animation:slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.card-out-down{animation:fadeOut 0.2s ease-out both}";
10555
+ 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-gray-400, #000);\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-color: var(--emw--color-gray-50, #f5f5f5);\n color: var(--emw--color-gray-400, #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-gray-400, #000);\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-gray-50, #f5f5f5);\n}\n\n/* Hover (optional, but nice) */\n.my-table-component tbody tr:hover td {\n background-color: var(--emw--color-gray-50, #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 background: transparent;\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}\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, #fff);\n border-radius: 8px;\n box-shadow: 0 1px 4px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover {\n background-color: var(--emw--color-gray-50, #f5f5f5);\n box-shadow: 0 2px 6px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));\n transform: scale(1.05);\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-gray-100, #e6e6e6);\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-gray-300, #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 color: white;\n transition: all 0.3s ease;\n cursor: pointer;\n box-shadow: 0 4px 10px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));\n opacity: 0.9;\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: var(--emw--color-gray-100, #e6e6e6);\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}";
10556
10556
  const LotteryTippingTicketBetStyle0 = lotteryTippingTicketBetCss;
10557
10557
 
10558
10558
  const LotteryTippingTicketBet = class {
@@ -10862,11 +10862,11 @@ const LotteryTippingTicketBet = class {
10862
10862
  return (h("div", { ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, h("div", { class: "LotteryTippingTicketBet__tableToolbar flex justify-end gap-1" }, h("button", { class: {
10863
10863
  'LotteryTippingTicketBet__tableToolbar--item': true,
10864
10864
  'mr-0': !(lineOperatorAddShow || lineOperatorRemoveShow)
10865
- }, onClick: () => this.handleClearAll() }, 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: {
10865
+ }, 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: {
10866
10866
  'LotteryTippingTicketBet__lineOperatorGroup--item': true
10867
- }, onClick: () => this.handleAddLine() }, h("img", { src: addImagePath }))), lineOperatorRemoveShow && (h("div", { class: {
10867
+ }, onClick: this.handleAddLine.bind(this) }, h("img", { src: addImagePath }))), lineOperatorRemoveShow && (h("div", { class: {
10868
10868
  'LotteryTippingTicketBet__lineOperatorGroup--item': true
10869
- }, onClick: () => this.handleRemoveLine() }, 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))));
10869
+ }, 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))));
10870
10870
  }
10871
10871
  static get assetsDirs() { return ["../static"]; }
10872
10872
  static get watchers() { return {
package/dist/lottery-tipping-ticket-bet/general-tooltip_4.entry.js CHANGED
@@ -1 +1 @@
1
- import{r as t,h as e,a as i,c as o}from"./index-220905ab.js";export{L as lottery_tipping_ticket_bet}from"./lottery-tipping-ticket-bet-c1ba00bc.js";function r(t,e){if(t){const i=document.createElement("style");i.innerHTML=e,t.appendChild(i)}}function n(t,e){const i=new URL(e);fetch(i.href).then((t=>t.text())).then((e=>{const i=document.createElement("style");i.innerHTML=e,t&&t.appendChild(i)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function l(t,e){if(window.emMessageBus){const i=document.createElement("style");window.emMessageBus.subscribe(e,(e=>{i.innerHTML=e,t&&t.appendChild(i)}))}}const s=class{constructor(e){t(this,e),this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.position="top",this.delay=200,this.isVisible=!1,this._tooltipId=void 0}handleClientStylingChange(t,e){t!=e&&r(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&n(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&l(this.stylingContainer,`${this.mbSource}.Style`)}componentWillLoad(){this._tooltipId=`general-tooltip-${Math.random().toString(36).substring(2,9)}`}componentDidLoad(){this.stylingContainer&&(this.mbSource&&l(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl))}handleMouseEnterOrFocus(){clearTimeout(this.hideTimeout),this.showTimeout&&clearTimeout(this.showTimeout),this.showTimeout=setTimeout((()=>{this.isVisible=!0}),this.delay)}handleMouseLeaveOrBlur(){this.showTimeout&&clearTimeout(this.showTimeout),this.hideTimeout=setTimeout((()=>{this.isVisible=!1}),100)}handleKeyDown(t){"Escape"===t.key&&this.isVisible&&(this.isVisible=!1)}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe(),clearTimeout(this.showTimeout),clearTimeout(this.hideTimeout)}render(){const t={"general-tooltip-popup":!0,visible:this.isVisible,[`general-tooltip-${this.position}`]:!0};return e("div",{key:"c0d52518e1e196e0d022789f7c6b7e64173b2c7d",class:"general-tooltip-wrapper"},e("slot",{key:"a935e103e16b0b619a024706e8224f4a937de6b9",name:"trigger"}),e("div",{key:"35c60e35ce3f8d5c2c42cd333fe64a3b289d34d4",class:"general-tooltip-container",role:"tooltip",ref:t=>this.stylingContainer=t},e("div",{key:"9d3fd9f142c1e3bd263dee289a2c1a9e4eebfddc",id:this._tooltipId,class:t,role:"tooltip"},e("slot",{key:"31344f0d4d4139f913d1819cc4f42a39f5113d8a",name:"content"}),e("div",{key:"f5cdd93060baec37b2a2879056efe2d66c5a553a",class:"general-tooltip-arrow"}))))}get hostElement(){return i(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};s.style=".general-tooltip-wrapper{display:inline-block;position:relative;line-height:0}.general-tooltip-container{display:contents;}.general-tooltip-popup{position:absolute;background-color:var(--emw--color-gray-300, #333);color:var(--emw--color-background, #fff);padding:8px 12px;border-radius:4px;font-size:0.875em;line-height:1.4;z-index:1000;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;white-space:nowrap;pointer-events:none;}.general-tooltip-popup.visible{opacity:1;visibility:visible}.general-tooltip-arrow{position:absolute;width:0;height:0;border-style:solid}.general-tooltip-top{bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;}.general-tooltip-top .general-tooltip-arrow{top:100%;left:50%;transform:translateX(-50%);border-width:6px 6px 0 6px;border-color:var(--emw--color-gray-300, #333) transparent transparent transparent}.general-tooltip-bottom{top:100%;left:50%;transform:translateX(-50%);margin-top:8px;}.general-tooltip-bottom .general-tooltip-arrow{bottom:100%;left:50%;transform:translateX(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--emw--color-gray-300, #333) transparent}.general-tooltip-left{right:100%;top:50%;transform:translateY(-50%);margin-right:8px;}.general-tooltip-left .general-tooltip-arrow{left:100%;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--emw--color-gray-300, #333)}.general-tooltip-right{left:100%;top:50%;transform:translateY(-50%);margin-left:8px;}.general-tooltip-right .general-tooltip-arrow{right:100%;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--emw--color-gray-300, #333) transparent transparent}";const a=class{constructor(e){t(this,e),this.lotteryTippingBulletToggleEvent=o(this,"lotteryTippingBulletToggle",7),this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.positionIdx=void 0,this.theme="default",this.value="",this.disabled=!1,this.isSelected=!1}handleClientStylingChange(t,e){t!=e&&r(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&n(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&l(this.stylingContainer,`${this.mbSource}.Style`)}componentDidLoad(){this.stylingContainer&&(this.mbSource&&l(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl))}handleClick(){this.disabled||this.lotteryTippingBulletToggleEvent.emit({positionIdx:this.positionIdx})}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}render(){return e("div",{key:"ef0fee38ed62adb7809b5a60668af6a499ebe5a6",ref:t=>this.stylingContainer=t},"text"===this.theme?e("div",{class:{LotteryTippingBullet__segment:!0,"LotteryTippingBullet__segment--text":!0}},this.value):e("button",{class:{LotteryTippingBullet__segment:!0,"LotteryTippingBullet__segment--disabled":this.disabled,"LotteryTippingBullet__segment--active":this.isSelected},onClick:()=>this.handleClick()},this.isSelected?"X":this.value))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};a.style=".LotteryTippingBullet__segment{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:16px;line-height:1;font-weight:500;color:var(--emw--color-gray-300, #333);background-color:var(--emw--color-gray-50, #f5f5f5);border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;cursor:pointer;transition:all 0.2s ease;user-select:none}.LotteryTippingBullet__segment:not(.LotteryTippingBullet__segment--disabled):hover{cursor:pointer;animation:jelly 0.3s ease-in-out;transform:scale(1.02)}.LotteryTippingBullet__segment--text{border:none;background-color:transparent;font-weight:400}.LotteryTippingBullet__segment--text:hover{cursor:default !important}.LotteryTippingBullet__segment--active{font-weight:600;background-color:var(--emw--color-gray-400, #000);color:var(--emw--color-primary, #fed275)}.LotteryTippingBullet__segment--disabled:not(.LotteryTippingBullet__segment--active){background-color:var(--emw--button-background-color, #d4d4d4);color:var(--emw--color-gray-150, #6f6f6f);border-color:var(--emw--color-gray-100, #e6e6e6)}.LotteryTippingBullet__segment--disabled:hover{cursor:not-allowed}@keyframes jelly{0%{transform:translate(0, 0)}20%{transform:translate(-0.5px, -0.5px)}40%{transform:translate(0.5px, 0.5px)}60%{transform:translate(-0.25px, -0.25px)}80%{transform:translate(0.25px, 0.25px)}100%{transform:translate(0, 0)}}";const h=class{constructor(e){t(this,e),this.lotteryTippingBulletGroupToggleEvent=o(this,"lotteryTippingBulletGroupToggle",7),this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.positionIdx=void 0,this.theme="default",this.mode="single",this.bulletConfigContent=""}get bulletConfigArr(){const t=[{value:"1"},{value:"X"},{value:"2"}];if("string"!=typeof this.bulletConfigContent||!this.bulletConfigContent)return t;try{return JSON.parse(this.bulletConfigContent)}catch(e){return console.error("Error parsing bulletConfigContent:",e),t}}handleClientStylingChange(t,e){t!=e&&r(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&n(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&l(this.stylingContainer,`${this.mbSource}.Style`)}componentDidLoad(){this.stylingContainer&&(this.mbSource&&l(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}lotteryTippingBulletSelectionHandler(t){const{positionIdx:e}=t.detail;this.handleToggle(e)}handleToggle(t){let e=[...this.bulletConfigArr];"single"===this.mode?(e=e.map((t=>Object.assign(Object.assign({},t),{isSelected:!1}))),e[t].isSelected=!0):(e=e.map((t=>Object.assign({},t))),e[t].isSelected=!e[t].isSelected),this.lotteryTippingBulletGroupToggleEvent.emit({bulletConfigArr:e,positionIdx:this.positionIdx+"-"+t})}render(){var t;return e("div",{ref:t=>this.stylingContainer=t,key:this.positionIdx},e("div",{key:"68223022eed831932c571378164be913206d98e9",style:{display:"flex",flexDirection:"row",gap:"10px"}},null===(t=this.bulletConfigArr)||void 0===t?void 0:t.map(((t,i)=>e("div",{key:i},e("lottery-tipping-bullet",{value:t.value,isSelected:t.isSelected,"position-idx":i,disabled:t.disabled,theme:this.theme,clientStyling:this.clientStyling,clientStylingUrl:this.clientStylingUrl,mbSource:this.mbSource}))))))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};h.style="";export{s as general_tooltip,a as lottery_tipping_bullet,h as lottery_tipping_bullet_group}
1
+ import{r as t,h as e,a as i,c as o}from"./index-220905ab.js";export{L as lottery_tipping_ticket_bet}from"./lottery-tipping-ticket-bet-8f5a763c.js";function r(t,e){if(t){const i=document.createElement("style");i.innerHTML=e,t.appendChild(i)}}function n(t,e){const i=new URL(e);fetch(i.href).then((t=>t.text())).then((e=>{const i=document.createElement("style");i.innerHTML=e,t&&t.appendChild(i)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function l(t,e){if(window.emMessageBus){const i=document.createElement("style");window.emMessageBus.subscribe(e,(e=>{i.innerHTML=e,t&&t.appendChild(i)}))}}const s=class{constructor(e){t(this,e),this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.position="top",this.delay=200,this.isVisible=!1,this._tooltipId=void 0}handleClientStylingChange(t,e){t!=e&&r(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&n(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&l(this.stylingContainer,`${this.mbSource}.Style`)}componentWillLoad(){this._tooltipId=`general-tooltip-${Math.random().toString(36).substring(2,9)}`}componentDidLoad(){this.stylingContainer&&(this.mbSource&&l(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl))}handleMouseEnterOrFocus(){clearTimeout(this.hideTimeout),this.showTimeout&&clearTimeout(this.showTimeout),this.showTimeout=setTimeout((()=>{this.isVisible=!0}),this.delay)}handleMouseLeaveOrBlur(){this.showTimeout&&clearTimeout(this.showTimeout),this.hideTimeout=setTimeout((()=>{this.isVisible=!1}),100)}handleKeyDown(t){"Escape"===t.key&&this.isVisible&&(this.isVisible=!1)}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe(),clearTimeout(this.showTimeout),clearTimeout(this.hideTimeout)}render(){const t={"general-tooltip-popup":!0,visible:this.isVisible,[`general-tooltip-${this.position}`]:!0};return e("div",{key:"c0d52518e1e196e0d022789f7c6b7e64173b2c7d",class:"general-tooltip-wrapper"},e("slot",{key:"a935e103e16b0b619a024706e8224f4a937de6b9",name:"trigger"}),e("div",{key:"35c60e35ce3f8d5c2c42cd333fe64a3b289d34d4",class:"general-tooltip-container",role:"tooltip",ref:t=>this.stylingContainer=t},e("div",{key:"9d3fd9f142c1e3bd263dee289a2c1a9e4eebfddc",id:this._tooltipId,class:t,role:"tooltip"},e("slot",{key:"31344f0d4d4139f913d1819cc4f42a39f5113d8a",name:"content"}),e("div",{key:"f5cdd93060baec37b2a2879056efe2d66c5a553a",class:"general-tooltip-arrow"}))))}get hostElement(){return i(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};s.style=".general-tooltip-wrapper{display:inline-block;position:relative;line-height:0}.general-tooltip-container{display:contents;}.general-tooltip-popup{position:absolute;background-color:var(--emw--color-gray-300, #333);color:var(--emw--color-background, #fff);padding:8px 12px;border-radius:4px;font-size:0.875em;line-height:1.4;z-index:1000;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;white-space:nowrap;pointer-events:none;}.general-tooltip-popup.visible{opacity:1;visibility:visible}.general-tooltip-arrow{position:absolute;width:0;height:0;border-style:solid}.general-tooltip-top{bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;}.general-tooltip-top .general-tooltip-arrow{top:100%;left:50%;transform:translateX(-50%);border-width:6px 6px 0 6px;border-color:var(--emw--color-gray-300, #333) transparent transparent transparent}.general-tooltip-bottom{top:100%;left:50%;transform:translateX(-50%);margin-top:8px;}.general-tooltip-bottom .general-tooltip-arrow{bottom:100%;left:50%;transform:translateX(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--emw--color-gray-300, #333) transparent}.general-tooltip-left{right:100%;top:50%;transform:translateY(-50%);margin-right:8px;}.general-tooltip-left .general-tooltip-arrow{left:100%;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--emw--color-gray-300, #333)}.general-tooltip-right{left:100%;top:50%;transform:translateY(-50%);margin-left:8px;}.general-tooltip-right .general-tooltip-arrow{right:100%;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--emw--color-gray-300, #333) transparent transparent}";const a=class{constructor(e){t(this,e),this.lotteryTippingBulletToggleEvent=o(this,"lotteryTippingBulletToggle",7),this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.positionIdx=void 0,this.theme="default",this.value="",this.disabled=!1,this.isSelected=!1}handleClientStylingChange(t,e){t!=e&&r(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&n(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&l(this.stylingContainer,`${this.mbSource}.Style`)}componentDidLoad(){this.stylingContainer&&(this.mbSource&&l(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl))}handleClick(){this.disabled||this.lotteryTippingBulletToggleEvent.emit({positionIdx:this.positionIdx})}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}render(){return e("div",{key:"ef0fee38ed62adb7809b5a60668af6a499ebe5a6",ref:t=>this.stylingContainer=t},"text"===this.theme?e("div",{class:{LotteryTippingBullet__segment:!0,"LotteryTippingBullet__segment--text":!0}},this.value):e("button",{class:{LotteryTippingBullet__segment:!0,"LotteryTippingBullet__segment--disabled":this.disabled,"LotteryTippingBullet__segment--active":this.isSelected},onClick:this.handleClick.bind(this)},this.isSelected?"X":this.value))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};a.style=".LotteryTippingBullet__segment{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:16px;line-height:1;font-weight:500;color:var(--emw--color-gray-300, #333);background-color:var(--emw--color-gray-50, #f5f5f5);border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;cursor:pointer;transition:all 0.2s ease;user-select:none}.LotteryTippingBullet__segment:not(.LotteryTippingBullet__segment--disabled):hover{cursor:pointer;animation:jelly 0.3s ease-in-out;transform:scale(1.02)}.LotteryTippingBullet__segment--text{border:none;background-color:transparent;font-weight:400}.LotteryTippingBullet__segment--text:hover{cursor:default !important}.LotteryTippingBullet__segment--active{font-weight:600;background-color:var(--emw--color-gray-400, #000);color:var(--emw--color-primary, #fed275)}.LotteryTippingBullet__segment--disabled:not(.LotteryTippingBullet__segment--active){background-color:var(--emw--button-background-color, #d4d4d4);color:var(--emw--color-gray-150, #6f6f6f);border-color:var(--emw--color-gray-100, #e6e6e6)}.LotteryTippingBullet__segment--disabled:hover{cursor:not-allowed}@keyframes jelly{0%{transform:translate(0, 0)}20%{transform:translate(-0.5px, -0.5px)}40%{transform:translate(0.5px, 0.5px)}60%{transform:translate(-0.25px, -0.25px)}80%{transform:translate(0.25px, 0.25px)}100%{transform:translate(0, 0)}}";const h=class{constructor(e){t(this,e),this.lotteryTippingBulletGroupToggleEvent=o(this,"lotteryTippingBulletGroupToggle",7),this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.positionIdx=void 0,this.theme="default",this.mode="single",this.bulletConfigContent=""}get bulletConfigArr(){const t=[{value:"1"},{value:"X"},{value:"2"}];if("string"!=typeof this.bulletConfigContent||!this.bulletConfigContent)return t;try{return JSON.parse(this.bulletConfigContent)}catch(e){return console.error("Error parsing bulletConfigContent:",e),t}}handleClientStylingChange(t,e){t!=e&&r(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&n(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&l(this.stylingContainer,`${this.mbSource}.Style`)}componentDidLoad(){this.stylingContainer&&(this.mbSource&&l(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}lotteryTippingBulletSelectionHandler(t){const{positionIdx:e}=t.detail;this.handleToggle(e)}handleToggle(t){let e=[...this.bulletConfigArr];"single"===this.mode?(e=e.map((t=>Object.assign(Object.assign({},t),{isSelected:!1}))),e[t].isSelected=!0):(e=e.map((t=>Object.assign({},t))),e[t].isSelected=!e[t].isSelected),this.lotteryTippingBulletGroupToggleEvent.emit({bulletConfigArr:e,positionIdx:this.positionIdx+"-"+t})}render(){var t;return e("div",{ref:t=>this.stylingContainer=t,key:this.positionIdx},e("div",{key:"68223022eed831932c571378164be913206d98e9",style:{display:"flex",flexDirection:"row",gap:"10px"}},null===(t=this.bulletConfigArr)||void 0===t?void 0:t.map(((t,i)=>e("div",{key:i},e("lottery-tipping-bullet",{value:t.value,isSelected:t.isSelected,"position-idx":i,disabled:t.disabled,theme:this.theme,clientStyling:this.clientStyling,clientStylingUrl:this.clientStylingUrl,mbSource:this.mbSource}))))))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};h.style="";export{s as general_tooltip,a as lottery_tipping_bullet,h as lottery_tipping_bullet_group}
package/dist/lottery-tipping-ticket-bet/index.esm.js CHANGED
@@ -1 +1 @@
1
- export{L as LotteryTippingTicketBet}from"./lottery-tipping-ticket-bet-c1ba00bc.js";import"./index-220905ab.js";
1
+ export{L as LotteryTippingTicketBet}from"./lottery-tipping-ticket-bet-8f5a763c.js";import"./index-220905ab.js";