@siemens/ix-icons 0.0.0-20240827135516 → 0.0.0-20250114162200

Sign up to get free protection for your applications and to get access to all the features.
Files changed (73) hide show
  1. package/README.md +19 -2
  2. package/components/icon.js +9 -2
  3. package/components/icon.js.map +1 -1
  4. package/components/index.js +1 -1
  5. package/dist/cjs/{icon-93104dbb.js → icon-7938bd17.js} +11 -3
  6. package/dist/cjs/icon-7938bd17.js.map +1 -0
  7. package/dist/cjs/index-12b9d30e.js +1221 -0
  8. package/dist/cjs/index-12b9d30e.js.map +1 -0
  9. package/dist/cjs/index.cjs.js +3 -2
  10. package/dist/cjs/index.cjs.js.map +1 -1
  11. package/dist/cjs/ix-icon.cjs.entry.js +2 -2
  12. package/dist/cjs/ix-icons.cjs.js +9 -9
  13. package/dist/cjs/ix-icons.cjs.js.map +1 -1
  14. package/dist/cjs/loader.cjs.js +1 -1
  15. package/dist/collection/collection-manifest.json +2 -2
  16. package/dist/collection/components/icon/resolveIcon.js +8 -1
  17. package/dist/collection/components/icon/resolveIcon.js.map +1 -1
  18. package/dist/collection/components/icon/test/{rocker-example.js → rocket-example.js} +1 -1
  19. package/dist/collection/components/icon/test/{rocker-example.js.map → rocket-example.js.map} +1 -1
  20. package/dist/collection/index.js +1 -0
  21. package/dist/collection/index.js.map +1 -1
  22. package/dist/esm/{icon-97776d4a.js → icon-7346da2f.js} +11 -4
  23. package/dist/esm/icon-7346da2f.js.map +1 -0
  24. package/dist/esm/index-05493327.js +1191 -0
  25. package/dist/esm/index-05493327.js.map +1 -0
  26. package/dist/esm/index.js +2 -2
  27. package/dist/esm/ix-icon.entry.js +2 -2
  28. package/dist/esm/ix-icons.js +10 -10
  29. package/dist/esm/ix-icons.js.map +1 -1
  30. package/dist/esm/loader.js +2 -2
  31. package/dist/ix-icons/index.esm.js +1 -1
  32. package/dist/ix-icons/index.esm.js.map +1 -1
  33. package/dist/ix-icons/ix-icons.esm.js +1 -1
  34. package/dist/ix-icons/ix-icons.esm.js.map +1 -1
  35. package/dist/ix-icons/p-07c8bd06.entry.js +2 -0
  36. package/dist/ix-icons/p-07c8bd06.entry.js.map +1 -0
  37. package/dist/ix-icons/p-20132e89.js +3 -0
  38. package/dist/ix-icons/p-20132e89.js.map +1 -0
  39. package/dist/ix-icons/p-daba5432.js +2 -0
  40. package/dist/ix-icons/p-daba5432.js.map +1 -0
  41. package/dist/ix-icons/p-e1255160.js.map +1 -1
  42. package/dist/types/components/icon/resolveIcon.d.ts +1 -0
  43. package/dist/types/index.d.ts +1 -0
  44. package/dist/types/stencil-public-runtime.d.ts +3 -10
  45. package/icons/package.json +1 -1
  46. package/loader/cdn.js +1 -3
  47. package/loader/index.cjs.js +1 -3
  48. package/loader/index.d.ts +3 -0
  49. package/loader/index.es2017.js +1 -3
  50. package/loader/index.js +1 -3
  51. package/package.json +2 -2
  52. package/dist/cjs/icon-93104dbb.js.map +0 -1
  53. package/dist/cjs/index-8f585802.js +0 -1810
  54. package/dist/cjs/index-8f585802.js.map +0 -1
  55. package/dist/collection/components/icon/test/ix-icon.spec.js +0 -61
  56. package/dist/collection/components/icon/test/ix-icon.spec.js.map +0 -1
  57. package/dist/collection/components/icon/test/resolveIcon.spec.js +0 -88
  58. package/dist/collection/components/icon/test/resolveIcon.spec.js.map +0 -1
  59. package/dist/esm/icon-97776d4a.js.map +0 -1
  60. package/dist/esm/index-d1072d3f.js +0 -1780
  61. package/dist/esm/index-d1072d3f.js.map +0 -1
  62. package/dist/esm/polyfills/core-js.js +0 -11
  63. package/dist/esm/polyfills/dom.js +0 -79
  64. package/dist/esm/polyfills/es5-html-element.js +0 -1
  65. package/dist/esm/polyfills/index.js +0 -34
  66. package/dist/esm/polyfills/system.js +0 -6
  67. package/dist/ix-icons/p-05455ad0.js +0 -3
  68. package/dist/ix-icons/p-05455ad0.js.map +0 -1
  69. package/dist/ix-icons/p-60aebf69.entry.js +0 -2
  70. package/dist/ix-icons/p-60aebf69.entry.js.map +0 -1
  71. package/dist/ix-icons/p-cf592f05.js +0 -2
  72. package/dist/ix-icons/p-cf592f05.js.map +0 -1
  73. /package/dist/types/components/icon/test/{rocker-example.d.ts → rocket-example.d.ts} +0 -0
