@everymatrix/lottery-game-page 1.77.0 → 1.77.1

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,15 @@ 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
+ if (this.stylingContainer) {
10538
+ if (this.mbSource)
10539
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10516
10540
  if (this.clientStyling)
10517
- this.setClientStyling();
10518
- if (this.clientStylingurl)
10519
- this.setClientStylingURL();
10520
- this.limitStylingAppends = true;
10541
+ setClientStyling(this.stylingContainer, this.clientStyling);
10542
+ if (this.clientStylingUrl)
10543
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10521
10544
  }
10522
- // end custom styling area
10523
10545
  }
10524
10546
  countdownLogic(date) {
10525
10547
  const setTime = () => {
@@ -10878,48 +10900,39 @@ const LotteryGamePage = class {
10878
10900
  return (
10879
10901
  /* Game details */
10880
10902
  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) => {
10903
+ 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
10904
  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 });
10905
+ 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
10906
  })), 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
10907
  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
10908
  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 &&
10909
+ 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
10910
  h("div", null, !this.isLoading &&
10889
10911
  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)))));
10912
+ 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 &&
10913
+ 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
10914
  }
10893
10915
  static get assetsDirs() { return ["../static"]; }
10894
10916
  get element() { return getElement(this); }
10895
10917
  static get watchers() { return {
10918
+ "clientStyling": ["handleClientStylingChange"],
10919
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
10920
+ "mbSource": ["handleMbSourceChange"],
10896
10921
  "translationUrl": ["handleNewTranslations"]
10897
10922
  }; }
10898
10923
  };
10899
10924
  LotteryGamePage.style = LotteryGamePageStyle0;
10900
10925
 
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
- };
10926
+ 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}";
10927
+ const LotteryGridStyle0 = lotteryGridCss;
10928
+
10929
+ const LotteryGrid = class {
10930
+ constructor(hostRef) {
10931
+ registerInstance(this, hostRef);
10932
+ this.gridFilledEvent = createEvent(this, "gridFilled", 7);
10933
+ this.gridDirtyEvent = createEvent(this, "gridDirty", 7);
10934
+ this.gridClearAllEvent = createEvent(this, "gridClearAllEvent", 7);
10935
+ this.selectedCounter = 0;
10923
10936
  this.ticketId = undefined;
10924
10937
  this.totalNumbers = 0;
10925
10938
  this.gameId = undefined;
@@ -10934,14 +10947,39 @@ const LotteryGrid = class {
10934
10947
  this.gridIndex = undefined;
10935
10948
  this.gridType = '';
10936
10949
  this.clientStyling = '';
10937
- this.clientStylingUrlContent = '';
10950
+ this.clientStylingUrl = '';
10951
+ this.mbSource = undefined;
10938
10952
  this.highNumber = 47;
10939
10953
  this.lowNumber = 1;
10940
10954
  this.selectionType = 'mainSelection';
10941
10955
  this.partialQuickpickAvailable = false;
10942
10956
  this.numbers = [];
10943
10957
  this.bonusNumbers = [];
10944
- this.limitStylingAppends = false;
10958
+ }
10959
+ handleClientStylingChange(newValue, oldValue) {
10960
+ if (newValue != oldValue) {
10961
+ setClientStyling(this.stylingContainer, this.clientStyling);
10962
+ }
10963
+ }
10964
+ handleClientStylingUrlChange(newValue, oldValue) {
10965
+ if (newValue != oldValue) {
10966
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10967
+ }
10968
+ }
10969
+ handleMbSourceChange(newValue, oldValue) {
10970
+ if (newValue != oldValue) {
10971
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10972
+ }
10973
+ }
10974
+ componentDidLoad() {
10975
+ if (this.stylingContainer) {
10976
+ if (this.mbSource)
10977
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10978
+ if (this.clientStyling)
10979
+ setClientStyling(this.stylingContainer, this.clientStyling);
10980
+ if (this.clientStylingUrl)
10981
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10982
+ }
10945
10983
  }
10946
10984
  connectedCallback() {
10947
10985
  let selected = [];
@@ -10978,17 +11016,6 @@ const LotteryGrid = class {
10978
11016
  });
10979
11017
  }
10980
11018
  }
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
11019
  // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices
10993
11020
  shuffleArray(array) {
10994
11021
  const result = [];
@@ -11114,8 +11141,13 @@ const LotteryGrid = class {
11114
11141
  }
11115
11142
  }
11116
11143
  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 }))) : '')));
11144
+ 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
11145
  }
