@everymatrix/lottery-game-details 0.0.3 → 0.1.4

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.
@@ -76,7 +76,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
76
76
  };
77
77
  const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
78
78
  let scopeId = getScopeId(cmpMeta);
79
- const style = styles.get(scopeId);
79
+ let style = styles.get(scopeId);
80
80
  // if an element is NOT connected then getRootNode() will return the wrong root node
81
81
  // so the fallback is to always use the document for the root node in those cases
82
82
  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
@@ -156,7 +156,7 @@ const h = (nodeName, vnodeData, ...children) => {
156
156
  let child = null;
157
157
  let simple = false;
158
158
  let lastSimple = false;
159
- const vNodeChildren = [];
159
+ let vNodeChildren = [];
160
160
  const walk = (c) => {
161
161
  for (let i = 0; i < c.length; i++) {
162
162
  child = c[i];
@@ -180,6 +180,19 @@ const h = (nodeName, vnodeData, ...children) => {
180
180
  }
181
181
  };
182
182
  walk(children);
183
+ if (vnodeData) {
184
+ {
185
+ const classData = vnodeData.className || vnodeData.class;
186
+ if (classData) {
187
+ vnodeData.class =
188
+ typeof classData !== 'object'
189
+ ? classData
190
+ : Object.keys(classData)
191
+ .filter((k) => classData[k])
192
+ .join(' ');
193
+ }
194
+ }
195
+ }
183
196
  const vnode = newVNode(nodeName, null);
184
197
  vnode.$attrs$ = vnodeData;
185
198
  if (vNodeChildren.length > 0) {
@@ -213,14 +226,60 @@ const isHost = (node) => node && node.$tag$ === Host;
213
226
  const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
214
227
  if (oldValue !== newValue) {
215
228
  let isProp = isMemberInElement(elm, memberName);
216
- memberName.toLowerCase();
217
- {
229
+ let ln = memberName.toLowerCase();
230
+ if (memberName === 'class') {
231
+ const classList = elm.classList;
232
+ const oldClasses = parseClassList(oldValue);
233
+ const newClasses = parseClassList(newValue);
234
+ classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
235
+ classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
236
+ }
237
+ else if ((!isProp ) &&
238
+ memberName[0] === 'o' &&
239
+ memberName[1] === 'n') {
240
+ // Event Handlers
241
+ // so if the member name starts with "on" and the 3rd characters is
242
+ // a capital letter, and it's not already a member on the element,
243
+ // then we're assuming it's an event listener
244
+ if (memberName[2] === '-') {
245
+ // on- prefixed events
246
+ // allows to be explicit about the dom event to listen without any magic
247
+ // under the hood:
248
+ // <my-cmp on-click> // listens for "click"
249
+ // <my-cmp on-Click> // listens for "Click"
250
+ // <my-cmp on-ionChange> // listens for "ionChange"
251
+ // <my-cmp on-EVENTS> // listens for "EVENTS"
252
+ memberName = memberName.slice(3);
253
+ }
254
+ else if (isMemberInElement(win, ln)) {
255
+ // standard event
256
+ // the JSX attribute could have been "onMouseOver" and the
257
+ // member name "onmouseover" is on the window's prototype
258
+ // so let's add the listener "mouseover", which is all lowercased
259
+ memberName = ln.slice(2);
260
+ }
261
+ else {
262
+ // custom event
263
+ // the JSX attribute could have been "onMyCustomEvent"
264
+ // so let's trim off the "on" prefix and lowercase the first character
265
+ // and add the listener "myCustomEvent"
266
+ // except for the first character, we keep the event name case
267
+ memberName = ln[2] + memberName.slice(3);
268
+ }
269
+ if (oldValue) {
270
+ plt.rel(elm, memberName, oldValue, false);
271
+ }
272
+ if (newValue) {
273
+ plt.ael(elm, memberName, newValue, false);
274
+ }
275
+ }
276
+ else {
218
277
  // Set property if it exists and it's not a SVG
219
278
  const isComplex = isComplexType(newValue);
220
279
  if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
221
280
  try {
222
281
  if (!elm.tagName.includes('-')) {
223
- const n = newValue == null ? '' : newValue;
282
+ let n = newValue == null ? '' : newValue;
224
283
  // Workaround for Safari, moving the <input> caret when re-assigning the same valued
225
284
  if (memberName === 'list') {
226
285
  isProp = false;
@@ -251,6 +310,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
251
310
  }
252
311
  }
253
312
  };
313
+ const parseClassListRegex = /\s/;
314
+ const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
254
315
  const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
255
316
  // if the element passed in is a shadow root, which is a document fragment
256
317
  // then we want to be adding attrs/props to the shadow root's "host" element
@@ -260,6 +321,14 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
260
321
  : newVnode.$elm$;
261
322
  const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
262
323
  const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
324
+ {
325
+ // remove attributes no longer present on the vnode by setting them to undefined
326
+ for (memberName in oldVnodeAttrs) {
327
+ if (!(memberName in newVnodeAttrs)) {
328
+ setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
329
+ }
330
+ }
331
+ }
263
332
  // add new & update changed attributes
264
333
  for (memberName in newVnodeAttrs) {
265
334
  setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
@@ -267,11 +336,15 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
267
336
  };
268
337
  const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
269
338
  // tslint:disable-next-line: prefer-const
270
- const newVNode = newParentVNode.$children$[childIndex];
339
+ let newVNode = newParentVNode.$children$[childIndex];
271
340
  let i = 0;
272
341
  let elm;
273
342
  let childNode;
274
- {
343
+ if (newVNode.$text$ !== null) {
344
+ // create text node
345
+ elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
346
+ }
347
+ else {
275
348
  // create element
276
349
  elm = newVNode.$elm$ = (doc.createElement(newVNode.$tag$));
277
350
  // add css classes, attrs, props, listeners, etc.
@@ -313,31 +386,141 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
313
386
  }
314
387
  }
315
388
  };
389
+ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
390
+ for (; startIdx <= endIdx; ++startIdx) {
391
+ if ((vnode = vnodes[startIdx])) {
392
+ elm = vnode.$elm$;
393
+ // remove the vnode's element from the dom
394
+ elm.remove();
395
+ }
396
+ }
397
+ };
398
+ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
399
+ let oldStartIdx = 0;
400
+ let newStartIdx = 0;
401
+ let oldEndIdx = oldCh.length - 1;
402
+ let oldStartVnode = oldCh[0];
403
+ let oldEndVnode = oldCh[oldEndIdx];
404
+ let newEndIdx = newCh.length - 1;
405
+ let newStartVnode = newCh[0];
406
+ let newEndVnode = newCh[newEndIdx];
407
+ let node;
408
+ while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
409
+ if (oldStartVnode == null) {
410
+ // Vnode might have been moved left
411
+ oldStartVnode = oldCh[++oldStartIdx];
412
+ }
413
+ else if (oldEndVnode == null) {
414
+ oldEndVnode = oldCh[--oldEndIdx];
415
+ }
416
+ else if (newStartVnode == null) {
417
+ newStartVnode = newCh[++newStartIdx];
418
+ }
419
+ else if (newEndVnode == null) {
420
+ newEndVnode = newCh[--newEndIdx];
421
+ }
422
+ else if (isSameVnode(oldStartVnode, newStartVnode)) {
423
+ patch(oldStartVnode, newStartVnode);
424
+ oldStartVnode = oldCh[++oldStartIdx];
425
+ newStartVnode = newCh[++newStartIdx];
426
+ }
427
+ else if (isSameVnode(oldEndVnode, newEndVnode)) {
428
+ patch(oldEndVnode, newEndVnode);
429
+ oldEndVnode = oldCh[--oldEndIdx];
430
+ newEndVnode = newCh[--newEndIdx];
431
+ }
432
+ else if (isSameVnode(oldStartVnode, newEndVnode)) {
433
+ patch(oldStartVnode, newEndVnode);
434
+ parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
435
+ oldStartVnode = oldCh[++oldStartIdx];
436
+ newEndVnode = newCh[--newEndIdx];
437
+ }
438
+ else if (isSameVnode(oldEndVnode, newStartVnode)) {
439
+ patch(oldEndVnode, newStartVnode);
440
+ parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
441
+ oldEndVnode = oldCh[--oldEndIdx];
442
+ newStartVnode = newCh[++newStartIdx];
443
+ }
444
+ else {
445
+ {
446
+ // new element
447
+ node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
448
+ newStartVnode = newCh[++newStartIdx];
449
+ }
450
+ if (node) {
451
+ {
452
+ oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
453
+ }
454
+ }
455
+ }
456
+ }
457
+ if (oldStartIdx > oldEndIdx) {
458
+ addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
459
+ }
460
+ else if (newStartIdx > newEndIdx) {
461
+ removeVnodes(oldCh, oldStartIdx, oldEndIdx);
462
+ }
463
+ };
464
+ const isSameVnode = (vnode1, vnode2) => {
465
+ // compare if two vnode to see if they're "technically" the same
466
+ // need to have the same element tag, and same key to be the same
467
+ if (vnode1.$tag$ === vnode2.$tag$) {
468
+ return true;
469
+ }
470
+ return false;
471
+ };
316
472
  const patch = (oldVNode, newVNode) => {
317
473
  const elm = (newVNode.$elm$ = oldVNode.$elm$);
474
+ const oldChildren = oldVNode.$children$;
318
475
  const newChildren = newVNode.$children$;
319
- {
476
+ const tag = newVNode.$tag$;
477
+ const text = newVNode.$text$;
478
+ if (text === null) {
320
479
  // element node
321
480
  {
322
- {
481
+ if (tag === 'slot')
482
+ ;
483
+ else {
323
484
  // either this is the first render of an element OR it's an update
324
485
  // AND we already know it's possible it could have changed
325
486
  // this updates the element's css classes, attrs, props, listeners, etc.
326
487
  updateElement(oldVNode, newVNode, isSvgMode);
327
488
  }
328
489
  }
329
- if (newChildren !== null) {
490
+ if (oldChildren !== null && newChildren !== null) {
491
+ // looks like there's child vnodes for both the old and new vnodes
492
+ updateChildren(elm, oldChildren, newVNode, newChildren);
493
+ }
494
+ else if (newChildren !== null) {
495
+ // no old child vnodes, but there are new child vnodes to add
496
+ if (oldVNode.$text$ !== null) {
497
+ // the old vnode was text, so be sure to clear it out
498
+ elm.textContent = '';
499
+ }
330
500
  // add the new vnode children
331
501
  addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
332
502
  }
333
- else ;
503
+ else if (oldChildren !== null) {
504
+ // no new child vnodes, but there are old child vnodes to remove
505
+ removeVnodes(oldChildren, 0, oldChildren.length - 1);
506
+ }
507
+ }
508
+ else if (oldVNode.$text$ !== text) {
509
+ // update the text content for the text only vnode
510
+ // and also only if the text is different than before
511
+ elm.data = text;
334
512
  }
335
513
  };
336
514
  const renderVdom = (hostRef, renderFnResults) => {
337
515
  const hostElm = hostRef.$hostElement$;
516
+ const cmpMeta = hostRef.$cmpMeta$;
338
517
  const oldVNode = hostRef.$vnode$ || newVNode(null, null);
339
518
  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
340
519
  hostTagName = hostElm.tagName;
520
+ if (cmpMeta.$attrsToReflect$) {
521
+ rootVnode.$attrs$ = rootVnode.$attrs$ || {};
522
+ cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
523
+ }
341
524
  rootVnode.$tag$ = null;
342
525
  rootVnode.$flags$ |= 4 /* isHost */;
343
526
  hostRef.$vnode$ = rootVnode;
@@ -348,6 +531,20 @@ const renderVdom = (hostRef, renderFnResults) => {
348
531
  // synchronous patch
349
532
  patch(oldVNode, rootVnode);
350
533
  };
534
+ const getElement = (ref) => (getHostRef(ref).$hostElement$ );
535
+ const createEvent = (ref, name, flags) => {
536
+ const elm = getElement(ref);
537
+ return {
538
+ emit: (detail) => {
539
+ return emitEvent(elm, name, {
540
+ bubbles: !!(flags & 4 /* Bubbles */),
541
+ composed: !!(flags & 2 /* Composed */),
542
+ cancelable: !!(flags & 1 /* Cancellable */),
543
+ detail,
544
+ });
545
+ },
546
+ };
547
+ };
351
548
  /**
352
549
  * Helper function to create & dispatch a custom Event on a provided target
353
550
  * @param elm the target of the Event
@@ -366,6 +563,9 @@ const attachToAncestor = (hostRef, ancestorComponent) => {
366
563
  }
367
564
  };
368
565
  const scheduleUpdate = (hostRef, isInitialLoad) => {
566
+ {
567
+ hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
568
+ }
369
569
  if (hostRef.$flags$ & 4 /* isWaitingForChildren */) {
370
570
  hostRef.$flags$ |= 512 /* needsRerender */;
371
571
  return;
@@ -422,6 +622,9 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
422
622
  const callRender = (hostRef, instance, elm) => {
423
623
  try {
424
624
  instance = instance.render() ;
625
+ {
626
+ hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
627
+ }
425
628
  {
426
629
  hostRef.$flags$ |= 2 /* hasRendered */;
427
630
  }
@@ -487,12 +690,185 @@ const appDidLoad = (who) => {
487
690
  }
488
691
  nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
489
692
  };
693
+ const safeCall = (instance, method, arg) => {
694
+ if (instance && instance[method]) {
695
+ try {
696
+ return instance[method](arg);
697
+ }
698
+ catch (e) {
699
+ consoleError(e);
700
+ }
701
+ }
702
+ return undefined;
703
+ };
490
704
  const then = (promise, thenFn) => {
491
705
  return promise && promise.then ? promise.then(thenFn) : thenFn();
492
706
  };
493
707
  const addHydratedFlag = (elm) => elm.classList.add('hydrated')
494
708
  ;
709
+ /**
710
+ * Parse a new property value for a given property type.
711
+ *
712
+ * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
713
+ * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
714
+ * 1. `any`, the type given to `propValue` in the function signature
715
+ * 2. the type stored from `propType`.
716
+ *
717
+ * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
718
+ *
719
+ * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
720
+ * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
721
+ * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
722
+ * ```tsx
723
+ * <my-cmp prop-val={0}></my-cmp>
724
+ * ```
725
+ *
726
+ * HTML prop values on the other hand, will always a string
727
+ *
728
+ * @param propValue the new value to coerce to some type
729
+ * @param propType the type of the prop, expressed as a binary number
730
+ * @returns the parsed/coerced value
731
+ */
732
+ const parsePropertyValue = (propValue, propType) => {
733
+ // ensure this value is of the correct prop type
734
+ if (propValue != null && !isComplexType(propValue)) {
735
+ if (propType & 4 /* Boolean */) {
736
+ // per the HTML spec, any string value means it is a boolean true value
737
+ // but we'll cheat here and say that the string "false" is the boolean false
738
+ return propValue === 'false' ? false : propValue === '' || !!propValue;
739
+ }
740
+ if (propType & 2 /* Number */) {
741
+ // force it to be a number
742
+ return parseFloat(propValue);
743
+ }
744
+ if (propType & 1 /* String */) {
745
+ // could have been passed as a number or boolean
746
+ // but we still want it as a string
747
+ return String(propValue);
748
+ }
749
+ // redundant return here for better minification
750
+ return propValue;
751
+ }
752
+ // not sure exactly what type we want
753
+ // so no need to change to a different type
754
+ return propValue;
755
+ };
756
+ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
757
+ const setValue = (ref, propName, newVal, cmpMeta) => {
758
+ // check our new property value against our internal value
759
+ const hostRef = getHostRef(ref);
760
+ const oldVal = hostRef.$instanceValues$.get(propName);
761
+ const flags = hostRef.$flags$;
762
+ const instance = hostRef.$lazyInstance$ ;
763
+ newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
764
+ // explicitly check for NaN on both sides, as `NaN === NaN` is always false
765
+ const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
766
+ const didValueChange = newVal !== oldVal && !areBothNaN;
767
+ if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && didValueChange) {
768
+ // gadzooks! the property's value has changed!!
769
+ // set our new value!
770
+ hostRef.$instanceValues$.set(propName, newVal);
771
+ if (instance) {
772
+ if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
773
+ // looks like this value actually changed, so we've got work to do!
774
+ // but only if we've already rendered, otherwise just chill out
775
+ // queue that we need to do an update, but don't worry about queuing
776
+ // up millions cuz this function ensures it only runs once
777
+ scheduleUpdate(hostRef, false);
778
+ }
779
+ }
780
+ }
781
+ };
495
782
  const proxyComponent = (Cstr, cmpMeta, flags) => {
783
+ if (cmpMeta.$members$) {
784
+ // It's better to have a const than two Object.entries()
785
+ const members = Object.entries(cmpMeta.$members$);
786
+ const prototype = Cstr.prototype;
787
+ members.map(([memberName, [memberFlags]]) => {
788
+ if ((memberFlags & 31 /* Prop */ ||
789
+ ((flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
790
+ // proxyComponent - prop
791
+ Object.defineProperty(prototype, memberName, {
792
+ get() {
793
+ // proxyComponent, get value
794
+ return getValue(this, memberName);
795
+ },
796
+ set(newValue) {
797
+ // proxyComponent, set value
798
+ setValue(this, memberName, newValue, cmpMeta);
799
+ },
800
+ configurable: true,
801
+ enumerable: true,
802
+ });
803
+ }
804
+ });
805
+ if ((flags & 1 /* isElementConstructor */)) {
806
+ const attrNameToPropName = new Map();
807
+ prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
808
+ plt.jmp(() => {
809
+ const propName = attrNameToPropName.get(attrName);
810
+ // In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
811
+ // in the case where an attribute was set inline.
812
+ // ```html
813
+ // <my-component some-attribute="some-value"></my-component>
814
+ // ```
815
+ //
816
+ // There is an edge case where a developer sets the attribute inline on a custom element and then
817
+ // programmatically changes it before it has been upgraded as shown below:
818
+ //
819
+ // ```html
820
+ // <!-- this component has _not_ been upgraded yet -->
821
+ // <my-component id="test" some-attribute="some-value"></my-component>
822
+ // <script>
823
+ // // grab non-upgraded component
824
+ // el = document.querySelector("#test");
825
+ // el.someAttribute = "another-value";
826
+ // // upgrade component
827
+ // customElements.define('my-component', MyComponent);
828
+ // </script>
829
+ // ```
830
+ // In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
831
+ // will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
832
+ // to the value that was set inline i.e. "some-value" from above example. When
833
+ // the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
834
+ //
835
+ // The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
836
+ // by connectedCallback as this attributeChangedCallback will not fire.
837
+ //
838
+ // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
839
+ //
840
+ // TODO(STENCIL-16) we should think about whether or not we actually want to be reflecting the attributes to
841
+ // properties here given that this goes against best practices outlined here
842
+ // https://developers.google.com/web/fundamentals/web-components/best-practices#avoid-reentrancy
843
+ if (this.hasOwnProperty(propName)) {
844
+ newValue = this[propName];
845
+ delete this[propName];
846
+ }
847
+ else if (prototype.hasOwnProperty(propName) &&
848
+ typeof this[propName] === 'number' &&
849
+ this[propName] == newValue) {
850
+ // if the propName exists on the prototype of `Cstr`, this update may be a result of Stencil using native
851
+ // APIs to reflect props as attributes. Calls to `setAttribute(someElement, propName)` will result in
852
+ // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
853
+ return;
854
+ }
855
+ this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
856
+ });
857
+ };
858
+ // create an array of attributes to observe
859
+ // and also create a map of html attribute name to js property name
860
+ Cstr.observedAttributes = members
861
+ .filter(([_, m]) => m[0] & 15 /* HasAttribute */) // filter to only keep props that should match attributes
862
+ .map(([propName, m]) => {
863
+ const attrName = m[1] || propName;
864
+ attrNameToPropName.set(attrName, propName);
865
+ if (m[0] & 512 /* ReflectAttr */) {
866
+ cmpMeta.$attrsToReflect$.push([propName, attrName]);
867
+ }
868
+ return attrName;
869
+ });
870
+ }
871
+ }
496
872
  return Cstr;
497
873
  };
498
874
  const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
@@ -511,7 +887,17 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
511
887
  Cstr = await Cstr;
512
888
  endLoad();
513
889
  }
890
+ if (!Cstr.isProxied) {
891
+ proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
892
+ Cstr.isProxied = true;
893
+ }
514
894
  const endNewInstance = createTime('createInstance', cmpMeta.$tagName$);
895
+ // ok, time to construct the instance
896
+ // but let's keep track of when we start and stop
897
+ // so that the getters/setters don't incorrectly step on data
898
+ {
899
+ hostRef.$flags$ |= 8 /* isConstructingInstance */;
900
+ }
515
901
  // construct the lazy-loaded component implementation
516
902
  // passing the hostRef is very important during
517
903
  // construction in order to directly wire together the
@@ -522,7 +908,11 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
522
908
  catch (e) {
523
909
  consoleError(e);
524
910
  }
911
+ {
912
+ hostRef.$flags$ &= ~8 /* isConstructingInstance */;
913
+ }
525
914
  endNewInstance();
915
+ fireConnectedCallback(hostRef.$lazyInstance$);
526
916
  }
527
917
  if (Cstr.style) {
528
918
  // this component has styles but we haven't registered them yet
@@ -551,6 +941,11 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
551
941
  schedule();
552
942
  }
553
943
  };
944
+ const fireConnectedCallback = (instance) => {
945
+ {
946
+ safeCall(instance, 'connectedCallback');
947
+ }
948
+ };
554
949
  const connectedCallback = (elm) => {
555
950
  if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
556
951
  const hostRef = getHostRef(elm);
@@ -574,10 +969,25 @@ const connectedCallback = (elm) => {
574
969
  }
575
970
  }
576
971
  }
972
+ // Lazy properties
973
+ // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
974
+ if (cmpMeta.$members$) {
975
+ Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
976
+ if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
977
+ const value = elm[memberName];
978
+ delete elm[memberName];
979
+ elm[memberName] = value;
980
+ }
981
+ });
982
+ }
577
983
  {
578
984
  initializeComponent(elm, hostRef, cmpMeta);
579
985
  }
