@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.
@@ -9710,40 +9710,47 @@ const LotteryBullet = class {
9710
9710
  });
9711
9711
  }
9712
9712
  };
9713
- this.setClientStyling = () => {
9714
- let sheet = document.createElement('style');
9715
- sheet.innerHTML = this.clientStyling;
9716
- this.stylingContainer.prepend(sheet);
9717
- };
9718
- this.setClientStylingURL = () => {
9719
- let cssFile = document.createElement('style');
9720
- setTimeout(() => {
9721
- cssFile.innerHTML = this.clientStylingUrlContent;
9722
- this.stylingContainer.prepend(cssFile);
9723
- }, 1);
9724
- };
9725
9713
  this.value = '0';
9726
9714
  this.selectable = true;
9727
9715
  this.isSelected = false;
9728
9716
  this.isBonus = false;
9729
9717
  this.clientStyling = '';
9730
- this.clientStylingUrlContent = '';
9731
- this.limitStylingAppends = false;
9718
+ this.clientStylingUrl = '';
9719
+ this.mbSource = undefined;
9732
9720
  }
9733
- componentDidRender() {
9734
- // start custom styling area
9735
- if (!this.limitStylingAppends && this.stylingContainer) {
9721
+ handleClientStylingChange(newValue, oldValue) {
9722
+ if (newValue != oldValue) {
9723
+ setClientStyling(this.stylingContainer, this.clientStyling);
9724
+ }
9725
+ }
9726
+ handleClientStylingUrlChange(newValue, oldValue) {
9727
+ if (newValue != oldValue) {
9728
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
9729
+ }
9730
+ }
9731
+ handleMbSourceChange(newValue, oldValue) {
9732
+ if (newValue != oldValue) {
9733
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
9734
+ }
9735
+ }
9736
+ componentDidLoad() {
9737
+ if (this.stylingContainer) {
9738
+ if (this.mbSource)
9739
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
9736
9740
  if (this.clientStyling)
9737
- this.setClientStyling();
9738
- if (this.clientStylingUrlContent)
9739
- this.setClientStylingURL();
9740
- this.limitStylingAppends = true;
9741
+ setClientStyling(this.stylingContainer, this.clientStyling);
9742
+ if (this.clientStylingUrl)
9743
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
9741
9744
  }
9742
- // end custom styling area
9743
9745
  }
9744
9746
  render() {
9745
- return (index.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));
9747
+ return (index.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));
9746
9748
  }
9749
+ static get watchers() { return {
9750
+ "clientStyling": ["handleClientStylingChange"],
9751
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
9752
+ "mbSource": ["handleMbSourceChange"]
9753
+ }; }
9747
9754
  };
9748
9755
  LotteryBullet.style = LotteryBulletStyle0;
9749
9756
 
@@ -9840,18 +9847,6 @@ const LotteryDrawResults = class {
9840
9847
  index.registerInstance(this, hostRef);
9841
9848
  this.ticketDrawDetails = [];
9842
9849
  this.ticketDrawDetailsFlag = true;
9843
- this.setClientStyling = () => {
9844
- let sheet = document.createElement('style');
9845
- sheet.innerHTML = this.clientStyling;
9846
- this.stylingContainer.prepend(sheet);
9847
- };
9848
- this.setClientStylingURL = () => {
9849
- let cssFile = document.createElement('style');
9850
- setTimeout(() => {
9851
- cssFile.innerHTML = this.clientStylingUrlContent;
9852
- this.stylingContainer.prepend(cssFile);
9853
- }, 1);
9854
- };
9855
9850
  this.displayPrizeCategory = (details, drawDetail) => {
9856
9851
  const prizeMap = new Map();
9857
9852
  details.forEach((detail) => {
@@ -9905,7 +9900,8 @@ const LotteryDrawResults = class {
9905
9900
  this.ticketNumbers = '';
9906
9901
  this.sessionId = '';
9907
9902
  this.clientStyling = '';
9908
- this.clientStylingUrlContent = '';
9903
+ this.clientStylingUrl = '';
9904
+ this.mbSource = undefined;
9909
9905
  this.ticketDrawData = '';
9910
9906
  this.historyDrawData = '';
9911
9907
  this.tabValue = '';
@@ -9918,10 +9914,24 @@ const LotteryDrawResults = class {
9918
9914
  this.ticketDataLoaded = false;
9919
9915
  this.ticketDraws = [];
9920
9916
  this.toggleDrawer = [false];
9921
- this.limitStylingAppends = false;
9922
9917
  this.drawData = undefined;
9923
9918
  this.resultMap = { Won: "Win", Lost: "Lose" };
9924
9919
  }
9920
+ handleClientStylingChange(newValue, oldValue) {
9921
+ if (newValue != oldValue) {
9922
+ setClientStyling(this.stylingContainer, this.clientStyling);
9923
+ }
9924
+ }
9925
+ handleClientStylingUrlChange(newValue, oldValue) {
9926
+ if (newValue != oldValue) {
9927
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
9928
+ }
9929
+ }
9930
+ handleMbSourceChange(newValue, oldValue) {
9931
+ if (newValue != oldValue) {
9932
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
9933
+ }
9934
+ }
9925
9935
  componentWillLoad() {
9926
9936
  if (this.translationUrl) {
9927
9937
  getTranslations$6(JSON.parse(this.translationUrl));
@@ -9956,16 +9966,15 @@ const LotteryDrawResults = class {
9956
9966
  this.ticketDrawDetailsFlag = false;
9957
9967
  }
9958
9968
  }
9959
- componentDidRender() {
9960
- // start custom styling area
9961
- if (!this.limitStylingAppends && this.stylingContainer) {
9969
+ componentDidLoad() {
9970
+ if (this.stylingContainer) {
9971
+ if (this.mbSource)
9972
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
9962
9973
  if (this.clientStyling)
9963
- this.setClientStyling();
9964
- if (this.clientStylingUrlContent)
9965
- this.setClientStylingURL();
9966
- this.limitStylingAppends = true;
9974
+ setClientStyling(this.stylingContainer, this.clientStyling);
9975
+ if (this.clientStylingUrl)
9976
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
9967
9977
  }
9968
- // end custom styling area
9969
9978
  }
9970
9979
  getDrawData(drawId) {
9971
9980
  this.isLoading = true;
@@ -10024,11 +10033,11 @@ const LotteryDrawResults = class {
10024
10033
  else {
10025
10034
  return (index.h("section", { class: "DrawResultsSection", ref: el => this.stylingContainer = el }, this.drawMode ?
10026
10035
  index.h("div", { class: "DrawResultsArea" }, this.drawData &&
10027
- index.h("div", null, index.h("div", { class: "DrawResultsHeader" }, index.h("span", null, translate$6('drawId', this.language), ": ", this.drawData.id), index.h("span", null, translate$6('drawDate', this.language), ": ", format(new Date(this.drawData.date), 'dd/MM/yyyy'))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate$6('drawNumbersGridDraw', this.language)), index.h("div", { class: "BulletContainer" }, index.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 })), index.h("div", { class: "DrawPrizes" }, index.h("label", { class: "Label" }, translate$6('prize', this.language), " "), this.drawData.prizes.length ? index.h("div", null, " ", this.drawData.prizes.filter(item => item.division !== 'None').map((prize) => index.h("div", null, index.h("span", { style: { 'margin-right': '5px' } }, prize.division, ":"), index.h("span", { style: { 'margin-right': '4px' } }, " ", this.thousandSeperator(prize.amount.value)), index.h("span", null, prize.amount.currency)))) : index.h("div", null, "None"))))))
10036
+ index.h("div", null, index.h("div", { class: "DrawResultsHeader" }, index.h("span", null, translate$6('drawId', this.language), ": ", this.drawData.id), index.h("span", null, translate$6('drawDate', this.language), ": ", format(new Date(this.drawData.date), 'dd/MM/yyyy'))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate$6('drawNumbersGridDraw', this.language)), index.h("div", { class: "BulletContainer" }, index.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 })), index.h("div", { class: "DrawPrizes" }, index.h("label", { class: "Label" }, translate$6('prize', this.language), " "), this.drawData.prizes.length ? index.h("div", null, " ", this.drawData.prizes.filter(item => item.division !== 'None').map((prize) => index.h("div", null, index.h("span", { style: { 'margin-right': '5px' } }, prize.division, ":"), index.h("span", { style: { 'margin-right': '4px' } }, " ", this.thousandSeperator(prize.amount.value)), index.h("span", null, prize.amount.currency)))) : index.h("div", null, "None"))))))
10028
10037
  :
10029
10038
  index.h("div", { class: "DrawResultsArea TicketDraws" }, index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "TicketIdContainer" }, index.h("label", { class: "Label" }, translate$6('ticketId', this.language), ": ", index.h("span", null, this.ticketId))), index.h("div", { class: "TicketTypeContainer" }, index.h("label", { class: "Label" }, translate$6('ticketType', this.language), ": ", index.h("span", null, this.ticketType))), index.h("div", { class: "TicketAmountContainer" }, index.h("label", { class: "Label" }, translate$6('ticketAmount', this.language), ": ", index.h("span", null, `${this.thousandSeperator(this.ticketAmount)} ${this.ticketCurrency}`))), index.h("div", { class: "DrawNumbersGrid" }, this.gridNumbers.map((grid, index$1) => {
10030
10039
  var _a;
10031
- return index.h("div", null, index.h("label", { class: "Label" }, translate$6('drawNumbersGridTicket', this.language), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "selected-numbers": grid.join(','), "secondary-numbers": (_a = this.gridSecondaryNumbers[index$1]) === 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 })));
10040
+ return index.h("div", null, index.h("label", { class: "Label" }, translate$6('drawNumbersGridTicket', this.language), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "selected-numbers": grid.join(','), "secondary-numbers": (_a = this.gridSecondaryNumbers[index$1]) === 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 })));
10032
10041
  })), this.ticketMultiplier &&
