@rededor/cura 0.3.4-alpha.1 → 0.3.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.
Files changed (193) hide show
  1. package/dist/cjs/{app-globals-0f70160b.js → app-globals-a41d7f40.js} +40 -17
  2. package/dist/cjs/app-globals-a41d7f40.js.map +1 -0
  3. package/dist/cjs/css-shim-83cf0349.js +8 -0
  4. package/dist/cjs/css-shim-83cf0349.js.map +1 -0
  5. package/dist/cjs/cura-button_6.cjs.entry.js +334 -0
  6. package/dist/cjs/cura-button_6.cjs.entry.js.map +1 -0
  7. package/dist/cjs/cura-icons-view.cjs.entry.js +4 -2
  8. package/dist/cjs/cura-icons-view.cjs.entry.js.map +1 -0
  9. package/dist/cjs/cura.cjs.js +19 -4
  10. package/dist/cjs/cura.cjs.js.map +1 -0
  11. package/dist/cjs/{index-76f95c4b.js → index-0e874533.js} +256 -37
  12. package/dist/cjs/index-0e874533.js.map +1 -0
  13. package/dist/cjs/index.cjs.js +2 -0
  14. package/dist/cjs/index.cjs.js.map +1 -0
  15. package/dist/cjs/loader.cjs.js +23 -4
  16. package/dist/cjs/loader.cjs.js.map +1 -0
  17. package/dist/cjs/shadow-css-8baae635.js +391 -0
  18. package/dist/cjs/shadow-css-8baae635.js.map +1 -0
  19. package/dist/collection/api/cura-api.js +1 -0
  20. package/dist/collection/api/cura-api.js.map +1 -0
  21. package/dist/collection/api/cura-api.type.js +1 -0
  22. package/dist/collection/api/cura-api.type.js.map +1 -0
  23. package/dist/collection/api/modules/cura-theme-colors-module.js +1 -0
  24. package/dist/collection/api/modules/cura-theme-colors-module.js.map +1 -0
  25. package/dist/collection/api/modules/cura-theme-fonts-module.js +1 -0
  26. package/dist/collection/api/modules/cura-theme-fonts-module.js.map +1 -0
  27. package/dist/collection/api/modules/cura-theme-module.js +1 -0
  28. package/dist/collection/api/modules/cura-theme-module.js.map +1 -0
  29. package/dist/collection/api/modules/cura-theme-spacing-module.js +1 -0
  30. package/dist/collection/api/modules/cura-theme-spacing-module.js.map +1 -0
  31. package/dist/collection/api/theme-presets/static.js +1 -0
  32. package/dist/collection/api/theme-presets/static.js.map +1 -0
  33. package/dist/collection/api/theme-presets/theme-default.js +6 -5
  34. package/dist/collection/api/theme-presets/theme-default.js.map +1 -0
  35. package/dist/collection/api/theme-presets/theme-maternity.js +8 -0
  36. package/dist/collection/api/theme-presets/theme-maternity.js.map +1 -0
  37. package/dist/collection/api/theme-presets/theme-oncology.js +27 -12
  38. package/dist/collection/api/theme-presets/theme-oncology.js.map +1 -0
  39. package/dist/collection/api/theme-presets/theme-presets.js +1 -0
  40. package/dist/collection/api/theme-presets/theme-presets.js.map +1 -0
  41. package/dist/collection/assets/icons/iconset-default-list.js +1 -0
  42. package/dist/collection/assets/icons/iconset-default-list.js.map +1 -0
  43. package/dist/collection/collection-manifest.json +3 -2
  44. package/dist/collection/components/buttons/cura-button/cura-button.css +161 -0
  45. package/dist/collection/components/buttons/cura-button/cura-button.js +285 -0
  46. package/dist/collection/components/buttons/cura-button/cura-button.js.map +1 -0
  47. package/dist/collection/components/cura-icon/cura-icon.css +2 -2
  48. package/dist/collection/components/cura-icon/cura-icon.js +8 -5
  49. package/dist/collection/components/cura-icon/cura-icon.js.map +1 -0
  50. package/dist/collection/components/cura-icons-view/cura-icons-view.js +3 -1
  51. package/dist/collection/components/cura-icons-view/cura-icons-view.js.map +1 -0
  52. package/dist/collection/components/cura-page-template/cura-page-template.css +24 -24
  53. package/dist/collection/components/cura-page-template/cura-page-template.js +3 -1
  54. package/dist/collection/components/cura-page-template/cura-page-template.js.map +1 -0
  55. package/dist/collection/components/text/cura-display/cura-display.css +13 -14
  56. package/dist/collection/components/text/cura-display/cura-display.js +3 -17
  57. package/dist/collection/components/text/cura-display/cura-display.js.map +1 -0
  58. package/dist/collection/components/text/cura-heading/cura-heading.css +15 -15
  59. package/dist/collection/components/text/cura-heading/cura-heading.js +3 -21
  60. package/dist/collection/components/text/cura-heading/cura-heading.js.map +1 -0
  61. package/dist/collection/components/text/cura-paragraph/cura-paragraph.css +16 -17
  62. package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +3 -13
  63. package/dist/collection/components/text/cura-paragraph/cura-paragraph.js.map +1 -0
  64. package/dist/collection/index.js +1 -0
  65. package/dist/collection/index.js.map +1 -0
  66. package/dist/collection/rededor-cura-start.js +1 -0
  67. package/dist/collection/rededor-cura-start.js.map +1 -0
  68. package/dist/collection/utils/utils.js +1 -0
  69. package/dist/collection/utils/utils.js.map +1 -0
  70. package/dist/collection/utils/utils.spec.js +16 -0
  71. package/dist/collection/utils/utils.spec.js.map +1 -0
  72. package/dist/components/cura-button.d.ts +11 -0
  73. package/dist/components/cura-button.js +110 -0
  74. package/dist/components/cura-button.js.map +1 -0
  75. package/dist/components/cura-display.js +7 -20
  76. package/dist/components/cura-display.js.map +1 -0
  77. package/dist/components/cura-heading.js +7 -24
  78. package/dist/components/cura-heading.js.map +1 -0
  79. package/dist/components/cura-icon.js +2 -0
  80. package/dist/components/cura-icon.js.map +1 -0
  81. package/dist/components/cura-icon2.js +12 -8
  82. package/dist/components/cura-icon2.js.map +1 -0
  83. package/dist/components/cura-icons-view.js +6 -3
  84. package/dist/components/cura-icons-view.js.map +1 -0
  85. package/dist/components/cura-page-template.js +7 -4
  86. package/dist/components/cura-page-template.js.map +1 -0
  87. package/dist/components/cura-paragraph.js +7 -16
  88. package/dist/components/cura-paragraph.js.map +1 -0
  89. package/dist/components/index.d.ts +21 -9
  90. package/dist/components/index.js +67 -24
  91. package/dist/components/index.js.map +1 -0
  92. package/dist/cura/cura.esm.js +2 -1
  93. package/dist/cura/cura.esm.js.map +1 -0
  94. package/dist/cura/cura.js +3 -1
  95. package/dist/cura/index.esm.js +2 -0
  96. package/dist/cura/index.esm.js.map +1 -0
  97. package/dist/cura/p-118112e5.system.js +14 -0
  98. package/dist/cura/p-118112e5.system.js.map +1 -0
  99. package/dist/cura/p-183305c3.js +2 -0
  100. package/dist/cura/p-183305c3.js.map +1 -0
  101. package/dist/cura/p-36c8b693.system.js +2 -0
  102. package/dist/cura/p-36c8b693.system.js.map +1 -0
  103. package/dist/cura/p-3f6aaefc.system.js +2 -0
  104. package/dist/cura/p-3f6aaefc.system.js.map +1 -0
  105. package/dist/cura/p-4fc49972.system.js +2 -0
  106. package/dist/cura/p-4fc49972.system.js.map +1 -0
  107. package/dist/cura/p-50ea2036.system.js +2 -1
  108. package/dist/cura/p-50ea2036.system.js.map +1 -0
  109. package/dist/cura/{p-54c09404.system.entry.js → p-825028d1.system.entry.js} +2 -1
  110. package/dist/cura/p-825028d1.system.entry.js.map +1 -0
  111. package/dist/cura/p-a84ae34f.system.js +3 -0
  112. package/dist/cura/p-a84ae34f.system.js.map +1 -0
  113. package/dist/cura/p-bac0b4ab.js +2 -0
  114. package/dist/cura/p-bac0b4ab.js.map +1 -0
  115. package/dist/cura/p-beab48cd.js +13 -0
  116. package/dist/cura/p-beab48cd.js.map +1 -0
  117. package/dist/cura/p-cbc91ac5.js +3 -0
  118. package/dist/cura/p-cbc91ac5.js.map +1 -0
  119. package/dist/cura/p-e32ae366.entry.js +2 -0
  120. package/dist/cura/p-e32ae366.entry.js.map +1 -0
  121. package/dist/cura/p-e5fd4452.system.entry.js +2 -0
  122. package/dist/cura/p-e5fd4452.system.entry.js.map +1 -0
  123. package/dist/cura/p-e7785610.entry.js +2 -0
  124. package/dist/cura/p-e7785610.entry.js.map +1 -0
  125. package/dist/esm/{app-globals-cb45bff3.js → app-globals-8ed931e6.js} +40 -17
  126. package/dist/esm/app-globals-8ed931e6.js.map +1 -0
  127. package/dist/esm/css-shim-d13f0738.js +6 -0
  128. package/dist/esm/css-shim-d13f0738.js.map +1 -0
  129. package/dist/esm/cura-button_6.entry.js +325 -0
  130. package/dist/esm/cura-button_6.entry.js.map +1 -0
  131. package/dist/esm/cura-icons-view.entry.js +4 -2
  132. package/dist/esm/cura-icons-view.entry.js.map +1 -0
  133. package/dist/esm/cura.js +16 -4
  134. package/dist/esm/cura.js.map +1 -0
  135. package/dist/esm/{index-7e8c969d.js → index-92c824be.js} +253 -38
  136. package/dist/esm/index-92c824be.js.map +1 -0
  137. package/dist/esm/index.js +2 -0
  138. package/dist/esm/index.js.map +1 -0
  139. package/dist/esm/loader.js +23 -4
  140. package/dist/esm/loader.js.map +1 -0
  141. package/dist/esm/polyfills/css-shim.js +1 -1
  142. package/dist/esm/shadow-css-07b0c8c8.js +389 -0
  143. package/dist/esm/shadow-css-07b0c8c8.js.map +1 -0
  144. package/dist/esm-es5/app-globals-8ed931e6.js +2 -0
  145. package/dist/esm-es5/app-globals-8ed931e6.js.map +1 -0
  146. package/dist/esm-es5/css-shim-d13f0738.js +2 -0
  147. package/dist/esm-es5/css-shim-d13f0738.js.map +1 -0
  148. package/dist/esm-es5/cura-button_6.entry.js +2 -0
  149. package/dist/esm-es5/cura-button_6.entry.js.map +1 -0
  150. package/dist/esm-es5/cura-icons-view.entry.js +2 -1
  151. package/dist/esm-es5/cura-icons-view.entry.js.map +1 -0
  152. package/dist/esm-es5/cura.js +2 -1
  153. package/dist/esm-es5/cura.js.map +1 -0
  154. package/dist/esm-es5/index-92c824be.js +3 -0
  155. package/dist/esm-es5/index-92c824be.js.map +1 -0
  156. package/dist/esm-es5/index.js +2 -0
  157. package/dist/esm-es5/index.js.map +1 -0
  158. package/dist/esm-es5/loader.js +2 -1
  159. package/dist/esm-es5/loader.js.map +1 -0
  160. package/dist/esm-es5/shadow-css-07b0c8c8.js +13 -0
  161. package/dist/esm-es5/shadow-css-07b0c8c8.js.map +1 -0
  162. package/dist/{dist/loader → loader}/cdn.js +1 -1
  163. package/dist/{dist/loader → loader}/index.cjs.js +1 -1
  164. package/dist/{dist/loader → loader}/index.d.ts +10 -1
  165. package/dist/loader/index.es2017.js +3 -0
  166. package/dist/{dist/loader → loader}/index.js +2 -2
  167. package/dist/types/api/theme-presets/theme-maternity.d.ts +7 -0
  168. package/dist/types/api/theme-presets/theme-oncology.d.ts +5 -5
  169. package/dist/types/api/theme-presets/theme-presets.d.ts +12 -5
  170. package/dist/types/components/buttons/cura-button/cura-button.d.ts +54 -0
  171. package/dist/types/components.d.ts +101 -0
  172. package/dist/types/stencil-public-runtime.d.ts +77 -15
  173. package/package.json +7 -7
  174. package/dist/cjs/cura-display_4.cjs.entry.js +0 -257
  175. package/dist/cjs/cura-icon.cjs.entry.js +0 -59
  176. package/dist/cura/p-0b79032f.system.js +0 -2
  177. package/dist/cura/p-11002b56.system.js +0 -1
  178. package/dist/cura/p-32769783.system.js +0 -1
  179. package/dist/cura/p-57c5329e.js +0 -2
  180. package/dist/cura/p-5a6643e1.entry.js +0 -1
  181. package/dist/cura/p-a2ad5637.system.entry.js +0 -1
  182. package/dist/cura/p-aca36c98.js +0 -1
  183. package/dist/cura/p-bd91ecb9.system.entry.js +0 -1
  184. package/dist/cura/p-d69916ee.entry.js +0 -1
  185. package/dist/cura/p-f8a5b97d.entry.js +0 -1
  186. package/dist/dist/loader/index.es2017.js +0 -3
  187. package/dist/esm/cura-display_4.entry.js +0 -250
  188. package/dist/esm/cura-icon.entry.js +0 -55
  189. package/dist/esm-es5/app-globals-cb45bff3.js +0 -1
  190. package/dist/esm-es5/cura-display_4.entry.js +0 -1
  191. package/dist/esm-es5/cura-icon.entry.js +0 -1
  192. package/dist/esm-es5/index-7e8c969d.js +0 -2
  193. /package/dist/{dist/loader → loader}/package.json +0 -0