580
986
  }
987
+ else {
988
+ // fire off connectedCallback() on component instance
989
+ fireConnectedCallback(hostRef.$lazyInstance$);
990
+ }
581
991
  endConnected();
582
992
  }
583
993
  };
@@ -607,6 +1017,12 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
607
1017
  $members$: compactMeta[2],
608
1018
  $listeners$: compactMeta[3],
609
1019
  };
1020
+ {
1021
+ cmpMeta.$members$ = compactMeta[2];
1022
+ }
1023
+ {
1024
+ cmpMeta.$attrsToReflect$ = [];
1025
+ }
610
1026
  const tagName = cmpMeta.$tagName$;
611
1027
  const HostElement = class extends HTMLElement {
612
1028
  // StencilLazyHost
@@ -650,7 +1066,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
650
1066
  cmpMeta.$lazyBundleId$ = lazyBundle[0];
651
1067
  if (!exclude.includes(tagName) && !customElements.get(tagName)) {
652
1068
  cmpTags.push(tagName);
653
- customElements.define(tagName, proxyComponent(HostElement));
1069
+ customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
654
1070
  }
655
1071
  });
656
1072
  });
@@ -700,9 +1116,7 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
700
1116
  if (module) {
701
1117
  return module[exportName];
702
1118
  }