10033
10042
  index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate$6('multiplierNum', this.language), ": ", this.thousandSeperator(this.ticketMultiplierNum))), index.h("div", { class: "NumberOfDrawsContainer" }, index.h("label", { class: "Label" }, translate$6('numberOfDraws', this.language), ": ", this.thousandSeperator(this.ticketDrawCount)), index.h("div", { class: "DrawTicketsContainer" }, this.ticketDrawDetails && this.ticketDrawDetails.length > 0 &&
10034
10043
  index.h("div", { class: "ExpandableBoxes" }, this.ticketDrawDetails.map((drawDetail, index$1) => {
@@ -10038,11 +10047,16 @@ const LotteryDrawResults = class {
10038
10047
  index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate$6('drawId', this.language), ": ", drawDetail.drawId))), index.h("div", { class: "ExpandableBoxBody" }, index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate$6('drawId', this.language), ": ", drawDetail.drawId)), index.h("div", { class: "DrawDateContainer" }, index.h("p", null, translate$6('drawDate', this.language), ": ", (_a = drawDetail.drawData) === null || _a === void 0 ? void 0 :
10039
10048
  _a.date.slice(0, 10), " | ", (_b = drawDetail.drawData) === null || _b === void 0 ? void 0 :
10040
10049
  _b.date.slice(11, 19))), index.h("div", { class: "DrawNumbersGrid" }, drawDetail.drawData &&
10041
- index.h("div", { class: 'BulletContainer' }, index.h("label", { class: "Label" }, translate$6('drawNumbersGridDraw', this.language), ":"), index.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 &&
10050
+ index.h("div", { class: 'BulletContainer' }, index.h("label", { class: "Label" }, translate$6('drawNumbersGridDraw', this.language), ":"), index.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 &&
10042
10051
  index.h("div", { class: "DrawPrizes" }, index.h("label", { class: "Label" }, translate$6('prize', this.language), ":"), index.h("span", null, drawDetail.details.map((item) => index.h("span", null, index.h("div", null, index.h("span", null, item.prizeName, item.times > 1 ? ' x ' + item.times : '', ": "), index.h("span", { style: { 'margin-right': '4px' } }, this.thousandSeperator(item.amount)), index.h("span", null, item.currency))))))));
10043
10052
  }))))))));
10044
10053
  }
10045
10054
  }
10055
+ static get watchers() { return {
10056
+ "clientStyling": ["handleClientStylingChange"],
10057
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
10058
+ "mbSource": ["handleMbSourceChange"]
10059
+ }; }
10046
10060
  };
10047
10061
  LotteryDrawResults.style = LotteryDrawResultsStyle0;
10048
10062
 
@@ -10130,18 +10144,6 @@ const LotteryDrawResultsHistory = class {
10130
10144
  this.noResults = this.drawData.filter(draw => draw.winningNumbers).length == 0 ? true : false;
10131
10145
  });
10132
10146
  };