@@ -1,1810 +0,0 @@
1
- 'use strict';
2
-
3
- function _interopNamespace(e) {
4
- if (e && e.__esModule) return e;
5
- var n = Object.create(null);
6
- if (e) {
7
- Object.keys(e).forEach(function (k) {
8
- if (k !== 'default') {
9
- var d = Object.getOwnPropertyDescriptor(e, k);
10
- Object.defineProperty(n, k, d.get ? d : {
11
- enumerable: true,
12
- get: function () {
13
- return e[k];
14
- }
15
- });
16
- }
17
- });
18
- }
19
- n['default'] = e;
20
- return Object.freeze(n);
21
- }
22
-
23
- const NAMESPACE = 'ix-icons';
24
-
25
- /**
26
- * Virtual DOM patching algorithm based on Snabbdom by
27
- * Simon Friis Vindum (@paldepind)
28
- * Licensed under the MIT License
29
- * https://github.com/snabbdom/snabbdom/blob/master/LICENSE
30
- *
31
- * Modified for Stencil's renderer and slot projection
32
- */
33
- let scopeId;
34
- let hostTagName;
35
- let isSvgMode = false;
36
- let queuePending = false;
37
- const getAssetPath = (path) => {
38
- const assetUrl = new URL(path, plt.$resourcesUrl$);
39
- return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
40
- };
41
- const setAssetPath = (path) => (plt.$resourcesUrl$ = path);
42
- const createTime = (fnName, tagName = '') => {
43
- {
44
- return () => {
45
- return;
46
- };
47
- }
48
- };
49
- const uniqueTime = (key, measureText) => {
50
- {
51
- return () => {
52
- return;
53
- };
54
- }
55
- };
56
- const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
57
- /**
58
- * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
59
- *
60
- * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
61
- * support as of Stencil v4.
62
- */
63
- const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
64
- /**
65
- * Default style mode id
66
- */
67
- /**
68
- * Reusable empty obj/array
69
- * Don't add values to these!!
70
- */
71
- const EMPTY_OBJ = {};
72
- /**
73
- * Namespaces
74
- */
75
- const SVG_NS = 'http://www.w3.org/2000/svg';
76
- const HTML_NS = 'http://www.w3.org/1999/xhtml';
77
- const isDef = (v) => v != null;
78
- /**
79
- * Check whether a value is a 'complex type', defined here as an object or a
80
- * function.
81
- *
82
- * @param o the value to check
83
- * @returns whether it's a complex type or not
84
- */
85
- const isComplexType = (o) => {
86
- // https://jsperf.com/typeof-fn-object/5
87
- o = typeof o;
88
- return o === 'object' || o === 'function';
89
- };
90
- /**
91
- * Helper method for querying a `meta` tag that contains a nonce value
92
- * out of a DOM's head.
93
- *
94
- * @param doc The DOM containing the `head` to query against
95
- * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
96
- * exists or the tag has no content.
97
- */
98
- function queryNonceMetaTagContent(doc) {
99
- var _a, _b, _c;
100
- 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;
101
- }
102
- /**
103
- * Production h() function based on Preact by
104
- * Jason Miller (@developit)
105
- * Licensed under the MIT License
106
- * https://github.com/developit/preact/blob/master/LICENSE
107
- *
108
- * Modified for Stencil's compiler and vdom
109
- */
110
- // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
111
- // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
112
- const h = (nodeName, vnodeData, ...children) => {
113
- let child = null;
114
- let key = null;
115
- let simple = false;
116
- let lastSimple = false;
117
- const vNodeChildren = [];
118
- const walk = (c) => {
119
- for (let i = 0; i < c.length; i++) {
120
- child = c[i];
121
- if (Array.isArray(child)) {
122
- walk(child);
123
- }
124
- else if (child != null && typeof child !== 'boolean') {
125
- if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) {
126
- child = String(child);
127
- }
128
- if (simple && lastSimple) {
129
- // If the previous child was simple (string), we merge both
130
- vNodeChildren[vNodeChildren.length - 1].$text$ += child;
131
- }
132
- else {
133
- // Append a new vNode, if it's text, we create a text vNode
134
- vNodeChildren.push(simple ? newVNode(null, child) : child);
135
- }
136
- lastSimple = simple;
137
- }
138
- }
139
- };
140
- walk(children);
141
- if (vnodeData) {
142
- if (vnodeData.key) {
143
- key = vnodeData.key;
144
- }
145
- // normalize class / className attributes
146
- {
147
- const classData = vnodeData.className || vnodeData.class;
148
- if (classData) {
149
- vnodeData.class =
150
- typeof classData !== 'object'
151
- ? classData
152
- : Object.keys(classData)
153
- .filter((k) => classData[k])
154
- .join(' ');
155
- }
156
- }
157
- }
158
- const vnode = newVNode(nodeName, null);
159
- vnode.$attrs$ = vnodeData;
160
- if (vNodeChildren.length > 0) {
161
- vnode.$children$ = vNodeChildren;
162
- }
163
- {
164
- vnode.$key$ = key;
165
- }
166
- return vnode;
167
- };
168
- /**
169
- * A utility function for creating a virtual DOM node from a tag and some
170
- * possible text content.
171
- *
172
- * @param tag the tag for this element
173
- * @param text possible text content for the node
174
- * @returns a newly-minted virtual DOM node
175
- */
176
- const newVNode = (tag, text) => {
177
- const vnode = {
178
- $flags$: 0,
179
- $tag$: tag,
180
- $text$: text,
181
- $elm$: null,
182
- $children$: null,
183
- };
184
- {
185
- vnode.$attrs$ = null;
186
- }
187
- {
188
- vnode.$key$ = null;
189
- }
190
- return vnode;
191
- };
192
- const Host = {};
193
- /**
194
- * Check whether a given node is a Host node or not
195
- *
196
- * @param node the virtual DOM node to check
197
- * @returns whether it's a Host node or not
198
- */
199
- const isHost = (node) => node && node.$tag$ === Host;
200
- /**
201
- * Parse a new property value for a given property type.
202
- *
203
- * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
204
- * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
205
- * 1. `any`, the type given to `propValue` in the function signature
206
- * 2. the type stored from `propType`.
207
- *
208
- * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
209
- *
210
- * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
211
- * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
212
- * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
213
- * ```tsx
214
- * <my-cmp prop-val={0}></my-cmp>
215
- * ```
216
- *
217
- * HTML prop values on the other hand, will always a string
218
- *
219
- * @param propValue the new value to coerce to some type
220
- * @param propType the type of the prop, expressed as a binary number
221
- * @returns the parsed/coerced value
222
- */
223
- const parsePropertyValue = (propValue, propType) => {
224
- // ensure this value is of the correct prop type
225
- if (propValue != null && !isComplexType(propValue)) {
226
- if (propType & 4 /* MEMBER_FLAGS.Boolean */) {
227
- // per the HTML spec, any string value means it is a boolean true value
228
- // but we'll cheat here and say that the string "false" is the boolean false
229
- return propValue === 'false' ? false : propValue === '' || !!propValue;
230
- }
231
- if (propType & 1 /* MEMBER_FLAGS.String */) {
232
- // could have been passed as a number or boolean
233
- // but we still want it as a string
234
- return String(propValue);
235
- }
236
- // redundant return here for better minification
237
- return propValue;
238
- }
239
- // not sure exactly what type we want
240
- // so no need to change to a different type
241
- return propValue;
242
- };
243
- const getElement = (ref) => (getHostRef(ref).$hostElement$ );
244
- /**
245
- * Helper function to create & dispatch a custom Event on a provided target
246
- * @param elm the target of the Event
247
- * @param name the name to give the custom Event
248
- * @param opts options for configuring a custom Event
249
- * @returns the custom Event
250
- */
251
- const emitEvent = (elm, name, opts) => {
252
- const ev = plt.ce(name, opts);
253
- elm.dispatchEvent(ev);
254
- return ev;
255
- };
256
- const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
257
- const registerStyle = (scopeId, cssText, allowCS) => {
258
- let style = styles.get(scopeId);
259
- if (supportsConstructableStylesheets && allowCS) {
260
- style = (style || new CSSStyleSheet());
261
- if (typeof style === 'string') {
262
- style = cssText;
263
- }
264
- else {
265
- style.replaceSync(cssText);
266
- }
267
- }
268
- else {
269
- style = cssText;
270
- }
271
- styles.set(scopeId, style);
272
- };
273
- const addStyle = (styleContainerNode, cmpMeta, mode) => {
274
- var _a;
275
- const scopeId = getScopeId(cmpMeta);
276
- const style = styles.get(scopeId);
277
- // if an element is NOT connected then getRootNode() will return the wrong root node
278
- // so the fallback is to always use the document for the root node in those cases
279
- styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
280
- if (style) {
281
- if (typeof style === 'string') {
282
- styleContainerNode = styleContainerNode.head || styleContainerNode;
283
- let appliedStyles = rootAppliedStyles.get(styleContainerNode);
284
- let styleElm;
285
- if (!appliedStyles) {
286
- rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
287
- }
288
- if (!appliedStyles.has(scopeId)) {
289
- {
290
- styleElm = doc.createElement('style');
291
- styleElm.innerHTML = style;
292
- // Apply CSP nonce to the style tag if it exists
293
- const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
294
- if (nonce != null) {
295
- styleElm.setAttribute('nonce', nonce);
296
- }
297
- styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
298
- }
299
- // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
300
- if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
301
- styleElm.innerHTML += SLOT_FB_CSS;
302
- }
303
- if (appliedStyles) {
304
- appliedStyles.add(scopeId);
305
- }
306
- }
307
- }
308
- else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
309
- styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
310
- }
311
- }
312
- return scopeId;
313
- };
314
- const attachStyles = (hostRef) => {
315
- const cmpMeta = hostRef.$cmpMeta$;
316
- const elm = hostRef.$hostElement$;
317
- const flags = cmpMeta.$flags$;
318
- const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
319
- const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
320
- if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
321
- // only required when we're NOT using native shadow dom (slot)
322
- // or this browser doesn't support native shadow dom
323
- // and this host element was NOT created with SSR
324
- // let's pick out the inner content for slot projection
325
- // create a node to represent where the original
326
- // content was first placed, which is useful later on
327
- // DOM WRITE!!
328
- elm['s-sc'] = scopeId;
329
- elm.classList.add(scopeId + '-h');
330
- }
331
- endAttachStyles();
332
- };
333
- const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
334
- /**
335
- * Production setAccessor() function based on Preact by
336
- * Jason Miller (@developit)
337
- * Licensed under the MIT License
338
- * https://github.com/developit/preact/blob/master/LICENSE
339
- *
340
- * Modified for Stencil's compiler and vdom
341
- */
342
- /**
343
- * When running a VDom render set properties present on a VDom node onto the
344
- * corresponding HTML element.
345
- *
346
- * Note that this function has special functionality for the `class`,
347
- * `style`, `key`, and `ref` attributes, as well as event handlers (like
348
- * `onClick`, etc). All others are just passed through as-is.
349
- *
350
- * @param elm the HTMLElement onto which attributes should be set
351
- * @param memberName the name of the attribute to set
352
- * @param oldValue the old value for the attribute
353
- * @param newValue the new value for the attribute
354
- * @param isSvg whether we're in an svg context or not
355
- * @param flags bitflags for Vdom variables
356
- */
357
- const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
358
- if (oldValue !== newValue) {
359
- let isProp = isMemberInElement(elm, memberName);
360
- memberName.toLowerCase();
361
- if (memberName === 'class') {
362
- const classList = elm.classList;
363
- const oldClasses = parseClassList(oldValue);
364
- const newClasses = parseClassList(newValue);
365
- classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
366
- classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
367
- }
368
- else if (memberName === 'style') {
369
- // update style attribute, css properties and values
370
- {
371
- for (const prop in oldValue) {
372
- if (!newValue || newValue[prop] == null) {
373
- if (prop.includes('-')) {
374
- elm.style.removeProperty(prop);
375
- }
376
- else {
377
- elm.style[prop] = '';
378
- }
379
- }
380
- }
381
- }
382
- for (const prop in newValue) {
383
- if (!oldValue || newValue[prop] !== oldValue[prop]) {
384
- if (prop.includes('-')) {
385
- elm.style.setProperty(prop, newValue[prop]);
386
- }
387
- else {
388
- elm.style[prop] = newValue[prop];
389
- }
390
- }
391
- }
392
- }
393
- else if (memberName === 'key')
394
- ;
395
- else {
396
- // Set property if it exists and it's not a SVG
397
- const isComplex = isComplexType(newValue);
398
- if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
399
- try {
400
- if (!elm.tagName.includes('-')) {
401
- const n = newValue == null ? '' : newValue;
402
- // Workaround for Safari, moving the <input> caret when re-assigning the same valued
403
- if (memberName === 'list') {
404
- isProp = false;
405
- }
406
- else if (oldValue == null || elm[memberName] != n) {
407
- elm[memberName] = n;
408
- }
409
- }
410
- else {
411
- elm[memberName] = newValue;
412
- }
413
- }
414
- catch (e) {
415
- /**
416
- * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
417
- */
418
- }
419
- }
420
- if (newValue == null || newValue === false) {
421
- if (newValue !== false || elm.getAttribute(memberName) === '') {
422
- {
423
- elm.removeAttribute(memberName);
424
- }
425
- }
426
- }
427
- else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
428
- newValue = newValue === true ? '' : newValue;
429
- {
430
- elm.setAttribute(memberName, newValue);
431
- }
432
- }
433
- }
434
- }
435
- };
436
- const parseClassListRegex = /\s/;
437
- /**
438
- * Parsed a string of classnames into an array
439
- * @param value className string, e.g. "foo bar baz"
440
- * @returns list of classes, e.g. ["foo", "bar", "baz"]
441
- */
442
- const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
443
- const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
444
- // if the element passed in is a shadow root, which is a document fragment
445
- // then we want to be adding attrs/props to the shadow root's "host" element
446
- // if it's not a shadow root, then we add attrs/props to the same element
447
- const elm = newVnode.$elm$.nodeType === 11 /* NODE_TYPE.DocumentFragment */ && newVnode.$elm$.host
448
- ? newVnode.$elm$.host
449
- : newVnode.$elm$;
450
- const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
451
- const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
452
- {
453
- // remove attributes no longer present on the vnode by setting them to undefined
454
- for (memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
455
- if (!(memberName in newVnodeAttrs)) {
456
- setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
457
- }
458
- }
459
- }
460
- // add new & update changed attributes
461
- for (memberName of sortedAttrNames(Object.keys(newVnodeAttrs))) {
462
- setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
463
- }
464
- };
465
- /**
466
- * Sort a list of attribute names to ensure that all the attribute names which
467
- * are _not_ `"ref"` come before `"ref"`. Preserve the order of the non-ref
468
- * attributes.
469
- *
470
- * **Note**: if the supplied attributes do not include `'ref'` then the same
471
- * (by reference) array will be returned without modification.
472
- *
473
- * @param attrNames attribute names to sort
474
- * @returns a list of attribute names, sorted if they include `"ref"`
475
- */
476
- function sortedAttrNames(attrNames) {
477
- return attrNames.includes('ref')
478
- ? // we need to sort these to ensure that `'ref'` is the last attr
479
- [...attrNames.filter((attr) => attr !== 'ref'), 'ref']
480
- : // no need to sort, return the original array
481
- attrNames;
482
- }
483
- /**
484
- * Create a DOM Node corresponding to one of the children of a given VNode.
485
- *
486
- * @param oldParentVNode the parent VNode from the previous render
487
- * @param newParentVNode the parent VNode from the current render
488
- * @param childIndex the index of the VNode, in the _new_ parent node's
489
- * children, for which we will create a new DOM node
490
- * @param parentElm the parent DOM node which our new node will be a child of
491
- * @returns the newly created node
492
- */
493
- const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
494
- // tslint:disable-next-line: prefer-const
495
- const newVNode = newParentVNode.$children$[childIndex];
496
- let i = 0;
497
- let elm;
498
- let childNode;
499
- {
500
- if (!isSvgMode) {
501
- isSvgMode = newVNode.$tag$ === 'svg';
502
- }
503
- // create element
504
- elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$tag$)
505
- );
506
- if (isSvgMode && newVNode.$tag$ === 'foreignObject') {
507
- isSvgMode = false;
508
- }
509
- // add css classes, attrs, props, listeners, etc.
510
- {
511
- updateElement(null, newVNode, isSvgMode);
512
- }
513
- if (isDef(scopeId) && elm['s-si'] !== scopeId) {
514
- // if there is a scopeId and this is the initial render
515
- // then let's add the scopeId as a css class
516
- elm.classList.add((elm['s-si'] = scopeId));
517
- }
518
- if (newVNode.$children$) {
519
- for (i = 0; i < newVNode.$children$.length; ++i) {
520
- // create the node
521
- childNode = createElm(oldParentVNode, newVNode, i);
522
- // return node could have been null
523
- if (childNode) {
524
- // append our new node
525
- elm.appendChild(childNode);
526
- }
527
- }
528
- }
529
- {
530
- if (newVNode.$tag$ === 'svg') {
531
- // Only reset the SVG context when we're exiting <svg> element
532
- isSvgMode = false;
533
- }
534
- else if (elm.tagName === 'foreignObject') {
535
- // Reenter SVG context when we're exiting <foreignObject> element
536
- isSvgMode = true;
537
- }
538
- }
539
- }
540
- // This needs to always happen so we can hide nodes that are projected
541
- // to another component but don't end up in a slot
542
- elm['s-hn'] = hostTagName;
543
- return elm;
544
- };
545
- /**
546
- * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
547
- * add them to the DOM in the appropriate place.
548
- *
549
- * @param parentElm the DOM node which should be used as a parent for the new
550
- * DOM nodes
551
- * @param before a child of the `parentElm` which the new children should be
552
- * inserted before (optional)
553
- * @param parentVNode the parent virtual DOM node
554
- * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
555
- * @param startIdx the index in the child virtual DOM nodes at which to start
556
- * creating DOM nodes (inclusive)
557
- * @param endIdx the index in the child virtual DOM nodes at which to stop
558
- * creating DOM nodes (inclusive)
559
- */
560
- const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
561
- let containerElm = (parentElm);
562
- let childNode;
563
- if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
564
- containerElm = containerElm.shadowRoot;
565
- }
566
- for (; startIdx <= endIdx; ++startIdx) {
567
- if (vnodes[startIdx]) {
568
- childNode = createElm(null, parentVNode, startIdx);
569
- if (childNode) {
570
- vnodes[startIdx].$elm$ = childNode;
571
- containerElm.insertBefore(childNode, before);
572
- }
573
- }
574
- }
575
- };
576
- /**
577
- * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
578
- * This can be used to, for instance, clean up after a list of children which
579
- * should no longer be shown.
580
- *
581
- * This function also handles some of Stencil's slot relocation logic.
582
- *
583
- * @param vnodes a list of virtual DOM nodes to remove
584
- * @param startIdx the index at which to start removing nodes (inclusive)
585
- * @param endIdx the index at which to stop removing nodes (inclusive)
586
- */
587
- const removeVnodes = (vnodes, startIdx, endIdx) => {
588
- for (let index = startIdx; index <= endIdx; ++index) {
589
- const vnode = vnodes[index];
590
- if (vnode) {
591
- const elm = vnode.$elm$;
592
- if (elm) {
593
- // remove the vnode's element from the dom
594
- elm.remove();
595
- }
596
- }
597
- }
598
- };
599
- /**
600
- * Reconcile the children of a new VNode with the children of an old VNode by
601
- * traversing the two collections of children, identifying nodes that are
602
- * conserved or changed, calling out to `patch` to make any necessary
603
- * updates to the DOM, and rearranging DOM nodes as needed.
604
- *
605
- * The algorithm for reconciling children works by analyzing two 'windows' onto
606
- * the two arrays of children (`oldCh` and `newCh`). We keep track of the
607
- * 'windows' by storing start and end indices and references to the
608
- * corresponding array entries. Initially the two 'windows' are basically equal
609
- * to the entire array, but we progressively narrow the windows until there are
610
- * no children left to update by doing the following:
611
- *
612
- * 1. Skip any `null` entries at the beginning or end of the two arrays, so
613
- * that if we have an initial array like the following we'll end up dealing
614
- * only with a window bounded by the highlighted elements:
615
- *
616
- * [null, null, VNode1 , ... , VNode2, null, null]
617
- * ^^^^^^ ^^^^^^
618
- *
619
- * 2. Check to see if the elements at the head and tail positions are equal
620
- * across the windows. This will basically detect elements which haven't
621
- * been added, removed, or changed position, i.e. if you had the following
622
- * VNode elements (represented as HTML):
623
- *
624
- * oldVNode: `<div><p><span>HEY</span></p></div>`
625
- * newVNode: `<div><p><span>THERE</span></p></div>`
626
- *
627
- * Then when comparing the children of the `<div>` tag we check the equality
628
- * of the VNodes corresponding to the `<p>` tags and, since they are the
629
- * same tag in the same position, we'd be able to avoid completely
630
- * re-rendering the subtree under them with a new DOM element and would just
631
- * call out to `patch` to handle reconciling their children and so on.
632
- *
633
- * 3. Check, for both windows, to see if the element at the beginning of the
634
- * window corresponds to the element at the end of the other window. This is
635
- * a heuristic which will let us identify _some_ situations in which
636
- * elements have changed position, for instance it _should_ detect that the
637
- * children nodes themselves have not changed but merely moved in the
638
- * following example:
639
- *
640
- * oldVNode: `<div><element-one /><element-two /></div>`
641
- * newVNode: `<div><element-two /><element-one /></div>`
642
- *
643
- * If we find cases like this then we also need to move the concrete DOM
644
- * elements corresponding to the moved children to write the re-order to the
645
- * DOM.
646
- *
647
- * 4. Finally, if VNodes have the `key` attribute set on them we check for any
648
- * nodes in the old children which have the same key as the first element in
649
- * our window on the new children. If we find such a node we handle calling
650
- * out to `patch`, moving relevant DOM nodes, and so on, in accordance with
651
- * what we find.
652
- *
653
- * Finally, once we've narrowed our 'windows' to the point that either of them
654
- * collapse (i.e. they have length 0) we then handle any remaining VNode
655
- * insertion or deletion that needs to happen to get a DOM state that correctly
656
- * reflects the new child VNodes. If, for instance, after our window on the old
657
- * children has collapsed we still have more nodes on the new children that
658
- * we haven't dealt with yet then we need to add them, or if the new children
659
- * collapse but we still have unhandled _old_ children then we need to make
660
- * sure the corresponding DOM nodes are removed.
661
- *
662
- * @param parentElm the node into which the parent VNode is rendered
663
- * @param oldCh the old children of the parent node
664
- * @param newVNode the new VNode which will replace the parent
665
- * @param newCh the new children of the parent node
666
- * @param isInitialRender whether or not this is the first render of the vdom
667
- */
668
- const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {
669
- let oldStartIdx = 0;
670
- let newStartIdx = 0;
671
- let idxInOld = 0;
672
- let i = 0;
673
- let oldEndIdx = oldCh.length - 1;
674
- let oldStartVnode = oldCh[0];
675
- let oldEndVnode = oldCh[oldEndIdx];
676
- let newEndIdx = newCh.length - 1;
677
- let newStartVnode = newCh[0];
678
- let newEndVnode = newCh[newEndIdx];
679
- let node;
680
- let elmToMove;
681
- while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
682
- if (oldStartVnode == null) {
683
- // VNode might have been moved left
684
- oldStartVnode = oldCh[++oldStartIdx];
685
- }
686
- else if (oldEndVnode == null) {
687
- oldEndVnode = oldCh[--oldEndIdx];
688
- }
689
- else if (newStartVnode == null) {
690
- newStartVnode = newCh[++newStartIdx];
691
- }
692
- else if (newEndVnode == null) {
693
- newEndVnode = newCh[--newEndIdx];
694
- }
695
- else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
696
- // if the start nodes are the same then we should patch the new VNode
697
- // onto the old one, and increment our `newStartIdx` and `oldStartIdx`
698
- // indices to reflect that. We don't need to move any DOM Nodes around
699
- // since things are matched up in order.
700
- patch(oldStartVnode, newStartVnode, isInitialRender);
701
- oldStartVnode = oldCh[++oldStartIdx];
702
- newStartVnode = newCh[++newStartIdx];
703
- }
704
- else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
705
- // likewise, if the end nodes are the same we patch new onto old and
706
- // decrement our end indices, and also likewise in this case we don't
707
- // need to move any DOM Nodes.
708
- patch(oldEndVnode, newEndVnode, isInitialRender);
709
- oldEndVnode = oldCh[--oldEndIdx];
710
- newEndVnode = newCh[--newEndIdx];
711
- }
712
- else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
713
- patch(oldStartVnode, newEndVnode, isInitialRender);
714
- // We need to move the element for `oldStartVnode` into a position which
715
- // will be appropriate for `newEndVnode`. For this we can use
716
- // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
717
- // sibling for `oldEndVnode.$elm$` then we want to move the DOM node for
718
- // `oldStartVnode` between `oldEndVnode` and it's sibling, like so:
719
- //
720
- // <old-start-node />
721
- // <some-intervening-node />
722
- // <old-end-node />
723
- // <!-- -> <-- `oldStartVnode.$elm$` should be inserted here
724
- // <next-sibling />
725
- //
726
- // If instead `oldEndVnode.$elm$` has no sibling then we just want to put
727
- // the node for `oldStartVnode` at the end of the children of
728
- // `parentElm`. Luckily, `Node.nextSibling` will return `null` if there
729
- // aren't any siblings, and passing `null` to `Node.insertBefore` will
730
- // append it to the children of the parent element.
731
- parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
732
- oldStartVnode = oldCh[++oldStartIdx];
733
- newEndVnode = newCh[--newEndIdx];
734
- }
735
- else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
736
- patch(oldEndVnode, newStartVnode, isInitialRender);
737
- // We've already checked above if `oldStartVnode` and `newStartVnode` are
738
- // the same node, so since we're here we know that they are not. Thus we
739
- // can move the element for `oldEndVnode` _before_ the element for
740
- // `oldStartVnode`, leaving `oldStartVnode` to be reconciled in the
741
- // future.
742
- parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
743
- oldEndVnode = oldCh[--oldEndIdx];
744
- newStartVnode = newCh[++newStartIdx];
745
- }
746
- else {
747
- // Here we do some checks to match up old and new nodes based on the
748
- // `$key$` attribute, which is set by putting a `key="my-key"` attribute
749
- // in the JSX for a DOM element in the implementation of a Stencil
750
- // component.
751
- //
752
- // First we check to see if there are any nodes in the array of old
753
- // children which have the same key as the first node in the new
754
- // children.
755
- idxInOld = -1;
756
- {
757
- for (i = oldStartIdx; i <= oldEndIdx; ++i) {
758
- if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
759
- idxInOld = i;
760
- break;
761
- }
762
- }
763
- }
764
- if (idxInOld >= 0) {
765
- // We found a node in the old children which matches up with the first
766
- // node in the new children! So let's deal with that
767
- elmToMove = oldCh[idxInOld];
768
- if (elmToMove.$tag$ !== newStartVnode.$tag$) {
769
- // the tag doesn't match so we'll need a new DOM element
770
- node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
771
- }
772
- else {
773
- patch(elmToMove, newStartVnode, isInitialRender);
774
- // invalidate the matching old node so that we won't try to update it
775
- // again later on
776
- oldCh[idxInOld] = undefined;
777
- node = elmToMove.$elm$;
778
- }
779
- newStartVnode = newCh[++newStartIdx];
780
- }
781
- else {
782
- // We either didn't find an element in the old children that matches
783
- // the key of the first new child OR the build is not using `key`
784
- // attributes at all. In either case we need to create a new element
785
- // for the new node.
786
- node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
787
- newStartVnode = newCh[++newStartIdx];
788
- }
789
- if (node) {
790
- // if we created a new node then handle inserting it to the DOM
791
- {
792
- oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
793
- }
794
- }
795
- }
796
- }
797
- if (oldStartIdx > oldEndIdx) {
798
- // we have some more new nodes to add which don't match up with old nodes
799
- addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
800
- }
801
- else if (newStartIdx > newEndIdx) {
802
- // there are nodes in the `oldCh` array which no longer correspond to nodes
803
- // in the new array, so lets remove them (which entails cleaning up the
804
- // relevant DOM nodes)
805
- removeVnodes(oldCh, oldStartIdx, oldEndIdx);
806
- }
807
- };
808
- /**
809
- * Compare two VNodes to determine if they are the same
810
- *
811
- * **NB**: This function is an equality _heuristic_ based on the available
812
- * information set on the two VNodes and can be misleading under certain
813
- * circumstances. In particular, if the two nodes do not have `key` attrs
814
- * (available under `$key$` on VNodes) then the function falls back on merely
815
- * checking that they have the same tag.
816
- *
817
- * So, in other words, if `key` attrs are not set on VNodes which may be
818
- * changing order within a `children` array or something along those lines then
819
- * we could obtain a false negative and then have to do needless re-rendering
820
- * (i.e. we'd say two VNodes aren't equal when in fact they should be).
821
- *
822
- * @param leftVNode the first VNode to check
823
- * @param rightVNode the second VNode to check
824
- * @param isInitialRender whether or not this is the first render of the vdom
825
- * @returns whether they're equal or not
826
- */
827
- const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
828
- // compare if two vnode to see if they're "technically" the same
829
- // need to have the same element tag, and same key to be the same
830
- if (leftVNode.$tag$ === rightVNode.$tag$) {
831
- // this will be set if JSX tags in the build have `key` attrs set on them
832
- // we only want to check this if we're not on the first render since on
833
- // first render `leftVNode.$key$` will always be `null`, so we can be led
834
- // astray and, for instance, accidentally delete a DOM node that we want to
835
- // keep around.
836
- if (!isInitialRender) {
837
- return leftVNode.$key$ === rightVNode.$key$;
838
- }
839
- return true;
840
- }
841
- return false;
842
- };
843
- /**
844
- * Handle reconciling an outdated VNode with a new one which corresponds to
845
- * it. This function handles flushing updates to the DOM and reconciling the
846
- * children of the two nodes (if any).
847
- *
848
- * @param oldVNode an old VNode whose DOM element and children we want to update
849
- * @param newVNode a new VNode representing an updated version of the old one
850
- * @param isInitialRender whether or not this is the first render of the vdom
851
- */
852
- const patch = (oldVNode, newVNode, isInitialRender = false) => {
853
- const elm = (newVNode.$elm$ = oldVNode.$elm$);
854
- const oldChildren = oldVNode.$children$;
855
- const newChildren = newVNode.$children$;
856
- const tag = newVNode.$tag$;
857
- {
858
- {
859
- // test if we're rendering an svg element, or still rendering nodes inside of one
860
- // only add this to the when the compiler sees we're using an svg somewhere
861
- isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
862
- }
863
- {
864
- {
865
- // either this is the first render of an element OR it's an update
866
- // AND we already know it's possible it could have changed
867
- // this updates the element's css classes, attrs, props, listeners, etc.
868
- updateElement(oldVNode, newVNode, isSvgMode);
869
- }
870
- }
871
- if (oldChildren !== null && newChildren !== null) {
872
- // looks like there's child vnodes for both the old and new vnodes
873
- // so we need to call `updateChildren` to reconcile them
874
- updateChildren(elm, oldChildren, newVNode, newChildren, isInitialRender);
875
- }
876
- else if (newChildren !== null) {
877
- // add the new vnode children
878
- addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
879
- }
880
- else if (oldChildren !== null) {
881
- // no new child vnodes, but there are old child vnodes to remove
882
- removeVnodes(oldChildren, 0, oldChildren.length - 1);
883
- }
884
- if (isSvgMode && tag === 'svg') {
885
- isSvgMode = false;
886
- }
887
- }
888
- };
889
- /**
890
- * The main entry point for Stencil's virtual DOM-based rendering engine
891
- *
892
- * Given a {@link d.HostRef} container and some virtual DOM nodes, this
893
- * function will handle creating a virtual DOM tree with a single root, patching
894
- * the current virtual DOM tree onto an old one (if any), dealing with slot
895
- * relocation, and reflecting attributes.
896
- *
897
- * @param hostRef data needed to root and render the virtual DOM tree, such as
898
- * the DOM node into which it should be rendered.
899
- * @param renderFnResults the virtual DOM nodes to be rendered
900
- * @param isInitialLoad whether or not this is the first call after page load
901
- */
902
- const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
903
- const hostElm = hostRef.$hostElement$;
904
- const oldVNode = hostRef.$vnode$ || newVNode(null, null);
905
- // if `renderFnResults` is a Host node then we can use it directly. If not,
906
- // we need to call `h` again to wrap the children of our component in a
907
- // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
908
- // implicitly that the top-level vdom node is 1) an only child and 2)
909
- // contains attrs that need to be set on the host element.
910
- const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
911
- hostTagName = hostElm.tagName;
912
- // On the first render and *only* on the first render we want to check for
913
- // any attributes set on the host element which are also set on the vdom
914
- // node. If we find them, we override the value on the VDom node attrs with
915
- // the value from the host element, which allows developers building apps
916
- // with Stencil components to override e.g. the `role` attribute on a
917
- // component even if it's already set on the `Host`.
918
- if (isInitialLoad && rootVnode.$attrs$) {
919
- for (const key of Object.keys(rootVnode.$attrs$)) {
920
- // We have a special implementation in `setAccessor` for `style` and
921
- // `class` which reconciles values coming from the VDom with values
922
- // already present on the DOM element, so we don't want to override those
923
- // attributes on the VDom tree with values from the host element if they
924
- // are present.
925
- //
926
- // Likewise, `ref` and `key` are special internal values for the Stencil
927
- // runtime and we don't want to override those either.
928
- if (hostElm.hasAttribute(key) && !['key', 'ref', 'style', 'class'].includes(key)) {
929
- rootVnode.$attrs$[key] = hostElm[key];
930
- }
931
- }
932
- }
933
- rootVnode.$tag$ = null;
934
- rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
935
- hostRef.$vnode$ = rootVnode;
936
- rootVnode.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm );
937
- {
938
- scopeId = hostElm['s-sc'];
939
- }
940
- // synchronous patch
941
- patch(oldVNode, rootVnode, isInitialLoad);
942
- };
943
- const attachToAncestor = (hostRef, ancestorComponent) => {
944
- if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
945
- ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
946
- }
947
- };
948
- const scheduleUpdate = (hostRef, isInitialLoad) => {
949
- {
950
- hostRef.$flags$ |= 16 /* HOST_FLAGS.isQueuedForUpdate */;
951
- }
952
- if (hostRef.$flags$ & 4 /* HOST_FLAGS.isWaitingForChildren */) {
953
- hostRef.$flags$ |= 512 /* HOST_FLAGS.needsRerender */;
954
- return;
955
- }
956
- attachToAncestor(hostRef, hostRef.$ancestorComponent$);
957
- // there is no ancestor component or the ancestor component
958
- // has already fired off its lifecycle update then
959
- // fire off the initial update
960
- const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
961
- return writeTask(dispatch) ;
962
- };
963
- /**
964
- * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
965
- * component lifecycle methods like `componentWillLoad` as well as
966
- * {@link updateComponent}, which will kick off the virtual DOM re-render.
967
- *
968
- * @param hostRef a reference to a host DOM node
969
- * @param isInitialLoad whether we're on the initial load or not
970
- * @returns an empty Promise which is used to enqueue a series of operations for
971
- * the component
972
- */
973
- const dispatchHooks = (hostRef, isInitialLoad) => {
974
- const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
975
- const instance = hostRef.$lazyInstance$ ;
976
- // We're going to use this variable together with `enqueue` to implement a
977
- // little promise-based queue. We start out with it `undefined`. When we add
978
- // the first function to the queue we'll set this variable to be that
979
- // function's return value. When we attempt to add subsequent values to the
980
- // queue we'll check that value and, if it was a `Promise`, we'll then chain
981
- // the new function off of that `Promise` using `.then()`. This will give our
982
- // queue two nice properties:
983
- //
984
- // 1. If all functions added to the queue are synchronous they'll be called
985
- // synchronously right away.
986
- // 2. If all functions added to the queue are asynchronous they'll all be
987
- // called in order after `dispatchHooks` exits.
988
- let maybePromise;
989
- endSchedule();
990
- return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
991
- };
992
- /**
993
- * This function uses a Promise to implement a simple first-in, first-out queue
994
- * of functions to be called.
995
- *
996
- * The queue is ordered on the basis of the first argument. If it's
997
- * `undefined`, then nothing is on the queue yet, so the provided function can
998
- * be called synchronously (although note that this function may return a
999
- * `Promise`). The idea is that then the return value of that enqueueing
1000
- * operation is kept around, so that if it was a `Promise` then subsequent
1001
- * functions can be enqueued by calling this function again with that `Promise`
1002
- * as the first argument.
1003
- *
1004
- * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
1005
- * @param fn a function to enqueue
1006
- * @returns either a `Promise` or the return value of the provided function
1007
- */
1008
- const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
1009
- /**
1010
- * Check that a value is a `Promise`. To check, we first see if the value is an
1011
- * instance of the `Promise` global. In a few circumstances, in particular if
1012
- * the global has been overwritten, this is could be misleading, so we also do
1013
- * a little 'duck typing' check to see if the `.then` property of the value is
1014
- * defined and a function.
1015
- *
1016
- * @param maybePromise it might be a promise!
1017
- * @returns whether it is or not
1018
- */
1019
- const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
1020
- (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
1021
- /**
1022
- * Update a component given reference to its host elements and so on.
1023
- *
1024
- * @param hostRef an object containing references to the element's host node,
1025
- * VDom nodes, and other metadata
1026
- * @param instance a reference to the underlying host element where it will be
1027
- * rendered
1028
- * @param isInitialLoad whether or not this function is being called as part of
1029
- * the first render cycle
1030
- */
1031
- const updateComponent = async (hostRef, instance, isInitialLoad) => {
1032
- var _a;
1033
- const elm = hostRef.$hostElement$;
1034
- const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
1035
- const rc = elm['s-rc'];
1036
- if (isInitialLoad) {
1037
- // DOM WRITE!
1038
- attachStyles(hostRef);
1039
- }
1040
- const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
1041
- {
1042
- callRender(hostRef, instance, elm, isInitialLoad);
1043
- }
1044
- if (rc) {
1045
- // ok, so turns out there are some child host elements
1046
- // waiting on this parent element to load
1047
- // let's fire off all update callbacks waiting
1048
- rc.map((cb) => cb());
1049
- elm['s-rc'] = undefined;
1050
- }
1051
- endRender();
1052
- endUpdate();
1053
- {
1054
- const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
1055
- const postUpdate = () => postUpdateComponent(hostRef);
1056
- if (childrenPromises.length === 0) {
1057
- postUpdate();
1058
- }
1059
- else {
1060
- Promise.all(childrenPromises).then(postUpdate);
1061
- hostRef.$flags$ |= 4 /* HOST_FLAGS.isWaitingForChildren */;
1062
- childrenPromises.length = 0;
1063
- }
1064
- }
1065
- };
1066
- /**
1067
- * Handle making the call to the VDom renderer with the proper context given
1068
- * various build variables
1069
- *
1070
- * @param hostRef an object containing references to the element's host node,
1071
- * VDom nodes, and other metadata
1072
- * @param instance a reference to the underlying host element where it will be
1073
- * rendered
1074
- * @param elm the Host element for the component
1075
- * @param isInitialLoad whether or not this function is being called as part of
1076
- * @returns an empty promise
1077
- */
1078
- const callRender = (hostRef, instance, elm, isInitialLoad) => {
1079
- try {
1080
- /**
1081
- * minification optimization: `allRenderFn` is `true` if all components have a `render`
1082
- * method, so we can call the method immediately. If not, check before calling it.
1083
- */
1084
- instance = instance.render() ;
1085
- {
1086
- hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
1087
- }
1088
- {
1089
- hostRef.$flags$ |= 2 /* HOST_FLAGS.hasRendered */;
1090
- }
1091
- {
1092
- {
1093
- // looks like we've got child nodes to render into this host element
1094
- // or we need to update the css class/attrs on the host element
1095
- // DOM WRITE!
1096
- {
1097
- renderVdom(hostRef, instance, isInitialLoad);
1098
- }
1099
- }
1100
- }
1101
- }
1102
- catch (e) {
1103
- consoleError(e, hostRef.$hostElement$);
1104
- }
1105
- return null;
1106
- };
1107
- const postUpdateComponent = (hostRef) => {
1108
- const tagName = hostRef.$cmpMeta$.$tagName$;
1109
- const elm = hostRef.$hostElement$;
1110
- const endPostUpdate = createTime('postUpdate', tagName);
1111
- const ancestorComponent = hostRef.$ancestorComponent$;
1112
- if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
1113
- hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
1114
- {
1115
- // DOM WRITE!
1116
- addHydratedFlag(elm);
1117
- }
1118
- endPostUpdate();
1119
- {
1120
- hostRef.$onReadyResolve$(elm);
1121
- if (!ancestorComponent) {
1122
- appDidLoad();
1123
- }
1124
- }
1125
- }
1126
- else {
1127
- endPostUpdate();
1128
- }
1129
- // load events fire from bottom to top
1130
- // the deepest elements load first then bubbles up
1131
- {
1132
- if (hostRef.$onRenderResolve$) {
1133
- hostRef.$onRenderResolve$();
1134
- hostRef.$onRenderResolve$ = undefined;
1135
- }
1136
- if (hostRef.$flags$ & 512 /* HOST_FLAGS.needsRerender */) {
1137
- nextTick(() => scheduleUpdate(hostRef, false));
1138
- }
1139
- hostRef.$flags$ &= ~(4 /* HOST_FLAGS.isWaitingForChildren */ | 512 /* HOST_FLAGS.needsRerender */);
1140
- }
1141
- // ( •_•)
1142
- // ( •_•)>⌐■-■
1143
- // (⌐■_■)
1144
- };
1145
- const appDidLoad = (who) => {
1146
- // on appload
1147
- // we have finish the first big initial render
1148
- {
1149
- addHydratedFlag(doc.documentElement);
1150
- }
1151
- nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
1152
- };
1153
- /**
1154
- * Allows to safely call a method, e.g. `componentDidLoad`, on an instance,
1155
- * e.g. custom element node. If a build figures out that e.g. no component
1156
- * has a `componentDidLoad` method, the instance method gets removed from the
1157
- * output bundle and this function returns `undefined`.
1158
- * @param instance any object that may or may not contain methods
1159
- * @param method method name
1160
- * @param arg single arbitrary argument
1161
- * @returns result of method call if it exists, otherwise `undefined`
1162
- */
1163
- const safeCall = (instance, method, arg) => {
1164
- if (instance && instance[method]) {
1165
- try {
1166
- return instance[method](arg);
1167
- }
1168
- catch (e) {
1169
- consoleError(e);
1170
- }
1171
- }
1172
- return undefined;
1173
- };
1174
- const addHydratedFlag = (elm) => elm.classList.add('hydrated')
1175
- ;
1176
- const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
1177
- const setValue = (ref, propName, newVal, cmpMeta) => {
1178
- // check our new property value against our internal value
1179
- const hostRef = getHostRef(ref);
1180
- const elm = hostRef.$hostElement$ ;
1181
- const oldVal = hostRef.$instanceValues$.get(propName);
1182
- const flags = hostRef.$flags$;
1183
- const instance = hostRef.$lazyInstance$ ;
1184
- newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
1185
- // explicitly check for NaN on both sides, as `NaN === NaN` is always false
1186
- const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
1187
- const didValueChange = newVal !== oldVal && !areBothNaN;
1188
- if ((!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) || oldVal === undefined) && didValueChange) {
1189
- // gadzooks! the property's value has changed!!
1190
- // set our new value!
1191
- hostRef.$instanceValues$.set(propName, newVal);
1192
- if (instance) {
1193
- // get an array of method names of watch functions to call
1194
- if (cmpMeta.$watchers$ && flags & 128 /* HOST_FLAGS.isWatchReady */) {
1195
- const watchMethods = cmpMeta.$watchers$[propName];
1196
- if (watchMethods) {
1197
- // this instance is watching for when this property changed
1198
- watchMethods.map((watchMethodName) => {
1199
- try {
1200
- // fire off each of the watch methods that are watching this property
1201
- instance[watchMethodName](newVal, oldVal, propName);
1202
- }
1203
- catch (e) {
1204
- consoleError(e, elm);
1205
- }
1206
- });
1207
- }
1208
- }
1209
- if ((flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
1210
- // looks like this value actually changed, so we've got work to do!
1211
- // but only if we've already rendered, otherwise just chill out
1212
- // queue that we need to do an update, but don't worry about queuing
1213
- // up millions cuz this function ensures it only runs once
1214
- scheduleUpdate(hostRef, false);
1215
- }
1216
- }
1217
- }
1218
- };
1219
- /**
1220
- * Attach a series of runtime constructs to a compiled Stencil component
1221
- * constructor, including getters and setters for the `@Prop` and `@State`
1222
- * decorators, callbacks for when attributes change, and so on.
1223
- *
1224
- * @param Cstr the constructor for a component that we need to process
1225
- * @param cmpMeta metadata collected previously about the component
1226
- * @param flags a number used to store a series of bit flags
1227
- * @returns a reference to the same constructor passed in (but now mutated)
1228
- */
1229
- const proxyComponent = (Cstr, cmpMeta, flags) => {
1230
- var _a;
1231
- const prototype = Cstr.prototype;
1232
- if (cmpMeta.$members$) {
1233
- if (Cstr.watchers) {
1234
- cmpMeta.$watchers$ = Cstr.watchers;
1235
- }
1236
- // It's better to have a const than two Object.entries()
1237
- const members = Object.entries(cmpMeta.$members$);
1238
- members.map(([memberName, [memberFlags]]) => {
1239
- if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
1240
- ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
1241
- // proxyComponent - prop
1242
- Object.defineProperty(prototype, memberName, {
1243
- get() {
1244
- // proxyComponent, get value
1245
- return getValue(this, memberName);
1246
- },
1247
- set(newValue) {
1248
- // proxyComponent, set value
1249
- setValue(this, memberName, newValue, cmpMeta);
1250
- },
1251
- configurable: true,
1252
- enumerable: true,
1253
- });
1254
- }
1255
- });
1256
- if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
1257
- const attrNameToPropName = new Map();
1258
- prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
1259
- plt.jmp(() => {
1260
- var _a;
1261
- const propName = attrNameToPropName.get(attrName);
1262
- // In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
1263
- // in the case where an attribute was set inline.
1264
- // ```html
1265
- // <my-component some-attribute="some-value"></my-component>
1266
- // ```
1267
- //
1268
- // There is an edge case where a developer sets the attribute inline on a custom element and then
1269
- // programmatically changes it before it has been upgraded as shown below:
1270
- //
1271
- // ```html
1272
- // <!-- this component has _not_ been upgraded yet -->
1273
- // <my-component id="test" some-attribute="some-value"></my-component>
1274
- // <script>
1275
- // // grab non-upgraded component
1276
- // el = document.querySelector("#test");
1277
- // el.someAttribute = "another-value";
1278
- // // upgrade component
1279
- // customElements.define('my-component', MyComponent);
1280
- // </script>
1281
- // ```
1282
- // In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
1283
- // will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
1284
- // to the value that was set inline i.e. "some-value" from above example. When
1285
- // the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
1286
- //
1287
- // The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
1288
- // by connectedCallback as this attributeChangedCallback will not fire.
1289
- //
1290
- // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
1291
- //
1292
- // TODO(STENCIL-16) we should think about whether or not we actually want to be reflecting the attributes to
1293
- // properties here given that this goes against best practices outlined here
1294
- // https://developers.google.com/web/fundamentals/web-components/best-practices#avoid-reentrancy
1295
- if (this.hasOwnProperty(propName)) {
1296
- newValue = this[propName];
1297
- delete this[propName];
1298
- }
1299
- else if (prototype.hasOwnProperty(propName) &&
1300
- typeof this[propName] === 'number' &&
1301
- this[propName] == newValue) {
1302
- // if the propName exists on the prototype of `Cstr`, this update may be a result of Stencil using native
1303
- // APIs to reflect props as attributes. Calls to `setAttribute(someElement, propName)` will result in
1304
- // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
1305
- return;
1306
- }
1307
- else if (propName == null) {
1308
- // At this point we should know this is not a "member", so we can treat it like watching an attribute
1309
- // on a vanilla web component
1310
- const hostRef = getHostRef(this);
1311
- const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
1312
- // We only want to trigger the callback(s) if:
1313
- // 1. The instance is ready
1314
- // 2. The watchers are ready
1315
- // 3. The value has changed
1316
- if (flags &&
1317
- !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
1318
- flags & 128 /* HOST_FLAGS.isWatchReady */ &&
1319
- newValue !== oldValue) {
1320
- const instance = hostRef.$lazyInstance$ ;
1321
- const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
1322
- entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
1323
- if (instance[callbackName] != null) {
1324
- instance[callbackName].call(instance, newValue, oldValue, attrName);
1325
- }
1326
- });
1327
- }
1328
- return;
1329
- }
1330
- this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
1331
- });
1332
- };
1333
- // Create an array of attributes to observe
1334
- // This list in comprised of all strings used within a `@Watch()` decorator
1335
- // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
1336
- // As such, there is no way to guarantee type-safety here that a user hasn't entered
1337
- // an invalid attribute.
1338
- Cstr.observedAttributes = Array.from(new Set([
1339
- ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
1340
- ...members
1341
- .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
1342
- .map(([propName, m]) => {
1343
- const attrName = m[1] || propName;
1344
- attrNameToPropName.set(attrName, propName);
1345
- return attrName;
1346
- }),
1347
- ]));
1348
- }
1349
- }
1350
- return Cstr;
1351
- };
1352
- /**
1353
- * Initialize a Stencil component given a reference to its host element, its
1354
- * runtime bookkeeping data structure, runtime metadata about the component,
1355
- * and (optionally) an HMR version ID.
1356
- *
1357
- * @param elm a host element
1358
- * @param hostRef the element's runtime bookkeeping object
1359
- * @param cmpMeta runtime metadata for the Stencil component
1360
- * @param hmrVersionId an (optional) HMR version ID
1361
- */
1362
- const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
1363
- let Cstr;
1364
- // initializeComponent
1365
- if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
1366
- // Let the runtime know that the component has been initialized
1367
- hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
1368
- const bundleId = cmpMeta.$lazyBundleId$;
1369
- if (bundleId) {
1370
- // lazy loaded components
1371
- // request the component's implementation to be
1372
- // wired up with the host element
1373
- Cstr = loadModule(cmpMeta);
1374
- if (Cstr.then) {
1375
- // Await creates a micro-task avoid if possible
1376
- const endLoad = uniqueTime();
1377
- Cstr = await Cstr;
1378
- endLoad();
1379
- }
1380
- if (!Cstr.isProxied) {
1381
- // we've never proxied this Constructor before
1382
- // let's add the getters/setters to its prototype before
1383
- // the first time we create an instance of the implementation
1384
- {
1385
- cmpMeta.$watchers$ = Cstr.watchers;
1386
- }
1387
- proxyComponent(Cstr, cmpMeta, 2 /* PROXY_FLAGS.proxyState */);
1388
- Cstr.isProxied = true;
1389
- }
1390
- const endNewInstance = createTime('createInstance', cmpMeta.$tagName$);
1391
- // ok, time to construct the instance
1392
- // but let's keep track of when we start and stop
1393
- // so that the getters/setters don't incorrectly step on data
1394
- {
1395
- hostRef.$flags$ |= 8 /* HOST_FLAGS.isConstructingInstance */;
1396
- }
1397
- // construct the lazy-loaded component implementation
1398
- // passing the hostRef is very important during
1399
- // construction in order to directly wire together the
1400
- // host element and the lazy-loaded instance
1401
- try {
1402
- new Cstr(hostRef);
1403
- }
1404
- catch (e) {
1405
- consoleError(e);
1406
- }
1407
- {
1408
- hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
1409
- }
1410
- {
1411
- hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;
1412
- }
1413
- endNewInstance();
1414
- fireConnectedCallback(hostRef.$lazyInstance$);
1415
- }
1416
- else {
1417
- // sync constructor component
1418
- Cstr = elm.constructor;
1419
- // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise,
1420
- // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_
1421
- // Stencil has completed instantiating the component.
1422
- customElements.whenDefined(cmpMeta.$tagName$).then(() => (hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */));
1423
- }
1424
- if (Cstr.style) {
1425
- // this component has styles but we haven't registered them yet
1426
- let style = Cstr.style;
1427
- const scopeId = getScopeId(cmpMeta);
1428
- if (!styles.has(scopeId)) {
1429
- const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
1430
- registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */));
1431
- endRegisterStyles();
1432
- }
1433
- }
1434
- }
1435
- // we've successfully created a lazy instance
1436
- const ancestorComponent = hostRef.$ancestorComponent$;
1437
- const schedule = () => scheduleUpdate(hostRef, true);
1438
- if (ancestorComponent && ancestorComponent['s-rc']) {
1439
- // this is the initial load and this component it has an ancestor component
1440
- // but the ancestor component has NOT fired its will update lifecycle yet
1441
- // so let's just cool our jets and wait for the ancestor to continue first
1442
- // this will get fired off when the ancestor component
1443
- // finally gets around to rendering its lazy self
1444
- // fire off the initial update
1445
- ancestorComponent['s-rc'].push(schedule);
1446
- }
1447
- else {
1448
- schedule();
1449
- }
1450
- };
1451
- const fireConnectedCallback = (instance) => {
1452
- {
1453
- safeCall(instance, 'connectedCallback');
1454
- }
1455
- };
1456
- const connectedCallback = (elm) => {
1457
- if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1458
- const hostRef = getHostRef(elm);
1459
- const cmpMeta = hostRef.$cmpMeta$;
1460
- const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
1461
- if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
1462
- // first time this component has connected
1463
- hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
1464
- {
1465
- // find the first ancestor component (if there is one) and register
1466
- // this component as one of the actively loading child components for its ancestor
1467
- let ancestorComponent = elm;
1468
- while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
1469
- // climb up the ancestors looking for the first
1470
- // component that hasn't finished its lifecycle update yet
1471
- if (ancestorComponent['s-p']) {
1472
- // we found this components first ancestor component
1473
- // keep a reference to this component's ancestor component
1474
- attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
1475
- break;
1476
- }
1477
- }
1478
- }
1479
- // Lazy properties
1480
- // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
1481
- if (cmpMeta.$members$) {
1482
- Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
1483
- if (memberFlags & 31 /* MEMBER_FLAGS.Prop */ && elm.hasOwnProperty(memberName)) {
1484
- const value = elm[memberName];
1485
- delete elm[memberName];
1486
- elm[memberName] = value;
1487
- }
1488
- });
1489
- }
1490
- {
1491
- initializeComponent(elm, hostRef, cmpMeta);
1492
- }
1493
- }
1494
- else {
1495
- // fire off connectedCallback() on component instance
1496
- if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
1497
- fireConnectedCallback(hostRef.$lazyInstance$);
1498
- }
1499
- else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
1500
- hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$));
1501
- }
1502
- }
1503
- endConnected();
1504
- }
1505
- };
1506
- const disconnectInstance = (instance) => {
1507
- };
1508
- const disconnectedCallback = async (elm) => {
1509
- if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1510
- const hostRef = getHostRef(elm);
1511
- if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
1512
- else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
1513
- hostRef.$onReadyPromise$.then(() => disconnectInstance());
1514
- }
1515
- }
1516
- };
1517
- const bootstrapLazy = (lazyBundles, options = {}) => {
1518
- var _a;
1519
- const endBootstrap = createTime();
1520
- const cmpTags = [];
1521
- const exclude = options.exclude || [];
1522
- const customElements = win.customElements;
1523
- const head = doc.head;
1524
- const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
1525
- const dataStyles = /*@__PURE__*/ doc.createElement('style');
1526
- const deferredConnectedCallbacks = [];
1527
- let appLoadFallback;
1528
- let isBootstrapping = true;
1529
- Object.assign(plt, options);
1530
- plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
1531
- let hasSlotRelocation = false;
1532
- lazyBundles.map((lazyBundle) => {
1533
- lazyBundle[1].map((compactMeta) => {
1534
- var _a;
1535
- const cmpMeta = {
1536
- $flags$: compactMeta[0],
1537
- $tagName$: compactMeta[1],
1538
- $members$: compactMeta[2],
1539
- $listeners$: compactMeta[3],
1540
- };
1541
- // Check if we are using slots outside the shadow DOM in this component.
1542
- // We'll use this information later to add styles for `slot-fb` elements
1543
- if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
1544
- hasSlotRelocation = true;
1545
- }
1546
- {
1547
- cmpMeta.$members$ = compactMeta[2];
1548
- }
1549
- {
1550
- cmpMeta.$watchers$ = (_a = compactMeta[4]) !== null && _a !== void 0 ? _a : {};
1551
- }
1552
- const tagName = cmpMeta.$tagName$;
1553
- const HostElement = class extends HTMLElement {
1554
- // StencilLazyHost
1555
- constructor(self) {
1556
- // @ts-ignore
1557
- super(self);
1558
- self = this;
1559
- registerHost(self, cmpMeta);
1560
- if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
1561
- // this component is using shadow dom
1562
- // and this browser supports shadow dom
1563
- // add the read-only property "shadowRoot" to the host element
1564
- // adding the shadow root build conditionals to minimize runtime
1565
- {
1566
- {
1567
- self.attachShadow({ mode: 'open' });
1568
- }
1569
- }
1570
- }
1571
- }
1572
- connectedCallback() {
1573
- if (appLoadFallback) {
1574
- clearTimeout(appLoadFallback);
1575
- appLoadFallback = null;
1576
- }
1577
- if (isBootstrapping) {
1578
- // connectedCallback will be processed once all components have been registered
1579
- deferredConnectedCallbacks.push(this);
1580
- }
1581
- else {
1582
- plt.jmp(() => connectedCallback(this));
1583
- }
1584
- }
1585
- disconnectedCallback() {
1586
- plt.jmp(() => disconnectedCallback(this));
1587
- }
1588
- componentOnReady() {
1589
- return getHostRef(this).$onReadyPromise$;
1590
- }
1591
- };
1592
- cmpMeta.$lazyBundleId$ = lazyBundle[0];
1593
- if (!exclude.includes(tagName) && !customElements.get(tagName)) {
1594
- cmpTags.push(tagName);
1595
- customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* PROXY_FLAGS.isElementConstructor */));
1596
- }
1597
- });
1598
- });
1599
- // Only bother generating CSS if we have components
1600
- // TODO(STENCIL-1118): Add test cases for CSS content based on conditionals
1601
- if (cmpTags.length > 0) {
1602
- // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
1603
- if (hasSlotRelocation) {
1604
- dataStyles.textContent += SLOT_FB_CSS;
1605
- }
1606
- // Add hydration styles
1607
- {
1608
- dataStyles.textContent += cmpTags + HYDRATED_CSS;
1609
- }
1610
- // If we have styles, add them to the DOM
1611
- if (dataStyles.innerHTML.length) {
1612
- dataStyles.setAttribute('data-styles', '');
1613
- // Apply CSP nonce to the style tag if it exists
1614
- const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
1615
- if (nonce != null) {
1616
- dataStyles.setAttribute('nonce', nonce);
1617
- }
1618
- // Insert the styles into the document head
1619
- // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
1620
- head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
1621
- }
1622
- }
1623
- // Process deferred connectedCallbacks now all components have been registered
1624
- isBootstrapping = false;
1625
- if (deferredConnectedCallbacks.length) {
1626
- deferredConnectedCallbacks.map((host) => host.connectedCallback());
1627
- }
1628
- else {
1629
- {
1630
- plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30)));
1631
- }
1632
- }
1633
- // Fallback appLoad event
1634
- endBootstrap();
1635
- };
1636
- /**
1637
- * Assigns the given value to the nonce property on the runtime platform object.
1638
- * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
1639
- * @param nonce The value to be assigned to the platform nonce property.
1640
- * @returns void
1641
- */
1642
- const setNonce = (nonce) => (plt.$nonce$ = nonce);
1643
- /**
1644
- * A WeakMap mapping runtime component references to their corresponding host reference
1645
- * instances.
1646
- *
1647
- * **Note**: If we're in an HMR context we need to store a reference to this
1648
- * value on `window` in order to maintain the mapping of {@link d.RuntimeRef}
1649
- * to {@link d.HostRef} across HMR updates.
1650
- *
1651
- * This is necessary because when HMR updates for a component are processed by
1652
- * the browser-side dev server client the JS bundle for that component is
1653
- * re-fetched. Since the module containing {@link hostRefs} is included in
1654
- * that bundle, if we do not store a reference to it the new iteration of the
1655
- * component will not have access to the previous hostRef map, leading to a
1656
- * bug where the new version of the component cannot properly initialize.
1657
- */
1658
- const hostRefs = new WeakMap();
1659
- /**
1660
- * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
1661
- *
1662
- * @param ref the runtime ref of interest
1663
- * @returns the Host reference (if found) or undefined
1664
- */
1665
- const getHostRef = (ref) => hostRefs.get(ref);
1666
- /**
1667
- * Register a lazy instance with the {@link hostRefs} object so it's
1668
- * corresponding {@link d.HostRef} can be retrieved later.
1669
- *
1670
- * @param lazyInstance the lazy instance of interest
1671
- * @param hostRef that instances `HostRef` object
1672
- * @returns a reference to the host ref WeakMap
1673
- */
1674
- const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
1675
- /**
1676
- * Register a host element for a Stencil component, setting up various metadata
1677
- * and callbacks based on {@link BUILD} flags as well as the component's runtime
1678
- * metadata.
1679
- *
1680
- * @param hostElement the host element to register
1681
- * @param cmpMeta runtime metadata for that component
1682
- * @returns a reference to the host ref WeakMap
1683
- */
1684
- const registerHost = (hostElement, cmpMeta) => {
1685
- const hostRef = {
1686
- $flags$: 0,
1687
- $hostElement$: hostElement,
1688
- $cmpMeta$: cmpMeta,
1689
- $instanceValues$: new Map(),
1690
- };
1691
- {
1692
- hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
1693
- hostElement['s-p'] = [];
1694
- hostElement['s-rc'] = [];
1695
- }
1696
- return hostRefs.set(hostElement, hostRef);
1697
- };
1698
- const isMemberInElement = (elm, memberName) => memberName in elm;
1699
- const consoleError = (e, el) => (0, console.error)(e, el);
1700
- const cmpModules = /*@__PURE__*/ new Map();
1701
- const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
1702
- // loadModuleImport
1703
- const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
1704
- const bundleId = cmpMeta.$lazyBundleId$;
1705
- const module = cmpModules.get(bundleId) ;
1706
- if (module) {
1707
- return module[exportName];
1708
- }
1709
-
1710
- if (!hmrVersionId || !BUILD.hotModuleReplacement) {
1711
- const processMod = importedModule => {
1712
- cmpModules.set(bundleId, importedModule);
1713
- return importedModule[exportName];
1714
- }
1715
- switch(bundleId) {
1716
-
1717
- case 'ix-icon.cjs':
1718
- return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1719
- /* webpackMode: "lazy" */
1720
- './ix-icon.cjs.entry.js')); }).then(processMod, consoleError);
1721
- }
1722
- }
1723
- return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1724
- /* @vite-ignore */
1725
- /* webpackInclude: /\.entry\.js$/ */
1726
- /* webpackExclude: /\.system\.entry\.js$/ */
1727
- /* webpackMode: "lazy" */
1728
- `./${bundleId}.entry.js${''}`)); }).then((importedModule) => {
1729
- {
1730
- cmpModules.set(bundleId, importedModule);
1731
- }
1732
- return importedModule[exportName];
1733
- }, consoleError);
1734
- };
1735
- const styles = /*@__PURE__*/ new Map();
1736
- const win = typeof window !== 'undefined' ? window : {};
1737
- const doc = win.document || { head: {} };
1738
- const plt = {
1739
- $flags$: 0,
1740
- $resourcesUrl$: '',
1741
- jmp: (h) => h(),
1742
- raf: (h) => requestAnimationFrame(h),
1743
- ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
1744
- rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
1745
- ce: (eventName, opts) => new CustomEvent(eventName, opts),
1746
- };
1747
- const promiseResolve = (v) => Promise.resolve(v);
1748
- const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
1749
- try {
1750
- new CSSStyleSheet();
1751
- return typeof new CSSStyleSheet().replaceSync === 'function';
1752
- }
1753
- catch (e) { }
1754
- return false;
1755
- })()
1756
- ;
1757
- const queueDomReads = [];
1758
- const queueDomWrites = [];
1759
- const queueTask = (queue, write) => (cb) => {
1760
- queue.push(cb);
1761
- if (!queuePending) {
1762
- queuePending = true;
1763
- if (write && plt.$flags$ & 4 /* PLATFORM_FLAGS.queueSync */) {
1764
- nextTick(flush);
1765
- }
1766
- else {
1767
- plt.raf(flush);
1768
- }
1769
- }
1770
- };
1771
- const consume = (queue) => {
1772
- for (let i = 0; i < queue.length; i++) {
1773
- try {
1774
- queue[i](performance.now());
1775
- }
1776
- catch (e) {
1777
- consoleError(e);
1778
- }
1779
- }
1780
- queue.length = 0;
1781
- };
1782
- const flush = () => {
1783
- // always force a bunch of medium callbacks to run, but still have
1784
- // a throttle on how many can run in a certain time
1785
- // DOM READS!!!
1786
- consume(queueDomReads);
1787
- // DOM WRITES!!!
1788
- {
1789
- consume(queueDomWrites);
1790
- if ((queuePending = queueDomReads.length > 0)) {
1791
- // still more to do yet, but we've run out of time
1792
- // let's let this thing cool off and try again in the next tick
1793
- plt.raf(flush);
1794
- }
1795
- }
1796
- };
1797
- const nextTick = (cb) => promiseResolve().then(cb);
1798
- const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1799
-
1800
- exports.Host = Host;
1801
- exports.bootstrapLazy = bootstrapLazy;
1802
- exports.getAssetPath = getAssetPath;
1803
- exports.getElement = getElement;
1804
- exports.h = h;
1805
- exports.promiseResolve = promiseResolve;
1806
- exports.registerInstance = registerInstance;
1807
- exports.setAssetPath = setAssetPath;
1808
- exports.setNonce = setNonce;
1809
-
1810
- //# sourceMappingURL=index-8f585802.js.map