@@ -30,6 +30,7 @@ const NAMESPACE = 'cura';
30
30
  *
31
31
  * Modified for Stencil's renderer and slot projection
32
32
  */
33
+ let scopeId;
33
34
  let contentRef;
34
35
  let hostTagName;
35
36
  let useNativeShadowDom = false;
@@ -66,11 +67,31 @@ const EMPTY_OBJ = {};
66
67
  */
67
68
  const SVG_NS = 'http://www.w3.org/2000/svg';
68
69
  const HTML_NS = 'http://www.w3.org/1999/xhtml';
70
+ const isDef = (v) => v != null;
71
+ /**
72
+ * Check whether a value is a 'complex type', defined here as an object or a
73
+ * function.
74
+ *
75
+ * @param o the value to check
76
+ * @returns whether it's a complex type or not
77
+ */
69
78
  const isComplexType = (o) => {
70
79
  // https://jsperf.com/typeof-fn-object/5
71
80
  o = typeof o;
72
81
  return o === 'object' || o === 'function';
73
82
  };
83
+ /**
84
+ * Helper method for querying a `meta` tag that contains a nonce value
85
+ * out of a DOM's head.
86
+ *
87
+ * @param doc The DOM containing the `head` to query against
88
+ * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
89
+ * exists or the tag has no content.
90
+ */
91
+ function queryNonceMetaTagContent(doc) {
92
+ var _a, _b, _c;
93
+ return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;
94
+ }
74
95
  /**
75
96
  * Production h() function based on Preact by
76
97
  * Jason Miller (@developit)
@@ -79,7 +100,6 @@ const isComplexType = (o) => {
79
100
  *
80
101
  * Modified for Stencil's compiler and vdom
81
102
  */