10133
- this.setClientStyling = () => {
10134
- let sheet = document.createElement('style');
10135
- sheet.innerHTML = this.clientStyling;
10136
- this.stylingContainer.prepend(sheet);
10137
- };
10138
- this.setClientStylingURL = () => {
10139
- let cssFile = document.createElement('style');
10140
- setTimeout(() => {
10141
- cssFile.innerHTML = this.clientStylingUrlContent;
10142
- this.stylingContainer.prepend(cssFile);
10143
- }, 1);
10144
- };
10145
10147
  this.transDataToString = (data) => {
10146
10148
  try {
10147
10149
  return JSON.stringify(data);
@@ -10154,7 +10156,8 @@ const LotteryDrawResultsHistory = class {
10154
10156
  this.gameId = undefined;
10155
10157
  this.language = 'en';
10156
10158
  this.clientStyling = '';
10157
- this.clientStylingUrlContent = '';
10159
+ this.clientStylingUrl = '';
10160
+ this.mbSource = undefined;
10158
10161
  this.translationUrl = undefined;
10159
10162
  this.drawData = [];
10160
10163
  this.winningDataSetsData = [''];
@@ -10162,7 +10165,6 @@ const LotteryDrawResultsHistory = class {
10162
10165
  this.dateFiltersTo = '';
10163
10166
  this.isLoading = false;
10164
10167
  this.noResults = false;
10165
- this.limitStylingAppends = false;
10166
10168
  this.activeIndex = 0;
10167
10169
  this.totalResults = 0;
10168
10170
  this.limit = 5;
@@ -10189,6 +10191,21 @@ const LotteryDrawResultsHistory = class {
10189
10191
  this.isReset = false;
10190
10192
  this.getDrawsData();
10191
10193
  }
10194
+ handleClientStylingChange(newValue, oldValue) {
10195
+ if (newValue != oldValue) {
10196
+ setClientStyling(this.stylingContainer, this.clientStyling);
10197
+ }
10198
+ }
10199
+ handleClientStylingUrlChange(newValue, oldValue) {
10200
+ if (newValue != oldValue) {
10201
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10202
+ }
10203
+ }
10204
+ handleMbSourceChange(newValue, oldValue) {
10205
+ if (newValue != oldValue) {
10206
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10207
+ }
10208
+ }
10192
10209
  connectedCallback() {
10193
10210
  this.getDrawsData();
10194
10211
  }
@@ -10197,25 +10214,29 @@ const LotteryDrawResultsHistory = class {
10197
10214
  getTranslations$5(JSON.parse(this.translationUrl));
10198
10215
  }
10199
10216
  }
10200
- disconnectedCallback() {
10201
- clearInterval(this.interval);
10202
- }
10203
- componentDidRender() {
10204
- // start custom styling area
10205
- if (!this.limitStylingAppends && this.stylingContainer) {
10217
+ componentDidLoad() {
10218
+ if (this.stylingContainer) {
10219
+ if (this.mbSource)
10220
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10206
10221
  if (this.clientStyling)
10207
- this.setClientStyling();
10208
- if (this.clientStylingUrlContent)
10209
- this.setClientStylingURL();
10210
- this.limitStylingAppends = true;
10222
+ setClientStyling(this.stylingContainer, this.clientStyling);
10223
+ if (this.clientStylingUrl)
10224
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10211
10225
  }
10212
- // end custom styling area
10226
+ }
10227
+ disconnectedCallback() {
10228
+ clearInterval(this.interval);
10213
10229
  }
10214
10230
  render() {
10215
- let gridHeader = index.h("div", { key: 'b8771d5092661ca5020d307ab0187311f8a60e56', class: "DrawResultsHeader" }, index.h("div", { key: 'dbe57fcd0959a88490c2ec6b92a5f828fb5abd55', class: "DrawResultsHeaderContent" }, index.h("h4", { key: 'bff47a0181c280a240cec2e3fde19381a2cf1609' }, translate$5('drawResultsHeader', this.language)), index.h("div", { key: '9c7d774d0d07be3e05f6528d000b158550e32a57', class: "FilterSection" }, index.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 }))));
10216
- return index.h("section", { key: '52afb52ee81dab86d31a99498bddf955e3a7bf22', class: "GridWrapper", ref: el => this.stylingContainer = el }, index.h("div", { key: '2d84ed5d4d2c3fa426d245284f8c2dc36da20786', class: "DrawResultsSection" }, index.h("div", { key: 'c960bea0d2c9281fd288d47f983db8929cfa2fe4', class: "DrawResultsAreaHistory" }, gridHeader, index.h("div", { key: '4cf5407c17f5b4573f5d568679a49ee93677e884', class: "HistoryGridWrapper" }, index.h("div", { key: '6ca8e6d7f872b75591003de5c8d5f144ec283a08', class: "HistoryGrid" }, this.isLoading &&
10217
- index.h("p", { key: 'cc1ac748056d3bf79c0eb7853fed0fded00665b4' }, translate$5('loading', this.language)), !this.isLoading && !this.noResults && this.drawData.map((item) => index.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 && (index.h("p", { key: 'afca3878b22cbf60503b80ad83aeb5ed4213f775', class: "errorText" }, translate$5('noResults', this.language))))), index.h("div", { key: '43ae21f99e95c46a41a7434afb29c4544698a4b6', class: "DrawHistoryPaginationWrapper" }, (this.totalResults > this.limit) && index.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 })))));
10231
+ let gridHeader = index.h("div", { key: '77c5f0d587b90c5548f60e045803452e95b8377c', class: "DrawResultsHeader" }, index.h("div", { key: '4aecd3e65ca3b687ed5f32ddd050932edcd4716d', class: "DrawResultsHeaderContent" }, index.h("h4", { key: '373c5c9d7e2e91e0561ee5dbb56b6cc1f0531fbe' }, translate$5('drawResultsHeader', this.language)), index.h("div", { key: '443cb8d63aee0bba92b9ff288bd18336030550ec', class: "FilterSection" }, index.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 }))));
10232
+ return index.h("section", { key: '1b2914b84b381721c9a96395f9629407e1444463', class: "GridWrapper", ref: el => this.stylingContainer = el }, index.h("div", { key: '98295c6cd09cd28719b738e16d6aee43be5426eb', class: "DrawResultsSection" }, index.h("div", { key: 'd29bcfe89ad920705c0551c2265e2b7a0a58d6b6', class: "DrawResultsAreaHistory" }, gridHeader, index.h("div", { key: '65b37fa0a70535b5de5f0fbecb3d221bbaa9cad6', class: "HistoryGridWrapper" }, index.h("div", { key: 'dec3e5dde880ecabaf8ccd624ac02de66f86ae82', class: "HistoryGrid" }, this.isLoading &&
10233
+ index.h("p", { key: '4597f37c985b6e63540a74c3b28541974cb8798d' }, translate$5('loading', this.language)), !this.isLoading && !this.noResults && this.drawData.map((item) => index.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 && (index.h("p", { key: '1232ffaba11ae9ede882ce3421fb5087e04bdb87', class: "errorText" }, translate$5('noResults', this.language))))), index.h("div", { key: 'c1038f322eafd601df4066746f0f1eb605ade0b0', class: "DrawHistoryPaginationWrapper" }, (this.totalResults > this.limit) && index.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 })))));
10218
10234
  }
10235
+ static get watchers() { return {
10236
+ "clientStyling": ["handleClientStylingChange"],
10237
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
10238
+ "mbSource": ["handleMbSourceChange"]
10239
+ }; }
10219
10240
  };
10220
10241
  LotteryDrawResultsHistory.style = LotteryDrawResultsHistoryStyle0;
10221
10242
 
@@ -10225,42 +10246,49 @@ const LotteryGameDetailsStyle0 = lotteryGameDetailsCss;
10225
10246
  const LotteryGameDetails = class {
10226
10247
  constructor(hostRef) {
10227
10248
  index.registerInstance(this, hostRef);
10228
- this.setClientStyling = () => {
10229
- let sheet = document.createElement('style');
10230
- sheet.innerHTML = this.clientStyling;
10231
- this.stylingContainer.prepend(sheet);
10232
- };
10233
- this.setClientStylingURL = () => {
10234
- let cssFile = document.createElement('style');
10235
- setTimeout(() => {
10236
- cssFile.innerHTML = this.clientStylingUrlContent;
10237
- this.stylingContainer.prepend(cssFile);
10238
- }, 1);
10239
- };
10240
10249
  this.clientStyling = '';
10241
- this.clientStylingUrlContent = '';
10250
+ this.clientStylingUrl = '';
10251
+ this.mbSource = undefined;
10242
10252
  this.lowNumber = undefined;
10243
10253
  this.highNumber = undefined;
10244
10254
  this.minimumAllowed = undefined;
10245
10255
  this.maxinumAllowed = undefined;
10246
10256
  this.language = 'en';
10247
10257
  this.translationUrl = undefined;
10248
- this.limitStylingAppends = false;
10249
10258
  }
10250
- componentDidRender() {
10251
- // start custom styling area
10252
- if (!this.limitStylingAppends && this.stylingContainer) {
10259
+ handleClientStylingChange(newValue, oldValue) {
10260
+ if (newValue != oldValue) {
10261
+ setClientStyling(this.stylingContainer, this.clientStyling);
10262
+ }
10263
+ }
10264
+ handleClientStylingUrlChange(newValue, oldValue) {
10265
+ if (newValue != oldValue) {
10266
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10267
+ }
10268
+ }
10269
+ handleMbSourceChange(newValue, oldValue) {
10270
+ if (newValue != oldValue) {
10271
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10272
+ }
10273
+ }
10274
+ componentDidLoad() {
10275
+ if (this.stylingContainer) {
10276
+ if (this.mbSource)
10277
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10253
10278
  if (this.clientStyling)
10254
- this.setClientStyling();
10255
- if (this.clientStylingUrlContent)
10256
- this.setClientStylingURL();
10257
- this.limitStylingAppends = true;
10279
+ setClientStyling(this.stylingContainer, this.clientStyling);
10280
+ if (this.clientStylingUrl)
10281
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10258
10282
  }
10259
- // end custom styling area
10260
10283
  }
10261
10284
  render() {
10262
- return (index.h("div", { key: 'bfc44a442056b452e331fc736f9c22e30dca143b', class: "GamePageDetailsContainer", ref: el => this.stylingContainer = el }, index.h("helper-accordion", { key: 'c8ad00900a8f16050a840c2e21fd4c2cebf2e1ec', "header-title": "Game Details", collapsed: false, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, index.h("div", { key: 'cc8dc2dc148fb862f51a5c45b18c6c3e9fbb46f7', class: "AccordionContainer", slot: "accordionContent" }, index.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 })))));
10285
+ return (index.h("div", { key: '0bb2683f87461804914d26c708499902d92dc503', class: "GamePageDetailsContainer", ref: el => this.stylingContainer = el }, index.h("helper-accordion", { key: '2ba23b953a9519ccb36fd203c3ac98a366673822', "header-title": "Game Details", collapsed: false, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }, index.h("div", { key: '54c18e3a6fde25ff0953bb7b15b8a1200e237fd0', class: "AccordionContainer", slot: "accordionContent" }, index.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 })))));
10263
10286
  }
