@everymatrix/lottery-game-details 1.55.0 → 1.56.2

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.
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-e12a9319.js');
5
+ const index = require('./index-b3fda73d.js');
6
6
 
7
7
  const DEFAULT_LANGUAGE$1 = 'en';
8
8
  const SUPPORTED_LANGUAGES$1 = ['ro', 'en', 'hr'];
@@ -181,28 +181,74 @@ const getTranslations = (data) => {
181
181
  });
182
182
  };
183
183
 
184
+ /**
185
+ * @name setClientStyling
186
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
187
+ * @param {HTMLElement} stylingContainer The reference element of the widget
188
+ * @param {string} clientStyling The style content
189
+ */
190
+ function setClientStyling(stylingContainer, clientStyling) {
191
+ if (stylingContainer) {
192
+ const sheet = document.createElement('style');
193
+ sheet.innerHTML = clientStyling;
194
+ stylingContainer.appendChild(sheet);
195
+ }
196
+ }
197
+
198
+ /**
199
+ * @name setClientStylingURL
200
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
201
+ * @param {HTMLElement} stylingContainer The reference element of the widget
202
+ * @param {string} clientStylingUrl The URL of the style content
203
+ */
204
+ function setClientStylingURL(stylingContainer, clientStylingUrl) {
205
+ const url = new URL(clientStylingUrl);
206
+
207
+ fetch(url.href)
208
+ .then((res) => res.text())
209
+ .then((data) => {
210
+ const cssFile = document.createElement('style');
211
+ cssFile.innerHTML = data;
212
+ if (stylingContainer) {
213
+ stylingContainer.appendChild(cssFile);
214
+ }
215
+ })
216
+ .catch((err) => {
217
+ console.error('There was an error while trying to load client styling from URL', err);
218
+ });
219
+ }
220
+
221
+ /**
222
+ * @name setStreamLibrary
223
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
224
+ * @param {HTMLElement} stylingContainer The highest element of the widget
225
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
226
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
227
+ */
228
+ function setStreamStyling(stylingContainer, domain, subscription) {
229
+ if (window.emMessageBus) {
230
+ const sheet = document.createElement('style');
231
+
232
+ window.emMessageBus.subscribe(domain, (data) => {
233
+ sheet.innerHTML = data;
234
+ if (stylingContainer) {
235
+ stylingContainer.appendChild(sheet);
236
+ }
237
+ });
238
+ }
239
+ }
240
+
184
241
  const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:var(--emw--button-text-color, #000);font-weight:normal}";
185
242
  const HelperTabStyle0 = helperTabCss;
186
243
 
187
244
  const HelperTab = class {
188
245
  constructor(hostRef) {
189
246
  index.registerInstance(this, hostRef);
190
- this.setClientStyling = () => {
191
- let sheet = document.createElement('style');
192
- sheet.innerHTML = this.clientStyling;
193
- this.stylingContainer.prepend(sheet);
194
- };
195
- this.setClientStylingURL = () => {
196
- let cssFile = document.createElement('style');
197
- setTimeout(() => {
198
- cssFile.innerHTML = this.clientStylingUrlContent;
199
- this.stylingContainer.prepend(cssFile);
200
- }, 1);
201
- };
202
247
  this.selectedIndex = 0;
203
248
  this.cmsEndpoint = undefined;
249
+ this.mbSource = undefined;
204
250
  this.clientStyling = '';
205
- this.clientStylingUrlContent = '';
251
+ this.clientStylingUrl = '';
206
252
  this.lowNumber = undefined;
207
253
  this.highNumber = undefined;
208
254
  this.minimumAllowed = undefined;
@@ -210,24 +256,39 @@ const HelperTab = class {
210
256
  this.language = 'en';
211
257
  this.translationUrl = undefined;
212
258
  this.tabContent = '';
213
- this.limitStylingAppends = false;
259
+ }
260
+ handleClientStylingChange(newValue, oldValue) {
261
+ if (newValue != oldValue) {
262
+ setClientStyling(this.stylingContainer, this.clientStyling);
263
+ }
264
+ }
265
+ handleClientStylingChangeURL(newValue, oldValue) {
266
+ if (newValue != oldValue) {
267
+ if (this.clientStylingUrl)
268
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
269
+ }
270
+ }
271
+ componentDidLoad() {
272
+ if (this.stylingContainer) {
273
+ if (window.emMessageBus != undefined) {
274
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
275
+ }
276
+ else {
277
+ if (this.clientStyling)
278
+ setClientStyling(this.stylingContainer, this.clientStyling);
279
+ if (this.clientStylingUrl)
280
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
281
+ }
282
+ }
283
+ }
284
+ disconnectedCallback() {
285
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
214
286
  }
215
287
  componentWillLoad() {
216
288
  if (this.translationUrl) {
217
289
  getTranslations(JSON.parse(this.translationUrl));
218
290
  }
219
291
  }
220
- componentDidRender() {
221
- // start custom styling area
222
- if (!this.limitStylingAppends && this.stylingContainer) {
223
- if (this.clientStyling)
224
- this.setClientStyling();
225
- if (this.clientStylingUrlContent)
226
- this.setClientStylingURL();
227
- this.limitStylingAppends = true;
228
- }
229
- // end custom styling area
230
- }
231
292
  getHowToPlay() {
232
293
  if (this.lowNumber && this.highNumber && this.maxinumAllowed && this.minimumAllowed) {
233
294
  return translateWithParams('howToPlay', {
@@ -241,15 +302,19 @@ const HelperTab = class {
241
302
  return '';
242
303
  }
243
304
  render() {
244
- this.tabContent = index.h("div", { key: 'fc177f5bed7e46d51e953094b8cce0afa5f46a45', class: "TabContent", ref: el => this.stylingContainer = el }, this.getHowToPlay());
305
+ this.tabContent = index.h("div", { key: '92877a17361066f68fce6299cb8f65901f6abc60', class: "TabContent", ref: el => this.stylingContainer = el }, this.getHowToPlay());
245
306
  if (this.selectedIndex + 1 == 2) {
246
- this.tabContent = index.h("div", { key: '8de7f218079aedb48d3172a84139feaefbfd8a3e', class: "TabContent", ref: el => this.stylingContainer = el }, index.h("ol", { key: 'dc8131b1dae16dfd9ac39919ce1f53664a7438df' }, index.h("li", { key: '5c5e4a9213b5c645d5969b4ea7502b5ddfbcfd7e' }, translate('register', this.language)), index.h("li", { key: 'c72cd7fe80fd665a4567808e90352e2c82622a0e' }, translate('butTickets', this.language)), index.h("li", { key: 'b5340c61022856214cd6ff0a56013f2e3851ac10' }, translate('reviewPurchase', this.language))));
307
+ this.tabContent = index.h("div", { key: '9876b9250371034ef40dab0f5fc3fe1a5631a370', class: "TabContent", ref: el => this.stylingContainer = el }, index.h("ol", { key: 'ef2097eb54aeb640f06871277d8cafd2f4455109' }, index.h("li", { key: 'e9a0237e1fdead445abcd9240174276ffef81a67' }, translate('register', this.language)), index.h("li", { key: '2bdfaffdc9f1a7ae021913cb0ba346132140dcfd' }, translate('butTickets', this.language)), index.h("li", { key: 'bff38eaeabeaece83dc8ed1697e5b052802753f6' }, translate('reviewPurchase', this.language))));
247
308
  }
248
309
  else if (this.selectedIndex + 1 == 3) {
249
- this.tabContent = index.h("div", { key: 'f7e86830283d2dea60cdc96ca1ee7f0589658a3c', class: "TabContent", ref: el => this.stylingContainer = el }, index.h("ul", { key: 'c8d950bfd1cfc933260cbbf0f3d9ab7de7a564e1' }, index.h("li", { key: '754ddb1278ab4004a6f0fc68dc8bda0750c04a19' }, translate('odds', this.language)), index.h("li", { key: '78e60f1e02bfd2e04b6f9535b74f3a16892a9c49' }, translate('winGame', this.language)), index.h("li", { key: '04a097cf10b0b9b6c16feafd46107e8a3874aa07' }, translate('claimPrize', this.language))));
310
+ this.tabContent = index.h("div", { key: '49a7fb3435fb50b54572ec38d1e632e2eacf56fb', class: "TabContent", ref: el => this.stylingContainer = el }, index.h("ul", { key: '7f642625f35a1ed1eae7655144c0b8b1bfe25f55' }, index.h("li", { key: '037a5913be57dd1e2dcde5a061e9c64e70365e8d' }, translate('odds', this.language)), index.h("li", { key: '8775a1b2e8eda285e2c248b8d7235f06ac593fc6' }, translate('winGame', this.language)), index.h("li", { key: '5297fc5e757c29a1349049f1fe294e926255d518' }, translate('claimPrize', this.language))));
250
311
  }
251
312
  return (this.tabContent);
252
313
  }
314
+ static get watchers() { return {
315
+ "clientStyling": ["handleClientStylingChange"],
316
+ "clientStylingUrl": ["handleClientStylingChangeURL"]
317
+ }; }
253
318
  };
254
319
  HelperTab.style = HelperTabStyle0;
255
320
 
@@ -259,18 +324,6 @@ const HelperTabsStyle0 = helperTabsCss;
259
324
  const HelperTabs = class {
260
325
  constructor(hostRef) {
261
326
  index.registerInstance(this, hostRef);
262
- this.setClientStyling = () => {
263
- let sheet = document.createElement('style');
264
- sheet.innerHTML = this.clientStyling;
265
- this.stylingContainer.prepend(sheet);
266
- };
267
- this.setClientStylingURL = () => {
268
- let cssFile = document.createElement('style');
269
- setTimeout(() => {
270
- cssFile.innerHTML = this.clientStylingUrlContent;
271
- this.stylingContainer.prepend(cssFile);
272
- }, 1);
273
- };
274
327
  this.disabled = false;
275
328
  this.label = undefined;
276
329
  this.selected = false;
@@ -278,33 +331,53 @@ const HelperTabs = class {
278
331
  this.selectedIndex = 0;
279
332
  this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
280
333
  this.clientStyling = '';
334
+ this.mbSource = undefined;
281
335
  this.clientStylingurl = '';
282
- this.clientStylingUrlContent = '';
336
+ this.clientStylingUrl = '';
283
337
  this.lowNumber = undefined;
284
338
  this.highNumber = undefined;
285
339
  this.minimumAllowed = undefined;
286
340
  this.maxinumAllowed = undefined;
287
341
  this.language = 'en';
288
342
  this.translationUrl = undefined;
289
- this.limitStylingAppends = false;
290
343
  }
291
344
  connectedCallback() {
292
345
  }
293
- componentDidRender() {
294
- // start custom styling area
295
- if (!this.limitStylingAppends && this.stylingContainer) {
296
- this.setClientStyling();
297
- if (this.clientStylingUrlContent) {
298
- this.setClientStylingURL();
346
+ handleClientStylingChange(newValue, oldValue) {
347
+ if (newValue != oldValue) {
348
+ setClientStyling(this.stylingContainer, this.clientStyling);
349
+ }
350
+ }
351
+ handleClientStylingChangeURL(newValue, oldValue) {
352
+ if (newValue != oldValue) {
353
+ if (this.clientStylingUrl)
354
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
355
+ }
356
+ }
357
+ componentDidLoad() {
358
+ if (this.stylingContainer) {
359
+ if (window.emMessageBus != undefined) {
360
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
361
+ }
362
+ else {
363
+ if (this.clientStyling)
364
+ setClientStyling(this.stylingContainer, this.clientStyling);
365
+ if (this.clientStylingUrl)
366
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
299
367
  }
300
- this.limitStylingAppends = true;
301
368
  }
302
- // end custom styling area
369
+ }
370
+ disconnectedCallback() {
371
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
303
372
  }
304
373
  render() {
305
- return (index.h("div", { key: '4c75878234d57bf5e9a82ee926252bce3ba90b0f', ref: el => this.stylingContainer = el }, index.h("div", { key: '95faa7cc214b9dd96a1daacf36f1d637a8624e90', class: "Tabs" }, this.tabs.map((tab, index$1) => index.h("button", { class: 'TabButton' + (this.selectedIndex == index$1 ? ' Active' : ''), onClick: () => this.selectedIndex = index$1 }, tab.label))), index.h("div", { key: '787ecacb0c26b0712b9ebef99ff7be68d1eb4231' }, index.h("helper-tab", { key: 'df43a2347875f49446d2b85e63c257e527a6b3ab', "low-number": this.lowNumber, "high-number": this.highNumber, "minimum-allowed": this.minimumAllowed, "maxinum-allowed": this.maxinumAllowed, selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, language: this.language, "translation-url": this.translationUrl, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrlContent }))));
374
+ return (index.h("div", { key: '173c4774748482dc56fcffb4bac4e1666fa9170f', ref: el => this.stylingContainer = el }, index.h("div", { key: '680b65218e4b00f134b354f593c0c20fb5882dca', class: "Tabs" }, this.tabs.map((tab, index$1) => index.h("button", { class: 'TabButton' + (this.selectedIndex == index$1 ? ' Active' : ''), onClick: () => this.selectedIndex = index$1 }, tab.label))), index.h("div", { key: '67aa26c92fb416c5d0934988fb071481f805685b' }, index.h("helper-tab", { key: '63c8dfc253d4fc12b0310a2585a44b90807e1a9f', "low-number": this.lowNumber, "high-number": this.highNumber, "minimum-allowed": this.minimumAllowed, "maxinum-allowed": this.maxinumAllowed, selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, language: this.language, "translation-url": this.translationUrl, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrl, "mb-source": this.mbSource }))));
306
375
  }
307
376
  get host() { return index.getElement(this); }
377
+ static get watchers() { return {
378
+ "clientStyling": ["handleClientStylingChange"],
379
+ "clientStylingUrl": ["handleClientStylingChangeURL"]
380
+ }; }
308
381
  };
309
382
  HelperTabs.style = HelperTabsStyle0;
310
383
 
@@ -21,10 +21,10 @@ function _interopNamespace(e) {
21
21
  }
22
22
 
23
23
  const NAMESPACE = 'lottery-game-details';
24
- const BUILD = /* lottery-game-details */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
24
+ const BUILD = /* lottery-game-details */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
25
25
 
26
26
  /*
27
- Stencil Client Platform v4.22.3 | MIT Licensed | https://stenciljs.com
27
+ Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
28
28
  */
29
29
  var __defProp = Object.defineProperty;
30
30
  var __export = (target, all) => {
@@ -365,31 +365,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
365
365
  if (nonce != null) {
366
366
  styleElm.setAttribute("nonce", nonce);
367
367
  }
368
- if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
369
- if (styleContainerNode.nodeName === "HEAD") {
370
- const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
371
- const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
372
- styleContainerNode.insertBefore(styleElm, referenceNode2);
373
- } else if ("host" in styleContainerNode) {
374
- if (supportsConstructableStylesheets) {
375
- const stylesheet = new CSSStyleSheet();
376
- stylesheet.replaceSync(style);
377
- styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
378
- } else {
379
- const existingStyleContainer = styleContainerNode.querySelector("style");
380
- if (existingStyleContainer) {
381
- existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
382
- } else {
383
- styleContainerNode.prepend(styleElm);
384
- }
385
- }
386
- } else {
387
- styleContainerNode.append(styleElm);
388
- }
389
- }
390
- if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD") {
391
- styleContainerNode.insertBefore(styleElm, null);
392
- }
368
+ styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector("link"));
393
369
  }
394
370
  if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
395
371
  styleElm.innerHTML += SLOT_FB_CSS;
@@ -412,7 +388,7 @@ var attachStyles = (hostRef) => {
412
388
  const scopeId2 = addStyle(
413
389
  elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
414
390
  cmpMeta);
415
- if (flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
391
+ if (flags & 10 /* needsScopedEncapsulation */) {
416
392
  elm["s-sc"] = scopeId2;
417
393
  elm.classList.add(scopeId2 + "-h");
418
394
  }
@@ -460,11 +436,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
460
436
  if (memberName === "list") {
461
437
  isProp = false;
462
438
  } else if (oldValue == null || elm[memberName] != n) {
463
- if (typeof elm.__lookupSetter__(memberName) === "function") {
464
- elm[memberName] = n;
465
- } else {
466
- elm.setAttribute(memberName, n);
467
- }
439
+ elm[memberName] = n;
468
440
  }
469
441
  } else {
470
442
  elm[memberName] = newValue;
@@ -537,9 +509,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
537
509
  {
538
510
  updateElement(null, newVNode2, isSvgMode);
539
511
  }
540
- const rootNode = elm.getRootNode();
541
- const isElementWithinShadowRoot = !rootNode.querySelector("body");
542
- if (!isElementWithinShadowRoot && BUILD.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
512
+ if (isDef(scopeId) && elm["s-si"] !== scopeId) {
543
513
  elm.classList.add(elm["s-si"] = scopeId);
544
514
  }
545
515
  if (newVNode2.$children$) {
@@ -694,10 +664,7 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
694
664
  elm.textContent = "";
695
665
  }
696
666
  addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
697
- } else if (
698
- // don't do this on initial render as it can cause non-hydrated content to be removed
699
- !isInitialRender && BUILD.updatable && oldChildren !== null
700
- ) {
667
+ } else if (oldChildren !== null) {
701
668
  removeVnodes(oldChildren, 0, oldChildren.length - 1);
702
669
  }
703
670
  } else if (oldVNode.$text$ !== text) {
@@ -850,6 +817,9 @@ var postUpdateComponent = (hostRef) => {
850
817
  {
851
818
  addHydratedFlag(elm);
852
819
  }
820
+ {
821
+ safeCall(instance, "componentDidLoad");
822
+ }
853
823
  endPostUpdate();
854
824
  {
855
825
  hostRef.$onReadyResolve$(elm);
@@ -901,6 +871,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
901
871
  `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`
902
872
  );
903
873
  }
874
+ const elm = hostRef.$hostElement$ ;
904
875
  const oldVal = hostRef.$instanceValues$.get(propName);
905
876
  const flags = hostRef.$flags$;
906
877
  const instance = hostRef.$lazyInstance$ ;
@@ -910,6 +881,18 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
910
881
  if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
911
882
  hostRef.$instanceValues$.set(propName, newVal);
912
883
  if (instance) {
884
+ if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
885
+ const watchMethods = cmpMeta.$watchers$[propName];
886
+ if (watchMethods) {
887
+ watchMethods.map((watchMethodName) => {
888
+ try {
889
+ instance[watchMethodName](newVal, oldVal, propName);
890
+ } catch (e) {
891
+ consoleError(e, elm);
892
+ }
893
+ });
894
+ }
895
+ }
913
896
  if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
914
897
  scheduleUpdate(hostRef, false);
915
898
  }
@@ -921,7 +904,10 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
921
904
  var proxyComponent = (Cstr, cmpMeta, flags) => {
922
905
  var _a, _b;
923
906
  const prototype = Cstr.prototype;
924
- if (cmpMeta.$members$ || BUILD.watchCallback ) {
907
+ if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
908
+ if (Cstr.watchers && !cmpMeta.$watchers$) {
909
+ cmpMeta.$watchers$ = Cstr.watchers;
910
+ }
925
911
  const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
926
912
  members.map(([memberName, [memberFlags]]) => {
927
913
  if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
@@ -946,8 +932,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
946
932
  if (this.hasOwnProperty(propName)) {
947
933
  newValue = this[propName];
948
934
  delete this[propName];
949
- } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
950
- this[propName] == newValue) {
935
+ } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && this[propName] == newValue) {
951
936
  return;
952
937
  } else if (propName == null) {
953
938
  const hostRef = getHostRef(this);
@@ -1004,6 +989,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
1004
989
  throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
1005
990
  }
1006
991
  if (!Cstr.isProxied) {
992
+ {
993
+ cmpMeta.$watchers$ = Cstr.watchers;
994
+ }
1007
995
  proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
1008
996
  Cstr.isProxied = true;
1009
997
  }
@@ -1019,6 +1007,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
1019
1007
  {
1020
1008
  hostRef.$flags$ &= ~8 /* isConstructingInstance */;
1021
1009
  }
1010
+ {
1011
+ hostRef.$flags$ |= 128 /* isWatchReady */;
1012
+ }
1022
1013
  endNewInstance();
1023
1014
  fireConnectedCallback(hostRef.$lazyInstance$);
1024
1015
  } else {
@@ -1093,12 +1084,17 @@ var connectedCallback = (elm) => {
1093
1084
  }
1094
1085
  };
1095
1086
  var disconnectInstance = (instance) => {
1087
+ {
1088
+ safeCall(instance, "disconnectedCallback");
1089
+ }
1096
1090
  };
1097
1091
  var disconnectedCallback = async (elm) => {
1098
1092
  if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
1099
1093
  const hostRef = getHostRef(elm);
1100
- if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
1101
- hostRef.$onReadyPromise$.then(() => disconnectInstance());
1094
+ if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
1095
+ disconnectInstance(hostRef.$lazyInstance$);
1096
+ } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
1097
+ hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
1102
1098
  }
1103
1099
  }
1104
1100
  };
@@ -1121,6 +1117,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
1121
1117
  let hasSlotRelocation = false;
1122
1118
  lazyBundles.map((lazyBundle) => {
1123
1119
  lazyBundle[1].map((compactMeta) => {
1120
+ var _a2;
1124
1121
  const cmpMeta = {
1125
1122
  $flags$: compactMeta[0],
1126
1123
  $tagName$: compactMeta[1],
@@ -1136,6 +1133,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
1136
1133
  {
1137
1134
  cmpMeta.$attrsToReflect$ = [];
1138
1135
  }
1136
+ {
1137
+ cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
1138
+ }
1139
1139
  const tagName = cmpMeta.$tagName$;
1140
1140
  const HostElement = class extends HTMLElement {
1141
1141
  // StencilLazyHost
@@ -2,13 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-e12a9319.js');
5
+ const index = require('./index-b3fda73d.js');
6
6
  const appGlobals = require('./app-globals-3a1e7e63.js');
7
7
 
8
8
  const defineCustomElements = async (win, options) => {
9
9
  if (typeof window === 'undefined') return undefined;
10
10
  await appGlobals.globalScripts();
11
- return index.bootstrapLazy([["helper-accordion_4.cjs",[[1,"lottery-game-details",{"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"limitStylingAppends":[32]}],[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"limitStylingAppends":[32]}],[1,"helper-accordion",{"ticketHistoryFlag":[516,"ticket-history-flag"],"headerTitle":[513,"header-title"],"headerSubtitle":[513,"header-subtitle"],"description":[513],"footer":[516],"deleteTab":[516,"delete-tab"],"postMessage":[516,"post-message"],"eventName":[513,"event-name"],"collapsed":[516],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"translationUrl":[520,"translation-url"],"showContent":[32],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"tabContent":[32],"limitStylingAppends":[32]}]]]], options);
11
+ return index.bootstrapLazy([["helper-accordion_4.cjs",[[1,"lottery-game-details",{"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"limitStylingAppends":[32]}],[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"mbSource":[1,"mb-source"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrl":[513,"client-styling-url"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[1,"helper-accordion",{"ticketHistoryFlag":[516,"ticket-history-flag"],"headerTitle":[513,"header-title"],"headerSubtitle":[513,"header-subtitle"],"description":[513],"footer":[516],"deleteTab":[516,"delete-tab"],"postMessage":[516,"post-message"],"eventName":[513,"event-name"],"collapsed":[516],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"translationUrl":[520,"translation-url"],"showContent":[32],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"tabContent":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
12
12
  };
13
13
 
14
14
  exports.setNonce = index.setNonce;
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-e12a9319.js');
5
+ const index = require('./index-b3fda73d.js');
6
6
  const appGlobals = require('./app-globals-3a1e7e63.js');
7
7
 
8
8
  /*
9
- Stencil Client Patch Browser v4.22.3 | MIT Licensed | https://stenciljs.com
9
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
10
10
  */
11
11
  var patchBrowser = () => {
12
12
  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('lottery-game-details.cjs.js', document.baseURI).href));
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["helper-accordion_4.cjs",[[1,"lottery-game-details",{"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"limitStylingAppends":[32]}],[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"limitStylingAppends":[32]}],[1,"helper-accordion",{"ticketHistoryFlag":[516,"ticket-history-flag"],"headerTitle":[513,"header-title"],"headerSubtitle":[513,"header-subtitle"],"description":[513],"footer":[516],"deleteTab":[516,"delete-tab"],"postMessage":[516,"post-message"],"eventName":[513,"event-name"],"collapsed":[516],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"translationUrl":[520,"translation-url"],"showContent":[32],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"tabContent":[32],"limitStylingAppends":[32]}]]]], options);
22
+ return index.bootstrapLazy([["helper-accordion_4.cjs",[[1,"lottery-game-details",{"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"limitStylingAppends":[32]}],[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"mbSource":[1,"mb-source"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrl":[513,"client-styling-url"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[1,"helper-accordion",{"ticketHistoryFlag":[516,"ticket-history-flag"],"headerTitle":[513,"header-title"],"headerSubtitle":[513,"header-subtitle"],"description":[513],"footer":[516],"deleteTab":[516,"delete-tab"],"postMessage":[516,"post-message"],"eventName":[513,"event-name"],"collapsed":[516],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"translationUrl":[520,"translation-url"],"showContent":[32],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"tabContent":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
@@ -4,8 +4,8 @@
4
4
  ],
5
5
  "compiler": {
6
6
  "name": "@stencil/core",
7
- "version": "4.22.3",
8
- "typescriptVersion": "5.5.4"
7
+ "version": "4.19.2",
8
+ "typescriptVersion": "5.4.5"
9
9
  },
10
10
  "collections": [
11
11
  {