82
- // const stack: any[] = [];
83
103
  // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
84
104
  // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
85
105
  const h = (nodeName, vnodeData, ...children) => {
@@ -137,6 +157,14 @@ const h = (nodeName, vnodeData, ...children) => {
137
157
  }
138
158
  return vnode;
139
159
  };
160
+ /**
161
+ * A utility function for creating a virtual DOM node from a tag and some
162
+ * possible text content.
163
+ *
164
+ * @param tag the tag for this element
165
+ * @param text possible text content for the node
166
+ * @returns a newly-minted virtual DOM node
167
+ */
140
168
  const newVNode = (tag, text) => {
141
169
  const vnode = {
142
170
  $flags$: 0,
@@ -154,6 +182,12 @@ const newVNode = (tag, text) => {
154
182
  return vnode;
155
183
  };
156
184
  const Host = {};
185
+ /**
186
+ * Check whether a given node is a Host node or not
187
+ *
188
+ * @param node the virtual DOM node to check
189
+ * @returns whether it's a Host node or not
190
+ */
157
191
  const isHost = (node) => node && node.$tag$ === Host;
158
192
  /**
159
193
  * Parse a new property value for a given property type.
@@ -233,6 +267,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
233
267
  styles.set(scopeId, style);
234
268
  };
235
269
  const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
270
+ var _a;
236
271
  let scopeId = getScopeId(cmpMeta);
237
272
  const style = styles.get(scopeId);
238
273
  // if an element is NOT connected then getRootNode() will return the wrong root node
@@ -248,10 +283,30 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
248
283
  }
249
284
  if (!appliedStyles.has(scopeId)) {
250
285
  {
251
- {
286
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
287
+ if (plt.$cssShim$) {
288
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
289
+ styleElm = plt.$cssShim$.createHostStyle(hostElm, scopeId, style,
290
+ // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
291
+ !!(cmpMeta.$flags$ & 10 /* CMP_FLAGS.needsScopedEncapsulation */));
292
+ const newScopeId = styleElm['s-sc'];
293
+ if (newScopeId) {
294
+ scopeId = newScopeId;
295
+ // we don't want to add this styleID to the appliedStyles Set
296
+ // since the cssVarShim might need to apply several different
297
+ // stylesheets for the same component
298
+ appliedStyles = null;
299
+ }
300
+ }
301
+ else {
252
302
  styleElm = doc.createElement('style');
253
303
  styleElm.innerHTML = style;
254
304
  }