10287
+ static get watchers() { return {
10288
+ "clientStyling": ["handleClientStylingChange"],
10289
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
10290
+ "mbSource": ["handleMbSourceChange"]
10291
+ }; }
10264
10292
  };
10265
10293
  LotteryGameDetails.style = LotteryGameDetailsStyle0;
10266
10294
 
@@ -10419,25 +10447,6 @@ const LotteryGamePage = class {
10419
10447
  this.gameData = {};
10420
10448
  this.isMobile = isMobile$1(this.userAgent);
10421
10449
  this.secondarySelectionAllowed = false;
10422
- this.setClientStyling = () => {
10423
- let sheet = document.createElement('style');
10424
- sheet.innerHTML = this.clientStyling;
10425
- this.stylingContainer.prepend(sheet);
10426
- };
10427
- this.setClientStylingURL = () => {
10428
- let url = new URL(this.clientStylingurl);
10429
- let cssFile = document.createElement('style');
10430
- fetch(url.href)
10431
- .then((res) => res.text())
10432
- .then((data) => {
10433
- this.clientStylingUrlContent = data;
10434
- cssFile.innerHTML = data;
10435
- setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
10436
- })
10437
- .catch((err) => {
10438
- console.log('error ', err);
10439
- });
10440
- };
10441
10450
  this.thousandSeperator = (value) => {
10442
10451
  if (value === 0) {
10443
10452
  return '0';
@@ -10459,9 +10468,9 @@ const LotteryGamePage = class {
10459
10468
  this.language = 'en';
10460
10469
  this.backgroundUrl = undefined;
10461
10470
  this.clientStyling = '';
10462
- this.clientStylingurl = '';
10471
+ this.clientStylingUrl = '';
10472
+ this.mbSource = undefined;
10463
10473
  this.translationUrl = '';
10464
- this.clientStylingUrlContent = '';
10465
10474
  this.tickets = [];
10466
10475
  this.mainTickets = [];
10467
10476
  this.secondaryTickets = [];
@@ -10476,7 +10485,6 @@ const LotteryGamePage = class {
10476
10485
  this.nextDate = undefined;
10477
10486
  this.isLoggedIn = false;
10478
10487
  this.loginModalVisible = false;
10479
- this.limitStylingAppends = false;
10480
10488
  this.isLoading = false;
10481
10489
  this.showSubmitError = false;
10482
10490
  this.submitError = '';
@@ -10489,6 +10497,21 @@ const LotteryGamePage = class {
10489
10497
  this.subscriptionError = '';
10490
10498
  this.isSubscribed = false;
10491
10499
  }
10500
+ handleClientStylingChange(newValue, oldValue) {
10501
+ if (newValue != oldValue) {
10502
+ setClientStyling(this.stylingContainer, this.clientStyling);
10503
+ }
10504
+ }
10505
+ handleClientStylingUrlChange(newValue, oldValue) {
10506
+ if (newValue != oldValue) {
10507
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10508
+ }
10509
+ }
10510
+ handleMbSourceChange(newValue, oldValue) {
10511
+ if (newValue != oldValue) {
10512
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10513
+ }
10514
+ }
10492
10515
  handleNewTranslations() {
10493
10516
  this.isLoading = true;
10494
10517
  getTranslations$4(this.translationUrl).then(() => {
@@ -10514,16 +10537,15 @@ const LotteryGamePage = class {
10514
10537
  }
10515
10538
  return Promise.all(promises);
10516
10539
  }
10517
- componentDidRender() {
10518
- // start custom styling area
10519
- if (!this.limitStylingAppends && this.stylingContainer) {
10540
+ componentDidLoad() {
10541
+ if (this.stylingContainer) {
10542
+ if (this.mbSource)
10543
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10520
10544
  if (this.clientStyling)
10521
- this.setClientStyling();
10522
- if (this.clientStylingurl)
10523
- this.setClientStylingURL();
10524
- this.limitStylingAppends = true;
10545
+ setClientStyling(this.stylingContainer, this.clientStyling);
10546
+ if (this.clientStylingUrl)
10547
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10525
10548
  }
10526
- // end custom styling area
10527
10549
  }
10528
10550
  countdownLogic(date) {
10529
10551
  const setTime = () => {
@@ -10882,48 +10904,39 @@ const LotteryGamePage = class {
10882
10904
  return (
10883
10905
  /* Game details */
10884
10906
  index.h("div", { class: "GamePage", dir: this.language == 'ar' ? 'rtl' : 'ltr', ref: el => this.stylingContainer = el }, index.h("div", { class: "GridBanner", style: { 'background': `url(${this.backgroundUrl ? this.backgroundUrl : backgroundImagePath})`, 'background-size': 'contain', 'background-repeat': 'no-repeat', 'background-position': 'center' } }, index.h("div", { class: "BannerButtonsWrapper" }), index.h("div", { class: "Tabs" }, index.h("div", { class: 'TabButton' + (this.tabIndex == 0 ? ' Active' : ''), onClick: () => this.tabIndex = 0 }, translate$4('buy', this.language)), index.h("div", { class: 'TabButton' + (this.tabIndex == 1 ? ' Active' : ''), onClick: () => this.tabIndex = 1 }, translate$4('viewLatest', this.language)))), index.h("div", { class: "NextDrawWrapper" }, this.nextDate && index.h("div", { class: "NextDraw" }, index.h("p", { class: "BannerText" }, translate$4('nextDraw', this.language)), index.h("div", { class: "BannerCountdown" }, index.h("span", { class: "CountdownDays" }, this.daysRemaining, "D"), index.h("span", { class: "CountdownHours" }, this.hoursRemaining, "H"), index.h("span", { class: "CountdownMinutes" }, this.minutesRemaining, "M"), index.h("span", { class: "CountdownSeconds" }, this.secondsRemaining, "S")))), this.tabIndex == 0 &&
10885
- index.h("div", { class: "GamePageContent" }, index.h("div", { class: "GameDetails" }, index.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 })), index.h("div", { class: "TicketsWrapper" }, this.mainTickets.map((item) => {
10907
+ index.h("div", { class: "GamePageContent" }, index.h("div", { class: "GameDetails" }, index.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 })), index.h("div", { class: "TicketsWrapper" }, this.mainTickets.map((item) => {
10886
10908
  var _a, _b;
10887
- return index.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 });
10909
+ return index.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 });
10888
10910
  })), index.h("div", { class: "OrderSummary" }, index.h("h3", { class: "OrderSummaryTitle" }, translate$4('orderSummaryTitle', this.language)), index.h("div", { class: "OrderTicketInfo" }, index.h("div", { class: "Ticket" }, translate$4('orderSummaryTickets', this.language), ": ", index.h("span", null, this.mainTickets.length)), index.h("div", null, index.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))), index.h("span", { class: "Multiplier" }, "x"), ((_m = this.gameData.rules) === null || _m === void 0 ? void 0 : _m.stakeMultiplierAvailable) &&
10889
10911
  index.h("span", null, index.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`), index.h("span", { class: "Multiplier" }, "x")), index.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) &&
10890
10912
  index.h("span", null, index.h("span", { class: "Multiplier" }, "x"), index.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`)))), index.h("hr", null), index.h("div", { class: "Total" }, translate$4('orderSummaryTotal', this.language), ": ", index.h("span", null, this.thousandSeperator(this.totalAmount), " ", this.currency)), this.isSubscription &&
10891
- index.h("div", { class: "SubscriptionWrapper" }, index.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 })), index.h("div", { class: "ButtonWrapper" }, this.isLoggedIn &&
10913
+ index.h("div", { class: "SubscriptionWrapper" }, index.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 })), index.h("div", { class: "ButtonWrapper" }, this.isLoggedIn &&
10892
10914
  index.h("div", null, !this.isLoading &&
10893
10915
  index.h("div", { class: "submitWrap" }, index.h("div", { class: "Button", onClick: () => this.handleSubmitTickets() }, translate$4('orderSummarySubmit', this.language)), this.showSubmitError && index.h("div", { class: 'submitError' }, this.submitError), this.showApiError && index.h("div", { class: 'submitError' }, this.apiError), this.showSubscriptionError && index.h("div", { class: 'submitError' }, this.subscriptionError)), this.isLoading && index.h("span", { class: "Button", style: { "cursor": "default" } }, translate$4('loading', this.language))), !this.isLoggedIn &&
10894
- index.h("div", null, index.h("span", { class: "Button", onClick: () => this.showLoginModal() }, translate$4('orderSummarySubmit', this.language)), index.h("helper-modal", { "title-modal": "Success", visible: this.loginModalVisible, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, index.h("p", { class: "SubmitModalSuccess" }, translate$4('modalLogin', this.language))))))), this.tabIndex == 1 &&
10895
- index.h("div", null, index.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 })), index.h("helper-modal", { "title-modal": "Success", visible: this.successVisible, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, index.h("p", { class: "SubmitModalSuccess" }, translate$4('submitSuccess', this.language)))));
10916
+ index.h("div", null, index.h("span", { class: "Button", onClick: () => this.showLoginModal() }, translate$4('orderSummarySubmit', this.language)), index.h("helper-modal", { "title-modal": "Success", visible: this.loginModalVisible, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }, index.h("p", { class: "SubmitModalSuccess" }, translate$4('modalLogin', this.language))))))), this.tabIndex == 1 &&
10917
+ index.h("div", null, index.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 })), index.h("helper-modal", { "title-modal": "Success", visible: this.successVisible, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }, index.h("p", { class: "SubmitModalSuccess" }, translate$4('submitSuccess', this.language)))));
10896
10918
  }
