@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
@@ -8,6 +8,7 @@ const NAMESPACE = 'cura';
8
8
  *
9
9
  * Modified for Stencil's renderer and slot projection
10
10
  */
11
+ let scopeId;
11
12
  let contentRef;
12
13
  let hostTagName;
13
14
  let useNativeShadowDom = false;
@@ -44,11 +45,31 @@ const EMPTY_OBJ = {};
44
45
  */
45
46
  const SVG_NS = 'http://www.w3.org/2000/svg';
46
47
  const HTML_NS = 'http://www.w3.org/1999/xhtml';
48
+ const isDef = (v) => v != null;
49
+ /**
50
+ * Check whether a value is a 'complex type', defined here as an object or a
51
+ * function.
52
+ *
53
+ * @param o the value to check
54
+ * @returns whether it's a complex type or not
55
+ */
47
56
  const isComplexType = (o) => {
48
57
  // https://jsperf.com/typeof-fn-object/5
49
58
  o = typeof o;
50
59
  return o === 'object' || o === 'function';
51
60
  };
61
+ /**
62
+ * Helper method for querying a `meta` tag that contains a nonce value
63
+ * out of a DOM's head.
64
+ *
65
+ * @param doc The DOM containing the `head` to query against
66
+ * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
67
+ * exists or the tag has no content.
68
+ */
69
+ function queryNonceMetaTagContent(doc) {
70
+ var _a, _b, _c;
71
+ 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;
72
+ }
52
73
  /**
53
74
  * Production h() function based on Preact by
54
75
  * Jason Miller (@developit)
@@ -57,7 +78,6 @@ const isComplexType = (o) => {
57
78
  *
58
79
  * Modified for Stencil's compiler and vdom
59
80
  */
60
- // const stack: any[] = [];
61
81
  // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
62
82
  // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
63
83
  const h = (nodeName, vnodeData, ...children) => {
@@ -115,6 +135,14 @@ const h = (nodeName, vnodeData, ...children) => {
115
135
  }
116
136
  return vnode;
117
137
  };
138
+ /**
139
+ * A utility function for creating a virtual DOM node from a tag and some
140
+ * possible text content.
141
+ *
142
+ * @param tag the tag for this element
143
+ * @param text possible text content for the node
144
+ * @returns a newly-minted virtual DOM node
145
+ */
118
146
  const newVNode = (tag, text) => {
119
147
  const vnode = {
120
148
  $flags$: 0,
@@ -132,6 +160,12 @@ const newVNode = (tag, text) => {
132
160
  return vnode;
133
161
  };
134
162
  const Host = {};
163
+ /**
164
+ * Check whether a given node is a Host node or not
165
+ *
166
+ * @param node the virtual DOM node to check
167
+ * @returns whether it's a Host node or not
168
+ */
135
169
  const isHost = (node) => node && node.$tag$ === Host;
136
170
  /**
137
171
  * Parse a new property value for a given property type.
@@ -211,6 +245,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
211
245
  styles.set(scopeId, style);
212
246
  };
213
247
  const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
248
+ var _a;
214
249
  let scopeId = getScopeId(cmpMeta);
215
250
  const style = styles.get(scopeId);
216
251
  // if an element is NOT connected then getRootNode() will return the wrong root node
@@ -226,10 +261,30 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
226
261
  }
227
262
  if (!appliedStyles.has(scopeId)) {
228
263
  {
229
- {
264
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
265
+ if (plt.$cssShim$) {
266
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
267
+ styleElm = plt.$cssShim$.createHostStyle(hostElm, scopeId, style,
268
+ // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
269
+ !!(cmpMeta.$flags$ & 10 /* CMP_FLAGS.needsScopedEncapsulation */));
270
+ const newScopeId = styleElm['s-sc'];
271
+ if (newScopeId) {
272
+ scopeId = newScopeId;
273
+ // we don't want to add this styleID to the appliedStyles Set
274
+ // since the cssVarShim might need to apply several different
275
+ // stylesheets for the same component
276
+ appliedStyles = null;
277
+ }
278
+ }
279
+ else {
230
280
  styleElm = doc.createElement('style');
231
281
  styleElm.innerHTML = style;
232
282
  }
283
+ // Apply CSP nonce to the style tag if it exists
284
+ const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
285
+ if (nonce != null) {
286
+ styleElm.setAttribute('nonce', nonce);
287
+ }
233
288
  styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
234
289
  }
