@everymatrix/lottery-game-page 1.76.12 → 1.76.13

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.
@@ -9706,40 +9706,47 @@ const LotteryBullet = class {
9706
9706
  });
9707
9707
  }
9708
9708
  };
9709
- this.setClientStyling = () => {
9710
- let sheet = document.createElement('style');
9711
- sheet.innerHTML = this.clientStyling;
9712
- this.stylingContainer.prepend(sheet);
9713
- };
9714
- this.setClientStylingURL = () => {
9715
- let cssFile = document.createElement('style');
9716
- setTimeout(() => {
9717
- cssFile.innerHTML = this.clientStylingUrlContent;
9718
- this.stylingContainer.prepend(cssFile);
9719
- }, 1);
9720
- };
9721
9709
  this.value = '0';
9722
9710
  this.selectable = true;
9723
9711
  this.isSelected = false;
9724
9712
  this.isBonus = false;
9725
9713
  this.clientStyling = '';
9726
- this.clientStylingUrlContent = '';
9727
- this.limitStylingAppends = false;
9714
+ this.clientStylingUrl = '';
9715
+ this.mbSource = undefined;
9728
9716
  }
9729
- componentDidRender() {
9730
- // start custom styling area
9731
- if (!this.limitStylingAppends && this.stylingContainer) {
9717
+ handleClientStylingChange(newValue, oldValue) {
9718
+ if (newValue != oldValue) {
9719
+ setClientStyling(this.stylingContainer, this.clientStyling);
9720
+ }
9721
+ }
9722
+ handleClientStylingUrlChange(newValue, oldValue) {
9723
+ if (newValue != oldValue) {
9724
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
9725
+ }
9726
+ }
9727
+ handleMbSourceChange(newValue, oldValue) {
9728
+ if (newValue != oldValue) {
9729
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
9730
+ }
9731
+ }
9732
+ componentDidLoad() {
9733
+ if (this.stylingContainer) {
9734
+ if (this.mbSource)
9735
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
9732
9736
  if (this.clientStyling)
9733
- this.setClientStyling();
9734
- if (this.clientStylingUrlContent)
9735
- this.setClientStylingURL();
9736
- this.limitStylingAppends = true;
9737
+ setClientStyling(this.stylingContainer, this.clientStyling);
9738
+ if (this.clientStylingUrl)
9739
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
9737
9740
  }
9738
- // end custom styling area
9739
9741
  }
9740
9742
  render() {
9741
- return (h("div", { key: 'a21cbee8f556bfbbe9f97be5f44bfc08b6f24dd6', class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : '') + (this.isBonus ? ' Bonus' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
9743
+ return (h("div", { key: '2cfab600728d3aa72f9f87e4e07a968ea030e415', class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : '') + (this.isBonus ? ' Bonus' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
9742
9744
  }
9745
+ static get watchers() { return {
9746
+ "clientStyling": ["handleClientStylingChange"],
9747
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
9748
+ "mbSource": ["handleMbSourceChange"]
9749
+ }; }
9743
9750
  };
9744
9751
  LotteryBullet.style = LotteryBulletStyle0;
9745
9752
 
@@ -9836,18 +9843,6 @@ const LotteryDrawResults = class {
9836
9843
  registerInstance(this, hostRef);
9837
9844
  this.ticketDrawDetails = [];
9838
9845
  this.ticketDrawDetailsFlag = true;
9839
- this.setClientStyling = () => {
9840
- let sheet = document.createElement('style');
9841
- sheet.innerHTML = this.clientStyling;
9842
- this.stylingContainer.prepend(sheet);
9843
- };
9844
- this.setClientStylingURL = () => {
9845
- let cssFile = document.createElement('style');
9846
- setTimeout(() => {
9847
- cssFile.innerHTML = this.clientStylingUrlContent;
9848
- this.stylingContainer.prepend(cssFile);
9849
- }, 1);
9850
- };
9851
9846
  this.displayPrizeCategory = (details, drawDetail) => {
9852
9847
  const prizeMap = new Map();
9853
9848
  details.forEach((detail) => {
@@ -9901,7 +9896,8 @@ const LotteryDrawResults = class {
9901
9896
  this.ticketNumbers = '';
9902
9897
  this.sessionId = '';
9903
9898
  this.clientStyling = '';
9904
- this.clientStylingUrlContent = '';
9899
+ this.clientStylingUrl = '';
9900
+ this.mbSource = undefined;
9905
9901
  this.ticketDrawData = '';
9906
9902
  this.historyDrawData = '';
9907
9903
  this.tabValue = '';
@@ -9914,10 +9910,24 @@ const LotteryDrawResults = class {
9914
9910
  this.ticketDataLoaded = false;
9915
9911
  this.ticketDraws = [];
9916
9912
  this.toggleDrawer = [false];
9917
- this.limitStylingAppends = false;
9918
9913
  this.drawData = undefined;
9919
9914
  this.resultMap = { Won: "Win", Lost: "Lose" };
9920
9915
  }
9916
+ handleClientStylingChange(newValue, oldValue) {
9917
+ if (newValue != oldValue) {
9918
+ setClientStyling(this.stylingContainer, this.clientStyling);
9919
+ }
9920
+ }
9921
+ handleClientStylingUrlChange(newValue, oldValue) {
9922
+ if (newValue != oldValue) {
9923
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
9924
+ }
9925
+ }
9926
+ handleMbSourceChange(newValue, oldValue) {
9927
+ if (newValue != oldValue) {
9928
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
9929
+ }
9930
+ }
9921
9931
  componentWillLoad() {
9922
9932
  if (this.translationUrl) {
9923
9933
  getTranslations$6(JSON.parse(this.translationUrl));
@@ -9952,16 +9962,15 @@ const LotteryDrawResults = class {
9952
9962
  this.ticketDrawDetailsFlag = false;
9953
9963
  }
9954
9964
  }
9955
- componentDidRender() {
9956
- // start custom styling area
9957
- if (!this.limitStylingAppends && this.stylingContainer) {
9965
+ componentDidLoad() {
9966
+ if (this.stylingContainer) {
9967
+ if (this.mbSource)
9968
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
9958
9969
  if (this.clientStyling)
9959
- this.setClientStyling();
9960
- if (this.clientStylingUrlContent)
9961
- this.setClientStylingURL();
9962
- this.limitStylingAppends = true;
9970
+ setClientStyling(this.stylingContainer, this.clientStyling);
9971
+ if (this.clientStylingUrl)
9972
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
9963
9973
  }
9964
- // end custom styling area
9965
9974
  }
9966
9975
  getDrawData(drawId) {
9967
9976
  this.isLoading = true;
@@ -10020,11 +10029,11 @@ const LotteryDrawResults = class {
10020
10029
  else {
10021
10030
  return (h("section", { class: "DrawResultsSection", ref: el => this.stylingContainer = el }, this.drawMode ?
10022
10031
  h("div", { class: "DrawResultsArea" }, this.drawData &&
10023
- h("div", null, h("div", { class: "DrawResultsHeader" }, h("span", null, translate$6('drawId', this.language), ": ", this.drawData.id), h("span", null, translate$6('drawDate', this.language), ": ", format(new Date(this.drawData.date), 'dd/MM/yyyy'))), h("div", { class: "DrawResultsBody" }, h("div", { class: "DrawNumbersGrid" }, h("p", null, translate$6('drawNumbersGridDraw', this.language)), h("div", { class: "BulletContainer" }, h("lottery-grid", { "selected-numbers": this.drawData.winningNumbers.length && this.drawData.winningNumbers[0]['numbers'].join(','), "secondary-numbers": this.drawData.winningNumbers.length ? this.drawData.winningNumbers[0]['secondaryNumbers'].join(',') : '', "display-selected": true, selectable: false, language: this.language, "grid-type": 'ticket', "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), h("div", { class: "DrawPrizes" }, h("label", { class: "Label" }, translate$6('prize', this.language), " "), this.drawData.prizes.length ? h("div", null, " ", this.drawData.prizes.filter(item => item.division !== 'None').map((prize) => h("div", null, h("span", { style: { 'margin-right': '5px' } }, prize.division, ":"), h("span", { style: { 'margin-right': '4px' } }, " ", this.thousandSeperator(prize.amount.value)), h("span", null, prize.amount.currency)))) : h("div", null, "None"))))))
10032
+ h("div", null, h("div", { class: "DrawResultsHeader" }, h("span", null, translate$6('drawId', this.language), ": ", this.drawData.id), h("span", null, translate$6('drawDate', this.language), ": ", format(new Date(this.drawData.date), 'dd/MM/yyyy'))), h("div", { class: "DrawResultsBody" }, h("div", { class: "DrawNumbersGrid" }, h("p", null, translate$6('drawNumbersGridDraw', this.language)), h("div", { class: "BulletContainer" }, h("lottery-grid", { "selected-numbers": this.drawData.winningNumbers.length && this.drawData.winningNumbers[0]['numbers'].join(','), "secondary-numbers": this.drawData.winningNumbers.length ? this.drawData.winningNumbers[0]['secondaryNumbers'].join(',') : '', "display-selected": true, selectable: false, language: this.language, "grid-type": 'ticket', "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource })), h("div", { class: "DrawPrizes" }, h("label", { class: "Label" }, translate$6('prize', this.language), " "), this.drawData.prizes.length ? h("div", null, " ", this.drawData.prizes.filter(item => item.division !== 'None').map((prize) => h("div", null, h("span", { style: { 'margin-right': '5px' } }, prize.division, ":"), h("span", { style: { 'margin-right': '4px' } }, " ", this.thousandSeperator(prize.amount.value)), h("span", null, prize.amount.currency)))) : h("div", null, "None"))))))
10024
10033
  :
10025
10034
  h("div", { class: "DrawResultsArea TicketDraws" }, h("div", { class: "DrawResultsBody" }, h("div", { class: "TicketIdContainer" }, h("label", { class: "Label" }, translate$6('ticketId', this.language), ": ", h("span", null, this.ticketId))), h("div", { class: "TicketTypeContainer" }, h("label", { class: "Label" }, translate$6('ticketType', this.language), ": ", h("span", null, this.ticketType))), h("div", { class: "TicketAmountContainer" }, h("label", { class: "Label" }, translate$6('ticketAmount', this.language), ": ", h("span", null, `${this.thousandSeperator(this.ticketAmount)} ${this.ticketCurrency}`))), h("div", { class: "DrawNumbersGrid" }, this.gridNumbers.map((grid, index) => {
10026
10035
  var _a;
10027
- return h("div", null, h("label", { class: "Label" }, translate$6('drawNumbersGridTicket', this.language), ":"), h("div", { class: "BulletContainer" }, h("lottery-grid", { "selected-numbers": grid.join(','), "secondary-numbers": (_a = this.gridSecondaryNumbers[index]) === null || _a === void 0 ? void 0 : _a.join(','), selectable: false, "display-selected": true, language: this.language, "translation-url": this.translationUrl, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })));
10036
+ return h("div", null, h("label", { class: "Label" }, translate$6('drawNumbersGridTicket', this.language), ":"), h("div", { class: "BulletContainer" }, h("lottery-grid", { "selected-numbers": grid.join(','), "secondary-numbers": (_a = this.gridSecondaryNumbers[index]) === null || _a === void 0 ? void 0 : _a.join(','), selectable: false, "display-selected": true, language: this.language, "translation-url": this.translationUrl, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource })));
10028
10037
  })), this.ticketMultiplier &&
10029
10038
  h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, translate$6('multiplierNum', this.language), ": ", this.thousandSeperator(this.ticketMultiplierNum))), h("div", { class: "NumberOfDrawsContainer" }, h("label", { class: "Label" }, translate$6('numberOfDraws', this.language), ": ", this.thousandSeperator(this.ticketDrawCount)), h("div", { class: "DrawTicketsContainer" }, this.ticketDrawDetails && this.ticketDrawDetails.length > 0 &&
10030
10039
  h("div", { class: "ExpandableBoxes" }, this.ticketDrawDetails.map((drawDetail, index) => {
@@ -10034,11 +10043,16 @@ const LotteryDrawResults = class {
10034
10043
  h("div", { class: "DrawIdContainer" }, h("p", null, translate$6('drawId', this.language), ": ", drawDetail.drawId))), h("div", { class: "ExpandableBoxBody" }, h("div", { class: "DrawIdContainer" }, h("p", null, translate$6('drawId', this.language), ": ", drawDetail.drawId)), h("div", { class: "DrawDateContainer" }, h("p", null, translate$6('drawDate', this.language), ": ", (_a = drawDetail.drawData) === null || _a === void 0 ? void 0 :
10035
10044
  _a.date.slice(0, 10), " | ", (_b = drawDetail.drawData) === null || _b === void 0 ? void 0 :
10036
10045
  _b.date.slice(11, 19))), h("div", { class: "DrawNumbersGrid" }, drawDetail.drawData &&
10037
- h("div", { class: 'BulletContainer' }, h("label", { class: "Label" }, translate$6('drawNumbersGridDraw', this.language), ":"), h("lottery-grid", { "selected-numbers": ((_d = (_c = drawDetail.drawData) === null || _c === void 0 ? void 0 : _c.winningNumbers) === null || _d === void 0 ? void 0 : _d.length) && ((_e = drawDetail.drawData.winningNumbers[0]['numbers']) === null || _e === void 0 ? void 0 : _e.join(',')), "secondary-numbers": ((_g = (_f = drawDetail.drawData) === null || _f === void 0 ? void 0 : _f.winningNumbers) === null || _g === void 0 ? void 0 : _g.length) && ((_h = drawDetail.drawData.winningNumbers[0]['secondaryNumbers']) === null || _h === void 0 ? void 0 : _h.join(',')), selectable: false, "display-selected": true, language: this.language, "translation-url": this.translationUrl, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), drawDetail.details.length > 0 &&
10046
+ h("div", { class: 'BulletContainer' }, h("label", { class: "Label" }, translate$6('drawNumbersGridDraw', this.language), ":"), h("lottery-grid", { "selected-numbers": ((_d = (_c = drawDetail.drawData) === null || _c === void 0 ? void 0 : _c.winningNumbers) === null || _d === void 0 ? void 0 : _d.length) && ((_e = drawDetail.drawData.winningNumbers[0]['numbers']) === null || _e === void 0 ? void 0 : _e.join(',')), "secondary-numbers": ((_g = (_f = drawDetail.drawData) === null || _f === void 0 ? void 0 : _f.winningNumbers) === null || _g === void 0 ? void 0 : _g.length) && ((_h = drawDetail.drawData.winningNumbers[0]['secondaryNumbers']) === null || _h === void 0 ? void 0 : _h.join(',')), selectable: false, "display-selected": true, language: this.language, "translation-url": this.translationUrl, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }))), drawDetail.details.length > 0 &&
10038
10047
  h("div", { class: "DrawPrizes" }, h("label", { class: "Label" }, translate$6('prize', this.language), ":"), h("span", null, drawDetail.details.map((item) => h("span", null, h("div", null, h("span", null, item.prizeName, item.times > 1 ? ' x ' + item.times : '', ": "), h("span", { style: { 'margin-right': '4px' } }, this.thousandSeperator(item.amount)), h("span", null, item.currency))))))));
10039
10048
  }))))))));
10040
10049
  }
10041
10050
  }
10051
+ static get watchers() { return {
10052
+ "clientStyling": ["handleClientStylingChange"],
10053
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
10054
+ "mbSource": ["handleMbSourceChange"]
10055
+ }; }
10042
10056
  };
10043
10057
  LotteryDrawResults.style = LotteryDrawResultsStyle0;
10044
10058
 
@@ -10126,18 +10140,6 @@ const LotteryDrawResultsHistory = class {
10126
10140
  this.noResults = this.drawData.filter(draw => draw.winningNumbers).length == 0 ? true : false;
10127
10141
  });
10128
10142
  };
10129
- this.setClientStyling = () => {
10130
- let sheet = document.createElement('style');
10131
- sheet.innerHTML = this.clientStyling;
10132
- this.stylingContainer.prepend(sheet);
10133
- };
10134
- this.setClientStylingURL = () => {
10135
- let cssFile = document.createElement('style');
10136
- setTimeout(() => {
10137
- cssFile.innerHTML = this.clientStylingUrlContent;
10138
- this.stylingContainer.prepend(cssFile);
10139
- }, 1);
10140
- };
10141
10143
  this.transDataToString = (data) => {
10142
10144
  try {
10143
10145
  return JSON.stringify(data);
@@ -10150,7 +10152,8 @@ const LotteryDrawResultsHistory = class {
10150
10152
  this.gameId = undefined;
10151
10153
  this.language = 'en';
10152
10154
  this.clientStyling = '';
10153
- this.clientStylingUrlContent = '';
10155
+ this.clientStylingUrl = '';
10156
+ this.mbSource = undefined;
10154
10157
  this.translationUrl = undefined;
10155
10158
  this.drawData = [];
10156
10159
  this.winningDataSetsData = [''];
@@ -10158,7 +10161,6 @@ const LotteryDrawResultsHistory = class {
10158
10161
  this.dateFiltersTo = '';
10159
10162
  this.isLoading = false;
10160
10163
  this.noResults = false;
10161
- this.limitStylingAppends = false;
10162
10164
  this.activeIndex = 0;
10163
10165
  this.totalResults = 0;
10164
10166
  this.limit = 5;
@@ -10185,6 +10187,21 @@ const LotteryDrawResultsHistory = class {
10185
10187
  this.isReset = false;
10186
10188
  this.getDrawsData();
10187
10189
  }
10190
+ handleClientStylingChange(newValue, oldValue) {
10191
+ if (newValue != oldValue) {
10192
+ setClientStyling(this.stylingContainer, this.clientStyling);
10193
+ }
10194
+ }
10195
+ handleClientStylingUrlChange(newValue, oldValue) {
10196
+ if (newValue != oldValue) {
10197
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10198
+ }
10199
+ }
10200
+ handleMbSourceChange(newValue, oldValue) {
10201
+ if (newValue != oldValue) {
10202
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10203
+ }
10204
+ }
10188
10205
  connectedCallback() {
10189
10206
  this.getDrawsData();
10190
10207
  }
@@ -10193,25 +10210,29 @@ const LotteryDrawResultsHistory = class {
10193
10210
  getTranslations$5(JSON.parse(this.translationUrl));
10194
10211
  }
10195
10212
  }
10196
- disconnectedCallback() {
10197
- clearInterval(this.interval);
10198
- }
10199
- componentDidRender() {
10200
- // start custom styling area
10201
- if (!this.limitStylingAppends && this.stylingContainer) {
10213
+ componentDidLoad() {
10214
+ if (this.stylingContainer) {
10215
+ if (this.mbSource)
10216
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10202
10217
  if (this.clientStyling)
10203
- this.setClientStyling();
10204
- if (this.clientStylingUrlContent)
10205
- this.setClientStylingURL();
10206
- this.limitStylingAppends = true;
10218
+ setClientStyling(this.stylingContainer, this.clientStyling);
10219
+ if (this.clientStylingUrl)
10220
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10207
10221
  }
10208
- // end custom styling area
10222
+ }
10223
+ disconnectedCallback() {
10224
+ clearInterval(this.interval);
10209
10225
  }
10210
10226
  render() {
10211
- let gridHeader = h("div", { key: 'b8771d5092661ca5020d307ab0187311f8a60e56', class: "DrawResultsHeader" }, h("div", { key: 'dbe57fcd0959a88490c2ec6b92a5f828fb5abd55', class: "DrawResultsHeaderContent" }, h("h4", { key: 'bff47a0181c280a240cec2e3fde19381a2cf1609' }, translate$5('drawResultsHeader', this.language)), h("div", { key: '9c7d774d0d07be3e05f6528d000b158550e32a57', class: "FilterSection" }, h("helper-filters", { key: '7325eb71811951573d107ae4a1095c4ad66ce157', "activate-ticket-search": "false", "game-id": this.gameId, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))));
10212
- return h("section", { key: '52afb52ee81dab86d31a99498bddf955e3a7bf22', class: "GridWrapper", ref: el => this.stylingContainer = el }, h("div", { key: '2d84ed5d4d2c3fa426d245284f8c2dc36da20786', class: "DrawResultsSection" }, h("div", { key: 'c960bea0d2c9281fd288d47f983db8929cfa2fe4', class: "DrawResultsAreaHistory" }, gridHeader, h("div", { key: '4cf5407c17f5b4573f5d568679a49ee93677e884', class: "HistoryGridWrapper" }, h("div", { key: '6ca8e6d7f872b75591003de5c8d5f144ec283a08', class: "HistoryGrid" }, this.isLoading &&
10213
- h("p", { key: 'cc1ac748056d3bf79c0eb7853fed0fded00665b4' }, translate$5('loading', this.language)), !this.isLoading && !this.noResults && this.drawData.map((item) => h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, "draw-id": item.id, "draw-mode": true, language: this.language, "history-draw-data": this.transDataToString(item), "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), !this.isLoading && this.noResults && (h("p", { key: 'afca3878b22cbf60503b80ad83aeb5ed4213f775', class: "errorText" }, translate$5('noResults', this.language))))), h("div", { key: '43ae21f99e95c46a41a7434afb29c4544698a4b6', class: "DrawHistoryPaginationWrapper" }, (this.totalResults > this.limit) && h("lottery-pagination", { key: '63594981436325b34aa0baf91f5477d83908b011', arrowsActive: true, numberedNavActive: true, "is-reset": this.isReset, "first-page": false, "prev-page": true, "next-page": true, offset: this.offset, limit: this.limit, total: this.totalResults, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })))));
10227
+ let gridHeader = h("div", { key: '77c5f0d587b90c5548f60e045803452e95b8377c', class: "DrawResultsHeader" }, h("div", { key: '4aecd3e65ca3b687ed5f32ddd050932edcd4716d', class: "DrawResultsHeaderContent" }, h("h4", { key: '373c5c9d7e2e91e0561ee5dbb56b6cc1f0531fbe' }, translate$5('drawResultsHeader', this.language)), h("div", { key: '443cb8d63aee0bba92b9ff288bd18336030550ec', class: "FilterSection" }, h("helper-filters", { key: '1ed26ba1a261288d2d1c10a14d786da2b6ee4d6b', "activate-ticket-search": "false", "game-id": this.gameId, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }))));
10228
+ return h("section", { key: '1b2914b84b381721c9a96395f9629407e1444463', class: "GridWrapper", ref: el => this.stylingContainer = el }, h("div", { key: '98295c6cd09cd28719b738e16d6aee43be5426eb', class: "DrawResultsSection" }, h("div", { key: 'd29bcfe89ad920705c0551c2265e2b7a0a58d6b6', class: "DrawResultsAreaHistory" }, gridHeader, h("div", { key: '65b37fa0a70535b5de5f0fbecb3d221bbaa9cad6', class: "HistoryGridWrapper" }, h("div", { key: 'dec3e5dde880ecabaf8ccd624ac02de66f86ae82', class: "HistoryGrid" }, this.isLoading &&
10229
+ h("p", { key: '4597f37c985b6e63540a74c3b28541974cb8798d' }, translate$5('loading', this.language)), !this.isLoading && !this.noResults && this.drawData.map((item) => h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, "draw-id": item.id, "draw-mode": true, language: this.language, "history-draw-data": this.transDataToString(item), "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource })), !this.isLoading && this.noResults && (h("p", { key: '1232ffaba11ae9ede882ce3421fb5087e04bdb87', class: "errorText" }, translate$5('noResults', this.language))))), h("div", { key: 'c1038f322eafd601df4066746f0f1eb605ade0b0', class: "DrawHistoryPaginationWrapper" }, (this.totalResults > this.limit) && h("lottery-pagination", { key: '496f30e9225389b7bc0c6d7784851a01e13ea3c8', arrowsActive: true, numberedNavActive: true, "is-reset": this.isReset, "first-page": false, "prev-page": true, "next-page": true, offset: this.offset, limit: this.limit, total: this.totalResults, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource })))));
10214
10230
  }
10231
+ static get watchers() { return {
10232
+ "clientStyling": ["handleClientStylingChange"],
10233
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
10234
+ "mbSource": ["handleMbSourceChange"]
10235
+ }; }
10215
10236
  };
10216
10237
  LotteryDrawResultsHistory.style = LotteryDrawResultsHistoryStyle0;
10217
10238
 
@@ -10221,42 +10242,49 @@ const LotteryGameDetailsStyle0 = lotteryGameDetailsCss;
10221
10242
  const LotteryGameDetails = class {
10222
10243
  constructor(hostRef) {
10223
10244
  registerInstance(this, hostRef);
10224
- this.setClientStyling = () => {
10225
- let sheet = document.createElement('style');
10226
- sheet.innerHTML = this.clientStyling;
10227
- this.stylingContainer.prepend(sheet);
10228
- };
10229
- this.setClientStylingURL = () => {
10230
- let cssFile = document.createElement('style');
10231
- setTimeout(() => {
10232
- cssFile.innerHTML = this.clientStylingUrlContent;
10233
- this.stylingContainer.prepend(cssFile);
10234
- }, 1);
10235
- };
10236
10245
  this.clientStyling = '';
10237
- this.clientStylingUrlContent = '';
10246
+ this.clientStylingUrl = '';
10247
+ this.mbSource = undefined;
10238
10248
  this.lowNumber = undefined;
10239
10249
  this.highNumber = undefined;
10240
10250
  this.minimumAllowed = undefined;
10241
10251
  this.maxinumAllowed = undefined;
10242
10252
  this.language = 'en';
10243
10253
  this.translationUrl = undefined;
10244
- this.limitStylingAppends = false;
10245
10254
  }
10246
- componentDidRender() {
10247
- // start custom styling area
10248
- if (!this.limitStylingAppends && this.stylingContainer) {
10255
+ handleClientStylingChange(newValue, oldValue) {
10256
+ if (newValue != oldValue) {
10257
+ setClientStyling(this.stylingContainer, this.clientStyling);
10258
+ }
10259
+ }
10260
+ handleClientStylingUrlChange(newValue, oldValue) {
10261
+ if (newValue != oldValue) {
10262
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10263
+ }
10264
+ }
10265
+ handleMbSourceChange(newValue, oldValue) {
10266
+ if (newValue != oldValue) {
10267
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10268
+ }
10269
+ }
10270
+ componentDidLoad() {
10271
+ if (this.stylingContainer) {
10272
+ if (this.mbSource)
10273
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10249
10274
  if (this.clientStyling)
10250
- this.setClientStyling();
10251
- if (this.clientStylingUrlContent)
10252
- this.setClientStylingURL();
10253
- this.limitStylingAppends = true;
10275
+ setClientStyling(this.stylingContainer, this.clientStyling);
10276
+ if (this.clientStylingUrl)
10277
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10254
10278
  }
10255
- // end custom styling area
10256
10279
  }
10257
10280
  render() {
10258
- return (h("div", { key: 'bfc44a442056b452e331fc736f9c22e30dca143b', class: "GamePageDetailsContainer", ref: el => this.stylingContainer = el }, h("helper-accordion", { key: 'c8ad00900a8f16050a840c2e21fd4c2cebf2e1ec', "header-title": "Game Details", collapsed: false, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h("div", { key: 'cc8dc2dc148fb862f51a5c45b18c6c3e9fbb46f7', class: "AccordionContainer", slot: "accordionContent" }, h("helper-tabs", { key: 'b72ade93e6a2432276b24929be8865b2516ca44a', "low-number": this.lowNumber, "high-number": this.highNumber, "minimum-allowed": this.minimumAllowed, "maxinum-allowed": this.maxinumAllowed, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })))));
10281
+ return (h("div", { key: '0bb2683f87461804914d26c708499902d92dc503', class: "GamePageDetailsContainer", ref: el => this.stylingContainer = el }, h("helper-accordion", { key: '2ba23b953a9519ccb36fd203c3ac98a366673822', "header-title": "Game Details", collapsed: false, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }, h("div", { key: '54c18e3a6fde25ff0953bb7b15b8a1200e237fd0', class: "AccordionContainer", slot: "accordionContent" }, h("helper-tabs", { key: '0cb93435825bf7a42636848ffd5ff67a30369cfa', "low-number": this.lowNumber, "high-number": this.highNumber, "minimum-allowed": this.minimumAllowed, "maxinum-allowed": this.maxinumAllowed, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource })))));
10259
10282
  }
10283
+ static get watchers() { return {
10284
+ "clientStyling": ["handleClientStylingChange"],
10285
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
10286
+ "mbSource": ["handleMbSourceChange"]
10287
+ }; }
10260
10288
  };
10261
10289
  LotteryGameDetails.style = LotteryGameDetailsStyle0;
10262
10290
 
@@ -10415,25 +10443,6 @@ const LotteryGamePage = class {
10415
10443
  this.gameData = {};
10416
10444
  this.isMobile = isMobile$1(this.userAgent);
10417
10445
  this.secondarySelectionAllowed = false;
10418
- this.setClientStyling = () => {
10419
- let sheet = document.createElement('style');
10420
- sheet.innerHTML = this.clientStyling;
10421
- this.stylingContainer.prepend(sheet);
10422
- };
10423
- this.setClientStylingURL = () => {
10424
- let url = new URL(this.clientStylingurl);
10425
- let cssFile = document.createElement('style');
10426
- fetch(url.href)
10427
- .then((res) => res.text())
10428
- .then((data) => {
10429
- this.clientStylingUrlContent = data;
10430
- cssFile.innerHTML = data;
10431
- setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
10432
- })
10433
- .catch((err) => {
10434
- console.log('error ', err);
10435
- });
10436
- };
10437
10446
  this.thousandSeperator = (value) => {
10438
10447
  if (value === 0) {
10439
10448
  return '0';
@@ -10455,9 +10464,9 @@ const LotteryGamePage = class {
10455
10464
  this.language = 'en';
10456
10465
  this.backgroundUrl = undefined;
10457
10466
  this.clientStyling = '';
10458
- this.clientStylingurl = '';
10467
+ this.clientStylingUrl = '';
10468
+ this.mbSource = undefined;
10459
10469
  this.translationUrl = '';
10460
- this.clientStylingUrlContent = '';
10461
10470
  this.tickets = [];
10462
10471
  this.mainTickets = [];
10463
10472
  this.secondaryTickets = [];
@@ -10472,7 +10481,6 @@ const LotteryGamePage = class {
10472
10481
  this.nextDate = undefined;
10473
10482
  this.isLoggedIn = false;
10474
10483
  this.loginModalVisible = false;
10475
- this.limitStylingAppends = false;
10476
10484
  this.isLoading = false;
10477
10485
  this.showSubmitError = false;
10478
10486
  this.submitError = '';
@@ -10485,6 +10493,21 @@ const LotteryGamePage = class {
10485
10493
  this.subscriptionError = '';
10486
10494
  this.isSubscribed = false;
10487
10495
  }
10496
+ handleClientStylingChange(newValue, oldValue) {
10497
+ if (newValue != oldValue) {
10498
+ setClientStyling(this.stylingContainer, this.clientStyling);
10499
+ }
10500
+ }
10501
+ handleClientStylingUrlChange(newValue, oldValue) {
10502
+ if (newValue != oldValue) {
10503
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10504
+ }
10505
+ }
10506
+ handleMbSourceChange(newValue, oldValue) {
10507
+ if (newValue != oldValue) {
10508
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10509
+ }
10510
+ }
10488
10511
  handleNewTranslations() {
10489
10512
  this.isLoading = true;
10490
10513
  getTranslations$4(this.translationUrl).then(() => {
@@ -10510,16 +10533,16 @@ const LotteryGamePage = class {
10510
10533
  }
10511
10534
  return Promise.all(promises);
10512
10535
  }
10513
- componentDidRender() {
10514
- // start custom styling area
10515
- if (!this.limitStylingAppends && this.stylingContainer) {
10536
+ componentDidLoad() {
10537
+ console.log('Lottery Widget From LOCAL');
10538
+ if (this.stylingContainer) {
10539
+ if (this.mbSource)
10540
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10516
10541
  if (this.clientStyling)
10517
- this.setClientStyling();
10518
- if (this.clientStylingurl)
10519
- this.setClientStylingURL();
10520
- this.limitStylingAppends = true;
10542
+ setClientStyling(this.stylingContainer, this.clientStyling);
10543
+ if (this.clientStylingUrl)
10544
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10521
10545
  }
10522
- // end custom styling area
10523
10546
  }
10524
10547
  countdownLogic(date) {
10525
10548
  const setTime = () => {
@@ -10878,48 +10901,39 @@ const LotteryGamePage = class {
10878
10901
  return (
10879
10902
  /* Game details */
10880
10903
  h("div", { class: "GamePage", dir: this.language == 'ar' ? 'rtl' : 'ltr', ref: el => this.stylingContainer = el }, h("div", { class: "GridBanner", style: { 'background': `url(${this.backgroundUrl ? this.backgroundUrl : backgroundImagePath})`, 'background-size': 'contain', 'background-repeat': 'no-repeat', 'background-position': 'center' } }, h("div", { class: "BannerButtonsWrapper" }), h("div", { class: "Tabs" }, h("div", { class: 'TabButton' + (this.tabIndex == 0 ? ' Active' : ''), onClick: () => this.tabIndex = 0 }, translate$4('buy', this.language)), h("div", { class: 'TabButton' + (this.tabIndex == 1 ? ' Active' : ''), onClick: () => this.tabIndex = 1 }, translate$4('viewLatest', this.language)))), h("div", { class: "NextDrawWrapper" }, this.nextDate && h("div", { class: "NextDraw" }, h("p", { class: "BannerText" }, translate$4('nextDraw', this.language)), h("div", { class: "BannerCountdown" }, h("span", { class: "CountdownDays" }, this.daysRemaining, "D"), h("span", { class: "CountdownHours" }, this.hoursRemaining, "H"), h("span", { class: "CountdownMinutes" }, this.minutesRemaining, "M"), h("span", { class: "CountdownSeconds" }, this.secondsRemaining, "S")))), this.tabIndex == 0 &&
10881
- h("div", { class: "GamePageContent" }, h("div", { class: "GameDetails" }, h("lottery-game-details", { "low-number": (_b = (_a = this.gameData.rules) === null || _a === void 0 ? void 0 : _a.boards[0]) === null || _b === void 0 ? void 0 : _b.lowNumber, "high-number": (_d = (_c = this.gameData.rules) === null || _c === void 0 ? void 0 : _c.boards[0]) === null || _d === void 0 ? void 0 : _d.highNumber, "minimum-allowed": (_f = (_e = this.gameData.rules) === null || _e === void 0 ? void 0 : _e.boards[0]) === null || _f === void 0 ? void 0 : _f.minimumAllowed, "maxinum-allowed": (_h = (_g = this.gameData.rules) === null || _g === void 0 ? void 0 : _g.boards[0]) === null || _h === void 0 ? void 0 : _h.maxinumAllowed, language: this.language, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent, "translation-url": this.translationData })), h("div", { class: "TicketsWrapper" }, this.mainTickets.map((item) => {
10904
+ h("div", { class: "GamePageContent" }, h("div", { class: "GameDetails" }, h("lottery-game-details", { "low-number": (_b = (_a = this.gameData.rules) === null || _a === void 0 ? void 0 : _a.boards[0]) === null || _b === void 0 ? void 0 : _b.lowNumber, "high-number": (_d = (_c = this.gameData.rules) === null || _c === void 0 ? void 0 : _c.boards[0]) === null || _d === void 0 ? void 0 : _d.highNumber, "minimum-allowed": (_f = (_e = this.gameData.rules) === null || _e === void 0 ? void 0 : _e.boards[0]) === null || _f === void 0 ? void 0 : _f.minimumAllowed, "maxinum-allowed": (_h = (_g = this.gameData.rules) === null || _g === void 0 ? void 0 : _g.boards[0]) === null || _h === void 0 ? void 0 : _h.maxinumAllowed, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource, "translation-url": this.translationData })), h("div", { class: "TicketsWrapper" }, this.mainTickets.map((item) => {
10882
10905
  var _a, _b;
10883
- return h("lottery-ticket-controller", { endpoint: this.endpoint, "ticket-id": item.ticketId, "game-id": item.gameId, collapsed: false, last: true, language: this.language, "auto-pick": (_a = this.gameData.rules) === null || _a === void 0 ? void 0 : _a.quickPickAvailable, "reset-button": (_b = this.gameData.rules) === null || _b === void 0 ? void 0 : _b.quickPickAvailable, "total-controllers": this.mainTickets.length, "translation-url": this.translationData, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent });
10906
+ return h("lottery-ticket-controller", { endpoint: this.endpoint, "ticket-id": item.ticketId, "game-id": item.gameId, collapsed: false, last: true, language: this.language, "auto-pick": (_a = this.gameData.rules) === null || _a === void 0 ? void 0 : _a.quickPickAvailable, "reset-button": (_b = this.gameData.rules) === null || _b === void 0 ? void 0 : _b.quickPickAvailable, "total-controllers": this.mainTickets.length, "translation-url": this.translationData, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource });
10884
10907
  })), h("div", { class: "OrderSummary" }, h("h3", { class: "OrderSummaryTitle" }, translate$4('orderSummaryTitle', this.language)), h("div", { class: "OrderTicketInfo" }, h("div", { class: "Ticket" }, translate$4('orderSummaryTickets', this.language), ": ", h("span", null, this.mainTickets.length)), h("div", null, h("span", null, this.thousandSeperator(((_k = (_j = this.mainTickets[0]) === null || _j === void 0 ? void 0 : _j.betType) === null || _k === void 0 ? void 0 : _k.combinations) * ((_l = this.mainTickets[0]) === null || _l === void 0 ? void 0 : _l.lineNum))), h("span", { class: "Multiplier" }, "x"), ((_m = this.gameData.rules) === null || _m === void 0 ? void 0 : _m.stakeMultiplierAvailable) &&
10885
10908
  h("span", null, h("span", null, ((_o = this.mainTickets[0]) === null || _o === void 0 ? void 0 : _o.multiplierNum) === 1 ? `${(_p = this.mainTickets[0]) === null || _p === void 0 ? void 0 : _p.multiplierNum} Multiplier` : `${(_q = this.mainTickets[0]) === null || _q === void 0 ? void 0 : _q.multiplierNum} Multipliers`), h("span", { class: "Multiplier" }, "x")), h("span", null, `${(_r = this.mainTickets[0]) === null || _r === void 0 ? void 0 : _r.stake} EUR`), ((_s = this.gameData.rules) === null || _s === void 0 ? void 0 : _s.drawMultiplierAvailable) &&
10886
10909
  h("span", null, h("span", { class: "Multiplier" }, "x"), h("span", null, ((_t = this.mainTickets[0]) === null || _t === void 0 ? void 0 : _t.drawCount) === 1 ? `${(_u = this.mainTickets[0]) === null || _u === void 0 ? void 0 : _u.drawCount} Draw` : `${(_v = this.mainTickets[0]) === null || _v === void 0 ? void 0 : _v.drawCount} Draws`)))), h("hr", null), h("div", { class: "Total" }, translate$4('orderSummaryTotal', this.language), ": ", h("span", null, this.thousandSeperator(this.totalAmount), " ", this.currency)), this.isSubscription &&
10887
- h("div", { class: "SubscriptionWrapper" }, h("lottery-subscription", { endpoint: this.endpoint, endpointSubscription: this.endpointSubscription, language: this.language, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent, gameName: this.gameData.name })), h("div", { class: "ButtonWrapper" }, this.isLoggedIn &&
10910
+ h("div", { class: "SubscriptionWrapper" }, h("lottery-subscription", { endpoint: this.endpoint, endpointSubscription: this.endpointSubscription, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource, gameName: this.gameData.name })), h("div", { class: "ButtonWrapper" }, this.isLoggedIn &&
10888
10911
  h("div", null, !this.isLoading &&
10889
10912
  h("div", { class: "submitWrap" }, h("div", { class: "Button", onClick: () => this.handleSubmitTickets() }, translate$4('orderSummarySubmit', this.language)), this.showSubmitError && h("div", { class: 'submitError' }, this.submitError), this.showApiError && h("div", { class: 'submitError' }, this.apiError), this.showSubscriptionError && h("div", { class: 'submitError' }, this.subscriptionError)), this.isLoading && h("span", { class: "Button", style: { "cursor": "default" } }, translate$4('loading', this.language))), !this.isLoggedIn &&
10890
- h("div", null, h("span", { class: "Button", onClick: () => this.showLoginModal() }, translate$4('orderSummarySubmit', this.language)), h("helper-modal", { "title-modal": "Success", visible: this.loginModalVisible, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h("p", { class: "SubmitModalSuccess" }, translate$4('modalLogin', this.language))))))), this.tabIndex == 1 &&
10891
- h("div", null, h("lottery-draw-results-history", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language, "translation-url": this.translationData, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), h("helper-modal", { "title-modal": "Success", visible: this.successVisible, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h("p", { class: "SubmitModalSuccess" }, translate$4('submitSuccess', this.language)))));
10913
+ h("div", null, h("span", { class: "Button", onClick: () => this.showLoginModal() }, translate$4('orderSummarySubmit', this.language)), h("helper-modal", { "title-modal": "Success", visible: this.loginModalVisible, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }, h("p", { class: "SubmitModalSuccess" }, translate$4('modalLogin', this.language))))))), this.tabIndex == 1 &&
10914
+ h("div", null, h("lottery-draw-results-history", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language, "translation-url": this.translationData, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource })), h("helper-modal", { "title-modal": "Success", visible: this.successVisible, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }, h("p", { class: "SubmitModalSuccess" }, translate$4('submitSuccess', this.language)))));
10892
10915
  }
10893
10916
  static get assetsDirs() { return ["../static"]; }
10894
10917
  get element() { return getElement(this); }
10895
10918
  static get watchers() { return {
10919
+ "clientStyling": ["handleClientStylingChange"],
10920
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
10921
+ "mbSource": ["handleMbSourceChange"],
10896
10922
  "translationUrl": ["handleNewTranslations"]
10897
10923
  }; }
10898
10924
  };
10899
10925
  LotteryGamePage.style = LotteryGamePageStyle0;
10900
10926
 
10901
- const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}.Grid.TicketGrid{gap:5px}";
10902
- const LotteryGridStyle0 = lotteryGridCss;
10903
-
10904
- const LotteryGrid = class {
10905
- constructor(hostRef) {
10906
- registerInstance(this, hostRef);
10907
- this.gridFilledEvent = createEvent(this, "gridFilled", 7);
10908
- this.gridDirtyEvent = createEvent(this, "gridDirty", 7);
10909
- this.gridClearAllEvent = createEvent(this, "gridClearAllEvent", 7);
10910
- this.selectedCounter = 0;
10911
- this.setClientStyling = () => {
10912
- let sheet = document.createElement('style');
10913
- sheet.innerHTML = this.clientStyling;
10914
- this.stylingContainer.prepend(sheet);
10915
- };
10916
- this.setClientStylingURL = () => {
10917
- let cssFile = document.createElement('style');
10918
- setTimeout(() => {
10919
- cssFile.innerHTML = this.clientStylingUrlContent;
10920
- this.stylingContainer.prepend(cssFile);
10921
- }, 1);
10922
- };
10927
+ const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}.Grid.TicketGrid{gap:5px}";
10928
+ const LotteryGridStyle0 = lotteryGridCss;
10929
+
10930
+ const LotteryGrid = class {
10931
+ constructor(hostRef) {
10932
+ registerInstance(this, hostRef);
10933
+ this.gridFilledEvent = createEvent(this, "gridFilled", 7);
10934
+ this.gridDirtyEvent = createEvent(this, "gridDirty", 7);
10935
+ this.gridClearAllEvent = createEvent(this, "gridClearAllEvent", 7);
10936
+ this.selectedCounter = 0;
10923
10937
  this.ticketId = undefined;
10924
10938
  this.totalNumbers = 0;
10925
10939
  this.gameId = undefined;
@@ -10934,14 +10948,39 @@ const LotteryGrid = class {
10934
10948
  this.gridIndex = undefined;
10935
10949
  this.gridType = '';
10936
10950
  this.clientStyling = '';
10937
- this.clientStylingUrlContent = '';
10951
+ this.clientStylingUrl = '';
10952
+ this.mbSource = undefined;
10938
10953
  this.highNumber = 47;
10939
10954
  this.lowNumber = 1;
10940
10955
  this.selectionType = 'mainSelection';
10941
10956
  this.partialQuickpickAvailable = false;
10942
10957
  this.numbers = [];
10943
10958
  this.bonusNumbers = [];
10944
- this.limitStylingAppends = false;
10959
+ }
10960
+ handleClientStylingChange(newValue, oldValue) {
10961
+ if (newValue != oldValue) {
10962
+ setClientStyling(this.stylingContainer, this.clientStyling);
10963
+ }
10964
+ }
10965
+ handleClientStylingUrlChange(newValue, oldValue) {
10966
+ if (newValue != oldValue) {
10967
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10968
+ }
10969
+ }
10970
+ handleMbSourceChange(newValue, oldValue) {
10971
+ if (newValue != oldValue) {
10972
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10973
+ }
10974
+ }
10975
+ componentDidLoad() {
10976
+ if (this.stylingContainer) {
10977
+ if (this.mbSource)
10978
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10979
+ if (this.clientStyling)
10980
+ setClientStyling(this.stylingContainer, this.clientStyling);
10981
+ if (this.clientStylingUrl)
10982
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10983
+ }
10945
10984
  }
10946
10985
  connectedCallback() {
10947
10986
  let selected = [];
@@ -10978,17 +11017,6 @@ const LotteryGrid = class {
10978
11017
  });
10979
11018
  }
10980
11019
  }
10981
- componentDidRender() {
10982
- // start custom styling area
10983
- if (!this.limitStylingAppends && this.stylingContainer) {
10984
- if (this.clientStyling)
10985
- this.setClientStyling();
10986
- if (this.clientStylingUrlContent)
10987
- this.setClientStylingURL();
10988
- this.limitStylingAppends = true;
10989
- }
10990
- // end custom styling area
10991
- }
10992
11020
  // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices
10993
11021
  shuffleArray(array) {
10994
11022
  const result = [];
@@ -11114,8 +11142,13 @@ const LotteryGrid = class {
11114
11142
  }
11115
11143
  }
11116
11144
  render() {
11117
- return (h("div", { key: '8ad436904a126e6bee036c7372cf45c075022e5f', class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { key: '5a8818209485f0808a99978910f6f26473dd6f59', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), this.bonusNumbers.length ? this.bonusNumbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "is-bonus": true, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))) : '')));
11145
+ return (h("div", { key: 'f62b5b1e5a6cf7bcaa13ce2c8a281bc93fa439f7', class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { key: 'e381adbfff57e2cc343188c46037eb45ab798cac', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }))), this.bonusNumbers.length ? this.bonusNumbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "is-bonus": true, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }))) : '')));
11118
11146
  }
11147
+ static get watchers() { return {
11148
+ "clientStyling": ["handleClientStylingChange"],
11149
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
11150
+ "mbSource": ["handleMbSourceChange"]
11151
+ }; }
11119
11152
  };
11120
11153
  LotteryGrid.style = LotteryGridStyle0;
11121
11154
 
@@ -11257,18 +11290,6 @@ const LotteryPagination = class {
11257
11290
  }
11258
11291
  }
11259
11292
  };
11260
- this.setClientStyling = () => {
11261
- let sheet = document.createElement('style');
11262
- sheet.innerHTML = this.clientStyling;
11263
- this.stylingContainer.prepend(sheet);
11264
- };
11265
- this.setClientStylingURL = () => {
11266
- let cssFile = document.createElement('style');
11267
- setTimeout(() => {
11268
- cssFile.innerHTML = this.clientStylingUrlContent;
11269
- this.stylingContainer.prepend(cssFile);
11270
- }, 1);
11271
- };
11272
11293
  this.nextPage = false;
11273
11294
  this.prevPage = false;
11274
11295
  this.offset = 0;
@@ -11276,7 +11297,8 @@ const LotteryPagination = class {
11276
11297
  this.total = 1;
11277
11298
  this.language = 'en';
11278
11299
  this.clientStyling = '';
11279
- this.clientStylingUrlContent = '';
11300
+ this.clientStylingUrl = '';
11301
+ this.mbSource = undefined;
11280
11302
  this.arrowsActive = undefined;
11281
11303
  this.secondaryArrowsActive = undefined;
11282
11304
  this.numberedNavActive = undefined;
@@ -11289,7 +11311,21 @@ const LotteryPagination = class {
11289
11311
  this.totalInt = undefined;
11290
11312
  this.pagesArray = [];
11291
11313
  this.endInt = 0;
11292
- this.limitStylingAppends = false;
11314
+ }
11315
+ handleClientStylingChange(newValue, oldValue) {
11316
+ if (newValue != oldValue) {
11317
+ setClientStyling(this.stylingContainer, this.clientStyling);
11318
+ }
11319
+ }
11320
+ handleClientStylingUrlChange(newValue, oldValue) {
11321
+ if (newValue != oldValue) {
11322
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11323
+ }
11324
+ }
11325
+ handleMbSourceChange(newValue, oldValue) {
11326
+ if (newValue != oldValue) {
11327
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11328
+ }
11293
11329
  }
11294
11330
  componentWillLoad() {
11295
11331
  if (this.translationUrl) {
@@ -11332,17 +11368,15 @@ const LotteryPagination = class {
11332
11368
  }
11333
11369
  }
11334
11370
  }
11335
- componentDidRender() {
11336
- this.isReset = false;
11337
- // start custom styling area
11338
- if (!this.limitStylingAppends && this.stylingContainer) {
11371
+ componentDidLoad() {
11372
+ if (this.stylingContainer) {
11373
+ if (this.mbSource)
11374
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11339
11375
  if (this.clientStyling)
11340
- this.setClientStyling();
11341
- if (this.clientStylingUrlContent)
11342
- this.setClientStylingURL();
11343
- this.limitStylingAppends = true;
11376
+ setClientStyling(this.stylingContainer, this.clientStyling);
11377
+ if (this.clientStylingUrl)
11378
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11344
11379
  }
11345
- // end custom styling area
11346
11380
  }
11347
11381
  render() {
11348
11382
  /**
@@ -11371,6 +11405,11 @@ const LotteryPagination = class {
11371
11405
  }
11372
11406
  return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
11373
11407
  }
11408
+ static get watchers() { return {
11409
+ "clientStyling": ["handleClientStylingChange"],
11410
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
11411
+ "mbSource": ["handleMbSourceChange"]
11412
+ }; }
11374
11413
  };
11375
11414
  LotteryPagination.style = LotteryPaginationStyle0;
11376
11415
 
@@ -11447,18 +11486,6 @@ const LotterySubscription = class {
11447
11486
  registerInstance(this, hostRef);
11448
11487
  this.subscriptionCompleted = createEvent(this, "subscriptionCompleted", 7);
11449
11488
  this.subscriptionCheckChange = createEvent(this, "subscriptionCheckChange", 7);
11450
- this.setClientStyling = () => {
11451
- let sheet = document.createElement('style');
11452
- sheet.innerHTML = this.clientStyling;
11453
- this.stylingContainer.prepend(sheet);
11454
- };
11455
- this.setClientStylingURL = () => {
11456
- let cssFile = document.createElement('style');
11457
- setTimeout(() => {
11458
- cssFile.innerHTML = this.clientStylingUrlContent;
11459
- this.stylingContainer.prepend(cssFile);
11460
- }, 1);
11461
- };
11462
11489
  this.changeDateParam = () => {
11463
11490
  if (this.filterData.from && !this.filterData.to) {
11464
11491
  let from = this.filterData.from;
@@ -11551,7 +11578,8 @@ const LotterySubscription = class {
11551
11578
  };
11552
11579
  this.translationUrl = undefined;
11553
11580
  this.clientStyling = '';
11554
- this.clientStylingUrlContent = '';
11581
+ this.clientStylingUrl = '';
11582
+ this.mbSource = undefined;
11555
11583
  this.endpoint = undefined;
11556
11584
  this.endpointTicket = undefined;
11557
11585
  this.endpointSubscription = undefined;
@@ -11571,7 +11599,6 @@ const LotterySubscription = class {
11571
11599
  this.endDateRule = undefined;
11572
11600
  this.gameNameRule = undefined;
11573
11601
  this.ruleType = '';
11574
- this.limitStylingAppends = false;
11575
11602
  }
11576
11603
  componentWillLoad() {
11577
11604
  if (this.translationUrl) {
@@ -11579,13 +11606,29 @@ const LotterySubscription = class {
11579
11606
  }
11580
11607
  this.getSubscriptionData();
11581
11608
  }
11582
- componentDidRender() {
11583
- if (!this.limitStylingAppends && this.stylingContainer) {
11609
+ handleClientStylingChange(newValue, oldValue) {
11610
+ if (newValue != oldValue) {
11611
+ setClientStyling(this.stylingContainer, this.clientStyling);
11612
+ }
11613
+ }
11614
+ handleClientStylingUrlChange(newValue, oldValue) {
11615
+ if (newValue != oldValue) {
11616
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11617
+ }
11618
+ }
11619
+ handleMbSourceChange(newValue, oldValue) {
11620
+ if (newValue != oldValue) {
11621
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11622
+ }
11623
+ }
11624
+ componentDidLoad() {
11625
+ if (this.stylingContainer) {
11626
+ if (this.mbSource)
11627
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11584
11628
  if (this.clientStyling)
11585
- this.setClientStyling();
11586
- if (this.clientStylingUrlContent)
11587
- this.setClientStylingURL();
11588
- this.limitStylingAppends = true;
11629
+ setClientStyling(this.stylingContainer, this.clientStyling);
11630
+ if (this.clientStylingUrl)
11631
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11589
11632
  }
11590
11633
  }
11591
11634
  transDate(from, to) {
@@ -11685,10 +11728,15 @@ const LotterySubscription = class {
11685
11728
  }
11686
11729
  }
11687
11730
  render() {
11688
- return (h("div", { key: '1bf289722935c5d2b574ba18f322830c81335585', class: "subscripitonContainer", ref: el => this.stylingContainer = el }, h("vaadin-checkbox", { key: '5f62fb61bccecd3632525ab0b28a41e45487c7ec', label: "Subscription", checked: this.isSubscribed, onChange: this.handleCheckboxchange.bind(this) }), this.isSubscribed &&
11689
- h("div", { key: 'd8e56e346ca8f275866738ab9c6d8eb14437d84a', class: "secondConditon" }, h("span", { key: '13c61d7582b1e0716395bd06c410a621b8af97d8', style: { 'margin-right': '8px' } }, "Occurrence: "), h("vaadin-select", { key: 'cf8d9c4176f66d2095798cae79b82b748e7ffb0b', items: this.frequenceList, value: this.frequenceState, "on-value-changed": this.handleSelectionChange.bind(this) }), this.frequenceState === 'Custom' &&
11690
- h("div", { key: 'c1496adac7e295830074da0b096bf4bbc0af8247', class: "thirdCondition" }, h("div", { key: '2aa4f92c84ab37edee56640ae0657f59e92c3719', class: "filterCalenderWrap" }, h("div", { key: '6665e3f2bd28650794eb174db6081ab4a9f514f0', class: "filterText" }, "Subscription Start Date*"), h("div", { key: '50a05e684bf068ab00d6d4298e65a6b94c44b79a', class: "filter" }, h("vaadin-date-picker", { value: this.filterData.from, key: "filterFromCalendar", max: this.filterData.to === undefined ? undefined : this.changeFormate(this.filterData.to), onChange: this.handleFilterFrom, placeholder: translate$2('filterFromCalendar', this.language), ref: el => this.setDateFormate(el), class: "VaadinDatePicker" }))), h("div", { key: '85c4bf037ad7bc9797f809aa7e71fcbfbc80c298', class: "filterCalenderWrap" }, h("div", { key: '87b446788202ae55ad698c8455c9a6d09a9d22d6', class: "filterText" }, "Subscription End Date"), h("div", { key: '5700c92b2f0c57959f84b5f7ac7a3488d1d0d096', class: "filter" }, h("vaadin-date-picker", { value: this.filterData.to, key: "filterToCalendar", min: this.filterData.from === undefined ? undefined : this.changeFormate(this.filterData.from), onChange: this.handleFilterTo, placeholder: translate$2('filterToCalendar', this.language), ref: el => this.setDateFormate(el), class: "VaadinDatePicker" })))))));
11731
+ return (h("div", { key: 'f301b99245d1950605dbdfac1f4bc06c60ea0c50', class: "subscripitonContainer", ref: el => this.stylingContainer = el }, h("vaadin-checkbox", { key: 'e9005320778ae1d66975e7825b5259fa2bca36d2', label: "Subscription", checked: this.isSubscribed, onChange: this.handleCheckboxchange.bind(this) }), this.isSubscribed &&
11732
+ h("div", { key: '9dc052565ef92bb4c00559766b933e4bf567c1a7', class: "secondConditon" }, h("span", { key: '4251cf447cb9c00b12109c1d930720f6465983be', style: { 'margin-right': '8px' } }, "Occurrence: "), h("vaadin-select", { key: '0eabde390ba1fcab6ec654bf567c38b1afd376c7', items: this.frequenceList, value: this.frequenceState, "on-value-changed": this.handleSelectionChange.bind(this) }), this.frequenceState === 'Custom' &&
11733
+ h("div", { key: '61ab68b026444a2c2f63f200b7eeeb84d615c00e', class: "thirdCondition" }, h("div", { key: '6b03192f386a3b864012c8c5374a454f367a95e3', class: "filterCalenderWrap" }, h("div", { key: 'ec7e479eaba4b50dcd41cb953b90dd97fe879dae', class: "filterText" }, "Subscription Start Date*"), h("div", { key: '796c81340a082f033a9461d7ef2e0116b962d1e6', class: "filter" }, h("vaadin-date-picker", { value: this.filterData.from, key: "filterFromCalendar", max: this.filterData.to === undefined ? undefined : this.changeFormate(this.filterData.to), onChange: this.handleFilterFrom, placeholder: translate$2('filterFromCalendar', this.language), ref: el => this.setDateFormate(el), class: "VaadinDatePicker" }))), h("div", { key: '7a8a64b82154802b65a848f73226e65904e6fe57', class: "filterCalenderWrap" }, h("div", { key: '396e291a86a3121f7a3fd7d1316271b8c36f6915', class: "filterText" }, "Subscription End Date"), h("div", { key: 'ecf9e2f2564c8bf336fcaef61d9ed46635f1bda0', class: "filter" }, h("vaadin-date-picker", { value: this.filterData.to, key: "filterToCalendar", min: this.filterData.from === undefined ? undefined : this.changeFormate(this.filterData.from), onChange: this.handleFilterTo, placeholder: translate$2('filterToCalendar', this.language), ref: el => this.setDateFormate(el), class: "VaadinDatePicker" })))))));
11691
11734
  }
11735
+ static get watchers() { return {
11736
+ "clientStyling": ["handleClientStylingChange"],
11737
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
11738
+ "mbSource": ["handleMbSourceChange"]
11739
+ }; }
11692
11740
  };
11693
11741
  LotterySubscription.style = LotterySubscriptionStyle0;
11694
11742
 
@@ -11782,18 +11830,6 @@ const LotteryTicket = class {
11782
11830
  this.drawMultiplierChange = createEvent(this, "drawMultiplierChange", 7);
11783
11831
  this.lineMultiplierChange = createEvent(this, "lineMultiplierChange", 7);
11784
11832
  this.betTypeChange = createEvent(this, "betTypeChange", 7);
11785
- this.setClientStyling = () => {
11786
- let sheet = document.createElement('style');
11787
- sheet.innerHTML = this.clientStyling;
11788
- this.stylingContainer.prepend(sheet);
11789
- };
11790
- this.setClientStylingURL = () => {
11791
- let cssFile = document.createElement('style');
11792
- setTimeout(() => {
11793
- cssFile.innerHTML = this.clientStylingUrlContent;
11794
- this.stylingContainer.prepend(cssFile);
11795
- }, 1);
11796
- };
11797
11833
  this.endpoint = undefined;
11798
11834
  this.gameId = undefined;
11799
11835
  this.numberOfGrids = 1;
@@ -11803,14 +11839,14 @@ const LotteryTicket = class {
11803
11839
  this.autoPick = false;
11804
11840
  this.language = 'en';
11805
11841
  this.clientStyling = '';
11806
- this.clientStylingUrlContent = '';
11842
+ this.clientStylingUrl = '';
11843
+ this.mbSource = undefined;
11807
11844
  this.translationUrl = undefined;
11808
11845
  this.isLoading = true;
11809
11846
  this.hasErrors = false;
11810
11847
  this.ticketDone = [];
11811
11848
  this.isCustomSelect = false;
11812
11849
  this.amountInfo = {};
11813
- this.limitStylingAppends = false;
11814
11850
  this.stakeMultiplier = '1';
11815
11851
  this.lineMultiplier = 0;
11816
11852
  this.isCustomSelectStake = false;
@@ -11869,6 +11905,21 @@ const LotteryTicket = class {
11869
11905
  betType: this.playType[0]
11870
11906
  });
11871
11907
  }
11908
+ handleClientStylingChange(newValue, oldValue) {
11909
+ if (newValue != oldValue) {
11910
+ setClientStyling(this.stylingContainer, this.clientStyling);
11911
+ }
11912
+ }
11913
+ handleClientStylingUrlChange(newValue, oldValue) {
11914
+ if (newValue != oldValue) {
11915
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11916
+ }
11917
+ }
11918
+ handleMbSourceChange(newValue, oldValue) {
11919
+ if (newValue != oldValue) {
11920
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11921
+ }
11922
+ }
11872
11923
  checkForClickOutside(ev) {
11873
11924
  if (this.selectRef && !this.selectRef.contains(ev.composedPath()[0])) {
11874
11925
  this.isCustomSelect = false;
@@ -11950,16 +12001,15 @@ const LotteryTicket = class {
11950
12001
  getTranslations$1(JSON.parse(this.translationUrl));
11951
12002
  }
11952
12003
  }
11953
- componentDidRender() {
11954
- // start custom styling area
11955
- if (!this.limitStylingAppends && this.stylingContainer) {
12004
+ componentDidLoad() {
12005
+ if (this.stylingContainer) {
12006
+ if (this.mbSource)
12007
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11956
12008
  if (this.clientStyling)
11957
- this.setClientStyling();
11958
- if (this.clientStylingUrlContent)
11959
- this.setClientStylingURL();
11960
- this.limitStylingAppends = true;
12009
+ setClientStyling(this.stylingContainer, this.clientStyling);
12010
+ if (this.clientStylingUrl)
12011
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11961
12012
  }
11962
- // end custom styling area
11963
12013
  }
11964
12014
  gridFilledHandler(event) {
11965
12015
  this.ticket = Object.assign(Object.assign({}, event.detail), { drawCount: this.drawMultiplier, multiplierNum: Number(this.stakeMultiplier), multiplier: this.gameData.rules.stakeMultiplierAvailable, quickPicks: this.quickPicks, betName: this.playType.length > 1 ? this.playType.find((item) => item.value === this.selectedPlayTypeId).label : this.groupType[this.tabIndex].groupName });
@@ -12088,8 +12138,8 @@ const LotteryTicket = class {
12088
12138
  h("div", null, h("label", { class: "Label" }, translate$1('playType', this.language), ": "), h("vaadin-select", { style: { 'width': '160px' }, items: this.playType, value: this.selectedPlayTypeId, "on-value-changed": (e) => this.handlePlayTypeChange(e.detail.value) })), this.boardsAllowed.length > 1 &&
12089
12139
  h("div", null, h("label", { class: "Label" }, translate$1('lines', this.language), ": "), h("div", { class: "WagerInput" }, h("div", { ref: el => this.selectLineRef = el, class: this.isCustomSelectLine ? "SelectWrapper SelectActive" : "SelectWrapper" }, h("div", { class: "SelectButton", onClick: () => this.toggleLineSelection() }, h("span", null, this.lineMultiplier), h("span", { class: "SelectExpand" }, "\u25BC")), h("div", { class: "SelectContent" }, h("ul", { class: "SelectOptions" }, this.boardsAllowed.map((item) => h("li", { class: this.lineMultiplier == item ? 'SelectedValue' : '', value: item, onClick: () => this.setLineMultiplier(item) }, item))))))), this.grids.map((_, index) => h("div", null, h("div", { class: "TicketGridHeader" }, h("div", null, translate$1('lineName', this.language), index + 1), this.resetButton && this.ticketDone[index] &&
12090
12140
  h("div", { class: "ButtonContainer" }, h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection(index) }, translate$1('resetButton', this.language))), this.autoPick && !this.ticketDone[index] &&
12091
- h("div", { class: "ButtonContainer" }, h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection(index) }, translate$1('autoButton', this.language)))), h("div", { class: "TicketGridBullets" }, h("p", { class: "TicketGridTitle" }, rules.boards[0].selectionName), h("lottery-grid", { "grid-index": index, "maximum-allowed": this.maximumAllowed, "minimum-allowed": this.minimumAllowed, "number-range": JSON.stringify(this.numberRange), "high-number": rules.boards[0].highNumber, "low-number": rules.boards[0].lowNumber, "total-numbers": rules.boards[0].highNumber - rules.boards[0].lowNumber + 1, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, "partial-quickpick-available": this.partialQuickpickAvailable, language: this.language, "translation-url": this.translationUrl, "selection-type": 'mainSelection', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), this.secondarySelectionAllowed &&
12092
- h("div", { class: "SecondarySelectionWrapper" }, h("div", { class: "TicketGridBullets" }, h("p", { class: "TicketGridTitle" }, rules.boards[0].secondarySelectionName), h("lottery-grid", { "grid-index": index, "maximum-allowed": this.secondaryMaximumAllowed, "minimum-allowed": this.secondaryMinimumAllowed, "number-range": JSON.stringify(this.secondaryNumberRange), "high-number": rules.boards[0].secondaryHighNumber, "low-number": rules.boards[0].secondaryLowNumber, "total-numbers": rules.boards[0].secondaryHighNumber - rules.boards[0].secondaryLowNumber + 1, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, "partial-quickpick-available": this.partialQuickpickAvailable, language: this.language, "translation-url": this.translationUrl, "selection-type": 'secondarySelection', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))), rules.stakeMultiplierAvailable &&
12141
+ h("div", { class: "ButtonContainer" }, h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection(index) }, translate$1('autoButton', this.language)))), h("div", { class: "TicketGridBullets" }, h("p", { class: "TicketGridTitle" }, rules.boards[0].selectionName), h("lottery-grid", { "grid-index": index, "maximum-allowed": this.maximumAllowed, "minimum-allowed": this.minimumAllowed, "number-range": JSON.stringify(this.numberRange), "high-number": rules.boards[0].highNumber, "low-number": rules.boards[0].lowNumber, "total-numbers": rules.boards[0].highNumber - rules.boards[0].lowNumber + 1, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, "partial-quickpick-available": this.partialQuickpickAvailable, language: this.language, "translation-url": this.translationUrl, "selection-type": 'mainSelection', "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource })), this.secondarySelectionAllowed &&
12142
+ h("div", { class: "SecondarySelectionWrapper" }, h("div", { class: "TicketGridBullets" }, h("p", { class: "TicketGridTitle" }, rules.boards[0].secondarySelectionName), h("lottery-grid", { "grid-index": index, "maximum-allowed": this.secondaryMaximumAllowed, "minimum-allowed": this.secondaryMinimumAllowed, "number-range": JSON.stringify(this.secondaryNumberRange), "high-number": rules.boards[0].secondaryHighNumber, "low-number": rules.boards[0].secondaryLowNumber, "total-numbers": rules.boards[0].secondaryHighNumber - rules.boards[0].secondaryLowNumber + 1, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, "partial-quickpick-available": this.partialQuickpickAvailable, language: this.language, "translation-url": this.translationUrl, "selection-type": 'secondarySelection', "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }))))), rules.stakeMultiplierAvailable &&
12093
12143
  h("div", null, h("label", { class: "Label" }, translate$1('multiplier', this.language), ": "), h("div", { class: "WagerInput" }, rules.stakeMultipliers.length > 1 ?
12094
12144
  (h("div", { ref: el => this.selectStakeRef = el, class: this.isCustomSelectStake ? "SelectWrapper SelectActive" : "SelectWrapper" }, h("div", { class: "SelectButton", onClick: () => this.toggleSelection() }, h("span", null, this.stakeMultiplier), h("span", { class: "SelectExpand" }, "\u25BC")), h("div", { class: "SelectContent" }, h("ul", { class: "SelectOptions" }, rules.stakeMultipliers.map((item) => h("li", { class: this.stakeMultiplier == item ? 'SelectedValue' : '', value: item, onClick: () => this.setStakeMultiplier(item) }, item)))))) : (h("div", null, h("input", { min: "1", value: rules.stakeMultipliers[0] || 1, type: "number", disabled: true }))))), rules.drawMultiplierAvailable &&
12095
12145
  h("div", null, h("label", { class: "Label" }, translate$1('numberOfDraws', this.language), ": "), h("div", { class: "WagerInput" }, rules.durations.length > 1 ?
@@ -12100,7 +12150,10 @@ const LotteryTicket = class {
12100
12150
  }
12101
12151
  static get watchers() { return {
12102
12152
  "lineMultiplier": ["handleLineMultiplierChange"],
12103
- "tabIndex": ["handleTabIndexChange"]
12153
+ "tabIndex": ["handleTabIndexChange"],
12154
+ "clientStyling": ["handleClientStylingChange"],
12155
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
12156
+ "mbSource": ["handleMbSourceChange"]
12104
12157
  }; }
12105
12158
  };
12106
12159
  LotteryTicket.style = LotteryTicketStyle0;
@@ -12143,18 +12196,6 @@ const LotteryTicketController = class {
12143
12196
  constructor(hostRef) {
12144
12197
  registerInstance(this, hostRef);
12145
12198
  this.deleteTicketEvent = createEvent(this, "deleteTicket", 7);
12146
- this.setClientStyling = () => {
12147
- let sheet = document.createElement('style');
12148
- sheet.innerHTML = this.clientStyling;
12149
- this.stylingContainer.prepend(sheet);
12150
- };
12151
- this.setClientStylingURL = () => {
12152
- let cssFile = document.createElement('style');
12153
- setTimeout(() => {
12154
- cssFile.innerHTML = this.clientStylingUrlContent;
12155
- this.stylingContainer.prepend(cssFile);
12156
- }, 1);
12157
- };
12158
12199
  this.endpoint = '';
12159
12200
  this.ticketId = 1;
12160
12201
  this.ticketDescription = undefined;
@@ -12169,9 +12210,9 @@ const LotteryTicketController = class {
12169
12210
  this.resetButton = false;
12170
12211
  this.totalControllers = 1;
12171
12212
  this.clientStyling = '';
12172
- this.clientStylingUrlContent = '';
12213
+ this.clientStylingUrl = '';
12214
+ this.mbSource = undefined;
12173
12215
  this.translationUrl = undefined;
12174
- this.limitStylingAppends = false;
12175
12216
  }
12176
12217
  // @TODO fix the `any` type
12177
12218
  helperAccordionActionHandler() {
@@ -12187,20 +12228,39 @@ const LotteryTicketController = class {
12187
12228
  getTranslations(JSON.parse(this.translationUrl));
12188
12229
  }
12189
12230
  }
12190
- componentDidRender() {
12191
- // start custom styling area
12192
- if (!this.limitStylingAppends && this.stylingContainer) {
12231
+ handleClientStylingChange(newValue, oldValue) {
12232
+ if (newValue != oldValue) {
12233
+ setClientStyling(this.stylingContainer, this.clientStyling);
12234
+ }
12235
+ }
12236
+ handleClientStylingUrlChange(newValue, oldValue) {
12237
+ if (newValue != oldValue) {
12238
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
12239
+ }
12240
+ }
12241
+ handleMbSourceChange(newValue, oldValue) {
12242
+ if (newValue != oldValue) {
12243
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
12244
+ }
12245
+ }
12246
+ componentDidLoad() {
12247
+ if (this.stylingContainer) {
12248
+ if (this.mbSource)
12249
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
12193
12250
  if (this.clientStyling)
12194
- this.setClientStyling();
12195
- if (this.clientStylingUrlContent)
12196
- this.setClientStylingURL();
12197
- this.limitStylingAppends = true;
12251
+ setClientStyling(this.stylingContainer, this.clientStyling);
12252
+ if (this.clientStylingUrl)
12253
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
12198
12254
  }
12199
- // end custom styling area
12200
12255
  }
12201
12256
  render() {
12202
- return (h("div", { key: '581989035aa42a397cd39a4cdd929ea91190494c', class: "LotteryTicketControllerContainer", ref: el => this.stylingContainer = el }, h("helper-accordion", { key: '724d50d1532510344ed7acd57c3c5faef17aef8c', "header-title": `${translate('ticket', this.language)} ${this.ticketId}`, "header-subtitle": this.ticketDescription, footer: true, "delete-tab": this.totalControllers !== 1, collapsed: !this.last || this.collapsed, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h("div", { key: 'ba851ea2792641971a5552a94558fe8d28068187', slot: "accordionContent" }, h("lottery-ticket", { key: '199abc15160d60499d7d1d1d14084f64a6314c53', endpoint: this.endpoint, "game-id": this.gameId, "ticket-id": this.ticketId, "number-of-grids": this.numberOfGrids, language: this.language, "translation-url": this.translationUrl, "reset-button": this.resetButton, "auto-pick": this.autoPick, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })))));
12257
+ return (h("div", { key: '28756fcff01b738bfe8339114445032a5da757c2', class: "LotteryTicketControllerContainer", ref: el => this.stylingContainer = el }, h("helper-accordion", { key: '18a566d1c97ccbf74cd759215df3a18faf5c43dc', "header-title": `${translate('ticket', this.language)} ${this.ticketId}`, "header-subtitle": this.ticketDescription, footer: true, "delete-tab": this.totalControllers !== 1, collapsed: !this.last || this.collapsed, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }, h("div", { key: '3a056f64dc8572b66f50cb151adde2caea2cd427', slot: "accordionContent" }, h("lottery-ticket", { key: '06a0696b79840c05381429b1b87af94b478b09f0', endpoint: this.endpoint, "game-id": this.gameId, "ticket-id": this.ticketId, "number-of-grids": this.numberOfGrids, language: this.language, "translation-url": this.translationUrl, "reset-button": this.resetButton, "auto-pick": this.autoPick, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource })))));
12203
12258
  }
12259
+ static get watchers() { return {
12260
+ "clientStyling": ["handleClientStylingChange"],
12261
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
12262
+ "mbSource": ["handleMbSourceChange"]
12263
+ }; }
12204
12264
  };
12205
12265
  LotteryTicketController.style = LotteryTicketControllerStyle0;
12206
12266