@runopencode/rx-stencil 0.3.0

package/dist/esm/index-9f5c1c1c.js

@@ -0,0 +1,1178 @@
+const NAMESPACE = 'rx-stencil';
+
+/**
+ * Virtual DOM patching algorithm based on Snabbdom by
+ * Simon Friis Vindum (@paldepind)
+ * Licensed under the MIT License
+ * https://github.com/snabbdom/snabbdom/blob/master/LICENSE
+ *
+ * Modified for Stencil's renderer and slot projection
+ */
+let queuePending = false;
+const createTime = (fnName, tagName = '') => {
+    {
+        return () => {
+            return;
+        };
+    }
+};
+const uniqueTime = (key, measureText) => {
+    {
+        return () => {
+            return;
+        };
+    }
+};
+const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+/**
+ * Check whether a value is a 'complex type', defined here as an object or a
+ * function.
+ *
+ * @param o the value to check
+ * @returns whether it's a complex type or not
+ */
+const isComplexType = (o) => {
+    // https://jsperf.com/typeof-fn-object/5
+    o = typeof o;
+    return o === 'object' || o === 'function';
+};
+/**
+ * Helper method for querying a `meta` tag that contains a nonce value
+ * out of a DOM's head.
+ *
+ * @param doc The DOM containing the `head` to query against
+ * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
+ * exists or the tag has no content.
+ */
+function queryNonceMetaTagContent(doc) {
+    var _a, _b, _c;
+    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;
+}
+/**
+ * Production h() function based on Preact by
+ * Jason Miller (@developit)
+ * Licensed under the MIT License
+ * https://github.com/developit/preact/blob/master/LICENSE
+ *
+ * Modified for Stencil's compiler and vdom
+ */
+// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
+// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
+const h = (nodeName, vnodeData, ...children) => {
+    let child = null;
+    let simple = false;
+    let lastSimple = false;
+    const vNodeChildren = [];
+    const walk = (c) => {
+        for (let i = 0; i < c.length; i++) {
+            child = c[i];
+            if (Array.isArray(child)) {
+                walk(child);
+            }
+            else if (child != null && typeof child !== 'boolean') {
+                if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) {
+                    child = String(child);
+                }
+                if (simple && lastSimple) {
+                    // If the previous child was simple (string), we merge both
+                    vNodeChildren[vNodeChildren.length - 1].$text$ += child;
+                }
+                else {
+                    // Append a new vNode, if it's text, we create a text vNode
+                    vNodeChildren.push(simple ? newVNode(null, child) : child);
+                }
+                lastSimple = simple;
+            }
+        }
+    };
+    walk(children);
+    const vnode = newVNode(nodeName, null);
+    vnode.$attrs$ = vnodeData;
+    if (vNodeChildren.length > 0) {
+        vnode.$children$ = vNodeChildren;
+    }
+    return vnode;
+};
+/**
+ * A utility function for creating a virtual DOM node from a tag and some
+ * possible text content.
+ *
+ * @param tag the tag for this element
+ * @param text possible text content for the node
+ * @returns a newly-minted virtual DOM node
+ */
+const newVNode = (tag, text) => {
+    const vnode = {
+        $flags$: 0,
+        $tag$: tag,
+        $text$: text,
+        $elm$: null,
+        $children$: null,
+    };
+    return vnode;
+};
+const Host = {};
+/**
+ * Check whether a given node is a Host node or not
+ *
+ * @param node the virtual DOM node to check
+ * @returns whether it's a Host node or not
+ */
+const isHost = (node) => node && node.$tag$ === Host;
+/**
+ * Parse a new property value for a given property type.
+ *
+ * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
+ * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
+ *   1. `any`, the type given to `propValue` in the function signature
+ *   2. the type stored from `propType`.
+ *
+ * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
+ *
+ * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
+ * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
+ * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
+ * ```tsx
+ * <my-cmp prop-val={0}></my-cmp>
+ * ```
+ *
+ * HTML prop values on the other hand, will always a string
+ *
+ * @param propValue the new value to coerce to some type
+ * @param propType the type of the prop, expressed as a binary number
+ * @returns the parsed/coerced value
+ */
+const parsePropertyValue = (propValue, propType) => {
+    // ensure this value is of the correct prop type
+    if (propValue != null && !isComplexType(propValue)) {
+        // redundant return here for better minification
+        return propValue;
+    }
+    // not sure exactly what type we want
+    // so no need to change to a different type
+    return propValue;
+};
+const getElement = (ref) => (getHostRef(ref).$hostElement$ );
+/**
+ * Helper function to create & dispatch a custom Event on a provided target
+ * @param elm the target of the Event
+ * @param name the name to give the custom Event
+ * @param opts options for configuring a custom Event
+ * @returns the custom Event
+ */
+const emitEvent = (elm, name, opts) => {
+    const ev = plt.ce(name, opts);
+    elm.dispatchEvent(ev);
+    return ev;
+};
+const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
+const registerStyle = (scopeId, cssText, allowCS) => {
+    let style = styles.get(scopeId);
+    if (supportsConstructableStylesheets && allowCS) {
+        style = (style || new CSSStyleSheet());
+        if (typeof style === 'string') {
+            style = cssText;
+        }
+        else {
+            style.replaceSync(cssText);
+        }
+    }
+    else {
+        style = cssText;
+    }
+    styles.set(scopeId, style);
+};
+const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+    var _a;
+    let scopeId = getScopeId(cmpMeta);
+    const style = styles.get(scopeId);
+    // if an element is NOT connected then getRootNode() will return the wrong root node
+    // so the fallback is to always use the document for the root node in those cases
+    styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
+    if (style) {
+        if (typeof style === 'string') {
+            styleContainerNode = styleContainerNode.head || styleContainerNode;
+            let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+            let styleElm;
+            if (!appliedStyles) {
+                rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
+            }
+            if (!appliedStyles.has(scopeId)) {
+                {
+                    // TODO(STENCIL-659): Remove code implementing the CSS variable shim
+                    {
+                        styleElm = doc.createElement('style');
+                        styleElm.innerHTML = style;
+                    }
+                    // Apply CSP nonce to the style tag if it exists
+                    const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+                    if (nonce != null) {
+                        styleElm.setAttribute('nonce', nonce);
+                    }
+                    styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
+                }
+                if (appliedStyles) {
+                    appliedStyles.add(scopeId);
+                }
+            }
+        }
+        else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
+            styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+        }
+    }
+    return scopeId;
+};
+const attachStyles = (hostRef) => {
+    const cmpMeta = hostRef.$cmpMeta$;
+    const elm = hostRef.$hostElement$;
+    const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
+    addStyle(elm.getRootNode(), cmpMeta);
+    endAttachStyles();
+};
+const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
+/**
+ * Create a DOM Node corresponding to one of the children of a given VNode.
+ *
+ * @param oldParentVNode the parent VNode from the previous render
+ * @param newParentVNode the parent VNode from the current render
+ * @param childIndex the index of the VNode, in the _new_ parent node's
+ * children, for which we will create a new DOM node
+ * @param parentElm the parent DOM node which our new node will be a child of
+ * @returns the newly created node
+ */
+const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
+    // tslint:disable-next-line: prefer-const
+    const newVNode = newParentVNode.$children$[childIndex];
+    let i = 0;
+    let elm;
+    let childNode;
+    if (newVNode.$text$ !== null) {
+        // create text node
+        elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
+    }
+    else {
+        // create element
+        elm = newVNode.$elm$ = (doc.createElement(newVNode.$tag$));
+        if (newVNode.$children$) {
+            for (i = 0; i < newVNode.$children$.length; ++i) {
+                // create the node
+                childNode = createElm(oldParentVNode, newVNode, i);
+                // return node could have been null
+                if (childNode) {
+                    // append our new node
+                    elm.appendChild(childNode);
+                }
+            }
+        }
+    }
+    return elm;
+};
+/**
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
+ * add them to the DOM in the appropriate place.
+ *
+ * @param parentElm the DOM node which should be used as a parent for the new
+ * DOM nodes
+ * @param before a child of the `parentElm` which the new children should be
+ * inserted before (optional)
+ * @param parentVNode the parent virtual DOM node
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
+ * @param startIdx the index in the child virtual DOM nodes at which to start
+ * creating DOM nodes (inclusive)
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
+ * creating DOM nodes (inclusive)
+ */
+const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
+    let containerElm = (parentElm);
+    let childNode;
+    for (; startIdx <= endIdx; ++startIdx) {
+        if (vnodes[startIdx]) {
+            childNode = createElm(null, parentVNode, startIdx);
+            if (childNode) {
+                vnodes[startIdx].$elm$ = childNode;
+                containerElm.insertBefore(childNode, before);
+            }
+        }
+    }
+};
+/**
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
+ * This can be used to, for instance, clean up after a list of children which
+ * should no longer be shown.
+ *
+ * This function also handles some of Stencil's slot relocation logic.
+ *
+ * @param vnodes a list of virtual DOM nodes to remove
+ * @param startIdx the index at which to start removing nodes (inclusive)
+ * @param endIdx the index at which to stop removing nodes (inclusive)
+ */
+const removeVnodes = (vnodes, startIdx, endIdx) => {
+    for (let index = startIdx; index <= endIdx; ++index) {
+        const vnode = vnodes[index];
+        if (vnode) {
+            const elm = vnode.$elm$;
+            if (elm) {
+                // remove the vnode's element from the dom
+                elm.remove();
+            }
+        }
+    }
+};
+/**
+ * Reconcile the children of a new VNode with the children of an old VNode by
+ * traversing the two collections of children, identifying nodes that are
+ * conserved or changed, calling out to `patch` to make any necessary
+ * updates to the DOM, and rearranging DOM nodes as needed.
+ *
+ * The algorithm for reconciling children works by analyzing two 'windows' onto
+ * the two arrays of children (`oldCh` and `newCh`). We keep track of the
+ * 'windows' by storing start and end indices and references to the
+ * corresponding array entries. Initially the two 'windows' are basically equal
+ * to the entire array, but we progressively narrow the windows until there are
+ * no children left to update by doing the following:
+ *
+ * 1. Skip any `null` entries at the beginning or end of the two arrays, so
+ *    that if we have an initial array like the following we'll end up dealing
+ *    only with a window bounded by the highlighted elements:
+ *
+ *    [null, null, VNode1 , ... , VNode2, null, null]
+ *                 ^^^^^^         ^^^^^^
+ *
+ * 2. Check to see if the elements at the head and tail positions are equal
+ *    across the windows. This will basically detect elements which haven't
+ *    been added, removed, or changed position, i.e. if you had the following
+ *    VNode elements (represented as HTML):
+ *
+ *    oldVNode: `<div><p><span>HEY</span></p></div>`
+ *    newVNode: `<div><p><span>THERE</span></p></div>`
+ *
+ *    Then when comparing the children of the `<div>` tag we check the equality
+ *    of the VNodes corresponding to the `<p>` tags and, since they are the
+ *    same tag in the same position, we'd be able to avoid completely
+ *    re-rendering the subtree under them with a new DOM element and would just
+ *    call out to `patch` to handle reconciling their children and so on.
+ *
+ * 3. Check, for both windows, to see if the element at the beginning of the
+ *    window corresponds to the element at the end of the other window. This is
+ *    a heuristic which will let us identify _some_ situations in which
+ *    elements have changed position, for instance it _should_ detect that the
+ *    children nodes themselves have not changed but merely moved in the
+ *    following example:
+ *
+ *    oldVNode: `<div><element-one /><element-two /></div>`
+ *    newVNode: `<div><element-two /><element-one /></div>`
+ *
+ *    If we find cases like this then we also need to move the concrete DOM
+ *    elements corresponding to the moved children to write the re-order to the
+ *    DOM.
+ *
+ * 4. Finally, if VNodes have the `key` attribute set on them we check for any
+ *    nodes in the old children which have the same key as the first element in
+ *    our window on the new children. If we find such a node we handle calling
+ *    out to `patch`, moving relevant DOM nodes, and so on, in accordance with
+ *    what we find.
+ *
+ * Finally, once we've narrowed our 'windows' to the point that either of them
+ * collapse (i.e. they have length 0) we then handle any remaining VNode
+ * insertion or deletion that needs to happen to get a DOM state that correctly
+ * reflects the new child VNodes. If, for instance, after our window on the old
+ * children has collapsed we still have more nodes on the new children that
+ * we haven't dealt with yet then we need to add them, or if the new children
+ * collapse but we still have unhandled _old_ children then we need to make
+ * sure the corresponding DOM nodes are removed.
+ *
+ * @param parentElm the node into which the parent VNode is rendered
+ * @param oldCh the old children of the parent node
+ * @param newVNode the new VNode which will replace the parent
+ * @param newCh the new children of the parent node
+ */
+const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
+    let oldStartIdx = 0;
+    let newStartIdx = 0;
+    let oldEndIdx = oldCh.length - 1;
+    let oldStartVnode = oldCh[0];
+    let oldEndVnode = oldCh[oldEndIdx];
+    let newEndIdx = newCh.length - 1;
+    let newStartVnode = newCh[0];
+    let newEndVnode = newCh[newEndIdx];
+    let node;
+    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+        if (oldStartVnode == null) {
+            // VNode might have been moved left
+            oldStartVnode = oldCh[++oldStartIdx];
+        }
+        else if (oldEndVnode == null) {
+            oldEndVnode = oldCh[--oldEndIdx];
+        }
+        else if (newStartVnode == null) {
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else if (newEndVnode == null) {
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldStartVnode, newStartVnode)) {
+            // if the start nodes are the same then we should patch the new VNode
+            // onto the old one, and increment our `newStartIdx` and `oldStartIdx`
+            // indices to reflect that. We don't need to move any DOM Nodes around
+            // since things are matched up in order.
+            patch(oldStartVnode, newStartVnode);
+            oldStartVnode = oldCh[++oldStartIdx];
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else if (isSameVnode(oldEndVnode, newEndVnode)) {
+            // likewise, if the end nodes are the same we patch new onto old and
+            // decrement our end indices, and also likewise in this case we don't
+            // need to move any DOM Nodes.
+            patch(oldEndVnode, newEndVnode);
+            oldEndVnode = oldCh[--oldEndIdx];
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldStartVnode, newEndVnode)) {
+            patch(oldStartVnode, newEndVnode);
+            // We need to move the element for `oldStartVnode` into a position which
+            // will be appropriate for `newEndVnode`. For this we can use
+            // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
+            // sibling for `oldEndVnode.$elm$` then we want to move the DOM node for
+            // `oldStartVnode` between `oldEndVnode` and it's sibling, like so:
+            //
+            // <old-start-node />
+            // <some-intervening-node />
+            // <old-end-node />
+            // <!-- ->              <-- `oldStartVnode.$elm$` should be inserted here
+            // <next-sibling />
+            //
+            // If instead `oldEndVnode.$elm$` has no sibling then we just want to put
+            // the node for `oldStartVnode` at the end of the children of
+            // `parentElm`. Luckily, `Node.nextSibling` will return `null` if there
+            // aren't any siblings, and passing `null` to `Node.insertBefore` will
+            // append it to the children of the parent element.
+            parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
+            oldStartVnode = oldCh[++oldStartIdx];
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldEndVnode, newStartVnode)) {
+            patch(oldEndVnode, newStartVnode);
+            // We've already checked above if `oldStartVnode` and `newStartVnode` are
+            // the same node, so since we're here we know that they are not. Thus we
+            // can move the element for `oldEndVnode` _before_ the element for
+            // `oldStartVnode`, leaving `oldStartVnode` to be reconciled in the
+            // future.
+            parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
+            oldEndVnode = oldCh[--oldEndIdx];
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else {
+            {
+                // We either didn't find an element in the old children that matches
+                // the key of the first new child OR the build is not using `key`
+                // attributes at all. In either case we need to create a new element
+                // for the new node.
+                node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
+                newStartVnode = newCh[++newStartIdx];
+            }
+            if (node) {
+                // if we created a new node then handle inserting it to the DOM
+                {
+                    oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
+                }
+            }
+        }
+    }
+    if (oldStartIdx > oldEndIdx) {
+        // we have some more new nodes to add which don't match up with old nodes
+        addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
+    }
+    else if (newStartIdx > newEndIdx) {
+        // there are nodes in the `oldCh` array which no longer correspond to nodes
+        // in the new array, so lets remove them (which entails cleaning up the
+        // relevant DOM nodes)
+        removeVnodes(oldCh, oldStartIdx, oldEndIdx);
+    }
+};
+/**
+ * Compare two VNodes to determine if they are the same
+ *
+ * **NB**: This function is an equality _heuristic_ based on the available
+ * information set on the two VNodes and can be misleading under certain
+ * circumstances. In particular, if the two nodes do not have `key` attrs
+ * (available under `$key$` on VNodes) then the function falls back on merely
+ * checking that they have the same tag.
+ *
+ * So, in other words, if `key` attrs are not set on VNodes which may be
+ * changing order within a `children` array or something along those lines then
+ * we could obtain a false negative and then have to do needless re-rendering
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
+ *
+ * @param leftVNode the first VNode to check
+ * @param rightVNode the second VNode to check
+ * @returns whether they're equal or not
+ */
+const isSameVnode = (leftVNode, rightVNode) => {
+    // compare if two vnode to see if they're "technically" the same
+    // need to have the same element tag, and same key to be the same
+    if (leftVNode.$tag$ === rightVNode.$tag$) {
+        return true;
+    }
+    return false;
+};
+/**
+ * Handle reconciling an outdated VNode with a new one which corresponds to
+ * it. This function handles flushing updates to the DOM and reconciling the
+ * children of the two nodes (if any).
+ *
+ * @param oldVNode an old VNode whose DOM element and children we want to update
+ * @param newVNode a new VNode representing an updated version of the old one
+ */
+const patch = (oldVNode, newVNode) => {
+    const elm = (newVNode.$elm$ = oldVNode.$elm$);
+    const oldChildren = oldVNode.$children$;
+    const newChildren = newVNode.$children$;
+    const text = newVNode.$text$;
+    if (text === null) {
+        if (oldChildren !== null && newChildren !== null) {
+            // looks like there's child vnodes for both the old and new vnodes
+            // so we need to call `updateChildren` to reconcile them
+            updateChildren(elm, oldChildren, newVNode, newChildren);
+        }
+        else if (newChildren !== null) {
+            // no old child vnodes, but there are new child vnodes to add
+            if (oldVNode.$text$ !== null) {
+                // the old vnode was text, so be sure to clear it out
+                elm.textContent = '';
+            }
+            // add the new vnode children
+            addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
+        }
+        else if (oldChildren !== null) {
+            // no new child vnodes, but there are old child vnodes to remove
+            removeVnodes(oldChildren, 0, oldChildren.length - 1);
+        }
+    }
+    else if (oldVNode.$text$ !== text) {
+        // update the text content for the text only vnode
+        // and also only if the text is different than before
+        elm.data = text;
+    }
+};
+/**
+ * The main entry point for Stencil's virtual DOM-based rendering engine
+ *
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
+ * function will handle creating a virtual DOM tree with a single root, patching
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
+ * relocation, and reflecting attributes.
+ *
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
+ * the DOM node into which it should be rendered.
+ * @param renderFnResults the virtual DOM nodes to be rendered
+ */
+const renderVdom = (hostRef, renderFnResults) => {
+    const hostElm = hostRef.$hostElement$;
+    const oldVNode = hostRef.$vnode$ || newVNode(null, null);
+    const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
+    rootVnode.$tag$ = null;
+    rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
+    hostRef.$vnode$ = rootVnode;
+    rootVnode.$elm$ = oldVNode.$elm$ = (hostElm);
+    // synchronous patch
+    patch(oldVNode, rootVnode);
+};
+const attachToAncestor = (hostRef, ancestorComponent) => {
+    if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
+        ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
+    }
+};
+const scheduleUpdate = (hostRef, isInitialLoad) => {
+    {
+        hostRef.$flags$ |= 16 /* HOST_FLAGS.isQueuedForUpdate */;
+    }
+    if (hostRef.$flags$ & 4 /* HOST_FLAGS.isWaitingForChildren */) {
+        hostRef.$flags$ |= 512 /* HOST_FLAGS.needsRerender */;
+        return;
+    }
+    attachToAncestor(hostRef, hostRef.$ancestorComponent$);
+    // there is no ancestor component or the ancestor component
+    // has already fired off its lifecycle update then
+    // fire off the initial update
+    const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
+    return writeTask(dispatch) ;
+};
+/**
+ * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
+ * component lifecycle methods like `componentWillLoad` as well as
+ * {@link updateComponent}, which will kick off the virtual DOM re-render.
+ *
+ * @param hostRef a reference to a host DOM node
+ * @param isInitialLoad whether we're on the initial load or not
+ * @returns an empty Promise which is used to enqueue a series of operations for
+ * the component
+ */
+const dispatchHooks = (hostRef, isInitialLoad) => {
+    const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
+    const instance = hostRef.$lazyInstance$ ;
+    // We're going to use this variable together with `enqueue` to implement a
+    // little promise-based queue. We start out with it `undefined`. When we add
+    // the first function to the queue we'll set this variable to be that
+    // function's return value. When we attempt to add subsequent values to the
+    // queue we'll check that value and, if it was a `Promise`, we'll then chain
+    // the new function off of that `Promise` using `.then()`. This will give our
+    // queue two nice properties:
+    //
+    // 1. If all functions added to the queue are synchronous they'll be called
+    //    synchronously right away.
+    // 2. If all functions added to the queue are asynchronous they'll all be
+    //    called in order after `dispatchHooks` exits.
+    let maybePromise;
+    endSchedule();
+    return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
+};
+/**
+ * This function uses a Promise to implement a simple first-in, first-out queue
+ * of functions to be called.
+ *
+ * The queue is ordered on the basis of the first argument. If it's
+ * `undefined`, then nothing is on the queue yet, so the provided function can
+ * be called synchronously (although note that this function may return a
+ * `Promise`). The idea is that then the return value of that enqueueing
+ * operation is kept around, so that if it was a `Promise` then subsequent
+ * functions can be enqueued by calling this function again with that `Promise`
+ * as the first argument.
+ *
+ * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
+ * @param fn a function to enqueue
+ * @returns either a `Promise` or the return value of the provided function
+ */
+const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
+/**
+ * Check that a value is a `Promise`. To check, we first see if the value is an
+ * instance of the `Promise` global. In a few circumstances, in particular if
+ * the global has been overwritten, this is could be misleading, so we also do
+ * a little 'duck typing' check to see if the `.then` property of the value is
+ * defined and a function.
+ *
+ * @param maybePromise it might be a promise!
+ * @returns whether it is or not
+ */
+const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
+    (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
+const updateComponent = async (hostRef, instance, isInitialLoad) => {
+    var _a;
+    const elm = hostRef.$hostElement$;
+    const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
+    const rc = elm['s-rc'];
+    if (isInitialLoad) {
+        // DOM WRITE!
+        attachStyles(hostRef);
+    }
+    const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
+    {
+        callRender(hostRef, instance);
+    }
+    if (rc) {
+        // ok, so turns out there are some child host elements
+        // waiting on this parent element to load
+        // let's fire off all update callbacks waiting
+        rc.map((cb) => cb());
+        elm['s-rc'] = undefined;
+    }
+    endRender();
+    endUpdate();
+    {
+        const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
+        const postUpdate = () => postUpdateComponent(hostRef);
+        if (childrenPromises.length === 0) {
+            postUpdate();
+        }
+        else {
+            Promise.all(childrenPromises).then(postUpdate);
+            hostRef.$flags$ |= 4 /* HOST_FLAGS.isWaitingForChildren */;
+            childrenPromises.length = 0;
+        }
+    }
+};
+const callRender = (hostRef, instance, elm) => {
+    try {
+        instance = instance.render() ;
+        {
+            hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
+        }
+        {
+            hostRef.$flags$ |= 2 /* HOST_FLAGS.hasRendered */;
+        }
+        {
+            {
+                // looks like we've got child nodes to render into this host element
+                // or we need to update the css class/attrs on the host element
+                // DOM WRITE!
+                {
+                    renderVdom(hostRef, instance);
+                }
+            }
+        }
+    }
+    catch (e) {
+        consoleError(e, hostRef.$hostElement$);
+    }
+    return null;
+};
+const postUpdateComponent = (hostRef) => {
+    const tagName = hostRef.$cmpMeta$.$tagName$;
+    const elm = hostRef.$hostElement$;
+    const endPostUpdate = createTime('postUpdate', tagName);
+    const ancestorComponent = hostRef.$ancestorComponent$;
+    if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
+        hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
+        {
+            // DOM WRITE!
+            addHydratedFlag(elm);
+        }
+        endPostUpdate();
+        {
+            hostRef.$onReadyResolve$(elm);
+            if (!ancestorComponent) {
+                appDidLoad();
+            }
+        }
+    }
+    else {
+        endPostUpdate();
+    }
+    // load events fire from bottom to top
+    // the deepest elements load first then bubbles up
+    {
+        if (hostRef.$onRenderResolve$) {
+            hostRef.$onRenderResolve$();
+            hostRef.$onRenderResolve$ = undefined;
+        }
+        if (hostRef.$flags$ & 512 /* HOST_FLAGS.needsRerender */) {
+            nextTick(() => scheduleUpdate(hostRef, false));
+        }
+        hostRef.$flags$ &= ~(4 /* HOST_FLAGS.isWaitingForChildren */ | 512 /* HOST_FLAGS.needsRerender */);
+    }
+    // ( •_•)
+    // ( •_•)>⌐■-■
+    // (⌐■_■)
+};
+const forceUpdate = (ref) => {
+    {
+        const hostRef = getHostRef(ref);
+        const isConnected = hostRef.$hostElement$.isConnected;
+        if (isConnected &&
+            (hostRef.$flags$ & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
+            scheduleUpdate(hostRef, false);
+        }
+        // Returns "true" when the forced update was successfully scheduled
+        return isConnected;
+    }
+};
+const appDidLoad = (who) => {
+    // on appload
+    // we have finish the first big initial render
+    {
+        addHydratedFlag(doc.documentElement);
+    }
+    nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
+};
+const safeCall = (instance, method, arg) => {
+    if (instance && instance[method]) {
+        try {
+            return instance[method](arg);
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+    return undefined;
+};
+const addHydratedFlag = (elm) => elm.classList.add('hydrated')
+    ;
+const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
+const setValue = (ref, propName, newVal, cmpMeta) => {
+    // check our new property value against our internal value
+    const hostRef = getHostRef(ref);
+    const oldVal = hostRef.$instanceValues$.get(propName);
+    const flags = hostRef.$flags$;
+    const instance = hostRef.$lazyInstance$ ;
+    newVal = parsePropertyValue(newVal);
+    // explicitly check for NaN on both sides, as `NaN === NaN` is always false
+    const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
+    const didValueChange = newVal !== oldVal && !areBothNaN;
+    if ((!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) || oldVal === undefined) && didValueChange) {
+        // gadzooks! the property's value has changed!!
+        // set our new value!
+        hostRef.$instanceValues$.set(propName, newVal);
+        if (instance) {
+            if ((flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
+                // looks like this value actually changed, so we've got work to do!
+                // but only if we've already rendered, otherwise just chill out
+                // queue that we need to do an update, but don't worry about queuing
+                // up millions cuz this function ensures it only runs once
+                scheduleUpdate(hostRef, false);
+            }
+        }
+    }
+};
+/**
+ * Attach a series of runtime constructs to a compiled Stencil component
+ * constructor, including getters and setters for the `@Prop` and `@State`
+ * decorators, callbacks for when attributes change, and so on.
+ *
+ * @param Cstr the constructor for a component that we need to process
+ * @param cmpMeta metadata collected previously about the component
+ * @param flags a number used to store a series of bit flags
+ * @returns a reference to the same constructor passed in (but now mutated)
+ */
+const proxyComponent = (Cstr, cmpMeta, flags) => {
+    if (cmpMeta.$members$) {
+        // It's better to have a const than two Object.entries()
+        const members = Object.entries(cmpMeta.$members$);
+        const prototype = Cstr.prototype;
+        members.map(([memberName, [memberFlags]]) => {
+            if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
+                    ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
+                // proxyComponent - prop
+                Object.defineProperty(prototype, memberName, {
+                    get() {
+                        // proxyComponent, get value
+                        return getValue(this, memberName);
+                    },
+                    set(newValue) {
+                        // proxyComponent, set value
+                        setValue(this, memberName, newValue);
+                    },
+                    configurable: true,
+                    enumerable: true,
+                });
+            }
+        });
+    }
+    return Cstr;
+};
+const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
+    // initializeComponent
+    if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
+        // Let the runtime know that the component has been initialized
+        hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
+        {
+            // lazy loaded components
+            // request the component's implementation to be
+            // wired up with the host element
+            Cstr = loadModule(cmpMeta);
+            if (Cstr.then) {
+                // Await creates a micro-task avoid if possible
+                const endLoad = uniqueTime();
+                Cstr = await Cstr;
+                endLoad();
+            }
+            if (!Cstr.isProxied) {
+                proxyComponent(Cstr, cmpMeta, 2 /* PROXY_FLAGS.proxyState */);
+                Cstr.isProxied = true;
+            }
+            const endNewInstance = createTime('createInstance', cmpMeta.$tagName$);
+            // ok, time to construct the instance
+            // but let's keep track of when we start and stop
+            // so that the getters/setters don't incorrectly step on data
+            {
+                hostRef.$flags$ |= 8 /* HOST_FLAGS.isConstructingInstance */;
+            }
+            // construct the lazy-loaded component implementation
+            // passing the hostRef is very important during
+            // construction in order to directly wire together the
+            // host element and the lazy-loaded instance
+            try {
+                new Cstr(hostRef);
+            }
+            catch (e) {
+                consoleError(e);
+            }
+            {
+                hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
+            }
+            endNewInstance();
+            fireConnectedCallback(hostRef.$lazyInstance$);
+        }
+        if (Cstr.style) {
+            // this component has styles but we haven't registered them yet
+            let style = Cstr.style;
+            const scopeId = getScopeId(cmpMeta);
+            if (!styles.has(scopeId)) {
+                const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
+                registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */));
+                endRegisterStyles();
+            }
+        }
+    }
+    // we've successfully created a lazy instance
+    const ancestorComponent = hostRef.$ancestorComponent$;
+    const schedule = () => scheduleUpdate(hostRef, true);
+    if (ancestorComponent && ancestorComponent['s-rc']) {
+        // this is the initial load and this component it has an ancestor component
+        // but the ancestor component has NOT fired its will update lifecycle yet
+        // so let's just cool our jets and wait for the ancestor to continue first
+        // this will get fired off when the ancestor component
+        // finally gets around to rendering its lazy self
+        // fire off the initial update
+        ancestorComponent['s-rc'].push(schedule);
+    }
+    else {
+        schedule();
+    }
+};
+const fireConnectedCallback = (instance) => {
+    {
+        safeCall(instance, 'connectedCallback');
+    }
+};
+const connectedCallback = (elm) => {
+    if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
+        const hostRef = getHostRef(elm);
+        const cmpMeta = hostRef.$cmpMeta$;
+        const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
+        if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
+            // first time this component has connected
+            hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
+            {
+                // find the first ancestor component (if there is one) and register
+                // this component as one of the actively loading child components for its ancestor
+                let ancestorComponent = elm;
+                while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
+                    // climb up the ancestors looking for the first
+                    // component that hasn't finished its lifecycle update yet
+                    if (ancestorComponent['s-p']) {
+                        // we found this components first ancestor component
+                        // keep a reference to this component's ancestor component
+                        attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
+                        break;
+                    }
+                }
+            }
+            // Lazy properties
+            // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
+            if (cmpMeta.$members$) {
+                Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
+                    if (memberFlags & 31 /* MEMBER_FLAGS.Prop */ && elm.hasOwnProperty(memberName)) {
+                        const value = elm[memberName];
+                        delete elm[memberName];
+                        elm[memberName] = value;
+                    }
+                });
+            }
+            {
+                initializeComponent(elm, hostRef, cmpMeta);
+            }
+        }
+        else {
+            // fire off connectedCallback() on component instance
+            fireConnectedCallback(hostRef.$lazyInstance$);
+        }
+        endConnected();
+    }
+};
+const disconnectedCallback = (elm) => {
+    if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
+        const hostRef = getHostRef(elm);
+        const instance = hostRef.$lazyInstance$ ;
+        {
+            safeCall(instance, 'disconnectedCallback');
+        }
+    }
+};
+const bootstrapLazy = (lazyBundles, options = {}) => {
+    var _a;
+    const endBootstrap = createTime();
+    const cmpTags = [];
+    const exclude = options.exclude || [];
+    const customElements = win.customElements;
+    const head = doc.head;
+    const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
+    const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
+    const deferredConnectedCallbacks = [];
+    let appLoadFallback;
+    let isBootstrapping = true;
+    Object.assign(plt, options);
+    plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
+    lazyBundles.map((lazyBundle) => {
+        lazyBundle[1].map((compactMeta) => {
+            const cmpMeta = {
+                $flags$: compactMeta[0],
+                $tagName$: compactMeta[1],
+                $members$: compactMeta[2],
+                $listeners$: compactMeta[3],
+            };
+            {
+                cmpMeta.$members$ = compactMeta[2];
+            }
+            const tagName = cmpMeta.$tagName$;
+            const HostElement = class extends HTMLElement {
+                // StencilLazyHost
+                constructor(self) {
+                    // @ts-ignore
+                    super(self);
+                    self = this;
+                    registerHost(self, cmpMeta);
+                }
+                connectedCallback() {
+                    if (appLoadFallback) {
+                        clearTimeout(appLoadFallback);
+                        appLoadFallback = null;
+                    }
+                    if (isBootstrapping) {
+                        // connectedCallback will be processed once all components have been registered
+                        deferredConnectedCallbacks.push(this);
+                    }
+                    else {
+                        plt.jmp(() => connectedCallback(this));
+                    }
+                }
+                disconnectedCallback() {
+                    plt.jmp(() => disconnectedCallback(this));
+                }
+                componentOnReady() {
+                    return getHostRef(this).$onReadyPromise$;
+                }
+            };
+            cmpMeta.$lazyBundleId$ = lazyBundle[0];
+            if (!exclude.includes(tagName) && !customElements.get(tagName)) {
+                cmpTags.push(tagName);
+                customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* PROXY_FLAGS.isElementConstructor */));
+            }
+        });
+    });
+    {
+        visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
+        visibilityStyle.setAttribute('data-styles', '');
+        // Apply CSP nonce to the style tag if it exists
+        const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+        if (nonce != null) {
+            visibilityStyle.setAttribute('nonce', nonce);
+        }
+        head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
+    }
+    // Process deferred connectedCallbacks now all components have been registered
+    isBootstrapping = false;
+    if (deferredConnectedCallbacks.length) {
+        deferredConnectedCallbacks.map((host) => host.connectedCallback());
+    }
+    else {
+        {
+            plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30)));
+        }
+    }
+    // Fallback appLoad event
+    endBootstrap();
+};
+/**
+ * Assigns the given value to the nonce property on the runtime platform object.
+ * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
+ * @param nonce The value to be assigned to the platform nonce property.
+ * @returns void
+ */
+const setNonce = (nonce) => (plt.$nonce$ = nonce);
+const hostRefs = /*@__PURE__*/ new WeakMap();
+const getHostRef = (ref) => hostRefs.get(ref);
+const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
+const registerHost = (elm, cmpMeta) => {
+    const hostRef = {
+        $flags$: 0,
+        $hostElement$: elm,
+        $cmpMeta$: cmpMeta,
+        $instanceValues$: new Map(),
+    };
+    {
+        hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
+        elm['s-p'] = [];
+        elm['s-rc'] = [];
+    }
+    return hostRefs.set(elm, hostRef);
+};
+const consoleError = (e, el) => (0, console.error)(e, el);
+const cmpModules = /*@__PURE__*/ new Map();
+const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
+    // loadModuleImport
+    const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
+    const bundleId = cmpMeta.$lazyBundleId$;
+    const module = cmpModules.get(bundleId) ;
+    if (module) {
+        return module[exportName];
+    }
+    /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+    return import(
+    /* @vite-ignore */
+    /* webpackInclude: /\.entry\.js$/ */
+    /* webpackExclude: /\.system\.entry\.js$/ */
+    /* webpackMode: "lazy" */
+    `./${bundleId}.entry.js${''}`).then((importedModule) => {
+        {
+            cmpModules.set(bundleId, importedModule);
+        }
+        return importedModule[exportName];
+    }, consoleError);
+};
+const styles = /*@__PURE__*/ new Map();
+const win = typeof window !== 'undefined' ? window : {};
+const doc = win.document || { head: {} };
+const plt = {
+    $flags$: 0,
+    $resourcesUrl$: '',
+    jmp: (h) => h(),
+    raf: (h) => requestAnimationFrame(h),
+    ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
+    rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
+    ce: (eventName, opts) => new CustomEvent(eventName, opts),
+};
+const promiseResolve = (v) => Promise.resolve(v);
+const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
+        try {
+            new CSSStyleSheet();
+            return typeof new CSSStyleSheet().replaceSync === 'function';
+        }
+        catch (e) { }
+        return false;
+    })()
+    ;
+const queueDomReads = [];
+const queueDomWrites = [];
+const queueTask = (queue, write) => (cb) => {
+    queue.push(cb);
+    if (!queuePending) {
+        queuePending = true;
+        if (write && plt.$flags$ & 4 /* PLATFORM_FLAGS.queueSync */) {
+            nextTick(flush);
+        }
+        else {
+            plt.raf(flush);
+        }
+    }
+};
+const consume = (queue) => {
+    for (let i = 0; i < queue.length; i++) {
+        try {
+            queue[i](performance.now());
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+    queue.length = 0;
+};
+const flush = () => {
+    // always force a bunch of medium callbacks to run, but still have
+    // a throttle on how many can run in a certain time
+    // DOM READS!!!
+    consume(queueDomReads);
+    // DOM WRITES!!!
+    {
+        consume(queueDomWrites);
+        if ((queuePending = queueDomReads.length > 0)) {
+            // still more to do yet, but we've run out of time
+            // let's let this thing cool off and try again in the next tick
+            plt.raf(flush);
+        }
+    }
+};
+const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
+const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
+
+export { Host as H, bootstrapLazy as b, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+
+//# sourceMappingURL=index-9f5c1c1c.js.map