genesys-spark-chart-components 4.12.1-beta.1 → 4.29.0-beta.0

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.
Files changed (90) hide show
  1. package/LICENSE +2 -2
  2. package/dist/cjs/app-globals-3a1e7e63.js +5 -0
  3. package/dist/cjs/genesys-chart-webcomponents.cjs.js +5 -3
  4. package/dist/cjs/gux-chart-column-beta.cjs.entry.js +124 -123
  5. package/dist/cjs/gux-chart-donut-beta.cjs.entry.js +213 -212
  6. package/dist/cjs/gux-chart-line-beta.cjs.entry.js +120 -119
  7. package/dist/cjs/gux-chart-pie-beta.cjs.entry.js +96 -95
  8. package/dist/cjs/gux-chart-scatter-plot-beta.cjs.entry.js +126 -125
  9. package/dist/cjs/gux-visualization-beta.cjs.entry.js +213 -213
  10. package/dist/cjs/{index-1e13a15f.js → index-a4712860.js} +185 -63
  11. package/dist/cjs/loader.cjs.js +4 -2
  12. package/dist/cjs/log-error-28c7064e.js +21 -0
  13. package/dist/cjs/{usage-30f04ec3.js → usage-3d9281d1.js} +63 -63
  14. package/dist/collection/collection-manifest.json +2 -2
  15. package/dist/collection/components/beta/gux-chart-column/gux-chart-column.js +324 -324
  16. package/dist/collection/components/beta/gux-chart-column/gux-chart-column.locale.js +88 -88
  17. package/dist/collection/components/beta/gux-chart-column/tests/gux-column-chart.spec.js +16 -16
  18. package/dist/collection/components/beta/gux-chart-donut/gux-chart-donut.js +550 -550
  19. package/dist/collection/components/beta/gux-chart-donut/tests/gux-chart-donut.spec.js +5 -5
  20. package/dist/collection/components/beta/gux-chart-line/gux-chart-line.js +375 -375
  21. package/dist/collection/components/beta/gux-chart-line/gux-chart-line.locale.js +88 -88
  22. package/dist/collection/components/beta/gux-chart-line/tests/gux-chart-line.e2e.js +13 -13
  23. package/dist/collection/components/beta/gux-chart-line/tests/gux-chart-line.spec.js +16 -16
  24. package/dist/collection/components/beta/gux-chart-pie/gux-chart-pie.js +266 -266
  25. package/dist/collection/components/beta/gux-chart-pie/tests/gux-chart-pie.spec.js +5 -5
  26. package/dist/collection/components/beta/gux-chart-scatter-plot/gux-chart-scatter-plot.js +347 -347
  27. package/dist/collection/components/beta/gux-chart-scatter-plot/tests/gux-chart-scatter-plot.spec.js +27 -27
  28. package/dist/collection/components/beta/gux-visualization/gux-visualization.js +133 -133
  29. package/dist/collection/components/beta/gux-visualization/gux-visualization.locale.js +88 -88
  30. package/dist/collection/components/beta/gux-visualization/tests/gux-visualization.e2e.js +25 -25
  31. package/dist/collection/components/beta/gux-visualization/tests/gux-visualization.spec.js +26 -26
  32. package/dist/collection/i18n/fetchResources.js +7 -7
  33. package/dist/collection/i18n/index.js +56 -56
  34. package/dist/collection/test/axeConfig.js +4 -4
  35. package/dist/collection/test/e2eTestUtils.js +14 -14
  36. package/dist/collection/test/specTestUtils.js +5 -5
  37. package/dist/collection/utils/dom/get-closest-element.js +12 -12
  38. package/dist/collection/utils/error/log-error.js +2 -2
  39. package/dist/collection/utils/theme/color-palette.js +10 -10
  40. package/dist/collection/utils/tracking/usage.js +47 -47
  41. package/dist/collection/utils/tracking/usage.spec.js +108 -108
  42. package/dist/esm/app-globals-0f993ce5.js +3 -0
  43. package/dist/esm/genesys-chart-webcomponents.js +6 -4
  44. package/dist/esm/gux-chart-column-beta.entry.js +124 -123
  45. package/dist/esm/gux-chart-donut-beta.entry.js +213 -212
  46. package/dist/esm/gux-chart-line-beta.entry.js +120 -119
  47. package/dist/esm/gux-chart-pie-beta.entry.js +96 -95
  48. package/dist/esm/gux-chart-scatter-plot-beta.entry.js +126 -125
  49. package/dist/esm/gux-visualization-beta.entry.js +213 -213
  50. package/dist/esm/{index-701d93cf.js → index-82fd7406.js} +185 -63
  51. package/dist/esm/loader.js +5 -3
  52. package/dist/esm/log-error-ff9bdda4.js +18 -0
  53. package/dist/esm/{usage-61eee3bd.js → usage-4d835ee1.js} +63 -63
  54. package/dist/genesys-chart-webcomponents/genesys-chart-webcomponents.css +1 -1
  55. package/dist/genesys-chart-webcomponents/genesys-chart-webcomponents.esm.js +1 -1
  56. package/dist/genesys-chart-webcomponents/p-01bbadbf.entry.js +11 -0
  57. package/dist/genesys-chart-webcomponents/{p-137f5b8f.entry.js → p-12eb9928.entry.js} +1 -1
  58. package/dist/genesys-chart-webcomponents/p-1bc0cc3a.js +2 -0
  59. package/dist/genesys-chart-webcomponents/{p-b5179379.entry.js → p-25bdbf17.entry.js} +1 -1
  60. package/dist/genesys-chart-webcomponents/{p-c3aa8578.entry.js → p-74011efc.entry.js} +1 -1
  61. package/dist/genesys-chart-webcomponents/{p-97c45977.js → p-7e62b207.js} +1 -1
  62. package/dist/genesys-chart-webcomponents/p-e1255160.js +1 -0
  63. package/dist/genesys-chart-webcomponents/{p-d9928f8c.entry.js → p-e80b1b1c.entry.js} +1 -1
  64. package/dist/genesys-chart-webcomponents/{p-d4a346df.entry.js → p-f6cebcf8.entry.js} +1 -1
  65. package/dist/stencil-wrapper.js +1 -1
  66. package/dist/types/components/beta/gux-chart-column/gux-chart-column.d.ts +45 -45
  67. package/dist/types/components/beta/gux-chart-column/gux-chart-column.locale.d.ts +20 -20
  68. package/dist/types/components/beta/gux-chart-donut/gux-chart-donut.d.ts +30 -30
  69. package/dist/types/components/beta/gux-chart-line/gux-chart-line.d.ts +44 -44
  70. package/dist/types/components/beta/gux-chart-line/gux-chart-line.locale.d.ts +20 -20
  71. package/dist/types/components/beta/gux-chart-pie/gux-chart-pie.d.ts +19 -19
  72. package/dist/types/components/beta/gux-chart-scatter-plot/gux-chart-scatter-plot.d.ts +48 -48
  73. package/dist/types/components/beta/gux-visualization/gux-visualization.d.ts +13 -13
  74. package/dist/types/components/beta/gux-visualization/gux-visualization.locale.d.ts +20 -20
  75. package/dist/types/components.d.ts +12 -0
  76. package/dist/types/i18n/fetchResources.d.ts +3 -3
  77. package/dist/types/i18n/index.d.ts +1 -1
  78. package/dist/types/stencil-public-runtime.d.ts +10 -0
  79. package/dist/types/stencil-wrapper.d.ts +1 -1
  80. package/dist/types/test/axeConfig.d.ts +4 -4
  81. package/dist/types/test/e2eTestUtils.d.ts +4 -4
  82. package/dist/types/test/jestMatcherUtils.d.ts +4 -4
  83. package/dist/types/utils/tracking/usage.d.ts +11 -11
  84. package/package.json +24 -24
  85. package/dist/cjs/log-error-c46b4b4c.js +0 -21
  86. package/dist/component-specs.json +0 -187
  87. package/dist/esm/log-error-0fc61f6f.js +0 -18
  88. package/dist/genesys-chart-webcomponents/p-3e4b3dbc.js +0 -2
  89. package/dist/genesys-chart-webcomponents/p-b901e9e0.entry.js +0 -11
  90. /package/dist/genesys-chart-webcomponents/{p-82f0ea01.js → p-f50e3789.js} +0 -0
