genesys-spark-chart-components 4.12.1-beta.1 → 4.29.1-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-c351d7fb.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-6655c04e.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-1bc0cc3a.js +2 -0
  57. package/dist/genesys-chart-webcomponents/{p-d4a346df.entry.js → p-291b128b.entry.js} +1 -1
  58. package/dist/genesys-chart-webcomponents/p-51f2502a.entry.js +11 -0
  59. package/dist/genesys-chart-webcomponents/{p-137f5b8f.entry.js → p-64f0b385.entry.js} +1 -1
  60. package/dist/genesys-chart-webcomponents/{p-b5179379.entry.js → p-65020b8a.entry.js} +1 -1
  61. package/dist/genesys-chart-webcomponents/{p-d9928f8c.entry.js → p-83283e73.entry.js} +1 -1
  62. package/dist/genesys-chart-webcomponents/p-e1255160.js +1 -0
  63. package/dist/genesys-chart-webcomponents/{p-c3aa8578.entry.js → p-e42dd3ba.entry.js} +1 -1
  64. package/dist/genesys-chart-webcomponents/{p-97c45977.js → p-f6832775.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
@@ -27,6 +27,13 @@ const uniqueTime = (key, measureText) => {
27
27
  }
28
28
  };
29
29
  const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
30
+ /**
31
+ * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
32
+ *
33
+ * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
34
+ * support as of Stencil v4.
35
+ */
36
+ const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
30
37
  /**
31
38
  * Default style mode id
32
39
  */
@@ -72,6 +79,7 @@ function queryNonceMetaTagContent(doc) {
72
79
  // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
73
80
  const h = (nodeName, vnodeData, ...children) => {
74
81
  let child = null;
82
+ let key = null;
75
83
  let simple = false;
76
84
  let lastSimple = false;
77
85
  const vNodeChildren = [];
@@ -98,11 +106,19 @@ const h = (nodeName, vnodeData, ...children) => {
98
106
  }
99
107
  };
100
108
  walk(children);
109
+ if (vnodeData) {
110
+ if (vnodeData.key) {
111
+ key = vnodeData.key;
112
+ }
113
+ }
101
114
  const vnode = newVNode(nodeName, null);
102
115
  vnode.$attrs$ = vnodeData;
103
116
  if (vNodeChildren.length > 0) {
104
117
  vnode.$children$ = vNodeChildren;
105
118
  }
119
+ {
120
+ vnode.$key$ = key;
121
+ }
106
122
  return vnode;
107
123
  };
108
124
  /**
@@ -124,6 +140,9 @@ const newVNode = (tag, text) => {
124
140
  {
125
141
  vnode.$attrs$ = null;
126
142
  }
143
+ {
144
+ vnode.$key$ = null;
145
+ }
127
146
  return vnode;
128
147
  };
129
148
  const Host = {};
@@ -250,6 +269,10 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
250
269
  }
251
270
  styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
252
271
  }
272
+ // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
273
+ if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
274
+ styleElm.innerHTML += SLOT_FB_CSS;
275
+ }
253
276
  if (appliedStyles) {
254
277
  appliedStyles.add(scopeId);
255
278
  }
@@ -308,7 +331,9 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
308
331
  if (oldValue !== newValue) {
309
332
  let isProp = isMemberInElement(elm, memberName);
310
333
  memberName.toLowerCase();
311
- if (memberName === 'ref') {
334
+ if (memberName === 'key')
335
+ ;
336
+ else if (memberName === 'ref') {
312
337
  // minifier will clean this up
313
338
  if (newValue) {
314
339
  newValue(elm);
@@ -333,7 +358,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
333
358
  elm[memberName] = newValue;
334
359
  }
335
360
  }
336
- catch (e) { }
361
+ catch (e) {
362
+ /**
363
+ * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
364
+ */
365
+ }
337
366
  }
338
367
  if (newValue == null || newValue === false) {
339
368
  if (newValue !== false || elm.getAttribute(memberName) === '') {
@@ -413,6 +442,9 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
413
442
  }
414
443
  }