10897
10919
  static get assetsDirs() { return ["../static"]; }
10898
10920
  get element() { return index.getElement(this); }
10899
10921
  static get watchers() { return {
10922
+ "clientStyling": ["handleClientStylingChange"],
10923
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
10924
+ "mbSource": ["handleMbSourceChange"],
10900
10925
  "translationUrl": ["handleNewTranslations"]
10901
10926
  }; }
10902
10927
  };
10903
10928
  LotteryGamePage.style = LotteryGamePageStyle0;
10904
10929
 
10905
- 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}";
10906
- const LotteryGridStyle0 = lotteryGridCss;
10907
-
10908
- const LotteryGrid = class {
10909
- constructor(hostRef) {
10910
- index.registerInstance(this, hostRef);
10911
- this.gridFilledEvent = index.createEvent(this, "gridFilled", 7);
10912
- this.gridDirtyEvent = index.createEvent(this, "gridDirty", 7);
10913
- this.gridClearAllEvent = index.createEvent(this, "gridClearAllEvent", 7);
10914
- this.selectedCounter = 0;
10915
- this.setClientStyling = () => {
10916
- let sheet = document.createElement('style');
10917
- sheet.innerHTML = this.clientStyling;
10918
- this.stylingContainer.prepend(sheet);
10919
- };
10920
- this.setClientStylingURL = () => {
10921
- let cssFile = document.createElement('style');
10922
- setTimeout(() => {
10923
- cssFile.innerHTML = this.clientStylingUrlContent;
10924
- this.stylingContainer.prepend(cssFile);
10925
- }, 1);
10926
- };
10930
+ 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}";
10931
+ const LotteryGridStyle0 = lotteryGridCss;
10932
+
10933
+ const LotteryGrid = class {
10934
+ constructor(hostRef) {
10935
+ index.registerInstance(this, hostRef);
10936
+ this.gridFilledEvent = index.createEvent(this, "gridFilled", 7);
10937
+ this.gridDirtyEvent = index.createEvent(this, "gridDirty", 7);
10938
+ this.gridClearAllEvent = index.createEvent(this, "gridClearAllEvent", 7);
10939
+ this.selectedCounter = 0;
10927
10940
  this.ticketId = undefined;
10928
10941
  this.totalNumbers = 0;
10929
10942
  this.gameId = undefined;
@@ -10938,14 +10951,39 @@ const LotteryGrid = class {
10938
10951
  this.gridIndex = undefined;
10939
10952
  this.gridType = '';
10940
10953
  this.clientStyling = '';
10941
- this.clientStylingUrlContent = '';
10954
+ this.clientStylingUrl = '';
10955
+ this.mbSource = undefined;
10942
10956
  this.highNumber = 47;
10943
10957
  this.lowNumber = 1;
10944
10958
  this.selectionType = 'mainSelection';
10945
10959
  this.partialQuickpickAvailable = false;
10946
10960
  this.numbers = [];
10947
10961
  this.bonusNumbers = [];
10948
- this.limitStylingAppends = false;
10962
+ }
10963
+ handleClientStylingChange(newValue, oldValue) {
10964
+ if (newValue != oldValue) {
10965
+ setClientStyling(this.stylingContainer, this.clientStyling);
10966
+ }
10967
+ }
10968
+ handleClientStylingUrlChange(newValue, oldValue) {
10969
+ if (newValue != oldValue) {
10970
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10971
+ }
10972
+ }
10973
+ handleMbSourceChange(newValue, oldValue) {
10974
+ if (newValue != oldValue) {
10975
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10976
+ }
10977
+ }
10978
+ componentDidLoad() {
10979
+ if (this.stylingContainer) {
10980
+ if (this.mbSource)
10981
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
10982
+ if (this.clientStyling)
10983
+ setClientStyling(this.stylingContainer, this.clientStyling);
10984
+ if (this.clientStylingUrl)
10985
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
10986
+ }
10949
10987
  }
10950
10988
  connectedCallback() {
10951
10989
  let selected = [];
@@ -10982,17 +11020,6 @@ const LotteryGrid = class {
10982
11020
  });
10983
11021
  }
10984
11022
  }
10985
- componentDidRender() {
10986
- // start custom styling area
10987
- if (!this.limitStylingAppends && this.stylingContainer) {
10988
- if (this.clientStyling)
10989
- this.setClientStyling();
10990
- if (this.clientStylingUrlContent)
10991
- this.setClientStylingURL();
10992
- this.limitStylingAppends = true;
10993
- }
10994
- // end custom styling area
10995
- }
10996
11023
  // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices
10997
11024
  shuffleArray(array) {
10998
11025
  const result = [];
@@ -11118,8 +11145,13 @@ const LotteryGrid = class {
11118
11145
  }
11119
11146
  }
11120
11147
  render() {
11121
- return (index.h("div", { key: '8ad436904a126e6bee036c7372cf45c075022e5f', class: "GridContainer", ref: el => this.stylingContainer = el }, index.h("div", { key: '5a8818209485f0808a99978910f6f26473dd6f59', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => index.h("div", null, index.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) => index.h("div", null, index.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 }))) : '')));
11148
+ return (index.h("div", { key: 'f62b5b1e5a6cf7bcaa13ce2c8a281bc93fa439f7', class: "GridContainer", ref: el => this.stylingContainer = el }, index.h("div", { key: 'e381adbfff57e2cc343188c46037eb45ab798cac', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => index.h("div", null, index.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) => index.h("div", null, index.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 }))) : '')));
11122
11149
  }