@@ -49,6 +49,13 @@ const uniqueTime = (key, measureText) => {
49
49
  }
50
50
  };
51
51
  const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
52
+ /**
53
+ * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
54
+ *
55
+ * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
56
+ * support as of Stencil v4.
57
+ */
58
+ const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
52
59
  /**
53
60
  * Default style mode id
54
61
  */
@@ -94,6 +101,7 @@ function queryNonceMetaTagContent(doc) {
94
101
  // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
95
102
  const h = (nodeName, vnodeData, ...children) => {
96
103
  let child = null;
104
+ let key = null;
97
105
  let simple = false;
98
106
  let lastSimple = false;
99
107
  const vNodeChildren = [];
@@ -120,11 +128,19 @@ const h = (nodeName, vnodeData, ...children) => {
120
128
  }
121
129
  };
122
130
  walk(children);
131
+ if (vnodeData) {
132
+ if (vnodeData.key) {
133
+ key = vnodeData.key;
134
+ }
135
+ }
123
136
  const vnode = newVNode(nodeName, null);
124
137
  vnode.$attrs$ = vnodeData;
125
138
  if (vNodeChildren.length > 0) {
126
139
  vnode.$children$ = vNodeChildren;
127
140
  }
141
+ {
142
+ vnode.$key$ = key;
143
+ }
128
144
  return vnode;
129
145
  };