415
444
  }
445
+ // This needs to always happen so we can hide nodes that are projected
446
+ // to another component but don't end up in a slot
447
+ elm['s-hn'] = hostTagName;
416
448
  return elm;
417
449
  };
418
450
  /**
@@ -537,10 +569,13 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
537
569
  * @param oldCh the old children of the parent node
538
570
  * @param newVNode the new VNode which will replace the parent
539
571
  * @param newCh the new children of the parent node
572
+ * @param isInitialRender whether or not this is the first render of the vdom
540
573
  */
541
- const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
574
+ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {
542
575
  let oldStartIdx = 0;
543
576
  let newStartIdx = 0;
577
+ let idxInOld = 0;
578
+ let i = 0;
544
579
  let oldEndIdx = oldCh.length - 1;
545
580
  let oldStartVnode = oldCh[0];
546
581
  let oldEndVnode = oldCh[oldEndIdx];
@@ -548,6 +583,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
548
583
  let newStartVnode = newCh[0];
549
584
  let newEndVnode = newCh[newEndIdx];
550
585
  let node;
586
+ let elmToMove;
551
587
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
552
588
  if (oldStartVnode == null) {
553
589
  // VNode might have been moved left
@@ -562,25 +598,25 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
562
598
  else if (newEndVnode == null) {
563
599
  newEndVnode = newCh[--newEndIdx];
564
600
  }
565
- else if (isSameVnode(oldStartVnode, newStartVnode)) {
601
+ else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
566
602
  // if the start nodes are the same then we should patch the new VNode
567
603
  // onto the old one, and increment our `newStartIdx` and `oldStartIdx`
568
604
  // indices to reflect that. We don't need to move any DOM Nodes around
569
605
  // since things are matched up in order.
570
- patch(oldStartVnode, newStartVnode);
606
+ patch(oldStartVnode, newStartVnode, isInitialRender);
571
607
  oldStartVnode = oldCh[++oldStartIdx];
572
608
  newStartVnode = newCh[++newStartIdx];
573
609
  }
574
- else if (isSameVnode(oldEndVnode, newEndVnode)) {
610
+ else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
575
611
  // likewise, if the end nodes are the same we patch new onto old and
576
612
  // decrement our end indices, and also likewise in this case we don't
577
613
  // need to move any DOM Nodes.
578
- patch(oldEndVnode, newEndVnode);
614
+ patch(oldEndVnode, newEndVnode, isInitialRender);
579
615
  oldEndVnode = oldCh[--oldEndIdx];
580
616
  newEndVnode = newCh[--newEndIdx];
581
617
  }
582
- else if (isSameVnode(oldStartVnode, newEndVnode)) {
583
- patch(oldStartVnode, newEndVnode);
618
+ else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
619
+ patch(oldStartVnode, newEndVnode, isInitialRender);
584
620
  // We need to move the element for `oldStartVnode` into a position which
585
621
  // will be appropriate for `newEndVnode`. For this we can use
586
622
  // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
@@ -602,8 +638,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
602
638
  oldStartVnode = oldCh[++oldStartIdx];
603
639
  newEndVnode = newCh[--newEndIdx];
604
640
  }
605
- else if (isSameVnode(oldEndVnode, newStartVnode)) {
606
- patch(oldEndVnode, newStartVnode);
641
+ else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
642
+ patch(oldEndVnode, newStartVnode, isInitialRender);
607
643
  // We've already checked above if `oldStartVnode` and `newStartVnode` are
608
644
  // the same node, so since we're here we know that they are not. Thus we
609
645
  // can move the element for `oldEndVnode` _before_ the element for
@@ -614,7 +650,41 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
614
650
  newStartVnode = newCh[++newStartIdx];
615
651
  }
616
652
  else {
653
+ // Here we do some checks to match up old and new nodes based on the
654
+ // `$key$` attribute, which is set by putting a `key="my-key"` attribute
655
+ // in the JSX for a DOM element in the implementation of a Stencil
656
+ // component.
657
+ //
658
+ // First we check to see if there are any nodes in the array of old
659
+ // children which have the same key as the first node in the new
660
+ // children.
661
+ idxInOld = -1;
617
662
  {
663
+ for (i = oldStartIdx; i <= oldEndIdx; ++i) {
664
+ if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
665
+ idxInOld = i;
666
+ break;
667
+ }
668
+ }
669
+ }
670
+ if (idxInOld >= 0) {
671
+ // We found a node in the old children which matches up with the first
672
+ // node in the new children! So let's deal with that
673
+ elmToMove = oldCh[idxInOld];
674
+ if (elmToMove.$tag$ !== newStartVnode.$tag$) {
675
+ // the tag doesn't match so we'll need a new DOM element
676
+ node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
677
+ }
678
+ else {
679
+ patch(elmToMove, newStartVnode, isInitialRender);
680
+ // invalidate the matching old node so that we won't try to update it
681
+ // again later on
682
+ oldCh[idxInOld] = undefined;
683
+ node = elmToMove.$elm$;
684
+ }
685
+ newStartVnode = newCh[++newStartIdx];
686
+ }
687
+ else {
618
688
  // We either didn't find an element in the old children that matches
619
689
  // the key of the first new child OR the build is not using `key`
620
690
  // attributes at all. In either case we need to create a new element
@@ -657,12 +727,21 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
657
727
  *
658
728
  * @param leftVNode the first VNode to check
659
729
  * @param rightVNode the second VNode to check
730
+ * @param isInitialRender whether or not this is the first render of the vdom
660
731
  * @returns whether they're equal or not
661
732
  */
662
- const isSameVnode = (leftVNode, rightVNode) => {
733
+ const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
663
734
  // compare if two vnode to see if they're "technically" the same
664
735
  // need to have the same element tag, and same key to be the same
665
736
  if (leftVNode.$tag$ === rightVNode.$tag$) {
737
+ // this will be set if JSX tags in the build have `key` attrs set on them
738
+ // we only want to check this if we're not on the first render since on
739
+ // first render `leftVNode.$key$` will always be `null`, so we can be led
740
+ // astray and, for instance, accidentally delete a DOM node that we want to
741
+ // keep around.
742
+ if (!isInitialRender) {
743
+ return leftVNode.$key$ === rightVNode.$key$;
744
+ }
666
745
  return true;
667
746
  }
668
747
  return false;
@@ -674,8 +753,9 @@ const isSameVnode = (leftVNode, rightVNode) => {
674
753
  *
675
754
  * @param oldVNode an old VNode whose DOM element and children we want to update
676
755
  * @param newVNode a new VNode representing an updated version of the old one
756
+ * @param isInitialRender whether or not this is the first render of the vdom
677
757
  */
678
- const patch = (oldVNode, newVNode) => {
758
+ const patch = (oldVNode, newVNode, isInitialRender = false) => {
679
759
  const elm = (newVNode.$elm$ = oldVNode.$elm$);
680
760
  const oldChildren = oldVNode.$children$;
681
761
  const newChildren = newVNode.$children$;
@@ -691,7 +771,7 @@ const patch = (oldVNode, newVNode) => {
691
771
  if (oldChildren !== null && newChildren !== null) {
692
772
  // looks like there's child vnodes for both the old and new vnodes
693
773
  // so we need to call `updateChildren` to reconcile them
694
- updateChildren(elm, oldChildren, newVNode, newChildren);
774
+ updateChildren(elm, oldChildren, newVNode, newChildren, isInitialRender);
695
775
  }
696
776
  else if (newChildren !== null) {
697
777
  // add the new vnode children
@@ -768,7 +848,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
768
848
  scopeId = hostElm['s-sc'];
769
849
  }
770
850
  // synchronous patch
771
- patch(oldVNode, rootVnode);
851
+ patch(oldVNode, rootVnode, isInitialLoad);
772
852
  };
773
853
  const attachToAncestor = (hostRef, ancestorComponent) => {
774
854
  if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
@@ -1075,13 +1155,13 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
1075
1155
  */
1076
1156
  const proxyComponent = (Cstr, cmpMeta, flags) => {
1077
1157
  var _a;
1158
+ const prototype = Cstr.prototype;
1078
1159
  if (cmpMeta.$members$) {
1079
1160
  if (Cstr.watchers) {
1080
1161
  cmpMeta.$watchers$ = Cstr.watchers;
1081
1162
  }
1082
1163
  // It's better to have a const than two Object.entries()
1083
1164
  const members = Object.entries(cmpMeta.$members$);
1084
- const prototype = Cstr.prototype;
1085
1165
  members.map(([memberName, [memberFlags]]) => {
1086
1166
  if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
1087
1167
  ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
@@ -1104,6 +1184,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1104
1184
  const attrNameToPropName = new Map();
1105
1185
  prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
1106
1186
  plt.jmp(() => {
1187
+ var _a;
1107
1188
  const propName = attrNameToPropName.get(attrName);
1108
1189
  // In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
1109
1190
  // in the case where an attribute was set inline.
@@ -1159,11 +1240,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1159
1240
  // 1. The instance is ready
1160
1241
  // 2. The watchers are ready
1161
1242
  // 3. The value has changed
1162
- if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
1243
+ if (flags &&
1244
+ !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
1163
1245
  flags & 128 /* HOST_FLAGS.isWatchReady */ &&
1164
1246
  newValue !== oldValue) {
1165
1247
  const instance = hostRef.$lazyInstance$ ;
1166
- const entry = cmpMeta.$watchers$[attrName];
1248
+ const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
1167
1249
  entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
1168
1250
  if (instance[callbackName] != null) {
1169
1251
  instance[callbackName].call(instance, newValue, oldValue, attrName);
@@ -1210,7 +1292,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
1210
1292
  if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
1211
1293
  // Let the runtime know that the component has been initialized
1212
1294
  hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
1213
- {
1295
+ const bundleId = cmpMeta.$lazyBundleId$;
1296
+ if (bundleId) {
1214
1297
  // lazy loaded components
1215
1298
  // request the component's implementation to be
1216
1299
  // wired up with the host element
@@ -1256,6 +1339,14 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
1256
1339
  }
1257
1340
  endNewInstance();
1258
1341
  }
1342
+ else {
1343
+ // sync constructor component
1344
+ Cstr = elm.constructor;
1345
+ // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise,
1346
+ // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_
1347
+ // Stencil has completed instantiating the component.
1348
+ customElements.whenDefined(cmpMeta.$tagName$).then(() => (hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */));
1349
+ }
1259
1350
  if (Cstr.style) {
1260
1351
  // this component has styles but we haven't registered them yet
1261
1352
  let style = Cstr.style;
@@ -1352,12 +1443,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1352
1443
  const customElements = win.customElements;
1353
1444
  const head = doc.head;
1354
1445
  const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
1355
- const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
1446
+ const dataStyles = /*@__PURE__*/ doc.createElement('style');
1356
1447
  const deferredConnectedCallbacks = [];
1357
1448
  let appLoadFallback;
1358
1449
  let isBootstrapping = true;
1359
1450
  Object.assign(plt, options);
1360
1451
  plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
1452
+ let hasSlotRelocation = false;
1361
1453
  lazyBundles.map((lazyBundle) => {
1362
1454
  lazyBundle[1].map((compactMeta) => {
1363
1455
  var _a;
@@ -1367,6 +1459,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1367
1459
  $members$: compactMeta[2],
1368
1460
  $listeners$: compactMeta[3],
1369
1461
  };
1462
+ // Check if we are using slots outside the shadow DOM in this component.
1463
+ // We'll use this information later to add styles for `slot-fb` elements
1464
+ if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
1465
+ hasSlotRelocation = true;
1466
+ }
1370
1467
  {
1371
1468
  cmpMeta.$members$ = compactMeta[2];
1372
1469
  }
@@ -1420,15 +1517,29 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1420
1517
  }
1421
1518
  });
1422
1519
  });
1423
- {
1424
- visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
1425
- visibilityStyle.setAttribute('data-styles', '');
1426
- // Apply CSP nonce to the style tag if it exists
1427
- const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
1428
- if (nonce != null) {
1429
- visibilityStyle.setAttribute('nonce', nonce);
1430
- }
1431
- head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
1520
+ // Only bother generating CSS if we have components
1521
+ // TODO(STENCIL-1118): Add test cases for CSS content based on conditionals
1522
+ if (cmpTags.length > 0) {
1523
+ // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
1524
+ if (hasSlotRelocation) {
1525
+ dataStyles.textContent += SLOT_FB_CSS;
1526
+ }
1527
+ // Add hydration styles
1528
+ {
1529
+ dataStyles.textContent += cmpTags + HYDRATED_CSS;
1530
+ }
1531
+ // If we have styles, add them to the DOM
1532
+ if (dataStyles.innerHTML.length) {
1533
+ dataStyles.setAttribute('data-styles', '');
1534
+ // Apply CSP nonce to the style tag if it exists
1535
+ const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
1536
+ if (nonce != null) {
1537
+ dataStyles.setAttribute('nonce', nonce);
1538
+ }
1539
+ // Insert the styles into the document head
1540
+ // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
1541
+ head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
1542
+ }
1432
1543
  }
1433
1544
  // Process deferred connectedCallbacks now all components have been registered
1434
1545
  isBootstrapping = false;
@@ -1453,8 +1564,19 @@ const setNonce = (nonce) => (plt.$nonce$ = nonce);
1453
1564
  /**
1454
1565
  * A WeakMap mapping runtime component references to their corresponding host reference
1455
1566
  * instances.
1567
+ *
1568
+ * **Note**: If we're in an HMR context we need to store a reference to this
1569
+ * value on `window` in order to maintain the mapping of {@link d.RuntimeRef}
1570
+ * to {@link d.HostRef} across HMR updates.
1571
+ *
1572
+ * This is necessary because when HMR updates for a component are processed by
1573
+ * the browser-side dev server client the JS bundle for that component is
1574
+ * re-fetched. Since the module containing {@link hostRefs} is included in
1575
+ * that bundle, if we do not store a reference to it the new iteration of the
1576
+ * component will not have access to the previous hostRef map, leading to a
1577
+ * bug where the new version of the component cannot properly initialize.
1456
1578
  */
1457
- const hostRefs = /*@__PURE__*/ new WeakMap();
1579
+ const hostRefs = new WeakMap();
1458
1580
  /**
1459
1581
  * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
1460
1582
  *
@@ -1506,39 +1628,39 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
1506
1628
  return module[exportName];
1507
1629
  }
1508
1630
 
1509
- if (!hmrVersionId || !BUILD.hotModuleReplacement) {
1510
- const processMod = importedModule => {
1511
- cmpModules.set(bundleId, importedModule);
1512
- return importedModule[exportName];
1631
+ if (!hmrVersionId || !BUILD.hotModuleReplacement) {
1632
+ const processMod = importedModule => {
1633
+ cmpModules.set(bundleId, importedModule);
1634
+ return importedModule[exportName];
1635
+ }
1636
+ switch(bundleId) {
1637
+
1638
+ case 'gux-chart-column-beta':
1639
+ return import(
1640
+ /* webpackMode: "lazy" */
1641
+ './gux-chart-column-beta.entry.js').then(processMod, consoleError);
1642
+ case 'gux-chart-donut-beta':
1643
+ return import(
1644
+ /* webpackMode: "lazy" */
1645
+ './gux-chart-donut-beta.entry.js').then(processMod, consoleError);
1646
+ case 'gux-chart-line-beta':
1647
+ return import(
1648
+ /* webpackMode: "lazy" */
1649
+ './gux-chart-line-beta.entry.js').then(processMod, consoleError);
1650
+ case 'gux-chart-pie-beta':
1651
+ return import(
1652
+ /* webpackMode: "lazy" */
1653
+ './gux-chart-pie-beta.entry.js').then(processMod, consoleError);
1654
+ case 'gux-chart-scatter-plot-beta':
1655
+ return import(
1656
+ /* webpackMode: "lazy" */
1657
+ './gux-chart-scatter-plot-beta.entry.js').then(processMod, consoleError);
1658
+ case 'gux-visualization-beta':
1659
+ return import(
1660
+ /* webpackMode: "lazy" */
1661
+ './gux-visualization-beta.entry.js').then(processMod, consoleError);
1662
+ }
1513
1663
  }
1514
- switch(bundleId) {
1515
-
1516
- case 'gux-chart-column-beta':
1517
- return import(
1518
- /* webpackMode: "lazy" */
1519
- './gux-chart-column-beta.entry.js').then(processMod, consoleError);
1520
- case 'gux-chart-donut-beta':
1521
- return import(
1522
- /* webpackMode: "lazy" */
1523
- './gux-chart-donut-beta.entry.js').then(processMod, consoleError);
1524
- case 'gux-chart-line-beta':
1525
- return import(
1526
- /* webpackMode: "lazy" */
1527
- './gux-chart-line-beta.entry.js').then(processMod, consoleError);
1528
- case 'gux-chart-pie-beta':
1529
- return import(
1530
- /* webpackMode: "lazy" */
1531
- './gux-chart-pie-beta.entry.js').then(processMod, consoleError);
1532
- case 'gux-chart-scatter-plot-beta':
1533
- return import(
1534
- /* webpackMode: "lazy" */
1535
- './gux-chart-scatter-plot-beta.entry.js').then(processMod, consoleError);
1536
- case 'gux-visualization-beta':
1537
- return import(
1538
- /* webpackMode: "lazy" */
1539
- './gux-visualization-beta.entry.js').then(processMod, consoleError);
1540
- }
1541
- }
1542
1664
  return import(
1543
1665
  /* @vite-ignore */
1544
1666
  /* webpackInclude: /\.entry\.js$/ */
@@ -1613,7 +1735,7 @@ const flush = () => {
1613
1735
  }
1614
1736
  }
1615
1737
  };
1616
- const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
1738
+ const nextTick = (cb) => promiseResolve().then(cb);
1617
1739
  const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1618
1740
 
1619
1741
  export { bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
@@ -1,8 +1,10 @@
1
- import { b as bootstrapLazy } from './index-701d93cf.js';
2
- export { s as setNonce } from './index-701d93cf.js';
1
+ import { b as bootstrapLazy } from './index-82fd7406.js';
2
+ export { s as setNonce } from './index-82fd7406.js';
3
+ import { g as globalScripts } from './app-globals-0f993ce5.js';
3
4
 
4
- const defineCustomElements = (win, options) => {
5
+ const defineCustomElements = async (win, options) => {
5
6
  if (typeof window === 'undefined') return undefined;
7
+ await globalScripts();
6
8
  return bootstrapLazy([["gux-visualization-beta",[[1,"gux-visualization-beta",{"visualizationSpec":[16],"embedOptions":[16]}]]],["gux-chart-column-beta",[[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",[[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",[[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",[[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",[[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);
7
9
  };
8
10
 
@@ -0,0 +1,18 @@
1
+ const VISUALIZATION_COLORS = [
2
+ '#203B73',
3
+ '#1DA8B3',
4
+ '#75A8FF',
5
+ '#8452CF',
6
+ '#B5B5EB',
7
+ '#CC3EBE',
8
+ '#5E5782',
9
+ '#FF8FDD',
10
+ '#868C1E',
11
+ '#DDD933'
12
+ ];
13
+
14
+ function logError(component, message) {
15
+ console.error(`[${component.tagName.toLowerCase()}] ${message}`, component);
16
+ }
17
+
18
+ export { VISUALIZATION_COLORS as V, logError as l };