235
290
  if (appliedStyles) {
@@ -246,8 +301,21 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
246
301
  const attachStyles = (hostRef) => {
247
302
  const cmpMeta = hostRef.$cmpMeta$;
248
303
  const elm = hostRef.$hostElement$;
304
+ const flags = cmpMeta.$flags$;
249
305
  const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
250
- addStyle(elm.getRootNode(), cmpMeta);
306
+ const scopeId = addStyle(supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$, elm);
307
+ // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
308
+ if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
309
+ // only required when we're NOT using native shadow dom (slot)
310
+ // or this browser doesn't support native shadow dom
311
+ // and this host element was NOT created with SSR
312
+ // let's pick out the inner content for slot projection
313
+ // create a node to represent where the original
314
+ // content was first placed, which is useful later on
315
+ // DOM WRITE!!
316
+ elm['s-sc'] = scopeId;
317
+ elm.classList.add(scopeId + '-h');
318
+ }
251
319
  endAttachStyles();
252
320
  };
253
321
  const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
@@ -436,6 +504,10 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
436
504
  // remember for later we need to check to relocate nodes
437
505
  checkSlotRelocate = true;
438
506
  if (newVNode.$tag$ === 'slot') {
507
+ if (scopeId) {
508
+ // scoped css needs to add its scoped id to the parent element
509
+ parentElm.classList.add(scopeId + '-s');
510
+ }
439
511
  newVNode.$flags$ |= newVNode.$children$
440
512
  ? // slot element has fallback content
441
513
  2 /* VNODE_FLAGS.isSlotFallback */
@@ -468,10 +540,15 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
468
540
  {
469
541
  updateElement(null, newVNode, isSvgMode);
470
542
  }
543
+ if (isDef(scopeId) && elm['s-si'] !== scopeId) {
544
+ // if there is a scopeId and this is the initial render
545
+ // then let's add the scopeId as a css class
546
+ elm.classList.add((elm['s-si'] = scopeId));
547
+ }
471
548
  if (newVNode.$children$) {
472
549
  for (i = 0; i < newVNode.$children$.length; ++i) {
473
550
  // create the node
474
- childNode = createElm(oldParentVNode, newVNode, i);
551
+ childNode = createElm(oldParentVNode, newVNode, i, elm);
475
552
  // return node could have been null
476
553
  if (childNode) {
477
554
  // append our new node
@@ -534,12 +611,30 @@ const putBackInOriginalLocation = (parentElm, recursive) => {
534
611
  }
535
612
  plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
536
613
  };
614
+ /**
615
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
616
+ * add them to the DOM in the appropriate place.
617
+ *
618
+ * @param parentElm the DOM node which should be used as a parent for the new
619
+ * DOM nodes
620
+ * @param before a child of the `parentElm` which the new children should be
621
+ * inserted before (optional)
622
+ * @param parentVNode the parent virtual DOM node
623
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
624
+ * @param startIdx the index in the child virtual DOM nodes at which to start
625
+ * creating DOM nodes (inclusive)
626
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
627
+ * creating DOM nodes (inclusive)
628
+ */
537
629
  const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
538
630
  let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
539
631
  let childNode;
632
+ if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
633
+ containerElm = containerElm.shadowRoot;
634
+ }
540
635
  for (; startIdx <= endIdx; ++startIdx) {
541
636
  if (vnodes[startIdx]) {
542
- childNode = createElm(null, parentVNode, startIdx);
637
+ childNode = createElm(null, parentVNode, startIdx, parentElm);
543
638
  if (childNode) {
544
639
  vnodes[startIdx].$elm$ = childNode;
545
640
  containerElm.insertBefore(childNode, referenceNode(before) );
@@ -547,26 +642,40 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
547
642
  }
548
643
  }
549
644
  };
550
- const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
551
- for (; startIdx <= endIdx; ++startIdx) {
552
- if ((vnode = vnodes[startIdx])) {
553
- elm = vnode.$elm$;
554
- {
555
- // we're removing this element
556
- // so it's possible we need to show slot fallback content now
557
- checkSlotFallbackVisibility = true;
558
- if (elm['s-ol']) {
559
- // remove the original location comment
560
- elm['s-ol'].remove();
561
- }
562
- else {
563
- // it's possible that child nodes of the node
564
- // that's being removed are slot nodes
565
- putBackInOriginalLocation(elm, true);
645
+ /**
646
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
647
+ * This can be used to, for instance, clean up after a list of children which
648
+ * should no longer be shown.
649
+ *
650
+ * This function also handles some of Stencil's slot relocation logic.
651
+ *
652
+ * @param vnodes a list of virtual DOM nodes to remove
653
+ * @param startIdx the index at which to start removing nodes (inclusive)
654
+ * @param endIdx the index at which to stop removing nodes (inclusive)
655
+ */
656
+ const removeVnodes = (vnodes, startIdx, endIdx) => {
657
+ for (let index = startIdx; index <= endIdx; ++index) {
658
+ const vnode = vnodes[index];
659
+ if (vnode) {
660
+ const elm = vnode.$elm$;
661
+ if (elm) {
662
+ {
663
+ // we're removing this element
664
+ // so it's possible we need to show slot fallback content now
665
+ checkSlotFallbackVisibility = true;
666
+ if (elm['s-ol']) {
667
+ // remove the original location comment
668
+ elm['s-ol'].remove();
669
+ }
670
+ else {
671
+ // it's possible that child nodes of the node
672
+ // that's being removed are slot nodes
673
+ putBackInOriginalLocation(elm, true);
674
+ }
566
675
  }
676
+ // remove the vnode's element from the dom
677
+ elm.remove();
567
678
  }
568
- // remove the vnode's element from the dom
569
- elm.remove();
570
679
  }
571
680
  }
572
681
  };
@@ -754,7 +863,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
754
863
  // the key of the first new child OR the build is not using `key`
755
864
  // attributes at all. In either case we need to create a new element
756
865
  // for the new node.
757
- node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
866
+ node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
758
867
  newStartVnode = newCh[++newStartIdx];
759
868
  }
760
869
  if (node) {
@@ -787,7 +896,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
787
896
  *
788
897
  * So, in other words, if `key` attrs are not set on VNodes which may be
789
898
  * changing order within a `children` array or something along those lines then
790
- * we could obtain a false positive and then have to do needless re-rendering.
899
+ * we could obtain a false negative and then have to do needless re-rendering
900
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
791
901
  *
792
902
  * @param leftVNode the first VNode to check
793
903
  * @param rightVNode the second VNode to check
@@ -1006,6 +1116,18 @@ const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
1006
1116
  }
1007
1117
  return slotNameAttr === '';
1008
1118
  };
1119
+ /**
1120
+ * The main entry point for Stencil's virtual DOM-based rendering engine
1121
+ *
1122
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
1123
+ * function will handle creating a virtual DOM tree with a single root, patching
1124
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
1125
+ * relocation, and reflecting attributes.
1126
+ *
1127
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
1128
+ * the DOM node into which it should be rendered.
1129
+ * @param renderFnResults the virtual DOM nodes to be rendered
1130
+ */
1009
1131
  const renderVdom = (hostRef, renderFnResults) => {
1010
1132
  const hostElm = hostRef.$hostElement$;
1011
1133
  const cmpMeta = hostRef.$cmpMeta$;
@@ -1019,10 +1141,13 @@ const renderVdom = (hostRef, renderFnResults) => {
1019
1141
  rootVnode.$tag$ = null;
1020
1142
  rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
1021
1143
  hostRef.$vnode$ = rootVnode;
1022
- rootVnode.$elm$ = oldVNode.$elm$ = (hostElm);
1144
+ rootVnode.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm );
1145
+ {
1146
+ scopeId = hostElm['s-sc'];
1147
+ }
1023
1148
  {
1024
1149
  contentRef = hostElm['s-cr'];
1025
- useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
1150
+ useNativeShadowDom = supportsShadow && (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
1026
1151
  // always reset
1027
1152
  checkSlotFallbackVisibility = false;
1028
1153
  }
@@ -1125,15 +1250,54 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
1125
1250
  const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
1126
1251
  return writeTask(dispatch) ;
1127
1252
  };
1253
+ /**
1254
+ * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
1255
+ * component lifecycle methods like `componentWillLoad` as well as
1256
+ * {@link updateComponent}, which will kick off the virtual DOM re-render.
1257
+ *
1258
+ * @param hostRef a reference to a host DOM node
1259
+ * @param isInitialLoad whether we're on the initial load or not
1260
+ * @returns an empty Promise which is used to enqueue a series of operations for
1261
+ * the component
1262
+ */
1128
1263
  const dispatchHooks = (hostRef, isInitialLoad) => {
1129
1264
  const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
1130
1265
  const instance = hostRef.$lazyInstance$ ;
1131
- let promise;
1266
+ // We're going to use this variable together with `enqueue` to implement a
1267
+ // little promise-based queue. We start out with it `undefined`. When we add
1268
+ // the first function to the queue we'll set this variable to be that
1269
+ // function's return value. When we attempt to add subsequent values to the
1270
+ // queue we'll check that value and, if it was a `Promise`, we'll then chain
1271
+ // the new function off of that `Promise` using `.then()`. This will give our
1272
+ // queue two nice properties:
1273
+ //
1274
+ // 1. If all functions added to the queue are synchronous they'll be called
1275
+ // synchronously right away.
1276
+ // 2. If all functions added to the queue are asynchronous they'll all be
1277
+ // called in order after `dispatchHooks` exits.
1278
+ let maybePromise;
1132
1279
  endSchedule();
1133
- return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
1280
+ return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
1134
1281
  };
1282
+ /**
1283
+ * This function uses a Promise to implement a simple first-in, first-out queue
1284
+ * of functions to be called.
1285
+ *
1286
+ * The queue is ordered on the basis of the first argument. If it's
1287
+ * `undefined`, then nothing is on the queue yet, so the provided function can
1288
+ * be called synchronously (although note that this function may return a
1289
+ * `Promise`). The idea is that then the return value of that enqueueing
1290
+ * operation is kept around, so that if it was a `Promise` then subsequent
1291
+ * functions can be enqueued by calling this function again with that `Promise`
1292
+ * as the first argument.
1293
+ *
1294
+ * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
1295
+ * @param fn a function to enqueue
1296
+ * @returns either a `Promise` or the return value of the provided function
1297
+ */
1298
+ const enqueue = (maybePromise, fn) => maybePromise instanceof Promise ? maybePromise.then(fn) : fn();
1135
1299
  const updateComponent = async (hostRef, instance, isInitialLoad) => {
1136
- // updateComponent
1300
+ var _a;
1137
1301
  const elm = hostRef.$hostElement$;
1138
1302
  const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
1139
1303
  const rc = elm['s-rc'];
@@ -1145,6 +1309,11 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
1145
1309
  {
1146
1310
  callRender(hostRef, instance);
1147
1311
  }
1312
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
1313
+ if (plt.$cssShim$) {
1314
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
1315
+ plt.$cssShim$.updateHost(elm);
1316
+ }
1148
1317
  if (rc) {
1149
1318
  // ok, so turns out there are some child host elements
1150
1319
  // waiting on this parent element to load
@@ -1155,7 +1324,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
1155
1324
  endRender();
1156
1325
  endUpdate();
1157
1326
  {
1158
- const childrenPromises = elm['s-p'];
1327
+ const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
1159
1328
  const postUpdate = () => postUpdateComponent(hostRef);
1160
1329
  if (childrenPromises.length === 0) {
1161
1330
  postUpdate();
@@ -1249,9 +1418,6 @@ const safeCall = (instance, method, arg) => {
1249
1418
  }
1250
1419
  return undefined;
1251
1420
  };
1252
- const then = (promise, thenFn) => {
1253
- return promise && promise.then ? promise.then(thenFn) : thenFn();
1254
- };
1255
1421
  const addHydratedFlag = (elm) => elm.classList.add('hydrated')
1256
1422
  ;
1257
1423
  const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
@@ -1405,9 +1571,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1405
1571
  const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
1406
1572
  // initializeComponent
1407
1573
  if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
1574
+ // Let the runtime know that the component has been initialized
1575
+ hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
1408
1576
  {
1409
- // we haven't initialized this element yet
1410
- hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
1411
1577
  // lazy loaded components
1412
1578
  // request the component's implementation to be
1413
1579
  // wired up with the host element
@@ -1460,6 +1626,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
1460
1626
  const scopeId = getScopeId(cmpMeta);
1461
1627
  if (!styles.has(scopeId)) {
1462
1628
  const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
1629
+ if (cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) {
1630
+ style = await import('./shadow-css-07b0c8c8.js').then((m) => m.scopeCss(style, scopeId, false));
1631
+ }
1463
1632
  registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */));
1464
1633
  endRegisterStyles();
1465
1634
  }
@@ -1499,7 +1668,8 @@ const connectedCallback = (elm) => {
1499
1668
  // if the slot polyfill is required we'll need to put some nodes
1500
1669
  // in here to act as original content anchors as we move nodes around
1501
1670
  // host element has been connected to the DOM
1502
- if ((cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) {
1671
+ if ((// TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
1672
+ cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) {
1503
1673
  setContentReference(elm);
1504
1674
  }
1505
1675
  }
@@ -1554,9 +1724,16 @@ const setContentReference = (elm) => {
1554
1724
  const disconnectedCallback = (elm) => {
1555
1725
  if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1556
1726
  getHostRef(elm);
1727
+ // clear CSS var-shim tracking
1728
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
1729
+ if (plt.$cssShim$) {
1730
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
1731
+ plt.$cssShim$.removeHost(elm);
1732
+ }
1557
1733
  }
1558
1734
  };
1559
1735
  const bootstrapLazy = (lazyBundles, options = {}) => {
1736
+ var _a;
1560
1737
  const endBootstrap = createTime();
1561
1738
  const cmpTags = [];
1562
1739
  const exclude = options.exclude || [];
@@ -1586,6 +1763,10 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1586
1763
  {
1587
1764
  cmpMeta.$watchers$ = {};
1588
1765
  }
1766
+ if (!supportsShadow && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
1767
+ // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
1768
+ cmpMeta.$flags$ |= 8 /* CMP_FLAGS.needsShadowDomShim */;
1769
+ }
1589
1770
  const tagName = cmpMeta.$tagName$;
1590
1771
  const HostElement = class extends HTMLElement {
1591
1772
  // StencilLazyHost
@@ -1594,6 +1775,20 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1594
1775
  super(self);
1595
1776
  self = this;
1596
1777
  registerHost(self, cmpMeta);
1778
+ if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
1779
+ // this component is using shadow dom
1780
+ // and this browser supports shadow dom
1781
+ // add the read-only property "shadowRoot" to the host element
1782
+ // adding the shadow root build conditionals to minimize runtime
1783
+ if (supportsShadow) {
1784
+ {
1785
+ self.attachShadow({ mode: 'open' });
1786
+ }
1787
+ }
1788
+ else if (!('shadowRoot' in self)) {
1789
+ self.shadowRoot = self;
1790
+ }
1791
+ }
1597
1792
  }
1598
1793
  connectedCallback() {
1599
1794
  if (appLoadFallback) {
@@ -1625,6 +1820,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1625
1820
  {
1626
1821
  visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
1627
1822
  visibilityStyle.setAttribute('data-styles', '');
1823
+ // Apply CSP nonce to the style tag if it exists
1824
+ const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
1825
+ if (nonce != null) {
1826
+ visibilityStyle.setAttribute('nonce', nonce);
1827
+ }
1628
1828
  head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
1629
1829
  }
1630
1830
  // Process deferred connectedCallbacks now all components have been registered
@@ -1640,6 +1840,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1640
1840
  // Fallback appLoad event
1641
1841
  endBootstrap();
1642
1842
  };
1843
+ /**
1844
+ * Assigns the given value to the nonce property on the runtime platform object.
1845
+ * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
1846
+ * @param nonce The value to be assigned to the platform nonce property.
1847
+ * @returns void
1848
+ */
1849
+ const setNonce = (nonce) => (plt.$nonce$ = nonce);
1643
1850
  const hostRefs = /*@__PURE__*/ new WeakMap();
1644
1851
  const getHostRef = (ref) => hostRefs.get(ref);
1645
1852
  const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1683,6 +1890,8 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
1683
1890
  };
1684
1891
  const styles = /*@__PURE__*/ new Map();
1685
1892
  const win = typeof window !== 'undefined' ? window : {};
1893
+ // TODO(STENCIL-659): Remove code implementing the CSS variable shim
1894
+ const CSS = win.CSS ;
1686
1895
  const doc = win.document || { head: {} };
1687
1896
  const plt = {
1688
1897
  $flags$: 0,
@@ -1693,6 +1902,10 @@ const plt = {
1693
1902
  rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
1694
1903
  ce: (eventName, opts) => new CustomEvent(eventName, opts),
1695
1904
  };
1905
+ const supportsShadow =
1906
+ // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
1907
+ /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)()
1908
+ ;
1696
1909
  const promiseResolve = (v) => Promise.resolve(v);
1697
1910
  const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
1698
1911
  try {
@@ -1746,4 +1959,6 @@ const flush = () => {
1746
1959
  const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
1747
1960
  const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1748
1961
 
1749
- export { Host as H, bootstrapLazy as b, getElement as g, h, promiseResolve as p, registerInstance as r };
1962
+ export { CSS as C, Host as H, promiseResolve as a, bootstrapLazy as b, getElement as g, h, plt as p, registerInstance as r, setNonce as s, win as w };
1963
+
1964
+ //# sourceMappingURL=index-92c824be.js.map