130
146
  /**
@@ -146,6 +162,9 @@ const newVNode = (tag, text) => {
146
162
  {
147
163
  vnode.$attrs$ = null;
148
164
  }
165
+ {
166
+ vnode.$key$ = null;
167
+ }
149
168
  return vnode;
150
169
  };
151
170
  const Host = {};
@@ -272,6 +291,10 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
272
291
  }
273
292
  styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
274
293
  }
294
+ // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
295
+ if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
296
+ styleElm.innerHTML += SLOT_FB_CSS;
297
+ }
275
298
  if (appliedStyles) {
276
299
  appliedStyles.add(scopeId);
277
300
  }
@@ -330,7 +353,9 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
330
353
  if (oldValue !== newValue) {
331
354
  let isProp = isMemberInElement(elm, memberName);
332
355
  memberName.toLowerCase();
333
- if (memberName === 'ref') {
356
+ if (memberName === 'key')
357
+ ;
358
+ else if (memberName === 'ref') {
334
359
  // minifier will clean this up
335
360
  if (newValue) {
336
361
  newValue(elm);
@@ -355,7 +380,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
355
380
  elm[memberName] = newValue;
356
381
  }
357
382
  }
358
- catch (e) { }
383
+ catch (e) {
384
+ /**
385
+ * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
386
+ */
387
+ }
359
388
  }
360
389
  if (newValue == null || newValue === false) {
361
390
  if (newValue !== false || elm.getAttribute(memberName) === '') {
@@ -435,6 +464,9 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
435
464
  }
436
465
  }
437
466
  }
467
+ // This needs to always happen so we can hide nodes that are projected
468
+ // to another component but don't end up in a slot
469
+ elm['s-hn'] = hostTagName;
438
470
  return elm;
439
471
  };
440
472
  /**
@@ -559,10 +591,13 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
559
591
  * @param oldCh the old children of the parent node
560
592
  * @param newVNode the new VNode which will replace the parent
561
593
  * @param newCh the new children of the parent node
594
+ * @param isInitialRender whether or not this is the first render of the vdom
562
595
  */