703
- /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
704
1119
  return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
705
- /* @vite-ignore */
706
1120
  /* webpackInclude: /\.entry\.js$/ */
707
1121
  /* webpackExclude: /\.system\.entry\.js$/ */
708
1122
  /* webpackMode: "lazy" */
@@ -758,6 +1172,8 @@ const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
758
1172
  const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
759
1173
 
760
1174
  exports.bootstrapLazy = bootstrapLazy;
1175
+ exports.createEvent = createEvent;
1176
+ exports.getElement = getElement;
761
1177
  exports.h = h;
762
1178
  exports.promiseResolve = promiseResolve;
763
1179
  exports.registerInstance = registerInstance;
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-94a620d7.js');
5
+ const index = require('./index-9d95408f.js');
6
6
 
7
7
  /*
8
- Stencil Client Patch Esm v2.17.0 | MIT Licensed | https://stenciljs.com
8
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
9
9
  */
10
10
  const patchEsm = () => {
11
11
  return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
14
14
  const defineCustomElements = (win, options) => {
15
15
  if (typeof window === 'undefined') return Promise.resolve();
16
16
  return patchEsm().then(() => {
17
- return index.bootstrapLazy([["lottery-game-details.cjs",[[1,"lottery-game-details"]]]], options);
17
+ return index.bootstrapLazy([["helper-accordion_4.cjs",[[1,"lottery-game-details"],[1,"helper-tabs",{"disabled":[4],"label":[1],"selected":[4],"cmsEndpoint":[1,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16]}],[1,"helper-accordion",{"ticketHistoryFlag":[4,"ticket-history-flag"],"headerTitle":[1,"header-title"],"headerSubtitle":[1,"header-subtitle"],"description":[1],"footer":[4],"deleteTab":[4,"delete-tab"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"language":[1],"showContent":[32]}],[1,"helper-tab",{"selectedIndex":[2,"selected-index"],"cmsEndpoint":[1,"cms-endpoint"],"tabContent":[32]}]]]], options);
18
18
  });
19
19
  };
20
20
 
@@ -1,9 +1,9 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index-94a620d7.js');
3
+ const index = require('./index-9d95408f.js');
4
4
 
5
5
  /*
6
- Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
6
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
7
7
  */
8
8
  const patchBrowser = () => {
9
9
  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));
@@ -15,5 +15,5 @@ const patchBrowser = () => {
15
15
  };
16
16
 
17
17
  patchBrowser().then(options => {
18
- return index.bootstrapLazy([["lottery-game-details.cjs",[[1,"lottery-game-details"]]]], options);
18
+ return index.bootstrapLazy([["helper-accordion_4.cjs",[[1,"lottery-game-details"],[1,"helper-tabs",{"disabled":[4],"label":[1],"selected":[4],"cmsEndpoint":[1,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16]}],[1,"helper-accordion",{"ticketHistoryFlag":[4,"ticket-history-flag"],"headerTitle":[1,"header-title"],"headerSubtitle":[1,"header-subtitle"],"description":[1],"footer":[4],"deleteTab":[4,"delete-tab"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"language":[1],"showContent":[32]}],[1,"helper-tab",{"selectedIndex":[2,"selected-index"],"cmsEndpoint":[1,"cms-endpoint"],"tabContent":[32]}]]]], options);
19
19
  });