305
+ // Apply CSP nonce to the style tag if it exists
306
+ const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
307
+ if (nonce != null) {
308
+ styleElm.setAttribute('nonce', nonce);
309
+ }
255
310
  styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
256
311
  }
257
312
  if (appliedStyles) {
@@ -268,8 +323,21 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
268
323
  const attachStyles = (hostRef) => {
269
324
  const cmpMeta = hostRef.$cmpMeta$;
270
325
  const elm = hostRef.$hostElement$;
326
+ const flags = cmpMeta.$flags$;
271
327
  const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
272
- addStyle(elm.getRootNode(), cmpMeta);
328
+ const scopeId = addStyle(supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$, elm);
329
+ // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
330
+ if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
331
+ // only required when we're NOT using native shadow dom (slot)
332
+ // or this browser doesn't support native shadow dom
333
+ // and this host element was NOT created with SSR
334
+ // let's pick out the inner content for slot projection
335
+ // create a node to represent where the original
336
+ // content was first placed, which is useful later on
337
+ // DOM WRITE!!
338
+ elm['s-sc'] = scopeId;
339
+ elm.classList.add(scopeId + '-h');
340
+ }
273
341
  endAttachStyles();
274
342
  };
275
343
  const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
@@ -458,6 +526,10 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
458
526
  // remember for later we need to check to relocate nodes