563
- const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
596
+ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {
564
597
  let oldStartIdx = 0;
565
598
  let newStartIdx = 0;
599
+ let idxInOld = 0;
600
+ let i = 0;
566
601
  let oldEndIdx = oldCh.length - 1;
567
602
  let oldStartVnode = oldCh[0];
568
603
  let oldEndVnode = oldCh[oldEndIdx];
@@ -570,6 +605,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
570
605
  let newStartVnode = newCh[0];
571
606
  let newEndVnode = newCh[newEndIdx];
572
607
  let node;
608
+ let elmToMove;
573
609
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
574
610
  if (oldStartVnode == null) {
575
611
  // VNode might have been moved left
@@ -584,25 +620,25 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
584
620
  else if (newEndVnode == null) {
585
621
  newEndVnode = newCh[--newEndIdx];
586
622
  }
587
- else if (isSameVnode(oldStartVnode, newStartVnode)) {
623
+ else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
588
624
  // if the start nodes are the same then we should patch the new VNode
589
625
  // onto the old one, and increment our `newStartIdx` and `oldStartIdx`
590
626
  // indices to reflect that. We don't need to move any DOM Nodes around
591
627
  // since things are matched up in order.
592
- patch(oldStartVnode, newStartVnode);
628
+ patch(oldStartVnode, newStartVnode, isInitialRender);
593
629
  oldStartVnode = oldCh[++oldStartIdx];
594
630
  newStartVnode = newCh[++newStartIdx];
595
631
  }
596
- else if (isSameVnode(oldEndVnode, newEndVnode)) {
632
+ else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
597
633
  // likewise, if the end nodes are the same we patch new onto old and
598
634
  // decrement our end indices, and also likewise in this case we don't
599
635
  // need to move any DOM Nodes.
600
- patch(oldEndVnode, newEndVnode);
636
+ patch(oldEndVnode, newEndVnode, isInitialRender);
601
637
  oldEndVnode = oldCh[--oldEndIdx];
602
638
  newEndVnode = newCh[--newEndIdx];
603
639
  }
604
- else if (isSameVnode(oldStartVnode, newEndVnode)) {
605
- patch(oldStartVnode, newEndVnode);
640
+ else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
641
+ patch(oldStartVnode, newEndVnode, isInitialRender);
606
642
  // We need to move the element for `oldStartVnode` into a position which
607
643
  // will be appropriate for `newEndVnode`. For this we can use
608
644
  // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
@@ -624,8 +660,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
624
660
  oldStartVnode = oldCh[++oldStartIdx];
625
661
  newEndVnode = newCh[--newEndIdx];
626
662
  }
627
- else if (isSameVnode(oldEndVnode, newStartVnode)) {
628
- patch(oldEndVnode, newStartVnode);
663
+ else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
664
+ patch(oldEndVnode, newStartVnode, isInitialRender);
629
665
  // We've already checked above if `oldStartVnode` and `newStartVnode` are
630
666
  // the same node, so since we're here we know that they are not. Thus we
631
667
  // can move the element for `oldEndVnode` _before_ the element for
@@ -636,7 +672,41 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
636
672
  newStartVnode = newCh[++newStartIdx];
637
673
  }
638
674
  else {
675
+ // Here we do some checks to match up old and new nodes based on the
676
+ // `$key$` attribute, which is set by putting a `key="my-key"` attribute
677
+ // in the JSX for a DOM element in the implementation of a Stencil
678
+ // component.
679
+ //
680
+ // First we check to see if there are any nodes in the array of old
681
+ // children which have the same key as the first node in the new
682
+ // children.
683
+ idxInOld = -1;
639
684
  {
685
+ for (i = oldStartIdx; i <= oldEndIdx; ++i) {
686
+ if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
687
+ idxInOld = i;
688
+ break;
689
+ }
690
+ }
691
+ }
692
+ if (idxInOld >= 0) {
693
+ // We found a node in the old children which matches up with the first
694
+ // node in the new children! So let's deal with that
695
+ elmToMove = oldCh[idxInOld];
696
+ if (elmToMove.$tag$ !== newStartVnode.$tag$) {
697
+ // the tag doesn't match so we'll need a new DOM element
698
+ node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
699
+ }
700
+ else {
701
+ patch(elmToMove, newStartVnode, isInitialRender);
702
+ // invalidate the matching old node so that we won't try to update it
703
+ // again later on
704
+ oldCh[idxInOld] = undefined;
705
+ node = elmToMove.$elm$;
706
+ }
707
+ newStartVnode = newCh[++newStartIdx];
708
+ }
709
+ else {
640
710
  // We either didn't find an element in the old children that matches
641
711
  // the key of the first new child OR the build is not using `key`
642
712
  // attributes at all. In either case we need to create a new element
@@ -679,12 +749,21 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
679
749
  *
680
750
  * @param leftVNode the first VNode to check
681
751
  * @param rightVNode the second VNode to check
752
+ * @param isInitialRender whether or not this is the first render of the vdom
682
753
  * @returns whether they're equal or not
683
754
  */
684
- const isSameVnode = (leftVNode, rightVNode) => {
755
+ const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
685
756
  // compare if two vnode to see if they're "technically" the same
686
757
  // need to have the same element tag, and same key to be the same
687
758
  if (leftVNode.$tag$ === rightVNode.$tag$) {
759
+ // this will be set if JSX tags in the build have `key` attrs set on them
760
+ // we only want to check this if we're not on the first render since on
761
+ // first render `leftVNode.$key$` will always be `null`, so we can be led
762
+ // astray and, for instance, accidentally delete a DOM node that we want to
763
+ // keep around.
764
+ if (!isInitialRender) {
765
+ return leftVNode.$key$ === rightVNode.$key$;
766
+ }
688
767
  return true;
689
768
  }
690
769
  return false;
@@ -696,8 +775,9 @@ const isSameVnode = (leftVNode, rightVNode) => {
696
775
  *
697
776
  * @param oldVNode an old VNode whose DOM element and children we want to update
698
777
  * @param newVNode a new VNode representing an updated version of the old one
778
+ * @param isInitialRender whether or not this is the first render of the vdom
699
779
  */
700
- const patch = (oldVNode, newVNode) => {
780
+ const patch = (oldVNode, newVNode, isInitialRender = false) => {
701
781
  const elm = (newVNode.$elm$ = oldVNode.$elm$);
702
782
  const oldChildren = oldVNode.$children$;
703
783
  const newChildren = newVNode.$children$;
@@ -713,7 +793,7 @@ const patch = (oldVNode, newVNode) => {
713
793
  if (oldChildren !== null && newChildren !== null) {
714
794
  // looks like there's child vnodes for both the old and new vnodes
715
795
  // so we need to call `updateChildren` to reconcile them
716
- updateChildren(elm, oldChildren, newVNode, newChildren);
796
+ updateChildren(elm, oldChildren, newVNode, newChildren, isInitialRender);
717
797
  }
718
798
  else if (newChildren !== null) {
719
799
  // add the new vnode children
@@ -790,7 +870,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
790
870
  scopeId = hostElm['s-sc'];
791
871
  }
792
872
  // synchronous patch
793
- patch(oldVNode, rootVnode);
873
+ patch(oldVNode, rootVnode, isInitialLoad);
794
874
  };
795
875
  const attachToAncestor = (hostRef, ancestorComponent) => {
796
876
  if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
@@ -1097,13 +1177,13 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
1097
1177
  */
1098
1178
  const proxyComponent = (Cstr, cmpMeta, flags) => {
1099
1179
  var _a;
1180
+ const prototype = Cstr.prototype;
1100
1181
  if (cmpMeta.$members$) {
1101
1182
  if (Cstr.watchers) {
1102
1183
  cmpMeta.$watchers$ = Cstr.watchers;
1103
1184
  }
1104
1185
  // It's better to have a const than two Object.entries()
1105
1186
  const members = Object.entries(cmpMeta.$members$);
1106
- const prototype = Cstr.prototype;
1107
1187
  members.map(([memberName, [memberFlags]]) => {
1108
1188
  if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
1109
1189
  ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
@@ -1126,6 +1206,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1126
1206
  const attrNameToPropName = new Map();
1127
1207
  prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
1128
1208
  plt.jmp(() => {
1209
+ var _a;
1129
1210
  const propName = attrNameToPropName.get(attrName);
1130
1211
  // In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
1131
1212
  // in the case where an attribute was set inline.
@@ -1181,11 +1262,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1181
1262
  // 1. The instance is ready
1182
1263
  // 2. The watchers are ready
1183
1264
  // 3. The value has changed
1184
- if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
1265
+ if (flags &&
1266
+ !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
1185
1267
  flags & 128 /* HOST_FLAGS.isWatchReady */ &&
1186
1268
  newValue !== oldValue) {
1187
1269
  const instance = hostRef.$lazyInstance$ ;
1188
- const entry = cmpMeta.$watchers$[attrName];
1270
+ const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
1189
1271
  entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
1190
1272
  if (instance[callbackName] != null) {
1191
1273
  instance[callbackName].call(instance, newValue, oldValue, attrName);
@@ -1232,7 +1314,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
1232
1314
  if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
1233
1315
  // Let the runtime know that the component has been initialized
1234
1316
  hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
1235
- {
1317
+ const bundleId = cmpMeta.$lazyBundleId$;
1318
+ if (bundleId) {
1236
1319
  // lazy loaded components
1237
1320
  // request the component's implementation to be
1238
1321
  // wired up with the host element
@@ -1278,6 +1361,14 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
1278
1361
  }
1279
1362
  endNewInstance();
1280
1363
  }
1364
+ else {
1365
+ // sync constructor component
1366
+ Cstr = elm.constructor;
1367
+ // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise,
1368
+ // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_
1369
+ // Stencil has completed instantiating the component.
1370
+ customElements.whenDefined(cmpMeta.$tagName$).then(() => (hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */));
1371
+ }
1281
1372
  if (Cstr.style) {
1282
1373
  // this component has styles but we haven't registered them yet
1283
1374
  let style = Cstr.style;
@@ -1374,12 +1465,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1374
1465
  const customElements = win.customElements;
1375
1466
  const head = doc.head;
1376
1467
  const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
1377
- const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
1468
+ const dataStyles = /*@__PURE__*/ doc.createElement('style');
1378
1469
  const deferredConnectedCallbacks = [];
1379
1470
  let appLoadFallback;
1380
1471
  let isBootstrapping = true;
1381
1472
  Object.assign(plt, options);
1382
1473
  plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
1474
+ let hasSlotRelocation = false;
1383
1475
  lazyBundles.map((lazyBundle) => {
1384
1476
  lazyBundle[1].map((compactMeta) => {
1385
1477
  var _a;
@@ -1389,6 +1481,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1389
1481
  $members$: compactMeta[2],
1390
1482
  $listeners$: compactMeta[3],
1391
1483
  };
1484
+ // Check if we are using slots outside the shadow DOM in this component.
1485
+ // We'll use this information later to add styles for `slot-fb` elements
1486
+ if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
1487
+ hasSlotRelocation = true;
1488
+ }
1392
1489
  {
1393
1490
  cmpMeta.$members$ = compactMeta[2];
1394
1491
  }
@@ -1442,15 +1539,29 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1442
1539
  }
1443
1540
  });
1444
1541
  });
1445
- {
1446
- visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
1447
- visibilityStyle.setAttribute('data-styles', '');
1448
- // Apply CSP nonce to the style tag if it exists
1449
- const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
1450
- if (nonce != null) {
1451
- visibilityStyle.setAttribute('nonce', nonce);
1452
- }
1453
- head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
1542
+ // Only bother generating CSS if we have components
1543
+ // TODO(STENCIL-1118): Add test cases for CSS content based on conditionals
1544
+ if (cmpTags.length > 0) {
1545
+ // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
1546
+ if (hasSlotRelocation) {
1547
+ dataStyles.textContent += SLOT_FB_CSS;
1548
+ }
1549
+ // Add hydration styles
1550
+ {
1551
+ dataStyles.textContent += cmpTags + HYDRATED_CSS;
1552
+ }
1553
+ // If we have styles, add them to the DOM
1554
+ if (dataStyles.innerHTML.length) {
1555
+ dataStyles.setAttribute('data-styles', '');
1556
+ // Apply CSP nonce to the style tag if it exists
1557
+ const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
1558
+ if (nonce != null) {
1559
+ dataStyles.setAttribute('nonce', nonce);
1560
+ }
1561
+ // Insert the styles into the document head
1562
+ // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
1563
+ head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
1564
+ }
1454
1565
  }
1455
1566
  // Process deferred connectedCallbacks now all components have been registered
1456
1567
  isBootstrapping = false;
@@ -1475,8 +1586,19 @@ const setNonce = (nonce) => (plt.$nonce$ = nonce);
1475
1586
  /**
1476
1587
  * A WeakMap mapping runtime component references to their corresponding host reference
1477
1588
  * instances.
1589
+ *
1590
+ * **Note**: If we're in an HMR context we need to store a reference to this
1591
+ * value on `window` in order to maintain the mapping of {@link d.RuntimeRef}
1592
+ * to {@link d.HostRef} across HMR updates.
1593
+ *
1594
+ * This is necessary because when HMR updates for a component are processed by
1595
+ * the browser-side dev server client the JS bundle for that component is
1596
+ * re-fetched. Since the module containing {@link hostRefs} is included in
1597
+ * that bundle, if we do not store a reference to it the new iteration of the
1598
+ * component will not have access to the previous hostRef map, leading to a
1599
+ * bug where the new version of the component cannot properly initialize.
1478
1600
  */
1479
- const hostRefs = /*@__PURE__*/ new WeakMap();
1601
+ const hostRefs = new WeakMap();
1480
1602
  /**
1481
1603
  * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
1482
1604
  *
@@ -1528,39 +1650,39 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
1528
1650
  return module[exportName];
1529
1651
  }
1530
1652
 
1531
- if (!hmrVersionId || !BUILD.hotModuleReplacement) {
1532
- const processMod = importedModule => {
1533
- cmpModules.set(bundleId, importedModule);
1534
- return importedModule[exportName];
1535
- }
1536
- switch(bundleId) {
1537
-
1538
- case 'gux-chart-column-beta.cjs':
1539
- return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1540
- /* webpackMode: "lazy" */
1541
- './gux-chart-column-beta.cjs.entry.js')); }).then(processMod, consoleError);
1542
- case 'gux-chart-donut-beta.cjs':
1543
- return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1544
- /* webpackMode: "lazy" */
1545
- './gux-chart-donut-beta.cjs.entry.js')); }).then(processMod, consoleError);
1546
- case 'gux-chart-line-beta.cjs':
1547
- return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1548
- /* webpackMode: "lazy" */
1549
- './gux-chart-line-beta.cjs.entry.js')); }).then(processMod, consoleError);
1550
- case 'gux-chart-pie-beta.cjs':
1551
- return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1552
- /* webpackMode: "lazy" */
1553
- './gux-chart-pie-beta.cjs.entry.js')); }).then(processMod, consoleError);
1554
- case 'gux-chart-scatter-plot-beta.cjs':
1555
- return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1556
- /* webpackMode: "lazy" */
1557
- './gux-chart-scatter-plot-beta.cjs.entry.js')); }).then(processMod, consoleError);
1558
- case 'gux-visualization-beta.cjs':
1559
- return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1560
- /* webpackMode: "lazy" */
1561
- './gux-visualization-beta.cjs.entry.js')); }).then(processMod, consoleError);
1653
+ if (!hmrVersionId || !BUILD.hotModuleReplacement) {
1654
+ const processMod = importedModule => {
1655
+ cmpModules.set(bundleId, importedModule);
1656
+ return importedModule[exportName];
1657
+ }
1658
+ switch(bundleId) {
1659
+
1660
+ case 'gux-chart-column-beta.cjs':
1661
+ return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1662
+ /* webpackMode: "lazy" */
1663
+ './gux-chart-column-beta.cjs.entry.js')); }).then(processMod, consoleError);
1664
+ case 'gux-chart-donut-beta.cjs':
1665
+ return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1666
+ /* webpackMode: "lazy" */
1667
+ './gux-chart-donut-beta.cjs.entry.js')); }).then(processMod, consoleError);
1668
+ case 'gux-chart-line-beta.cjs':
1669
+ return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1670
+ /* webpackMode: "lazy" */
1671
+ './gux-chart-line-beta.cjs.entry.js')); }).then(processMod, consoleError);
1672
+ case 'gux-chart-pie-beta.cjs':
1673
+ return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1674
+ /* webpackMode: "lazy" */
1675
+ './gux-chart-pie-beta.cjs.entry.js')); }).then(processMod, consoleError);
1676
+ case 'gux-chart-scatter-plot-beta.cjs':
1677
+ return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1678
+ /* webpackMode: "lazy" */
1679
+ './gux-chart-scatter-plot-beta.cjs.entry.js')); }).then(processMod, consoleError);
1680
+ case 'gux-visualization-beta.cjs':
1681
+ return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1682
+ /* webpackMode: "lazy" */
1683
+ './gux-visualization-beta.cjs.entry.js')); }).then(processMod, consoleError);
1684
+ }
1562
1685
  }