11146
+ static get watchers() { return {
11147
+ "clientStyling": ["handleClientStylingChange"],
11148
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
11149
+ "mbSource": ["handleMbSourceChange"]
11150
+ }; }
11119
11151
  };
11120
11152
  LotteryGrid.style = LotteryGridStyle0;
11121
11153
 
@@ -11257,18 +11289,6 @@ const LotteryPagination = class {
11257
11289
  }
11258
11290
  }
11259
11291
  };
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
11292
  this.nextPage = false;
11273
11293
  this.prevPage = false;
11274
11294
  this.offset = 0;
@@ -11276,7 +11296,8 @@ const LotteryPagination = class {
11276
11296
  this.total = 1;
11277
11297
  this.language = 'en';
11278
11298
  this.clientStyling = '';
11279
- this.clientStylingUrlContent = '';
11299
+ this.clientStylingUrl = '';
11300
+ this.mbSource = undefined;
11280
11301
  this.arrowsActive = undefined;
11281
11302
  this.secondaryArrowsActive = undefined;
11282
11303
  this.numberedNavActive = undefined;
@@ -11289,7 +11310,21 @@ const LotteryPagination = class {
11289
11310
  this.totalInt = undefined;
11290
11311
  this.pagesArray = [];
11291
11312
  this.endInt = 0;
11292
- this.limitStylingAppends = false;
11313
+ }
11314
+ handleClientStylingChange(newValue, oldValue) {
11315
+ if (newValue != oldValue) {
11316
+ setClientStyling(this.stylingContainer, this.clientStyling);
11317
+ }
11318
+ }
11319
+ handleClientStylingUrlChange(newValue, oldValue) {
11320
+ if (newValue != oldValue) {
11321
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11322
+ }
11323
+ }
11324
+ handleMbSourceChange(newValue, oldValue) {
11325
+ if (newValue != oldValue) {
11326
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11327
+ }
11293
11328
  }
11294
11329
  componentWillLoad() {
11295
11330
  if (this.translationUrl) {
@@ -11332,17 +11367,15 @@ const LotteryPagination = class {
11332
11367
  }
11333
11368
  }
11334
11369
  }
11335
- componentDidRender() {
11336
- this.isReset = false;
11337
- // start custom styling area
11338
- if (!this.limitStylingAppends && this.stylingContainer) {
11370
+ componentDidLoad() {
11371
+ if (this.stylingContainer) {
11372
+ if (this.mbSource)
11373
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11339
11374
  if (this.clientStyling)
11340
- this.setClientStyling();
11341
- if (this.clientStylingUrlContent)
11342
- this.setClientStylingURL();
11343
- this.limitStylingAppends = true;
11375
+ setClientStyling(this.stylingContainer, this.clientStyling);
11376
+ if (this.clientStylingUrl)
11377
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11344
11378
  }
11345
- // end custom styling area
11346
11379
  }
11347
11380
  render() {
11348
11381
  /**
@@ -11371,6 +11404,11 @@ const LotteryPagination = class {
11371
11404
  }
11372
11405
  return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
11373
11406
  }
11407
+ static get watchers() { return {
11408
+ "clientStyling": ["handleClientStylingChange"],
11409
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
11410
+ "mbSource": ["handleMbSourceChange"]
11411
+ }; }
11374
11412
  };
11375
11413
  LotteryPagination.style = LotteryPaginationStyle0;
11376
11414
 
@@ -11447,18 +11485,6 @@ const LotterySubscription = class {
11447
11485
  registerInstance(this, hostRef);
11448
11486
  this.subscriptionCompleted = createEvent(this, "subscriptionCompleted", 7);
11449
11487
  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
11488
  this.changeDateParam = () => {
11463
11489
  if (this.filterData.from && !this.filterData.to) {
11464
11490
  let from = this.filterData.from;
@@ -11551,7 +11577,8 @@ const LotterySubscription = class {
11551
11577
  };
11552
11578
  this.translationUrl = undefined;
11553
11579
  this.clientStyling = '';
11554
- this.clientStylingUrlContent = '';
11580
+ this.clientStylingUrl = '';
11581
+ this.mbSource = undefined;
11555
11582
  this.endpoint = undefined;
11556
11583
  this.endpointTicket = undefined;
11557
11584
  this.endpointSubscription = undefined;
@@ -11571,7 +11598,6 @@ const LotterySubscription = class {
11571
11598
  this.endDateRule = undefined;
11572
11599
  this.gameNameRule = undefined;
11573
11600
  this.ruleType = '';
11574
- this.limitStylingAppends = false;
11575
11601
  }
11576
11602
  componentWillLoad() {
11577
11603
  if (this.translationUrl) {
@@ -11579,13 +11605,29 @@ const LotterySubscription = class {
11579
11605
  }
11580
11606
  this.getSubscriptionData();
11581
11607
  }
11582
- componentDidRender() {
11583
- if (!this.limitStylingAppends && this.stylingContainer) {
11608
+ handleClientStylingChange(newValue, oldValue) {
11609
+ if (newValue != oldValue) {
11610
+ setClientStyling(this.stylingContainer, this.clientStyling);
11611
+ }
11612
+ }
11613
+ handleClientStylingUrlChange(newValue, oldValue) {
11614
+ if (newValue != oldValue) {
11615
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11616
+ }
11617
+ }
11618
+ handleMbSourceChange(newValue, oldValue) {
11619
+ if (newValue != oldValue) {
11620
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11621
+ }
11622
+ }
11623
+ componentDidLoad() {
11624
+ if (this.stylingContainer) {
11625
+ if (this.mbSource)
11626
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11584
11627
  if (this.clientStyling)
11585
- this.setClientStyling();
11586
- if (this.clientStylingUrlContent)
11587
- this.setClientStylingURL();
11588
- this.limitStylingAppends = true;
11628
+ setClientStyling(this.stylingContainer, this.clientStyling);
11629
+ if (this.clientStylingUrl)
11630
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11589
11631
  }
11590
11632
  }
11591
11633
  transDate(from, to) {
@@ -11685,10 +11727,15 @@ const LotterySubscription = class {
11685
11727
  }
11686
11728
  }
11687
11729
  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" })))))));
11730
+ 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 &&
11731
+ 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' &&
11732
+ 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
11733
  }
11734
+ static get watchers() { return {
11735
+ "clientStyling": ["handleClientStylingChange"],
11736
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
11737
+ "mbSource": ["handleMbSourceChange"]
11738
+ }; }
11692
11739
  };
11693
11740
  LotterySubscription.style = LotterySubscriptionStyle0;
11694
11741
 
@@ -11782,18 +11829,6 @@ const LotteryTicket = class {
11782
11829
  this.drawMultiplierChange = createEvent(this, "drawMultiplierChange", 7);
11783
11830
  this.lineMultiplierChange = createEvent(this, "lineMultiplierChange", 7);
11784
11831
  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
11832
  this.endpoint = undefined;
11798
11833
  this.gameId = undefined;
11799
11834
  this.numberOfGrids = 1;
@@ -11803,14 +11838,14 @@ const LotteryTicket = class {
11803
11838
  this.autoPick = false;
11804
11839
  this.language = 'en';
11805
11840
  this.clientStyling = '';
11806
- this.clientStylingUrlContent = '';
11841
+ this.clientStylingUrl = '';
11842
+ this.mbSource = undefined;
11807
11843
  this.translationUrl = undefined;
11808
11844
  this.isLoading = true;
11809
11845
  this.hasErrors = false;
11810
11846
  this.ticketDone = [];
11811
11847
  this.isCustomSelect = false;
11812
11848
  this.amountInfo = {};
11813
- this.limitStylingAppends = false;
11814
11849
  this.stakeMultiplier = '1';
11815
11850
  this.lineMultiplier = 0;
11816
11851
  this.isCustomSelectStake = false;
@@ -11869,6 +11904,21 @@ const LotteryTicket = class {
11869
11904
  betType: this.playType[0]
11870
11905
  });
11871
11906
  }
11907
+ handleClientStylingChange(newValue, oldValue) {
11908
+ if (newValue != oldValue) {
11909
+ setClientStyling(this.stylingContainer, this.clientStyling);
11910
+ }
11911
+ }
11912
+ handleClientStylingUrlChange(newValue, oldValue) {
11913
+ if (newValue != oldValue) {
11914
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11915
+ }
11916
+ }
11917
+ handleMbSourceChange(newValue, oldValue) {
11918
+ if (newValue != oldValue) {
11919
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11920
+ }
11921
+ }
11872
11922
  checkForClickOutside(ev) {
11873
11923
  if (this.selectRef && !this.selectRef.contains(ev.composedPath()[0])) {
11874
11924
  this.isCustomSelect = false;
@@ -11950,16 +12000,15 @@ const LotteryTicket = class {
11950
12000
  getTranslations$1(JSON.parse(this.translationUrl));
11951
12001
  }
11952
12002
  }
11953
- componentDidRender() {
11954
- // start custom styling area
11955
- if (!this.limitStylingAppends && this.stylingContainer) {
12003
+ componentDidLoad() {
12004
+ if (this.stylingContainer) {
12005
+ if (this.mbSource)
12006
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11956
12007
  if (this.clientStyling)
11957
- this.setClientStyling();
11958
- if (this.clientStylingUrlContent)
11959
- this.setClientStylingURL();
11960
- this.limitStylingAppends = true;
12008
+ setClientStyling(this.stylingContainer, this.clientStyling);
12009
+ if (this.clientStylingUrl)
12010
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11961
12011
  }
11962
- // end custom styling area
11963
12012
  }
11964
12013
  gridFilledHandler(event) {
11965
12014
  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 +12137,8 @@ const LotteryTicket = class {
12088
12137
  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
12138
  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
12139
  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 &&
12140
+ 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 &&
12141
+ 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
12142
  h("div", null, h("label", { class: "Label" }, translate$1('multiplier', this.language), ": "), h("div", { class: "WagerInput" }, rules.stakeMultipliers.length > 1 ?
12094
12143
  (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
12144
  h("div", null, h("label", { class: "Label" }, translate$1('numberOfDraws', this.language), ": "), h("div", { class: "WagerInput" }, rules.durations.length > 1 ?
@@ -12100,7 +12149,10 @@ const LotteryTicket = class {
12100
12149
  }
12101
12150
  static get watchers() { return {
12102
12151
  "lineMultiplier": ["handleLineMultiplierChange"],
12103
- "tabIndex": ["handleTabIndexChange"]
12152
+ "tabIndex": ["handleTabIndexChange"],
12153
+ "clientStyling": ["handleClientStylingChange"],
12154
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
12155
+ "mbSource": ["handleMbSourceChange"]
12104
12156
  }; }
12105
12157
  };
12106
12158
  LotteryTicket.style = LotteryTicketStyle0;
@@ -12143,18 +12195,6 @@ const LotteryTicketController = class {
12143
12195
  constructor(hostRef) {
12144
12196
  registerInstance(this, hostRef);
12145
12197
  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
12198
  this.endpoint = '';
12159
12199
  this.ticketId = 1;
12160
12200
  this.ticketDescription = undefined;
@@ -12169,9 +12209,9 @@ const LotteryTicketController = class {
12169
12209
  this.resetButton = false;
12170
12210
  this.totalControllers = 1;
12171
12211
  this.clientStyling = '';
12172
- this.clientStylingUrlContent = '';
12212
+ this.clientStylingUrl = '';
12213
+ this.mbSource = undefined;
12173
12214
  this.translationUrl = undefined;
12174
- this.limitStylingAppends = false;
12175
12215
  }
12176
12216
  // @TODO fix the `any` type
12177
12217
  helperAccordionActionHandler() {
@@ -12187,20 +12227,39 @@ const LotteryTicketController = class {
12187
12227
  getTranslations(JSON.parse(this.translationUrl));
12188
12228
  }
12189
12229
  }
12190
- componentDidRender() {
12191
- // start custom styling area
12192
- if (!this.limitStylingAppends && this.stylingContainer) {
12230
+ handleClientStylingChange(newValue, oldValue) {
12231
+ if (newValue != oldValue) {
12232
+ setClientStyling(this.stylingContainer, this.clientStyling);
12233
+ }
12234
+ }
12235
+ handleClientStylingUrlChange(newValue, oldValue) {
12236
+ if (newValue != oldValue) {
12237
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
12238
+ }
12239
+ }
12240
+ handleMbSourceChange(newValue, oldValue) {
12241
+ if (newValue != oldValue) {
12242
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
12243
+ }
12244
+ }
12245
+ componentDidLoad() {
12246
+ if (this.stylingContainer) {
12247
+ if (this.mbSource)
12248
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
12193
12249
  if (this.clientStyling)
12194
- this.setClientStyling();
12195
- if (this.clientStylingUrlContent)
12196
- this.setClientStylingURL();
12197
- this.limitStylingAppends = true;
12250
+ setClientStyling(this.stylingContainer, this.clientStyling);
12251
+ if (this.clientStylingUrl)
12252
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
12198
12253
  }
12199
- // end custom styling area
12200
12254
  }
12201
12255
  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 })))));
12256
+ 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
12257
  }
12258
+ static get watchers() { return {
12259
+ "clientStyling": ["handleClientStylingChange"],
12260
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
12261
+ "mbSource": ["handleMbSourceChange"]
12262
+ }; }
12204
12263
  };
12205
12264
  LotteryTicketController.style = LotteryTicketControllerStyle0;
12206
12265