459
527
  checkSlotRelocate = true;
460
528
  if (newVNode.$tag$ === 'slot') {
529
+ if (scopeId) {
530
+ // scoped css needs to add its scoped id to the parent element
531
+ parentElm.classList.add(scopeId + '-s');
532
+ }
461
533
  newVNode.$flags$ |= newVNode.$children$
462
534
  ? // slot element has fallback content
463
535
  2 /* VNODE_FLAGS.isSlotFallback */
@@ -490,10 +562,15 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
490
562
  {
491
563
  updateElement(null, newVNode, isSvgMode);
492
564
  }
565
+ if (isDef(scopeId) && elm['s-si'] !== scopeId) {
566
+ // if there is a scopeId and this is the initial render
567
+ // then let's add the scopeId as a css class
568
+ elm.classList.add((elm['s-si'] = scopeId));
569
+ }
493
570
  if (newVNode.$children$) {
494
571
  for (i = 0; i < newVNode.$children$.length; ++i) {
495
572
  // create the node
496
- childNode = createElm(oldParentVNode, newVNode, i);
573
+ childNode = createElm(oldParentVNode, newVNode, i, elm);
497
574
  // return node could have been null
498
575
  if (childNode) {
499
576
  // append our new node
@@ -556,12 +633,30 @@ const putBackInOriginalLocation = (parentElm, recursive) => {
556
633
  }
557
634
  plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
558
635
  };
636
+ /**
637
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
638
+ * add them to the DOM in the appropriate place.
639
+ *
640
+ * @param parentElm the DOM node which should be used as a parent for the new
641
+ * DOM nodes
642
+ * @param before a child of the `parentElm` which the new children should be
643
+ * inserted before (optional)
644
+ * @param parentVNode the parent virtual DOM node
645
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
646
+ * @param startIdx the index in the child virtual DOM nodes at which to start
647
+ * creating DOM nodes (inclusive)
648
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
649
+ * creating DOM nodes (inclusive)
650
+ */
559
651
  const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
560
652
  let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
561
653
  let childNode;
654
+ if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
655
+ containerElm = containerElm.shadowRoot;
656
+ }
562
657
  for (; startIdx <= endIdx; ++startIdx) {
563
658
  if (vnodes[startIdx]) {
564
- childNode = createElm(null, parentVNode, startIdx);
659
+ childNode = createElm(null, parentVNode, startIdx, parentElm);
565
660
  if (childNode) {
566
661
  vnodes[startIdx].$elm$ = childNode;
567
662
  containerElm.insertBefore(childNode, referenceNode(before) );
@@ -569,26 +664,40 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
569
664
  }
570
665
  }
571
666
  };
572
- const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
573
- for (; startIdx <= endIdx; ++startIdx) {
574
- if ((vnode = vnodes[startIdx])) {
575
- elm = vnode.$elm$;
576
- {
577
- // we're removing this element
578
- // so it's possible we need to show slot fallback content now
579
- checkSlotFallbackVisibility = true;
580
- if (elm['s-ol']) {
581
- // remove the original location comment
582
- elm['s-ol'].remove();
583
- }
584
- else {
585
- // it's possible that child nodes of the node
586
- // that's being removed are slot nodes
587
- putBackInOriginalLocation(elm, true);
667
+ /**
668
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
669
+ * This can be used to, for instance, clean up after a list of children which
670
+ * should no longer be shown.
671
+ *
672
+ * This function also handles some of Stencil's slot relocation logic.
673
+ *
674
+ * @param vnodes a list of virtual DOM nodes to remove
675
+ * @param startIdx the index at which to start removing nodes (inclusive)
676
+ * @param endIdx the index at which to stop removing nodes (inclusive)
677
+ */
678
+ const removeVnodes = (vnodes, startIdx, endIdx) => {
679
+ for (let index = startIdx; index <= endIdx; ++index) {
680
+ const vnode = vnodes[index];
681
+ if (vnode) {
682
+ const elm = vnode.$elm$;
683
+ if (elm) {
684
+ {
685
+ // we're removing this element
686
+ // so it's possible we need to show slot fallback content now
687
+ checkSlotFallbackVisibility = true;
688
+ if (elm['s-ol']) {
689
+ // remove the original location comment
690
+ elm['s-ol'].remove();
691
+ }
692
+ else {
693
+ // it's possible that child nodes of the node
694
+ // that's being removed are slot nodes
695
+ putBackInOriginalLocation(elm, true);
696
+ }
588
697
  }
698
+ // remove the vnode's element from the dom
699
+ elm.remove();
589
700
  }
590
- // remove the vnode's element from the dom
591
- elm.remove();
592
701
  }
593
702
  }
594
703
  };
@@ -776,7 +885,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
776
885
  // the key of the first new child OR the build is not using `key`
777
886
  // attributes at all. In either case we need to create a new element
778
887
  // for the new node.
779
- node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
888
+ node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
780
889
  newStartVnode = newCh[++newStartIdx];
781
890
  }
782
891
  if (node) {
@@ -809,7 +918,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
809
918
  *
810
919
  * So, in other words, if `key` attrs are not set on VNodes which may be
811
920
  * changing order within a `children` array or something along those lines then
812
- * we could obtain a false positive and then have to do needless re-rendering.
921
+ * we could obtain a false negative and then have to do needless re-rendering
922
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
813
923
  *
814
924
  * @param leftVNode the first VNode to check
815
925
  * @param rightVNode the second VNode to check
@@ -1028,6 +1138,18 @@ const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
1028
1138
  }
1029
1139
  return slotNameAttr === '';
1030
1140
  };
1141
+ /**
1142
+ * The main entry point for Stencil's virtual DOM-based rendering engine
1143
+ *
1144
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
1145
+ * function will handle creating a virtual DOM tree with a single root, patching
1146
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
1147
+ * relocation, and reflecting attributes.
1148
+ *
1149
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
1150
+ * the DOM node into which it should be rendered.
1151
+ * @param renderFnResults the virtual DOM nodes to be rendered
1152
+ */
1031
1153
  const renderVdom = (hostRef, renderFnResults) => {
1032
1154
  const hostElm = hostRef.$hostElement$;
1033
1155
  const cmpMeta = hostRef.$cmpMeta$;
@@ -1041,10 +1163,13 @@ const renderVdom = (hostRef, renderFnResults) => {
1041
1163
  rootVnode.$tag$ = null;
1042
1164
  rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
1043
1165
  hostRef.$vnode$ = rootVnode;
1044
- rootVnode.$elm$ = oldVNode.$elm$ = (hostElm);
1166
+ rootVnode.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm );
1167
+ {
1168
+ scopeId = hostElm['s-sc'];
1169
+ }
1045
1170
  {
1046
1171
  contentRef = hostElm['s-cr'];
1047
- useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
1172
+ useNativeShadowDom = supportsShadow && (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
1048
1173
  // always reset
1049
1174
  checkSlotFallbackVisibility = false;
1050
1175
  }
@@ -1147,15 +1272,54 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
1147
1272
  const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
1148
1273
  return writeTask(dispatch) ;
1149
1274
  };
1275
+ /**
1276
+ * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
1277
+ * component lifecycle methods like `componentWillLoad` as well as
1278
+ * {@link updateComponent}, which will kick off the virtual DOM re-render.
1279
+ *
1280
+ * @param hostRef a reference to a host DOM node
1281
+ * @param isInitialLoad whether we're on the initial load or not
1282
+ * @returns an empty Promise which is used to enqueue a series of operations for
1283
+ * the component
1284
+ */
1150
1285
  const dispatchHooks = (hostRef, isInitialLoad) => {
1151
1286
  const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
1152
1287
  const instance = hostRef.$lazyInstance$ ;
1153
- let promise;
1288
+ // We're going to use this variable together with `enqueue` to implement a
1289
+ // little promise-based queue. We start out with it `undefined`. When we add
1290
+ // the first function to the queue we'll set this variable to be that
1291
+ // function's return value. When we attempt to add subsequent values to the
1292
+ // queue we'll check that value and, if it was a `Promise`, we'll then chain
1293
+ // the new function off of that `Promise` using `.then()`. This will give our
1294
+ // queue two nice properties:
1295
+ //
1296
+ // 1. If all functions added to the queue are synchronous they'll be called
1297
+ // synchronously right away.
1298
+ // 2. If all functions added to the queue are asynchronous they'll all be
1299
+ // called in order after `dispatchHooks` exits.
1300
+ let maybePromise;
1154
1301
  endSchedule();
1155
- return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
1302
+ return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
1156
1303
  };
1304
+ /**
1305
+ * This function uses a Promise to implement a simple first-in, first-out queue
1306
+ * of functions to be called.
1307
+ *
1308
+ * The queue is ordered on the basis of the first argument. If it's
1309
+ * `undefined`, then nothing is on the queue yet, so the provided function can
1310
+ * be called synchronously (although note that this function may return a
1311
+ * `Promise`). The idea is that then the return value of that enqueueing
1312
+ * operation is kept around, so that if it was a `Promise` then subsequent
1313
+ * functions can be enqueued by calling this function again with that `Promise`
1314
+ * as the first argument.
1315
+ *
1316
+ * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
1317
+ * @param fn a function to enqueue
1318
+ * @returns either a `Promise` or the return value of the provided function
1319
+ */
1320
+ const enqueue = (maybePromise, fn) => maybePromise instanceof Promise ? maybePromise.then(fn) : fn();
1157
1321
  const updateComponent = async (hostRef, instance, isInitialLoad) => {
1158
- // updateComponent
1322
+ var _a;
1159
1323
  const elm = hostRef.$hostElement$;
1160
1324
  const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
1161
1325
  const rc = elm['s-rc'];
@@ -1167,6 +1331,11 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
1167
1331
  {
1168
1332
  callRender(hostRef, instance);
1169
1333
  }
1334
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
1335
+ if (plt.$cssShim$) {
1336
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
1337
+ plt.$cssShim$.updateHost(elm);
1338
+ }
1170
1339
  if (rc) {
1171
1340
  // ok, so turns out there are some child host elements
1172
1341
  // waiting on this parent element to load
@@ -1177,7 +1346,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
1177
1346
  endRender();
1178
1347
  endUpdate();
1179
1348
  {
1180
- const childrenPromises = elm['s-p'];
1349
+ const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
1181
1350
  const postUpdate = () => postUpdateComponent(hostRef);
1182
1351
  if (childrenPromises.length === 0) {
1183
1352
  postUpdate();
@@ -1271,9 +1440,6 @@ const safeCall = (instance, method, arg) => {
1271
1440
  }
1272
1441
  return undefined;
1273
1442
  };
1274
- const then = (promise, thenFn) => {
1275
- return promise && promise.then ? promise.then(thenFn) : thenFn();
1276
- };
1277
1443
  const addHydratedFlag = (elm) => elm.classList.add('hydrated')
1278
1444
  ;
1279
1445
  const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
@@ -1427,9 +1593,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1427
1593
  const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
1428
1594
  // initializeComponent
1429
1595
  if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
1596
+ // Let the runtime know that the component has been initialized
1597
+ hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
1430
1598
  {
1431
- // we haven't initialized this element yet
1432
- hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
1433
1599
  // lazy loaded components
1434
1600
  // request the component's implementation to be
1435
1601
  // wired up with the host element
@@ -1482,6 +1648,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
1482
1648
  const scopeId = getScopeId(cmpMeta);
1483
1649
  if (!styles.has(scopeId)) {
1484
1650
  const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
1651
+ if (cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) {
1652
+ style = await Promise.resolve().then(function () { return require('./shadow-css-8baae635.js'); }).then((m) => m.scopeCss(style, scopeId, false));
1653
+ }
1485
1654
  registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */));
1486
1655
  endRegisterStyles();
1487
1656
  }
@@ -1521,7 +1690,8 @@ const connectedCallback = (elm) => {
1521
1690
  // if the slot polyfill is required we'll need to put some nodes
1522
1691
  // in here to act as original content anchors as we move nodes around
1523
1692
  // host element has been connected to the DOM
1524
- if ((cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) {
1693
+ if ((// TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
1694
+ cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) {
1525
1695
  setContentReference(elm);
1526
1696
  }
1527
1697
  }
@@ -1576,9 +1746,16 @@ const setContentReference = (elm) => {
1576
1746
  const disconnectedCallback = (elm) => {
1577
1747
  if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1578
1748
  getHostRef(elm);
1749
+ // clear CSS var-shim tracking
1750
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
1751
+ if (plt.$cssShim$) {
1752
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
1753
+ plt.$cssShim$.removeHost(elm);
1754
+ }
1579
1755
  }
1580
1756
  };
1581
1757
  const bootstrapLazy = (lazyBundles, options = {}) => {
1758
+ var _a;
1582
1759
  const endBootstrap = createTime();
1583
1760
  const cmpTags = [];
1584
1761
  const exclude = options.exclude || [];
@@ -1608,6 +1785,10 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1608
1785
  {
1609
1786
  cmpMeta.$watchers$ = {};
1610
1787
  }
1788
+ if (!supportsShadow && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
1789
+ // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
1790
+ cmpMeta.$flags$ |= 8 /* CMP_FLAGS.needsShadowDomShim */;
1791
+ }
1611
1792
  const tagName = cmpMeta.$tagName$;
1612
1793
  const HostElement = class extends HTMLElement {
1613
1794
  // StencilLazyHost
@@ -1616,6 +1797,20 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1616
1797
  super(self);
1617
1798
  self = this;
1618
1799
  registerHost(self, cmpMeta);
1800
+ if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
1801
+ // this component is using shadow dom
1802
+ // and this browser supports shadow dom
1803
+ // add the read-only property "shadowRoot" to the host element
1804
+ // adding the shadow root build conditionals to minimize runtime
1805
+ if (supportsShadow) {
1806
+ {
1807
+ self.attachShadow({ mode: 'open' });
1808
+ }
1809
+ }
1810
+ else if (!('shadowRoot' in self)) {
1811
+ self.shadowRoot = self;
1812
+ }
1813
+ }
1619
1814
  }
1620
1815
  connectedCallback() {
1621
1816
  if (appLoadFallback) {
@@ -1647,6 +1842,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1647
1842
  {
1648
1843
  visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
1649
1844
  visibilityStyle.setAttribute('data-styles', '');
1845
+ // Apply CSP nonce to the style tag if it exists
1846
+ const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
1847
+ if (nonce != null) {
1848
+ visibilityStyle.setAttribute('nonce', nonce);
1849
+ }
1650
1850
  head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
1651
1851
  }
1652
1852
  // Process deferred connectedCallbacks now all components have been registered
@@ -1662,6 +1862,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1662
1862
  // Fallback appLoad event
1663
1863
  endBootstrap();
1664
1864
  };
1865
+ /**
1866
+ * Assigns the given value to the nonce property on the runtime platform object.
1867
+ * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
1868
+ * @param nonce The value to be assigned to the platform nonce property.
1869
+ * @returns void
1870
+ */
1871
+ const setNonce = (nonce) => (plt.$nonce$ = nonce);
1665
1872
  const hostRefs = /*@__PURE__*/ new WeakMap();
1666
1873
  const getHostRef = (ref) => hostRefs.get(ref);
1667
1874
  const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1705,6 +1912,8 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
1705
1912
  };
1706
1913
  const styles = /*@__PURE__*/ new Map();
1707
1914
  const win = typeof window !== 'undefined' ? window : {};
1915
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
1916
+ const CSS = win.CSS ;
1708
1917
  const doc = win.document || { head: {} };
1709
1918
  const plt = {
1710
1919
  $flags$: 0,
@@ -1715,6 +1924,10 @@ const plt = {
1715
1924
  rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
1716
1925
  ce: (eventName, opts) => new CustomEvent(eventName, opts),
1717
1926
  };
1927
+ const supportsShadow =
1928
+ // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
1929
+ /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)()
1930
+ ;
1718
1931
  const promiseResolve = (v) => Promise.resolve(v);
1719
1932
  const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
1720
1933
  try {
@@ -1768,9 +1981,15 @@ const flush = () => {
1768
1981
  const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
1769
1982
  const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1770
1983
 
1984
+ exports.CSS = CSS;
1771
1985
  exports.Host = Host;
1772
1986
  exports.bootstrapLazy = bootstrapLazy;
1773
1987
  exports.getElement = getElement;
1774
1988
  exports.h = h;
1989
+ exports.plt = plt;
1775
1990
  exports.promiseResolve = promiseResolve;
1776
1991
  exports.registerInstance = registerInstance;
1992
+ exports.setNonce = setNonce;
1993
+ exports.win = win;
1994
+
1995
+ //# sourceMappingURL=index-0e874533.js.map