1563
- }
1564
1686
  return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1565
1687
  /* @vite-ignore */
1566
1688
  /* webpackInclude: /\.entry\.js$/ */
@@ -1635,7 +1757,7 @@ const flush = () => {
1635
1757
  }
1636
1758
  }
1637
1759
  };
1638
- const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
1760
+ const nextTick = (cb) => promiseResolve().then(cb);
1639
1761
  const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1640
1762
 
1641
1763
  exports.bootstrapLazy = bootstrapLazy;
@@ -2,10 +2,12 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-1e13a15f.js');
5
+ const index = require('./index-a4712860.js');
6
+ const appGlobals = require('./app-globals-3a1e7e63.js');
6
7
 
7
- const defineCustomElements = (win, options) => {
8
+ const defineCustomElements = async (win, options) => {
8
9
  if (typeof window === 'undefined') return undefined;
10
+ await appGlobals.globalScripts();
9
11
  return index.bootstrapLazy([["gux-visualization-beta.cjs",[[1,"gux-visualization-beta",{"visualizationSpec":[16],"embedOptions":[16]}]]],["gux-chart-column-beta.cjs",[[1,"gux-chart-column-beta",{"chartData":[16],"xTickLabelSlant":[4,"x-tick-label-slant"],"includeLegend":[4,"include-legend"],"xFieldName":[1,"x-field-name"],"yFieldName":[1,"y-field-name"],"xAxisTitle":[1,"x-axis-title"],"yAxisTitle":[1,"y-axis-title"],"legendTitle":[1,"legend-title"],"legendPosition":[1,"legend-position"],"chartLayers":[16],"embedOptions":[16]},null,{"chartData":["parseData"]}]]],["gux-chart-donut-beta.cjs",[[1,"gux-chart-donut-beta",{"chartData":[16],"includeLegend":[4,"include-legend"],"legendPosition":[1,"legend-position"],"legendTitle":[1,"legend-title"],"colorFieldName":[1,"color-field-name"],"outerRadius":[2,"outer-radius"],"innerRadius":[2,"inner-radius"],"labelRadius":[2,"label-radius"],"labelField":[1,"label-field"],"gauge":[4],"centerText":[1,"center-text"],"centerSubText":[1,"center-sub-text"],"showTooltip":[4,"show-tooltip"],"tooltipOptions":[16],"legendX":[2,"legend-x"],"legendY":[2,"legend-y"],"legendFontSize":[2,"legend-font-size"],"legendSymbolSize":[2,"legend-symbol-size"],"embedOptions":[16]},null,{"chartData":["parseData"]}]]],["gux-chart-line-beta.cjs",[[1,"gux-chart-line-beta",{"chartData":[16],"xTickLabelSlant":[4,"x-tick-label-slant"],"includeLegend":[4,"include-legend"],"legendPosition":[1,"legend-position"],"includeDataPointMarkers":[4,"include-data-point-markers"],"xFieldName":[1,"x-field-name"],"xAxisTitle":[1,"x-axis-title"],"yFieldName":[1,"y-field-name"],"yAxisTitle":[1,"y-axis-title"],"legendTitle":[1,"legend-title"],"colorFieldName":[1,"color-field-name"],"strokeDash":[4,"stroke-dash"],"interpolation":[1],"embedOptions":[16]},null,{"chartData":["parseData"]}]]],["gux-chart-pie-beta.cjs",[[1,"gux-chart-pie-beta",{"chartData":[16],"includeLegend":[4,"include-legend"],"legendPosition":[1,"legend-position"],"legendTitle":[1,"legend-title"],"colorFieldName":[1,"color-field-name"],"outerRadius":[2,"outer-radius"],"labelRadius":[2,"label-radius"],"labelField":[1,"label-field"],"embedOptions":[16]},null,{"chartData":["parseData"]}]]],["gux-chart-scatter-plot-beta.cjs",[[1,"gux-chart-scatter-plot-beta",{"chartData":[16],"xTickLabelSlant":[4,"x-tick-label-slant"],"includeLegend":[4,"include-legend"],"legendPosition":[1,"legend-position"],"xFieldName":[1,"x-field-name"],"xAxisTitle":[1,"x-axis-title"],"yFieldName":[1,"y-field-name"],"yAxisTitle":[1,"y-axis-title"],"legendTitle":[1,"legend-title"],"colorFieldName":[1,"color-field-name"],"useShape":[1,"use-shape"],"embedOptions":[16]},null,{"chartData":["parseData"]}]]]], options);
10
12
  };
11
13
 
@@ -0,0 +1,21 @@
1
+ 'use strict';
2
+
3
+ const VISUALIZATION_COLORS = [
4
+ '#203B73',
5
+ '#1DA8B3',
6
+ '#75A8FF',
7
+ '#8452CF',
8
+ '#B5B5EB',
9
+ '#CC3EBE',
10
+ '#5E5782',
11
+ '#FF8FDD',
12
+ '#868C1E',
13
+ '#DDD933'
14
+ ];
15
+
16
+ function logError(component, message) {
17
+ console.error(`[${component.tagName.toLowerCase()}] ${message}`, component);
18
+ }
19
+
20
+ exports.VISUALIZATION_COLORS = VISUALIZATION_COLORS;
21
+ exports.logError = logError;