11150
+ static get watchers() { return {
11151
+ "clientStyling": ["handleClientStylingChange"],
11152
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
11153
+ "mbSource": ["handleMbSourceChange"]
11154
+ }; }
11123
11155
  };
11124
11156
  LotteryGrid.style = LotteryGridStyle0;
11125
11157
 
@@ -11261,18 +11293,6 @@ const LotteryPagination = class {
11261
11293
  }
11262
11294
  }
11263
11295
  };
11264
- this.setClientStyling = () => {
11265
- let sheet = document.createElement('style');
11266
- sheet.innerHTML = this.clientStyling;
11267
- this.stylingContainer.prepend(sheet);
11268
- };
11269
- this.setClientStylingURL = () => {
11270
- let cssFile = document.createElement('style');
11271
- setTimeout(() => {
11272
- cssFile.innerHTML = this.clientStylingUrlContent;
11273
- this.stylingContainer.prepend(cssFile);
11274
- }, 1);
11275
- };
11276
11296
  this.nextPage = false;
11277
11297
  this.prevPage = false;
11278
11298
  this.offset = 0;
@@ -11280,7 +11300,8 @@ const LotteryPagination = class {
11280
11300
  this.total = 1;
11281
11301
  this.language = 'en';
11282
11302
  this.clientStyling = '';
11283
- this.clientStylingUrlContent = '';
11303
+ this.clientStylingUrl = '';
11304
+ this.mbSource = undefined;
11284
11305
  this.arrowsActive = undefined;
11285
11306
  this.secondaryArrowsActive = undefined;
11286
11307
  this.numberedNavActive = undefined;
@@ -11293,7 +11314,21 @@ const LotteryPagination = class {
11293
11314
  this.totalInt = undefined;
11294
11315
  this.pagesArray = [];
11295
11316
  this.endInt = 0;
11296
- this.limitStylingAppends = false;
11317
+ }
11318
+ handleClientStylingChange(newValue, oldValue) {
11319
+ if (newValue != oldValue) {
11320
+ setClientStyling(this.stylingContainer, this.clientStyling);
11321
+ }
11322
+ }
11323
+ handleClientStylingUrlChange(newValue, oldValue) {
11324
+ if (newValue != oldValue) {
11325
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11326
+ }
11327
+ }
11328
+ handleMbSourceChange(newValue, oldValue) {
11329
+ if (newValue != oldValue) {
11330
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11331
+ }
11297
11332
  }
11298
11333
  componentWillLoad() {
11299
11334
  if (this.translationUrl) {
@@ -11336,17 +11371,15 @@ const LotteryPagination = class {
11336
11371
  }
11337
11372
  }
11338
11373
  }
11339
- componentDidRender() {
11340
- this.isReset = false;
11341
- // start custom styling area
11342
- if (!this.limitStylingAppends && this.stylingContainer) {
11374
+ componentDidLoad() {
11375
+ if (this.stylingContainer) {
11376
+ if (this.mbSource)
11377
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11343
11378
  if (this.clientStyling)
11344
- this.setClientStyling();
11345
- if (this.clientStylingUrlContent)
11346
- this.setClientStylingURL();
11347
- this.limitStylingAppends = true;
11379
+ setClientStyling(this.stylingContainer, this.clientStyling);
11380
+ if (this.clientStylingUrl)
11381
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11348
11382
  }
11349
- // end custom styling area
11350
11383
  }
11351
11384
  render() {
11352
11385
  /**
@@ -11375,6 +11408,11 @@ const LotteryPagination = class {
11375
11408
  }
11376
11409
  return (index.h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
11377
11410
  }
11411
+ static get watchers() { return {
11412
+ "clientStyling": ["handleClientStylingChange"],
11413
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
11414
+ "mbSource": ["handleMbSourceChange"]
11415
+ }; }
11378
11416
  };
11379
11417
  LotteryPagination.style = LotteryPaginationStyle0;
11380
11418
 
@@ -11451,18 +11489,6 @@ const LotterySubscription = class {
11451
11489
  index.registerInstance(this, hostRef);
11452
11490
  this.subscriptionCompleted = index.createEvent(this, "subscriptionCompleted", 7);
11453
11491
  this.subscriptionCheckChange = index.createEvent(this, "subscriptionCheckChange", 7);
11454
- this.setClientStyling = () => {
11455
- let sheet = document.createElement('style');
11456
- sheet.innerHTML = this.clientStyling;
11457
- this.stylingContainer.prepend(sheet);
11458
- };
11459
- this.setClientStylingURL = () => {
11460
- let cssFile = document.createElement('style');
11461
- setTimeout(() => {
11462
- cssFile.innerHTML = this.clientStylingUrlContent;
11463
- this.stylingContainer.prepend(cssFile);
11464
- }, 1);
11465
- };
11466
11492
  this.changeDateParam = () => {
11467
11493
  if (this.filterData.from && !this.filterData.to) {
11468
11494
  let from = this.filterData.from;
@@ -11555,7 +11581,8 @@ const LotterySubscription = class {
11555
11581
  };
11556
11582
  this.translationUrl = undefined;
11557
11583
  this.clientStyling = '';
11558
- this.clientStylingUrlContent = '';
11584
+ this.clientStylingUrl = '';
11585
+ this.mbSource = undefined;
11559
11586
  this.endpoint = undefined;
11560
11587
  this.endpointTicket = undefined;
11561
11588
  this.endpointSubscription = undefined;
@@ -11575,7 +11602,6 @@ const LotterySubscription = class {
11575
11602
  this.endDateRule = undefined;
11576
11603
  this.gameNameRule = undefined;
11577
11604
  this.ruleType = '';
11578
- this.limitStylingAppends = false;
11579
11605
  }
11580
11606
  componentWillLoad() {
11581
11607
  if (this.translationUrl) {
@@ -11583,13 +11609,29 @@ const LotterySubscription = class {
11583
11609
  }
11584
11610
  this.getSubscriptionData();
11585
11611
  }
11586
- componentDidRender() {
11587
- if (!this.limitStylingAppends && this.stylingContainer) {
11612
+ handleClientStylingChange(newValue, oldValue) {
11613
+ if (newValue != oldValue) {
11614
+ setClientStyling(this.stylingContainer, this.clientStyling);
11615
+ }
11616
+ }
11617
+ handleClientStylingUrlChange(newValue, oldValue) {
11618
+ if (newValue != oldValue) {
11619
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11620
+ }
11621
+ }
11622
+ handleMbSourceChange(newValue, oldValue) {
11623
+ if (newValue != oldValue) {
11624
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11625
+ }
11626
+ }
11627
+ componentDidLoad() {
11628
+ if (this.stylingContainer) {
11629
+ if (this.mbSource)
11630
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11588
11631
  if (this.clientStyling)
11589
- this.setClientStyling();
11590
- if (this.clientStylingUrlContent)
11591
- this.setClientStylingURL();
11592
- this.limitStylingAppends = true;
11632
+ setClientStyling(this.stylingContainer, this.clientStyling);
11633
+ if (this.clientStylingUrl)
11634
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11593
11635
  }
11594
11636
  }
11595
11637
  transDate(from, to) {
@@ -11689,10 +11731,15 @@ const LotterySubscription = class {
11689
11731
  }
11690
11732
  }
11691
11733
  render() {
11692
- return (index.h("div", { key: '1bf289722935c5d2b574ba18f322830c81335585', class: "subscripitonContainer", ref: el => this.stylingContainer = el }, index.h("vaadin-checkbox", { key: '5f62fb61bccecd3632525ab0b28a41e45487c7ec', label: "Subscription", checked: this.isSubscribed, onChange: this.handleCheckboxchange.bind(this) }), this.isSubscribed &&
11693
- index.h("div", { key: 'd8e56e346ca8f275866738ab9c6d8eb14437d84a', class: "secondConditon" }, index.h("span", { key: '13c61d7582b1e0716395bd06c410a621b8af97d8', style: { 'margin-right': '8px' } }, "Occurrence: "), index.h("vaadin-select", { key: 'cf8d9c4176f66d2095798cae79b82b748e7ffb0b', items: this.frequenceList, value: this.frequenceState, "on-value-changed": this.handleSelectionChange.bind(this) }), this.frequenceState === 'Custom' &&
11694
- index.h("div", { key: 'c1496adac7e295830074da0b096bf4bbc0af8247', class: "thirdCondition" }, index.h("div", { key: '2aa4f92c84ab37edee56640ae0657f59e92c3719', class: "filterCalenderWrap" }, index.h("div", { key: '6665e3f2bd28650794eb174db6081ab4a9f514f0', class: "filterText" }, "Subscription Start Date*"), index.h("div", { key: '50a05e684bf068ab00d6d4298e65a6b94c44b79a', class: "filter" }, index.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" }))), index.h("div", { key: '85c4bf037ad7bc9797f809aa7e71fcbfbc80c298', class: "filterCalenderWrap" }, index.h("div", { key: '87b446788202ae55ad698c8455c9a6d09a9d22d6', class: "filterText" }, "Subscription End Date"), index.h("div", { key: '5700c92b2f0c57959f84b5f7ac7a3488d1d0d096', class: "filter" }, index.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" })))))));
11734
+ return (index.h("div", { key: 'f301b99245d1950605dbdfac1f4bc06c60ea0c50', class: "subscripitonContainer", ref: el => this.stylingContainer = el }, index.h("vaadin-checkbox", { key: 'e9005320778ae1d66975e7825b5259fa2bca36d2', label: "Subscription", checked: this.isSubscribed, onChange: this.handleCheckboxchange.bind(this) }), this.isSubscribed &&
11735
+ index.h("div", { key: '9dc052565ef92bb4c00559766b933e4bf567c1a7', class: "secondConditon" }, index.h("span", { key: '4251cf447cb9c00b12109c1d930720f6465983be', style: { 'margin-right': '8px' } }, "Occurrence: "), index.h("vaadin-select", { key: '0eabde390ba1fcab6ec654bf567c38b1afd376c7', items: this.frequenceList, value: this.frequenceState, "on-value-changed": this.handleSelectionChange.bind(this) }), this.frequenceState === 'Custom' &&
11736
+ index.h("div", { key: '61ab68b026444a2c2f63f200b7eeeb84d615c00e', class: "thirdCondition" }, index.h("div", { key: '6b03192f386a3b864012c8c5374a454f367a95e3', class: "filterCalenderWrap" }, index.h("div", { key: 'ec7e479eaba4b50dcd41cb953b90dd97fe879dae', class: "filterText" }, "Subscription Start Date*"), index.h("div", { key: '796c81340a082f033a9461d7ef2e0116b962d1e6', class: "filter" }, index.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" }))), index.h("div", { key: '7a8a64b82154802b65a848f73226e65904e6fe57', class: "filterCalenderWrap" }, index.h("div", { key: '396e291a86a3121f7a3fd7d1316271b8c36f6915', class: "filterText" }, "Subscription End Date"), index.h("div", { key: 'ecf9e2f2564c8bf336fcaef61d9ed46635f1bda0', class: "filter" }, index.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" })))))));
11695
11737
  }
11738
+ static get watchers() { return {
11739
+ "clientStyling": ["handleClientStylingChange"],
11740
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
11741
+ "mbSource": ["handleMbSourceChange"]
11742
+ }; }
11696
11743
  };
11697
11744
  LotterySubscription.style = LotterySubscriptionStyle0;
11698
11745
 
@@ -11786,18 +11833,6 @@ const LotteryTicket = class {
11786
11833
  this.drawMultiplierChange = index.createEvent(this, "drawMultiplierChange", 7);
11787
11834
  this.lineMultiplierChange = index.createEvent(this, "lineMultiplierChange", 7);
11788
11835
  this.betTypeChange = index.createEvent(this, "betTypeChange", 7);
11789
- this.setClientStyling = () => {
11790
- let sheet = document.createElement('style');
11791
- sheet.innerHTML = this.clientStyling;
11792
- this.stylingContainer.prepend(sheet);
11793
- };
11794
- this.setClientStylingURL = () => {
11795
- let cssFile = document.createElement('style');
11796
- setTimeout(() => {
11797
- cssFile.innerHTML = this.clientStylingUrlContent;
11798
- this.stylingContainer.prepend(cssFile);
11799
- }, 1);
11800
- };
11801
11836
  this.endpoint = undefined;
11802
11837
  this.gameId = undefined;
11803
11838
  this.numberOfGrids = 1;
@@ -11807,14 +11842,14 @@ const LotteryTicket = class {
11807
11842
  this.autoPick = false;
11808
11843
  this.language = 'en';
11809
11844
  this.clientStyling = '';
11810
- this.clientStylingUrlContent = '';
11845
+ this.clientStylingUrl = '';
11846
+ this.mbSource = undefined;
11811
11847
  this.translationUrl = undefined;
11812
11848
  this.isLoading = true;
11813
11849
  this.hasErrors = false;
11814
11850
  this.ticketDone = [];
11815
11851
  this.isCustomSelect = false;
11816
11852
  this.amountInfo = {};
11817
- this.limitStylingAppends = false;
11818
11853
  this.stakeMultiplier = '1';
11819
11854
  this.lineMultiplier = 0;
11820
11855
  this.isCustomSelectStake = false;
@@ -11873,6 +11908,21 @@ const LotteryTicket = class {
11873
11908
  betType: this.playType[0]
11874
11909
  });
11875
11910
  }
11911
+ handleClientStylingChange(newValue, oldValue) {
11912
+ if (newValue != oldValue) {
11913
+ setClientStyling(this.stylingContainer, this.clientStyling);
11914
+ }
11915
+ }
11916
+ handleClientStylingUrlChange(newValue, oldValue) {
11917
+ if (newValue != oldValue) {
11918
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11919
+ }
11920
+ }
11921
+ handleMbSourceChange(newValue, oldValue) {
11922
+ if (newValue != oldValue) {
11923
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11924
+ }
11925
+ }
11876
11926
  checkForClickOutside(ev) {
11877
11927
  if (this.selectRef && !this.selectRef.contains(ev.composedPath()[0])) {
11878
11928
  this.isCustomSelect = false;
@@ -11954,16 +12004,15 @@ const LotteryTicket = class {
11954
12004
  getTranslations$1(JSON.parse(this.translationUrl));
11955
12005
  }
11956
12006
  }
11957
- componentDidRender() {
11958
- // start custom styling area
11959
- if (!this.limitStylingAppends && this.stylingContainer) {
12007
+ componentDidLoad() {
12008
+ if (this.stylingContainer) {
12009
+ if (this.mbSource)
12010
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
11960
12011
  if (this.clientStyling)
11961
- this.setClientStyling();
11962
- if (this.clientStylingUrlContent)
11963
- this.setClientStylingURL();
11964
- this.limitStylingAppends = true;
12012
+ setClientStyling(this.stylingContainer, this.clientStyling);
12013
+ if (this.clientStylingUrl)
12014
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
11965
12015
  }
11966
- // end custom styling area
11967
12016
  }
11968
12017
  gridFilledHandler(event) {
11969
12018
  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 });
@@ -12092,8 +12141,8 @@ const LotteryTicket = class {
12092
12141
  index.h("div", null, index.h("label", { class: "Label" }, translate$1('playType', this.language), ": "), index.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 &&
12093
12142
  index.h("div", null, index.h("label", { class: "Label" }, translate$1('lines', this.language), ": "), index.h("div", { class: "WagerInput" }, index.h("div", { ref: el => this.selectLineRef = el, class: this.isCustomSelectLine ? "SelectWrapper SelectActive" : "SelectWrapper" }, index.h("div", { class: "SelectButton", onClick: () => this.toggleLineSelection() }, index.h("span", null, this.lineMultiplier), index.h("span", { class: "SelectExpand" }, "\u25BC")), index.h("div", { class: "SelectContent" }, index.h("ul", { class: "SelectOptions" }, this.boardsAllowed.map((item) => index.h("li", { class: this.lineMultiplier == item ? 'SelectedValue' : '', value: item, onClick: () => this.setLineMultiplier(item) }, item))))))), this.grids.map((_, index$1) => index.h("div", null, index.h("div", { class: "TicketGridHeader" }, index.h("div", null, translate$1('lineName', this.language), index$1 + 1), this.resetButton && this.ticketDone[index$1] &&
12094
12143
  index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection(index$1) }, translate$1('resetButton', this.language))), this.autoPick && !this.ticketDone[index$1] &&
12095
- index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection(index$1) }, translate$1('autoButton', this.language)))), index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, rules.boards[0].selectionName), index.h("lottery-grid", { "grid-index": index$1, "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 &&
12096
- index.h("div", { class: "SecondarySelectionWrapper" }, index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, rules.boards[0].secondarySelectionName), index.h("lottery-grid", { "grid-index": index$1, "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 &&
12144
+ index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection(index$1) }, translate$1('autoButton', this.language)))), index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, rules.boards[0].selectionName), index.h("lottery-grid", { "grid-index": index$1, "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 &&
12145
+ index.h("div", { class: "SecondarySelectionWrapper" }, index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, rules.boards[0].secondarySelectionName), index.h("lottery-grid", { "grid-index": index$1, "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 &&
12097
12146
  index.h("div", null, index.h("label", { class: "Label" }, translate$1('multiplier', this.language), ": "), index.h("div", { class: "WagerInput" }, rules.stakeMultipliers.length > 1 ?
12098
12147
  (index.h("div", { ref: el => this.selectStakeRef = el, class: this.isCustomSelectStake ? "SelectWrapper SelectActive" : "SelectWrapper" }, index.h("div", { class: "SelectButton", onClick: () => this.toggleSelection() }, index.h("span", null, this.stakeMultiplier), index.h("span", { class: "SelectExpand" }, "\u25BC")), index.h("div", { class: "SelectContent" }, index.h("ul", { class: "SelectOptions" }, rules.stakeMultipliers.map((item) => index.h("li", { class: this.stakeMultiplier == item ? 'SelectedValue' : '', value: item, onClick: () => this.setStakeMultiplier(item) }, item)))))) : (index.h("div", null, index.h("input", { min: "1", value: rules.stakeMultipliers[0] || 1, type: "number", disabled: true }))))), rules.drawMultiplierAvailable &&
12099
12148
  index.h("div", null, index.h("label", { class: "Label" }, translate$1('numberOfDraws', this.language), ": "), index.h("div", { class: "WagerInput" }, rules.durations.length > 1 ?
@@ -12104,7 +12153,10 @@ const LotteryTicket = class {
12104
12153
  }
12105
12154
  static get watchers() { return {
12106
12155
  "lineMultiplier": ["handleLineMultiplierChange"],
12107
- "tabIndex": ["handleTabIndexChange"]
12156
+ "tabIndex": ["handleTabIndexChange"],
12157
+ "clientStyling": ["handleClientStylingChange"],
12158
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
12159
+ "mbSource": ["handleMbSourceChange"]
12108
12160
  }; }
12109
12161
  };
12110
12162
  LotteryTicket.style = LotteryTicketStyle0;
@@ -12147,18 +12199,6 @@ const LotteryTicketController = class {
12147
12199
  constructor(hostRef) {
12148
12200
  index.registerInstance(this, hostRef);
12149
12201
  this.deleteTicketEvent = index.createEvent(this, "deleteTicket", 7);
12150
- this.setClientStyling = () => {
12151
- let sheet = document.createElement('style');
12152
- sheet.innerHTML = this.clientStyling;
12153
- this.stylingContainer.prepend(sheet);
12154
- };
12155
- this.setClientStylingURL = () => {
12156
- let cssFile = document.createElement('style');
12157
- setTimeout(() => {
12158
- cssFile.innerHTML = this.clientStylingUrlContent;
12159
- this.stylingContainer.prepend(cssFile);
12160
- }, 1);
12161
- };
12162
12202
  this.endpoint = '';
12163
12203
  this.ticketId = 1;
12164
12204
  this.ticketDescription = undefined;
@@ -12173,9 +12213,9 @@ const LotteryTicketController = class {
12173
12213
  this.resetButton = false;
12174
12214
  this.totalControllers = 1;
12175
12215
  this.clientStyling = '';
12176
- this.clientStylingUrlContent = '';
12216
+ this.clientStylingUrl = '';
12217
+ this.mbSource = undefined;
12177
12218
  this.translationUrl = undefined;
12178
- this.limitStylingAppends = false;
12179
12219
  }
12180
12220
  // @TODO fix the `any` type
12181
12221
  helperAccordionActionHandler() {
@@ -12191,20 +12231,39 @@ const LotteryTicketController = class {
12191
12231
  getTranslations(JSON.parse(this.translationUrl));
12192
12232
  }
12193
12233
  }
12194
- componentDidRender() {
12195
- // start custom styling area
12196
- if (!this.limitStylingAppends && this.stylingContainer) {
12234
+ handleClientStylingChange(newValue, oldValue) {
12235
+ if (newValue != oldValue) {
12236
+ setClientStyling(this.stylingContainer, this.clientStyling);
12237
+ }
12238
+ }
12239
+ handleClientStylingUrlChange(newValue, oldValue) {
12240
+ if (newValue != oldValue) {
12241
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
12242
+ }
12243
+ }
12244
+ handleMbSourceChange(newValue, oldValue) {
12245
+ if (newValue != oldValue) {
12246
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
12247
+ }
12248
+ }
12249
+ componentDidLoad() {
12250
+ if (this.stylingContainer) {
12251
+ if (this.mbSource)
12252
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
12197
12253
  if (this.clientStyling)
12198
- this.setClientStyling();
12199
- if (this.clientStylingUrlContent)
12200
- this.setClientStylingURL();
12201
- this.limitStylingAppends = true;
12254
+ setClientStyling(this.stylingContainer, this.clientStyling);
12255
+ if (this.clientStylingUrl)
12256
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
12202
12257
  }
12203
- // end custom styling area
12204
12258
  }
12205
12259
  render() {
12206
- return (index.h("div", { key: '581989035aa42a397cd39a4cdd929ea91190494c', class: "LotteryTicketControllerContainer", ref: el => this.stylingContainer = el }, index.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 }, index.h("div", { key: 'ba851ea2792641971a5552a94558fe8d28068187', slot: "accordionContent" }, index.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 })))));
12260
+ return (index.h("div", { key: '28756fcff01b738bfe8339114445032a5da757c2', class: "LotteryTicketControllerContainer", ref: el => this.stylingContainer = el }, index.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 }, index.h("div", { key: '3a056f64dc8572b66f50cb151adde2caea2cd427', slot: "accordionContent" }, index.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 })))));
12207
12261
  }
12262
+ static get watchers() { return {
12263
+ "clientStyling": ["handleClientStylingChange"],
12264
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
12265
+ "mbSource": ["handleMbSourceChange"]
12266
+ }; }
12208
12267
  };
12209
12268
  LotteryTicketController.style = LotteryTicketControllerStyle0;
12210
12269