UNPKG

63.9 kBJavaScriptView Raw
1'use strict';
2
3function _interopNamespace(e) {
4 if (e && e.__esModule) { return e; } else {
5 var n = {};
6 if (e) {
7 Object.keys(e).forEach(function (k) {
8 var d = Object.getOwnPropertyDescriptor(e, k);
9 Object.defineProperty(n, k, d.get ? d : {
10 enumerable: true,
11 get: function () {
12 return e[k];
13 }
14 });
15 });
16 }
17 n['default'] = e;
18 return n;
19 }
20}
21
22const NAMESPACE = 'sgnw-components';
23
24let scopeId;
25let contentRef;
26let hostTagName;
27let useNativeShadowDom = false;
28let checkSlotFallbackVisibility = false;
29let checkSlotRelocate = false;
30let isSvgMode = false;
31let queuePending = false;
32const win = typeof window !== 'undefined' ? window : {};
33const CSS = win.CSS ;
34const doc = win.document || { head: {} };
35const plt = {
36 $flags$: 0,
37 $resourcesUrl$: '',
38 jmp: h => h(),
39 raf: h => requestAnimationFrame(h),
40 ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
41 rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
42 ce: (eventName, opts) => new CustomEvent(eventName, opts),
43};
44const supportsShadow = /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)() ;
45const promiseResolve = (v) => Promise.resolve(v);
46const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
47 try {
48 new CSSStyleSheet();
49 return true;
50 }
51 catch (e) { }
52 return false;
53 })()
54 ;
55const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
56 if ( listeners) {
57 listeners.map(([flags, name, method]) => {
58 const target = elm;
59 const handler = hostListenerProxy(hostRef, method);
60 const opts = hostListenerOpts(flags);
61 plt.ael(target, name, handler, opts);
62 (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
63 });
64 }
65};
66const hostListenerProxy = (hostRef, methodName) => (ev) => {
67 {
68 if (hostRef.$flags$ & 256 /* isListenReady */) {
69 // instance is ready, let's call it's member method for this event
70 hostRef.$lazyInstance$[methodName](ev);
71 }
72 else {
73 (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
74 }
75 }
76};
77// prettier-ignore
78const hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
79const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
80const createTime = (fnName, tagName = '') => {
81 {
82 return () => {
83 return;
84 };
85 }
86};
87const uniqueTime = (key, measureText) => {
88 {
89 return () => {
90 return;
91 };
92 }
93};
94const rootAppliedStyles = new WeakMap();
95const registerStyle = (scopeId, cssText, allowCS) => {
96 let style = styles.get(scopeId);
97 if (supportsConstructibleStylesheets && allowCS) {
98 style = (style || new CSSStyleSheet());
99 style.replace(cssText);
100 }
101 else {
102 style = cssText;
103 }
104 styles.set(scopeId, style);
105};
106const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
107 let scopeId = getScopeId(cmpMeta);
108 let style = styles.get(scopeId);
109 // if an element is NOT connected then getRootNode() will return the wrong root node
110 // so the fallback is to always use the document for the root node in those cases
111 styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
112 if (style) {
113 if (typeof style === 'string') {
114 styleContainerNode = styleContainerNode.head || styleContainerNode;
115 let appliedStyles = rootAppliedStyles.get(styleContainerNode);
116 let styleElm;
117 if (!appliedStyles) {
118 rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
119 }
120 if (!appliedStyles.has(scopeId)) {
121 {
122 if ( plt.$cssShim$) {
123 styleElm = plt.$cssShim$.createHostStyle(hostElm, scopeId, style, !!(cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */));
124 const newScopeId = styleElm['s-sc'];
125 if (newScopeId) {
126 scopeId = newScopeId;
127 // we don't want to add this styleID to the appliedStyles Set
128 // since the cssVarShim might need to apply several different
129 // stylesheets for the same component
130 appliedStyles = null;
131 }
132 }
133 else {
134 styleElm = doc.createElement('style');
135 styleElm.innerHTML = style;
136 }
137 styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
138 }
139 if (appliedStyles) {
140 appliedStyles.add(scopeId);
141 }
142 }
143 }
144 else if ( !styleContainerNode.adoptedStyleSheets.includes(style)) {
145 styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
146 }
147 }
148 return scopeId;
149};
150const attachStyles = (hostRef) => {
151 const cmpMeta = hostRef.$cmpMeta$;
152 const elm = hostRef.$hostElement$;
153 const flags = cmpMeta.$flags$;
154 const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
155 const scopeId = addStyle( supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$, elm);
156 if ( flags & 10 /* needsScopedEncapsulation */) {
157 // only required when we're NOT using native shadow dom (slot)
158 // or this browser doesn't support native shadow dom
159 // and this host element was NOT created with SSR
160 // let's pick out the inner content for slot projection
161 // create a node to represent where the original
162 // content was first placed, which is useful later on
163 // DOM WRITE!!
164 elm['s-sc'] = scopeId;
165 elm.classList.add(scopeId + '-h');
166 }
167 endAttachStyles();
168};
169const getScopeId = (cmp, mode) => 'sc-' + ( cmp.$tagName$);
170/**
171 * Default style mode id
172 */
173/**
174 * Reusable empty obj/array
175 * Don't add values to these!!
176 */
177const EMPTY_OBJ = {};
178const isDef = (v) => v != null;
179const noop = () => {
180 /* noop*/
181};
182const isComplexType = (o) => {
183 // https://jsperf.com/typeof-fn-object/5
184 o = typeof o;
185 return o === 'object' || o === 'function';
186};
187const IS_DENO_ENV = typeof Deno !== 'undefined';
188const IS_NODE_ENV = !IS_DENO_ENV &&
189 typeof global !== 'undefined' &&
190 typeof require === 'function' &&
191 !!global.process &&
192 typeof __filename === 'string' &&
193 (!global.origin || typeof global.origin !== 'string');
194const IS_DENO_WINDOWS_ENV = IS_DENO_ENV && Deno.build.os === 'windows';
195const getCurrentDirectory = IS_NODE_ENV ? process.cwd : IS_DENO_ENV ? Deno.cwd : () => '/';
196const exit = IS_NODE_ENV ? process.exit : IS_DENO_ENV ? Deno.exit : noop;
197/**
198 * Production h() function based on Preact by
199 * Jason Miller (@developit)
200 * Licensed under the MIT License
201 * https://github.com/developit/preact/blob/master/LICENSE
202 *
203 * Modified for Stencil's compiler and vdom
204 */
205// const stack: any[] = [];
206// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
207// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
208const h = (nodeName, vnodeData, ...children) => {
209 let child = null;
210 let slotName = null;
211 let simple = false;
212 let lastSimple = false;
213 let vNodeChildren = [];
214 const walk = (c) => {
215 for (let i = 0; i < c.length; i++) {
216 child = c[i];
217 if (Array.isArray(child)) {
218 walk(child);
219 }
220 else if (child != null && typeof child !== 'boolean') {
221 if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) {
222 child = String(child);
223 }
224 if (simple && lastSimple) {
225 // If the previous child was simple (string), we merge both
226 vNodeChildren[vNodeChildren.length - 1].$text$ += child;
227 }
228 else {
229 // Append a new vNode, if it's text, we create a text vNode
230 vNodeChildren.push(simple ? newVNode(null, child) : child);
231 }
232 lastSimple = simple;
233 }
234 }
235 };
236 walk(children);
237 if (vnodeData) {
238 if ( vnodeData.name) {
239 slotName = vnodeData.name;
240 }
241 {
242 const classData = vnodeData.className || vnodeData.class;
243 if (classData) {
244 vnodeData.class =
245 typeof classData !== 'object'
246 ? classData
247 : Object.keys(classData)
248 .filter(k => classData[k])
249 .join(' ');
250 }
251 }
252 }
253 const vnode = newVNode(nodeName, null);
254 vnode.$attrs$ = vnodeData;
255 if (vNodeChildren.length > 0) {
256 vnode.$children$ = vNodeChildren;
257 }
258 {
259 vnode.$name$ = slotName;
260 }
261 return vnode;
262};
263const newVNode = (tag, text) => {
264 const vnode = {
265 $flags$: 0,
266 $tag$: tag,
267 $text$: text,
268 $elm$: null,
269 $children$: null,
270 };
271 {
272 vnode.$attrs$ = null;
273 }
274 {
275 vnode.$name$ = null;
276 }
277 return vnode;
278};
279const Host = {};
280const isHost = (node) => node && node.$tag$ === Host;
281/**
282 * Production setAccessor() function based on Preact by
283 * Jason Miller (@developit)
284 * Licensed under the MIT License
285 * https://github.com/developit/preact/blob/master/LICENSE
286 *
287 * Modified for Stencil's compiler and vdom
288 */
289const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
290 if (oldValue !== newValue) {
291 let isProp = isMemberInElement(elm, memberName);
292 let ln = memberName.toLowerCase();
293 if ( memberName === 'class') {
294 const classList = elm.classList;
295 const oldClasses = parseClassList(oldValue);
296 const newClasses = parseClassList(newValue);
297 classList.remove(...oldClasses.filter(c => c && !newClasses.includes(c)));
298 classList.add(...newClasses.filter(c => c && !oldClasses.includes(c)));
299 }
300 else if ( ( !isProp ) && memberName[0] === 'o' && memberName[1] === 'n') {
301 // Event Handlers
302 // so if the member name starts with "on" and the 3rd characters is
303 // a capital letter, and it's not already a member on the element,
304 // then we're assuming it's an event listener
305 if (memberName[2] === '-') {
306 // on- prefixed events
307 // allows to be explicit about the dom event to listen without any magic
308 // under the hood:
309 // <my-cmp on-click> // listens for "click"
310 // <my-cmp on-Click> // listens for "Click"
311 // <my-cmp on-ionChange> // listens for "ionChange"
312 // <my-cmp on-EVENTS> // listens for "EVENTS"
313 memberName = memberName.slice(3);
314 }
315 else if (isMemberInElement(win, ln)) {
316 // standard event
317 // the JSX attribute could have been "onMouseOver" and the
318 // member name "onmouseover" is on the window's prototype
319 // so let's add the listener "mouseover", which is all lowercased
320 memberName = ln.slice(2);
321 }
322 else {
323 // custom event
324 // the JSX attribute could have been "onMyCustomEvent"
325 // so let's trim off the "on" prefix and lowercase the first character
326 // and add the listener "myCustomEvent"
327 // except for the first character, we keep the event name case
328 memberName = ln[2] + memberName.slice(3);
329 }
330 if (oldValue) {
331 plt.rel(elm, memberName, oldValue, false);
332 }
333 if (newValue) {
334 plt.ael(elm, memberName, newValue, false);
335 }
336 }
337 else {
338 // Set property if it exists and it's not a SVG
339 const isComplex = isComplexType(newValue);
340 if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
341 try {
342 if (!elm.tagName.includes('-')) {
343 let n = newValue == null ? '' : newValue;
344 // Workaround for Safari, moving the <input> caret when re-assigning the same valued
345 if (memberName === 'list') {
346 isProp = false;
347 // tslint:disable-next-line: triple-equals
348 }
349 else if (oldValue == null || elm[memberName] != n) {
350 elm[memberName] = n;
351 }
352 }
353 else {
354 elm[memberName] = newValue;
355 }
356 }
357 catch (e) { }
358 }
359 if (newValue == null || newValue === false) {
360 if (newValue !== false || elm.getAttribute(memberName) === '') {
361 {
362 elm.removeAttribute(memberName);
363 }
364 }
365 }
366 else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
367 newValue = newValue === true ? '' : newValue;
368 {
369 elm.setAttribute(memberName, newValue);
370 }
371 }
372 }
373 }
374};
375const parseClassListRegex = /\s/;
376const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
377const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
378 // if the element passed in is a shadow root, which is a document fragment
379 // then we want to be adding attrs/props to the shadow root's "host" element
380 // if it's not a shadow root, then we add attrs/props to the same element
381 const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
382 const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
383 const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
384 {
385 // remove attributes no longer present on the vnode by setting them to undefined
386 for (memberName in oldVnodeAttrs) {
387 if (!(memberName in newVnodeAttrs)) {
388 setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
389 }
390 }
391 }
392 // add new & update changed attributes
393 for (memberName in newVnodeAttrs) {
394 setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
395 }
396};
397const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
398 // tslint:disable-next-line: prefer-const
399 let newVNode = newParentVNode.$children$[childIndex];
400 let i = 0;
401 let elm;
402 let childNode;
403 let oldVNode;
404 if ( !useNativeShadowDom) {
405 // remember for later we need to check to relocate nodes
406 checkSlotRelocate = true;
407 if (newVNode.$tag$ === 'slot') {
408 if (scopeId) {
409 // scoped css needs to add its scoped id to the parent element
410 parentElm.classList.add(scopeId + '-s');
411 }
412 newVNode.$flags$ |= newVNode.$children$
413 ? // slot element has fallback content
414 2 /* isSlotFallback */
415 : // slot element does not have fallback content
416 1 /* isSlotReference */;
417 }
418 }
419 if ( newVNode.$text$ !== null) {
420 // create text node
421 elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
422 }
423 else if ( newVNode.$flags$ & 1 /* isSlotReference */) {
424 // create a slot reference node
425 elm = newVNode.$elm$ = doc.createTextNode('');
426 }
427 else {
428 // create element
429 elm = newVNode.$elm$ = ( doc.createElement( newVNode.$flags$ & 2 /* isSlotFallback */ ? 'slot-fb' : newVNode.$tag$));
430 // add css classes, attrs, props, listeners, etc.
431 {
432 updateElement(null, newVNode, isSvgMode);
433 }
434 if ( isDef(scopeId) && elm['s-si'] !== scopeId) {
435 // if there is a scopeId and this is the initial render
436 // then let's add the scopeId as a css class
437 elm.classList.add((elm['s-si'] = scopeId));
438 }
439 if (newVNode.$children$) {
440 for (i = 0; i < newVNode.$children$.length; ++i) {
441 // create the node
442 childNode = createElm(oldParentVNode, newVNode, i, elm);
443 // return node could have been null
444 if (childNode) {
445 // append our new node
446 elm.appendChild(childNode);
447 }
448 }
449 }
450 }
451 {
452 elm['s-hn'] = hostTagName;
453 if (newVNode.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
454 // remember the content reference comment
455 elm['s-sr'] = true;
456 // remember the content reference comment
457 elm['s-cr'] = contentRef;
458 // remember the slot name, or empty string for default slot
459 elm['s-sn'] = newVNode.$name$ || '';
460 // check if we've got an old vnode for this slot
461 oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
462 if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
463 // we've got an old slot vnode and the wrapper is being replaced
464 // so let's move the old slot content back to it's original location
465 putBackInOriginalLocation(oldParentVNode.$elm$, false);
466 }
467 }
468 }
469 return elm;
470};
471const putBackInOriginalLocation = (parentElm, recursive) => {
472 plt.$flags$ |= 1 /* isTmpDisconnected */;
473 const oldSlotChildNodes = parentElm.childNodes;
474 for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
475 const childNode = oldSlotChildNodes[i];
476 if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
477 // // this child node in the old element is from another component
478 // // remove this node from the old slot's parent
479 // childNode.remove();
480 // and relocate it back to it's original location
481 parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
482 // remove the old original location comment entirely
483 // later on the patch function will know what to do
484 // and move this to the correct spot in need be
485 childNode['s-ol'].remove();
486 childNode['s-ol'] = undefined;
487 checkSlotRelocate = true;
488 }
489 if (recursive) {
490 putBackInOriginalLocation(childNode, recursive);
491 }
492 }
493 plt.$flags$ &= ~1 /* isTmpDisconnected */;
494};
495const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
496 let containerElm = (( parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
497 let childNode;
498 if ( containerElm.shadowRoot && containerElm.tagName === hostTagName) {
499 containerElm = containerElm.shadowRoot;
500 }
501 for (; startIdx <= endIdx; ++startIdx) {
502 if (vnodes[startIdx]) {
503 childNode = createElm(null, parentVNode, startIdx, parentElm);
504 if (childNode) {
505 vnodes[startIdx].$elm$ = childNode;
506 containerElm.insertBefore(childNode, referenceNode(before) );
507 }
508 }
509 }
510};
511const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
512 for (; startIdx <= endIdx; ++startIdx) {
513 if ((vnode = vnodes[startIdx])) {
514 elm = vnode.$elm$;
515 {
516 // we're removing this element
517 // so it's possible we need to show slot fallback content now
518 checkSlotFallbackVisibility = true;
519 if (elm['s-ol']) {
520 // remove the original location comment
521 elm['s-ol'].remove();
522 }
523 else {
524 // it's possible that child nodes of the node
525 // that's being removed are slot nodes
526 putBackInOriginalLocation(elm, true);
527 }
528 }
529 // remove the vnode's element from the dom
530 elm.remove();
531 }
532 }
533};
534const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
535 let oldStartIdx = 0;
536 let newStartIdx = 0;
537 let oldEndIdx = oldCh.length - 1;
538 let oldStartVnode = oldCh[0];
539 let oldEndVnode = oldCh[oldEndIdx];
540 let newEndIdx = newCh.length - 1;
541 let newStartVnode = newCh[0];
542 let newEndVnode = newCh[newEndIdx];
543 let node;
544 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
545 if (oldStartVnode == null) {
546 // Vnode might have been moved left
547 oldStartVnode = oldCh[++oldStartIdx];
548 }
549 else if (oldEndVnode == null) {
550 oldEndVnode = oldCh[--oldEndIdx];
551 }
552 else if (newStartVnode == null) {
553 newStartVnode = newCh[++newStartIdx];
554 }
555 else if (newEndVnode == null) {
556 newEndVnode = newCh[--newEndIdx];
557 }
558 else if (isSameVnode(oldStartVnode, newStartVnode)) {
559 patch(oldStartVnode, newStartVnode);
560 oldStartVnode = oldCh[++oldStartIdx];
561 newStartVnode = newCh[++newStartIdx];
562 }
563 else if (isSameVnode(oldEndVnode, newEndVnode)) {
564 patch(oldEndVnode, newEndVnode);
565 oldEndVnode = oldCh[--oldEndIdx];
566 newEndVnode = newCh[--newEndIdx];
567 }
568 else if (isSameVnode(oldStartVnode, newEndVnode)) {
569 // Vnode moved right
570 if ( (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
571 putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
572 }
573 patch(oldStartVnode, newEndVnode);
574 parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
575 oldStartVnode = oldCh[++oldStartIdx];
576 newEndVnode = newCh[--newEndIdx];
577 }
578 else if (isSameVnode(oldEndVnode, newStartVnode)) {
579 // Vnode moved left
580 if ( (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
581 putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
582 }
583 patch(oldEndVnode, newStartVnode);
584 parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
585 oldEndVnode = oldCh[--oldEndIdx];
586 newStartVnode = newCh[++newStartIdx];
587 }
588 else {
589 {
590 // new element
591 node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
592 newStartVnode = newCh[++newStartIdx];
593 }
594 if (node) {
595 {
596 parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
597 }
598 }
599 }
600 }
601 if (oldStartIdx > oldEndIdx) {
602 addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
603 }
604 else if ( newStartIdx > newEndIdx) {
605 removeVnodes(oldCh, oldStartIdx, oldEndIdx);
606 }
607};
608const isSameVnode = (vnode1, vnode2) => {
609 // compare if two vnode to see if they're "technically" the same
610 // need to have the same element tag, and same key to be the same
611 if (vnode1.$tag$ === vnode2.$tag$) {
612 if ( vnode1.$tag$ === 'slot') {
613 return vnode1.$name$ === vnode2.$name$;
614 }
615 return true;
616 }
617 return false;
618};
619const referenceNode = (node) => {
620 // this node was relocated to a new location in the dom
621 // because of some other component's slot
622 // but we still have an html comment in place of where
623 // it's original location was according to it's original vdom
624 return (node && node['s-ol']) || node;
625};
626const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
627const patch = (oldVNode, newVNode) => {
628 const elm = (newVNode.$elm$ = oldVNode.$elm$);
629 const oldChildren = oldVNode.$children$;
630 const newChildren = newVNode.$children$;
631 const tag = newVNode.$tag$;
632 const text = newVNode.$text$;
633 let defaultHolder;
634 if ( text === null) {
635 // element node
636 {
637 if ( tag === 'slot')
638 ;
639 else {
640 // either this is the first render of an element OR it's an update
641 // AND we already know it's possible it could have changed
642 // this updates the element's css classes, attrs, props, listeners, etc.
643 updateElement(oldVNode, newVNode, isSvgMode);
644 }
645 }
646 if ( oldChildren !== null && newChildren !== null) {
647 // looks like there's child vnodes for both the old and new vnodes
648 updateChildren(elm, oldChildren, newVNode, newChildren);
649 }
650 else if (newChildren !== null) {
651 // no old child vnodes, but there are new child vnodes to add
652 if ( oldVNode.$text$ !== null) {
653 // the old vnode was text, so be sure to clear it out
654 elm.textContent = '';
655 }
656 // add the new vnode children
657 addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
658 }
659 else if ( oldChildren !== null) {
660 // no new child vnodes, but there are old child vnodes to remove
661 removeVnodes(oldChildren, 0, oldChildren.length - 1);
662 }
663 }
664 else if ( (defaultHolder = elm['s-cr'])) {
665 // this element has slotted content
666 defaultHolder.parentNode.textContent = text;
667 }
668 else if ( oldVNode.$text$ !== text) {
669 // update the text content for the text only vnode
670 // and also only if the text is different than before
671 elm.data = text;
672 }
673};
674const updateFallbackSlotVisibility = (elm) => {
675 // tslint:disable-next-line: prefer-const
676 let childNodes = elm.childNodes;
677 let childNode;
678 let i;
679 let ilen;
680 let j;
681 let slotNameAttr;
682 let nodeType;
683 for (i = 0, ilen = childNodes.length; i < ilen; i++) {
684 childNode = childNodes[i];
685 if (childNode.nodeType === 1 /* ElementNode */) {
686 if (childNode['s-sr']) {
687 // this is a slot fallback node
688 // get the slot name for this slot reference node
689 slotNameAttr = childNode['s-sn'];
690 // by default always show a fallback slot node
691 // then hide it if there are other slots in the light dom
692 childNode.hidden = false;
693 for (j = 0; j < ilen; j++) {
694 if (childNodes[j]['s-hn'] !== childNode['s-hn']) {
695 // this sibling node is from a different component
696 nodeType = childNodes[j].nodeType;
697 if (slotNameAttr !== '') {
698 // this is a named fallback slot node
699 if (nodeType === 1 /* ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
700 childNode.hidden = true;
701 break;
702 }
703 }
704 else {
705 // this is a default fallback slot node
706 // any element or text node (with content)
707 // should hide the default fallback slot node
708 if (nodeType === 1 /* ElementNode */ || (nodeType === 3 /* TextNode */ && childNodes[j].textContent.trim() !== '')) {
709 childNode.hidden = true;
710 break;
711 }
712 }
713 }
714 }
715 }
716 // keep drilling down
717 updateFallbackSlotVisibility(childNode);
718 }
719 }
720};
721const relocateNodes = [];
722const relocateSlotContent = (elm) => {
723 // tslint:disable-next-line: prefer-const
724 let childNode;
725 let node;
726 let hostContentNodes;
727 let slotNameAttr;
728 let relocateNodeData;
729 let j;
730 let i = 0;
731 let childNodes = elm.childNodes;
732 let ilen = childNodes.length;
733 for (; i < ilen; i++) {
734 childNode = childNodes[i];
735 if (childNode['s-sr'] && (node = childNode['s-cr'])) {
736 // first got the content reference comment node
737 // then we got it's parent, which is where all the host content is in now
738 hostContentNodes = node.parentNode.childNodes;
739 slotNameAttr = childNode['s-sn'];
740 for (j = hostContentNodes.length - 1; j >= 0; j--) {
741 node = hostContentNodes[j];
742 if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
743 // let's do some relocating to its new home
744 // but never relocate a content reference node
745 // that is suppose to always represent the original content location
746 if (isNodeLocatedInSlot(node, slotNameAttr)) {
747 // it's possible we've already decided to relocate this node
748 relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
749 // made some changes to slots
750 // let's make sure we also double check
751 // fallbacks are correctly hidden or shown
752 checkSlotFallbackVisibility = true;
753 node['s-sn'] = node['s-sn'] || slotNameAttr;
754 if (relocateNodeData) {
755 // previously we never found a slot home for this node
756 // but turns out we did, so let's remember it now
757 relocateNodeData.$slotRefNode$ = childNode;
758 }
759 else {
760 // add to our list of nodes to relocate
761 relocateNodes.push({
762 $slotRefNode$: childNode,
763 $nodeToRelocate$: node,
764 });
765 }
766 if (node['s-sr']) {
767 relocateNodes.map(relocateNode => {
768 if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
769 relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
770 if (relocateNodeData && !relocateNode.$slotRefNode$) {
771 relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
772 }
773 }
774 });
775 }
776 }
777 else if (!relocateNodes.some(r => r.$nodeToRelocate$ === node)) {
778 // so far this element does not have a slot home, not setting slotRefNode on purpose
779 // if we never find a home for this element then we'll need to hide it
780 relocateNodes.push({
781 $nodeToRelocate$: node,
782 });
783 }
784 }
785 }
786 }
787 if (childNode.nodeType === 1 /* ElementNode */) {
788 relocateSlotContent(childNode);
789 }
790 }
791};
792const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
793 if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
794 if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
795 return true;
796 }
797 if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
798 return true;
799 }
800 return false;
801 }
802 if (nodeToRelocate['s-sn'] === slotNameAttr) {
803 return true;
804 }
805 return slotNameAttr === '';
806};
807const renderVdom = (hostRef, renderFnResults) => {
808 const hostElm = hostRef.$hostElement$;
809 const cmpMeta = hostRef.$cmpMeta$;
810 const oldVNode = hostRef.$vnode$ || newVNode(null, null);
811 const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
812 hostTagName = hostElm.tagName;
813 if ( cmpMeta.$attrsToReflect$) {
814 rootVnode.$attrs$ = rootVnode.$attrs$ || {};
815 cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
816 }
817 rootVnode.$tag$ = null;
818 rootVnode.$flags$ |= 4 /* isHost */;
819 hostRef.$vnode$ = rootVnode;
820 rootVnode.$elm$ = oldVNode.$elm$ = ( hostElm.shadowRoot || hostElm );
821 {
822 scopeId = hostElm['s-sc'];
823 }
824 {
825 contentRef = hostElm['s-cr'];
826 useNativeShadowDom = supportsShadow && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
827 // always reset
828 checkSlotFallbackVisibility = false;
829 }
830 // synchronous patch
831 patch(oldVNode, rootVnode);
832 {
833 // while we're moving nodes around existing nodes, temporarily disable
834 // the disconnectCallback from working
835 plt.$flags$ |= 1 /* isTmpDisconnected */;
836 if (checkSlotRelocate) {
837 relocateSlotContent(rootVnode.$elm$);
838 let relocateData;
839 let nodeToRelocate;
840 let orgLocationNode;
841 let parentNodeRef;
842 let insertBeforeNode;
843 let refNode;
844 let i = 0;
845 for (; i < relocateNodes.length; i++) {
846 relocateData = relocateNodes[i];
847 nodeToRelocate = relocateData.$nodeToRelocate$;
848 if (!nodeToRelocate['s-ol']) {
849 // add a reference node marking this node's original location
850 // keep a reference to this node for later lookups
851 orgLocationNode = doc.createTextNode('');
852 orgLocationNode['s-nr'] = nodeToRelocate;
853 nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
854 }
855 }
856 for (i = 0; i < relocateNodes.length; i++) {
857 relocateData = relocateNodes[i];
858 nodeToRelocate = relocateData.$nodeToRelocate$;
859 if (relocateData.$slotRefNode$) {
860 // by default we're just going to insert it directly
861 // after the slot reference node
862 parentNodeRef = relocateData.$slotRefNode$.parentNode;
863 insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
864 orgLocationNode = nodeToRelocate['s-ol'];
865 while ((orgLocationNode = orgLocationNode.previousSibling)) {
866 refNode = orgLocationNode['s-nr'];
867 if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
868 refNode = refNode.nextSibling;
869 if (!refNode || !refNode['s-nr']) {
870 insertBeforeNode = refNode;
871 break;
872 }
873 }
874 }
875 if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) || nodeToRelocate.nextSibling !== insertBeforeNode) {
876 // we've checked that it's worth while to relocate
877 // since that the node to relocate
878 // has a different next sibling or parent relocated
879 if (nodeToRelocate !== insertBeforeNode) {
880 if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
881 // probably a component in the index.html that doesn't have it's hostname set
882 nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
883 }
884 // add it back to the dom but in its new home
885 parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
886 }
887 }
888 }
889 else {
890 // this node doesn't have a slot home to go to, so let's hide it
891 if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
892 nodeToRelocate.hidden = true;
893 }
894 }
895 }
896 }
897 if (checkSlotFallbackVisibility) {
898 updateFallbackSlotVisibility(rootVnode.$elm$);
899 }
900 // done moving nodes around
901 // allow the disconnect callback to work again
902 plt.$flags$ &= ~1 /* isTmpDisconnected */;
903 // always reset
904 relocateNodes.length = 0;
905 }
906};
907const getElement = (ref) => ( getHostRef(ref).$hostElement$ );
908const createEvent = (ref, name, flags) => {
909 const elm = getElement(ref);
910 return {
911 emit: (detail) => {
912 return emitEvent(elm, name, {
913 bubbles: !!(flags & 4 /* Bubbles */),
914 composed: !!(flags & 2 /* Composed */),
915 cancelable: !!(flags & 1 /* Cancellable */),
916 detail,
917 });
918 },
919 };
920};
921const emitEvent = (elm, name, opts) => {
922 const ev = plt.ce(name, opts);
923 elm.dispatchEvent(ev);
924 return ev;
925};
926const attachToAncestor = (hostRef, ancestorComponent) => {
927 if ( ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
928 ancestorComponent['s-p'].push(new Promise(r => (hostRef.$onRenderResolve$ = r)));
929 }
930};
931const scheduleUpdate = (hostRef, isInitialLoad) => {
932 {
933 hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
934 }
935 if ( hostRef.$flags$ & 4 /* isWaitingForChildren */) {
936 hostRef.$flags$ |= 512 /* needsRerender */;
937 return;
938 }
939 attachToAncestor(hostRef, hostRef.$ancestorComponent$);
940 // there is no ancestorc omponent or the ancestor component
941 // has already fired off its lifecycle update then
942 // fire off the initial update
943 const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
944 return writeTask(dispatch) ;
945};
946const dispatchHooks = (hostRef, isInitialLoad) => {
947 const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
948 const instance = hostRef.$lazyInstance$ ;
949 let promise;
950 if (isInitialLoad) {
951 {
952 hostRef.$flags$ |= 256 /* isListenReady */;
953 if (hostRef.$queuedListeners$) {
954 hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
955 hostRef.$queuedListeners$ = null;
956 }
957 }
958 {
959 promise = safeCall(instance, 'componentWillLoad');
960 }
961 }
962 endSchedule();
963 return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
964};
965const updateComponent = (hostRef, instance, isInitialLoad) => {
966 // updateComponent
967 const elm = hostRef.$hostElement$;
968 const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
969 const rc = elm['s-rc'];
970 if ( isInitialLoad) {
971 // DOM WRITE!
972 attachStyles(hostRef);
973 }
974 const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
975 {
976 {
977 // looks like we've got child nodes to render into this host element
978 // or we need to update the css class/attrs on the host element
979 // DOM WRITE!
980 renderVdom(hostRef, callRender(hostRef, instance));
981 }
982 }
983 if ( plt.$cssShim$) {
984 plt.$cssShim$.updateHost(elm);
985 }
986 if ( rc) {
987 // ok, so turns out there are some child host elements
988 // waiting on this parent element to load
989 // let's fire off all update callbacks waiting
990 rc.map(cb => cb());
991 elm['s-rc'] = undefined;
992 }
993 endRender();
994 endUpdate();
995 {
996 const childrenPromises = elm['s-p'];
997 const postUpdate = () => postUpdateComponent(hostRef);
998 if (childrenPromises.length === 0) {
999 postUpdate();
1000 }
1001 else {
1002 Promise.all(childrenPromises).then(postUpdate);
1003 hostRef.$flags$ |= 4 /* isWaitingForChildren */;
1004 childrenPromises.length = 0;
1005 }
1006 }
1007};
1008const callRender = (hostRef, instance) => {
1009 try {
1010 instance = instance.render() ;
1011 {
1012 hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
1013 }
1014 {
1015 hostRef.$flags$ |= 2 /* hasRendered */;
1016 }
1017 }
1018 catch (e) {
1019 consoleError(e);
1020 }
1021 return instance;
1022};
1023const postUpdateComponent = (hostRef) => {
1024 const tagName = hostRef.$cmpMeta$.$tagName$;
1025 const elm = hostRef.$hostElement$;
1026 const endPostUpdate = createTime('postUpdate', tagName);
1027 const ancestorComponent = hostRef.$ancestorComponent$;
1028 if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
1029 hostRef.$flags$ |= 64 /* hasLoadedComponent */;
1030 {
1031 // DOM WRITE!
1032 addHydratedFlag(elm);
1033 }
1034 endPostUpdate();
1035 {
1036 hostRef.$onReadyResolve$(elm);
1037 if (!ancestorComponent) {
1038 appDidLoad();
1039 }
1040 }
1041 }
1042 else {
1043 endPostUpdate();
1044 }
1045 // load events fire from bottom to top
1046 // the deepest elements load first then bubbles up
1047 {
1048 if (hostRef.$onRenderResolve$) {
1049 hostRef.$onRenderResolve$();
1050 hostRef.$onRenderResolve$ = undefined;
1051 }
1052 if (hostRef.$flags$ & 512 /* needsRerender */) {
1053 nextTick(() => scheduleUpdate(hostRef, false));
1054 }
1055 hostRef.$flags$ &= ~(4 /* isWaitingForChildren */ | 512 /* needsRerender */);
1056 }
1057 // ( •_•)
1058 // ( •_•)>⌐■-■
1059 // (⌐■_■)
1060};
1061const forceUpdate = (ref) => {
1062 {
1063 const hostRef = getHostRef(ref);
1064 const isConnected = hostRef.$hostElement$.isConnected;
1065 if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
1066 scheduleUpdate(hostRef, false);
1067 }
1068 // Returns "true" when the forced update was successfully scheduled
1069 return isConnected;
1070 }
1071};
1072const appDidLoad = (who) => {
1073 // on appload
1074 // we have finish the first big initial render
1075 {
1076 addHydratedFlag(doc.documentElement);
1077 }
1078 nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
1079};
1080const safeCall = (instance, method, arg) => {
1081 if (instance && instance[method]) {
1082 try {
1083 return instance[method](arg);
1084 }
1085 catch (e) {
1086 consoleError(e);
1087 }
1088 }
1089 return undefined;
1090};
1091const then = (promise, thenFn) => {
1092 return promise && promise.then ? promise.then(thenFn) : thenFn();
1093};
1094const addHydratedFlag = (elm) => ( elm.classList.add('hydrated') );
1095const parsePropertyValue = (propValue, propType) => {
1096 // ensure this value is of the correct prop type
1097 if (propValue != null && !isComplexType(propValue)) {
1098 if ( propType & 2 /* Number */) {
1099 // force it to be a number
1100 return parseFloat(propValue);
1101 }
1102 if ( propType & 1 /* String */) {
1103 // could have been passed as a number or boolean
1104 // but we still want it as a string
1105 return String(propValue);
1106 }
1107 // redundant return here for better minification
1108 return propValue;
1109 }
1110 // not sure exactly what type we want
1111 // so no need to change to a different type
1112 return propValue;
1113};
1114const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
1115const setValue = (ref, propName, newVal, cmpMeta) => {
1116 // check our new property value against our internal value
1117 const hostRef = getHostRef(ref);
1118 const oldVal = hostRef.$instanceValues$.get(propName);
1119 const flags = hostRef.$flags$;
1120 const instance = hostRef.$lazyInstance$ ;
1121 newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
1122 if (( !(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
1123 // gadzooks! the property's value has changed!!
1124 // set our new value!
1125 hostRef.$instanceValues$.set(propName, newVal);
1126 if ( instance) {
1127 // get an array of method names of watch functions to call
1128 if ( cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
1129 const watchMethods = cmpMeta.$watchers$[propName];
1130 if (watchMethods) {
1131 // this instance is watching for when this property changed
1132 watchMethods.map(watchMethodName => {
1133 try {
1134 // fire off each of the watch methods that are watching this property
1135 instance[watchMethodName](newVal, oldVal, propName);
1136 }
1137 catch (e) {
1138 consoleError(e);
1139 }
1140 });
1141 }
1142 }
1143 if ( (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
1144 // looks like this value actually changed, so we've got work to do!
1145 // but only if we've already rendered, otherwise just chill out
1146 // queue that we need to do an update, but don't worry about queuing
1147 // up millions cuz this function ensures it only runs once
1148 scheduleUpdate(hostRef, false);
1149 }
1150 }
1151 }
1152};
1153const proxyComponent = (Cstr, cmpMeta, flags) => {
1154 if ( cmpMeta.$members$) {
1155 if ( Cstr.watchers) {
1156 cmpMeta.$watchers$ = Cstr.watchers;
1157 }
1158 // It's better to have a const than two Object.entries()
1159 const members = Object.entries(cmpMeta.$members$);
1160 const prototype = Cstr.prototype;
1161 members.map(([memberName, [memberFlags]]) => {
1162 if ( (memberFlags & 31 /* Prop */ || (( flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
1163 // proxyComponent - prop
1164 Object.defineProperty(prototype, memberName, {
1165 get() {
1166 // proxyComponent, get value
1167 return getValue(this, memberName);
1168 },
1169 set(newValue) {
1170 // proxyComponent, set value
1171 setValue(this, memberName, newValue, cmpMeta);
1172 },
1173 configurable: true,
1174 enumerable: true,
1175 });
1176 }
1177 });
1178 if ( ( flags & 1 /* isElementConstructor */)) {
1179 const attrNameToPropName = new Map();
1180 prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
1181 plt.jmp(() => {
1182 const propName = attrNameToPropName.get(attrName);
1183 this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
1184 });
1185 };
1186 // create an array of attributes to observe
1187 // and also create a map of html attribute name to js property name
1188 Cstr.observedAttributes = members
1189 .filter(([_, m]) => m[0] & 15 /* HasAttribute */) // filter to only keep props that should match attributes
1190 .map(([propName, m]) => {
1191 const attrName = m[1] || propName;
1192 attrNameToPropName.set(attrName, propName);
1193 if ( m[0] & 512 /* ReflectAttr */) {
1194 cmpMeta.$attrsToReflect$.push([propName, attrName]);
1195 }
1196 return attrName;
1197 });
1198 }
1199 }
1200 return Cstr;
1201};
1202const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
1203 // initializeComponent
1204 if ( (hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
1205 {
1206 // we haven't initialized this element yet
1207 hostRef.$flags$ |= 32 /* hasInitializedComponent */;
1208 // lazy loaded components
1209 // request the component's implementation to be
1210 // wired up with the host element
1211 Cstr = loadModule(cmpMeta);
1212 if (Cstr.then) {
1213 // Await creates a micro-task avoid if possible
1214 const endLoad = uniqueTime();
1215 Cstr = await Cstr;
1216 endLoad();
1217 }
1218 if ( !Cstr.isProxied) {
1219 // we'eve never proxied this Constructor before
1220 // let's add the getters/setters to its prototype before
1221 // the first time we create an instance of the implementation
1222 {
1223 cmpMeta.$watchers$ = Cstr.watchers;
1224 }
1225 proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
1226 Cstr.isProxied = true;
1227 }
1228 const endNewInstance = createTime('createInstance', cmpMeta.$tagName$);
1229 // ok, time to construct the instance
1230 // but let's keep track of when we start and stop
1231 // so that the getters/setters don't incorrectly step on data
1232 {
1233 hostRef.$flags$ |= 8 /* isConstructingInstance */;
1234 }
1235 // construct the lazy-loaded component implementation
1236 // passing the hostRef is very important during
1237 // construction in order to directly wire together the
1238 // host element and the lazy-loaded instance
1239 try {
1240 new Cstr(hostRef);
1241 }
1242 catch (e) {
1243 consoleError(e);
1244 }
1245 {
1246 hostRef.$flags$ &= ~8 /* isConstructingInstance */;
1247 }
1248 {
1249 hostRef.$flags$ |= 128 /* isWatchReady */;
1250 }
1251 endNewInstance();
1252 fireConnectedCallback(hostRef.$lazyInstance$);
1253 }
1254 if ( Cstr.style) {
1255 // this component has styles but we haven't registered them yet
1256 let style = Cstr.style;
1257 const scopeId = getScopeId(cmpMeta);
1258 if (!styles.has(scopeId)) {
1259 const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
1260 if ( cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
1261 style = await Promise.resolve().then(function () { return require('./shadow-css-c052bd64.js'); }).then(m => m.scopeCss(style, scopeId, false));
1262 }
1263 registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
1264 endRegisterStyles();
1265 }
1266 }
1267 }
1268 // we've successfully created a lazy instance
1269 const ancestorComponent = hostRef.$ancestorComponent$;
1270 const schedule = () => scheduleUpdate(hostRef, true);
1271 if ( ancestorComponent && ancestorComponent['s-rc']) {
1272 // this is the intial load and this component it has an ancestor component
1273 // but the ancestor component has NOT fired its will update lifecycle yet
1274 // so let's just cool our jets and wait for the ancestor to continue first
1275 // this will get fired off when the ancestor component
1276 // finally gets around to rendering its lazy self
1277 // fire off the initial update
1278 ancestorComponent['s-rc'].push(schedule);
1279 }
1280 else {
1281 schedule();
1282 }
1283};
1284const fireConnectedCallback = (instance) => {
1285 {
1286 safeCall(instance, 'connectedCallback');
1287 }
1288};
1289const connectedCallback = (elm) => {
1290 if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
1291 const hostRef = getHostRef(elm);
1292 const cmpMeta = hostRef.$cmpMeta$;
1293 const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
1294 if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
1295 // first time this component has connected
1296 hostRef.$flags$ |= 1 /* hasConnected */;
1297 {
1298 // initUpdate
1299 // if the slot polyfill is required we'll need to put some nodes
1300 // in here to act as original content anchors as we move nodes around
1301 // host element has been connected to the DOM
1302 if ( ( cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */))) {
1303 setContentReference(elm);
1304 }
1305 }
1306 {
1307 // find the first ancestor component (if there is one) and register
1308 // this component as one of the actively loading child components for its ancestor
1309 let ancestorComponent = elm;
1310 while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
1311 // climb up the ancestors looking for the first
1312 // component that hasn't finished its lifecycle update yet
1313 if (
1314 ancestorComponent['s-p']) {
1315 // we found this components first ancestor component
1316 // keep a reference to this component's ancestor component
1317 attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
1318 break;
1319 }
1320 }
1321 }
1322 // Lazy properties
1323 // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
1324 if ( cmpMeta.$members$) {
1325 Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
1326 if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
1327 const value = elm[memberName];
1328 delete elm[memberName];
1329 elm[memberName] = value;
1330 }
1331 });
1332 }
1333 {
1334 // connectedCallback, taskQueue, initialLoad
1335 // angular sets attribute AFTER connectCallback
1336 // https://github.com/angular/angular/issues/18909
1337 // https://github.com/angular/angular/issues/19940
1338 nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
1339 }
1340 }
1341 else {
1342 // not the first time this has connected
1343 // reattach any event listeners to the host
1344 // since they would have been removed when disconnected
1345 addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
1346 // fire off connectedCallback() on component instance
1347 fireConnectedCallback(hostRef.$lazyInstance$);
1348 }
1349 endConnected();
1350 }
1351};
1352const setContentReference = (elm) => {
1353 // only required when we're NOT using native shadow dom (slot)
1354 // or this browser doesn't support native shadow dom
1355 // and this host element was NOT created with SSR
1356 // let's pick out the inner content for slot projection
1357 // create a node to represent where the original
1358 // content was first placed, which is useful later on
1359 const contentRefElm = (elm['s-cr'] = doc.createComment( ''));
1360 contentRefElm['s-cn'] = true;
1361 elm.insertBefore(contentRefElm, elm.firstChild);
1362};
1363const disconnectedCallback = (elm) => {
1364 if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
1365 const hostRef = getHostRef(elm);
1366 {
1367 if (hostRef.$rmListeners$) {
1368 hostRef.$rmListeners$.map(rmListener => rmListener());
1369 hostRef.$rmListeners$ = undefined;
1370 }
1371 }
1372 // clear CSS var-shim tracking
1373 if ( plt.$cssShim$) {
1374 plt.$cssShim$.removeHost(elm);
1375 }
1376 }
1377};
1378const bootstrapLazy = (lazyBundles, options = {}) => {
1379 const endBootstrap = createTime();
1380 const cmpTags = [];
1381 const exclude = options.exclude || [];
1382 const customElements = win.customElements;
1383 const head = doc.head;
1384 const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
1385 const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
1386 const deferredConnectedCallbacks = [];
1387 let appLoadFallback;
1388 let isBootstrapping = true;
1389 Object.assign(plt, options);
1390 plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
1391 lazyBundles.map(lazyBundle => lazyBundle[1].map(compactMeta => {
1392 const cmpMeta = {
1393 $flags$: compactMeta[0],
1394 $tagName$: compactMeta[1],
1395 $members$: compactMeta[2],
1396 $listeners$: compactMeta[3],
1397 };
1398 {
1399 cmpMeta.$members$ = compactMeta[2];
1400 }
1401 {
1402 cmpMeta.$listeners$ = compactMeta[3];
1403 }
1404 {
1405 cmpMeta.$attrsToReflect$ = [];
1406 }
1407 {
1408 cmpMeta.$watchers$ = {};
1409 }
1410 if ( !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
1411 cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
1412 }
1413 const tagName = cmpMeta.$tagName$;
1414 const HostElement = class extends HTMLElement {
1415 // StencilLazyHost
1416 constructor(self) {
1417 // @ts-ignore
1418 super(self);
1419 self = this;
1420 registerHost(self, cmpMeta);
1421 if ( cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
1422 // this component is using shadow dom
1423 // and this browser supports shadow dom
1424 // add the read-only property "shadowRoot" to the host element
1425 // adding the shadow root build conditionals to minimize runtime
1426 if (supportsShadow) {
1427 {
1428 self.attachShadow({ mode: 'open' });
1429 }
1430 }
1431 else if ( !('shadowRoot' in self)) {
1432 self.shadowRoot = self;
1433 }
1434 }
1435 }
1436 connectedCallback() {
1437 if (appLoadFallback) {
1438 clearTimeout(appLoadFallback);
1439 appLoadFallback = null;
1440 }
1441 if (isBootstrapping) {
1442 // connectedCallback will be processed once all components have been registered
1443 deferredConnectedCallbacks.push(this);
1444 }
1445 else {
1446 plt.jmp(() => connectedCallback(this));
1447 }
1448 }
1449 disconnectedCallback() {
1450 plt.jmp(() => disconnectedCallback(this));
1451 }
1452 forceUpdate() {
1453 forceUpdate(this);
1454 }
1455 componentOnReady() {
1456 return getHostRef(this).$onReadyPromise$;
1457 }
1458 };
1459 cmpMeta.$lazyBundleId$ = lazyBundle[0];
1460 if (!exclude.includes(tagName) && !customElements.get(tagName)) {
1461 cmpTags.push(tagName);
1462 customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
1463 }
1464 }));
1465 {
1466 visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
1467 visibilityStyle.setAttribute('data-styles', '');
1468 head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
1469 }
1470 // Process deferred connectedCallbacks now all components have been registered
1471 isBootstrapping = false;
1472 if (deferredConnectedCallbacks.length) {
1473 deferredConnectedCallbacks.map(host => host.connectedCallback());
1474 }
1475 else {
1476 {
1477 plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30)));
1478 }
1479 }
1480 // Fallback appLoad event
1481 endBootstrap();
1482};
1483const hostRefs = new WeakMap();
1484const getHostRef = (ref) => hostRefs.get(ref);
1485const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
1486const registerHost = (elm, cmpMeta) => {
1487 const hostRef = {
1488 $flags$: 0,
1489 $hostElement$: elm,
1490 $cmpMeta$: cmpMeta,
1491 $instanceValues$: new Map(),
1492 };
1493 {
1494 hostRef.$onReadyPromise$ = new Promise(r => (hostRef.$onReadyResolve$ = r));
1495 elm['s-p'] = [];
1496 elm['s-rc'] = [];
1497 }
1498 addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
1499 return hostRefs.set(elm, hostRef);
1500};
1501const isMemberInElement = (elm, memberName) => memberName in elm;
1502const consoleError = (e) => console.error(e);
1503const cmpModules = /*@__PURE__*/ new Map();
1504const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
1505 // loadModuleImport
1506 const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
1507 const bundleId = cmpMeta.$lazyBundleId$;
1508 const module = cmpModules.get(bundleId) ;
1509 if (module) {
1510 return module[exportName];
1511 }
1512 return Promise.resolve().then(function () { return _interopNamespace(require(
1513 /* webpackInclude: /\.entry\.js$/ */
1514 /* webpackExclude: /\.system\.entry\.js$/ */
1515 /* webpackMode: "lazy" */
1516 `./${bundleId}.entry.js${ ''}`)); }).then(importedModule => {
1517 {
1518 cmpModules.set(bundleId, importedModule);
1519 }
1520 return importedModule[exportName];
1521 }, consoleError);
1522};
1523const styles = new Map();
1524const queueDomReads = [];
1525const queueDomWrites = [];
1526const queueTask = (queue, write) => (cb) => {
1527 queue.push(cb);
1528 if (!queuePending) {
1529 queuePending = true;
1530 if (write && plt.$flags$ & 4 /* queueSync */) {
1531 nextTick(flush);
1532 }
1533 else {
1534 plt.raf(flush);
1535 }
1536 }
1537};
1538const consume = (queue) => {
1539 for (let i = 0; i < queue.length; i++) {
1540 try {
1541 queue[i](performance.now());
1542 }
1543 catch (e) {
1544 consoleError(e);
1545 }
1546 }
1547 queue.length = 0;
1548};
1549const flush = () => {
1550 // always force a bunch of medium callbacks to run, but still have
1551 // a throttle on how many can run in a certain time
1552 // DOM READS!!!
1553 consume(queueDomReads);
1554 // DOM WRITES!!!
1555 {
1556 consume(queueDomWrites);
1557 if ((queuePending = queueDomReads.length > 0)) {
1558 // still more to do yet, but we've run out of time
1559 // let's let this thing cool off and try again in the next tick
1560 plt.raf(flush);
1561 }
1562 }
1563};
1564const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
1565const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1566
1567exports.CSS = CSS;
1568exports.Host = Host;
1569exports.NAMESPACE = NAMESPACE;
1570exports.bootstrapLazy = bootstrapLazy;
1571exports.createEvent = createEvent;
1572exports.doc = doc;
1573exports.getElement = getElement;
1574exports.h = h;
1575exports.plt = plt;
1576exports.promiseResolve = promiseResolve;
1577exports.registerInstance = registerInstance;
1578exports.win = win;