@esri/calcite-components 1.0.0-beta.7 → 1.0.0-beta.70

package/dist/cjs/core-9cd06664.js

@@ -1,1962 +0,0 @@
-'use strict';
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) { return e; } else {
-    var n = {};
-    if (e) {
-      Object.keys(e).forEach(function (k) {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () {
-            return e[k];
-          }
-        });
-      });
-    }
-    n['default'] = e;
-    return n;
-  }
-}
-
-const BUILD = {"allRenderFn":true,"cmpDidLoad":true,"cmpDidUnload":true,"cmpDidUpdate":true,"cmpDidRender":true,"cmpWillLoad":true,"cmpWillUpdate":true,"cmpWillRender":true,"connectedCallback":true,"disconnectedCallback":true,"element":false,"event":true,"hasRenderFn":true,"lifecycle":true,"hostListener":true,"hostListenerTargetWindow":true,"hostListenerTargetDocument":false,"hostListenerTargetBody":true,"hostListenerTargetParent":true,"hostListenerTarget":true,"member":true,"method":true,"mode":false,"noVdomRender":false,"observeAttribute":true,"prop":true,"propBoolean":true,"propNumber":true,"propString":true,"propMutable":true,"reflect":true,"scoped":false,"shadowDom":true,"slot":true,"slotRelocation":true,"state":true,"style":true,"svg":true,"updatable":true,"vdomAttribute":true,"vdomClass":true,"vdomFunctional":true,"vdomKey":true,"vdomListener":true,"vdomRef":true,"vdomRender":true,"vdomStyle":true,"vdomText":true,"watchCallback":true,"taskQueue":true,"lazyLoad":true,"hydrateServerSide":false,"cssVarShim":true,"hydrateClientSide":true,"isDebug":false,"isDev":false,"lifecycleDOMEvents":false,"profile":false,"hotModuleReplacement":false,"constructableCSS":true,"initializeNextTick":true,"cssAnnotations":true};
-const NAMESPACE = 'calcite';
-
-let queueCongestion = 0;
-let queuePending = false;
-let scopeId;
-let contentRef;
-let hostTagName;
-let useNativeShadowDom = false;
-let checkSlotFallbackVisibility = false;
-let checkSlotRelocate = false;
-let isSvgMode = false;
-const win = window;
-const doc = document;
-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),
-};
-const supportsShadowDom =  !!doc.documentElement.attachShadow ;
-const supportsListenerOptions = /*@__PURE__*/ (() => {
-    let supportsListenerOptions = false;
-    try {
-        doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
-            get() { supportsListenerOptions = true; }
-        }));
-    }
-    catch (e) { }
-    return supportsListenerOptions;
-})();
-const supportsConstructibleStylesheets =  /*@__PURE__*/ (() => {
-    try {
-        new CSSStyleSheet();
-        return true;
-    }
-    catch (e) { }
-    return false;
-})() ;
-const hostRefs = new WeakMap();
-const getHostRef = (ref) => hostRefs.get(ref);
-const registerInstance = (lazyInstance, hostRef) => hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
-const registerHost = (elm) => {
-    {
-        const hostRef = {
-            $flags$: 0,
-            $hostElement$: elm,
-            $instanceValues$: new Map()
-        };
-        hostRef.$onReadyPromise$ = new Promise(r => hostRef.$onReadyResolve$ = r);
-        return hostRefs.set(elm, hostRef);
-    }
-};
-const isMemberInElement = (elm, memberName) => memberName in elm;
-const consoleError = (e) => console.error(e);
-const moduleCache = /*@__PURE__*/ new Map();
-const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
-    // loadModuleImport
-    const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
-    const bundleId = ( cmpMeta.$lazyBundleIds$);
-    const module =  moduleCache.get(bundleId) ;
-    if (module) {
-        return module[exportName];
-    }
-    return new Promise(function (resolve) { resolve(_interopNamespace(require(
-    /* webpackInclude: /\.entry\.js$/ */
-    /* webpackExclude: /\.system\.entry\.js$/ */
-    /* webpackMode: "lazy" */
-    `./${bundleId}.entry.js${ ''}`))); }).then(importedModule => {
-        {
-            moduleCache.set(bundleId, importedModule);
-        }
-        return importedModule[exportName];
-    }, consoleError);
-};
-const styles = new Map();
-const cssVarShim =  /*@__PURE__*/ win.__stencil_cssshim ;
-const queueDomReads = [];
-const queueDomWrites = [];
-const queueDomWritesLow = [];
-const queueTask = (queue, write) => (cb) => {
-    queue.push(cb);
-    if (!queuePending) {
-        queuePending = true;
-        if (write && plt.$flags$ & 4 /* 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 consumeTimeout = (queue, timeout) => {
-    let i = 0;
-    let ts = 0;
-    while (i < queue.length && (ts = performance.now()) < timeout) {
-        try {
-            queue[i++](ts);
-        }
-        catch (e) {
-            consoleError(e);
-        }
-    }
-    if (i === queue.length) {
-        queue.length = 0;
-    }
-    else if (i !== 0) {
-        queue.splice(0, i);
-    }
-};
-const flush = () => {
-    queueCongestion++;
-    // 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);
-    const timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* appLoaded */
-        ? performance.now() + (10 * Math.ceil(queueCongestion * (1.0 / 22.0)))
-        : Infinity;
-    // DOM WRITES!!!
-    consumeTimeout(queueDomWrites, timeout);
-    consumeTimeout(queueDomWritesLow, timeout);
-    if (queueDomWrites.length > 0) {
-        queueDomWritesLow.push(...queueDomWrites);
-        queueDomWrites.length = 0;
-    }
-    if (queuePending = ((queueDomReads.length + queueDomWrites.length + queueDomWritesLow.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);
-    }
-    else {
-        queueCongestion = 0;
-    }
-};
-const nextTick = /*@__PURE__*/ (cb) => Promise.resolve().then(cb);
-const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
-/**
- * Default style mode id
- */
-/**
- * Reusable empty obj/array
- * Don't add values to these!!
- */
-const EMPTY_OBJ = {};
-/**
- * Namespaces
- */
-const SVG_NS = 'http://www.w3.org/2000/svg';
-const isDef = (v) => v != null;
-const toLowerCase = (str) => str.toLowerCase();
-const isComplexType = (o) => {
-    o = (typeof o)[0];
-    return o === 'o' || o === 'f';
-};
-const getDynamicImportFunction = (namespace) => {
-    return `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
-};
-const patchEsm = () => {
-    // @ts-ignore
-    if (!(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) {
-        // @ts-ignore
-        return new Promise(function (resolve) { resolve(require('./css-shim-3ea8955c-8b902b6b.js')); });
-    }
-    return Promise.resolve();
-};
-const patchBrowser = async () => {
-    // @ts-ignore
-    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('core-9cd06664.js', document.baseURI).href));
-    const regex = new RegExp(`\/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`);
-    const scriptElm = Array.from(doc.querySelectorAll('script')).find(s => (regex.test(s.src) ||
-        s.getAttribute('data-namespace') === NAMESPACE));
-    const opts = scriptElm['data-opts'];
-    if (importMeta !== '') {
-        return Object.assign({}, opts, { resourcesUrl: new URL('.', importMeta).href });
-    }
-    else {
-        const resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href));
-        patchDynamicImport(resourcesUrl.href);
-        if (!window.customElements) {
-            // @ts-ignore
-            await new Promise(function (resolve) { resolve(require('./dom-860d8016-0ebf8707.js')); });
-        }
-        return Object.assign({}, opts, { resourcesUrl: resourcesUrl.href });
-    }
-};
-const patchDynamicImport = (base) => {
-    const importFunctionName = getDynamicImportFunction(NAMESPACE);
-    try {
-        // There is a caching issue in V8, that breaks using import() in Function
-        // By generating a random string, we can workaround it
-        // Check https://bugs.chromium.org/p/v8/issues/detail?id=9558 for more info
-        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
-    }
-    catch (e) {
-        const moduleMap = new Map();
-        win[importFunctionName] = (src) => {
-            const url = new URL(src, base).href;
-            let mod = moduleMap.get(url);
-            if (!mod) {
-                const script = doc.createElement('script');
-                script.type = 'module';
-                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], { type: 'application/javascript' }));
-                mod = new Promise(resolve => {
-                    script.onload = () => {
-                        resolve(win[importFunctionName].m);
-                        script.remove();
-                    };
-                });
-                moduleMap.set(url, mod);
-                doc.head.appendChild(script);
-            }
-            return mod;
-        };
-    }
-};
-const parsePropertyValue = (propValue, propType) => {
-    // ensure this value is of the correct prop type
-    if (propValue != null && !isComplexType(propValue)) {
-        if ( propType & 4 /* Boolean */) {
-            // per the HTML spec, any string value means it is a boolean true value
-            // but we'll cheat here and say that the string "false" is the boolean false
-            return (propValue === 'false' ? false : propValue === '' || !!propValue);
-        }
-        if ( propType & 2 /* Number */) {
-            // force it to be a number
-            return parseFloat(propValue);
-        }
-        if ( propType & 1 /* String */) {
-            // could have been passed as a number or boolean
-            // but we still want it as a string
-            return String(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 CONTENT_REF_ID = 'r';
-const ORG_LOCATION_ID = 'o';
-const SLOT_NODE_ID = 's';
-const TEXT_NODE_ID = 't';
-const HYDRATED_CLASS = 'hydrated';
-const HYDRATE_ID = 's-id';
-const HYDRATE_CHILD_ID = 'c-id';
-const XLINK_NS = 'http://www.w3.org/1999/xlink';
-const rootAppliedStyles = new WeakMap();
-const registerStyle = (scopeId, cssText, allowCS) => {
-    let style = styles.get(scopeId);
-    if (supportsConstructibleStylesheets && allowCS) {
-        style = (style || new CSSStyleSheet());
-        style.replace(cssText);
-    }
-    else {
-        style = cssText;
-    }
-    styles.set(scopeId, style);
-};
-const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
-    let scopeId = getScopeId(cmpMeta.$tagName$);
-    let 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 /* 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)) {
-                if ( styleContainerNode.host && (styleElm = styleContainerNode.firstElementChild) && styleElm.tagName === 'STYLE') {
-                    // This is only happening on native shadow-dom, do not needs CSS var shim
-                    styleElm.innerHTML = style;
-                }
-                else {
-                    if (cssVarShim) {
-                        styleElm = cssVarShim.createHostStyle(hostElm, scopeId, style, !!(cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */));
-                        const newScopeId = styleElm['s-sc'];
-                        if (newScopeId) {
-                            scopeId = newScopeId;
-                            // we don't want to add this styleID to the appliedStyles Set
-                            // since the cssVarShim might need to apply several different
-                            // stylesheets for the same component
-                            appliedStyles = null;
-                        }
-                    }
-                    else {
-                        styleElm = doc.createElement('style');
-                        styleElm.innerHTML = style;
-                    }
-                    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 = (elm, cmpMeta, mode) => {
-    const styleId = addStyle(( supportsShadowDom && elm.shadowRoot)
-        ? elm.shadowRoot
-        : elm.getRootNode(), cmpMeta, mode, elm);
-    if ( cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */) {
-        // only required when we're NOT using native shadow dom (slot)
-        // or this browser doesn't support native shadow dom
-        // and this host element was NOT created with SSR
-        // let's pick out the inner content for slot projection
-        // create a node to represent where the original
-        // content was first placed, which is useful later on
-        // DOM WRITE!!
-        elm['s-sc'] = styleId;
-        elm.classList.add(styleId + '-h');
-    }
-};
-const getScopeId = (tagName, mode) => 'sc-' + ( tagName);
-const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{');
-/**
- * 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
- */
-// const stack: any[] = [];
-// 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;
-    let key;
-    let slotName;
-    let 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 ? { $flags$: 0, $text$: child } : child);
-                }
-                lastSimple = simple;
-            }
-        }
-    };
-    walk(children);
-    if ( vnodeData) {
-        // normalize class / classname attributes
-        {
-            key = vnodeData.key || undefined;
-        }
-        {
-            slotName = vnodeData.name;
-        }
-        {
-            const classData = vnodeData.className || vnodeData.class;
-            if (classData) {
-                vnodeData.class = typeof classData !== 'object'
-                    ? classData
-                    : Object.keys(classData)
-                        .filter(k => classData[k])
-                        .join(' ');
-            }
-        }
-    }
-    if ( typeof nodeName === 'function') {
-        // nodeName is a functional component
-        return nodeName(vnodeData, vNodeChildren, vdomFnUtils);
-    }
-    const vnode = {
-        $flags$: 0,
-        $tag$: nodeName,
-        $children$: vNodeChildren.length > 0 ? vNodeChildren : null,
-        $elm$: undefined,
-        $attrs$: vnodeData,
-    };
-    {
-        vnode.$key$ = key;
-    }
-    {
-        vnode.$name$ = slotName;
-    }
-    return vnode;
-};
-const Host = {};
-const isHost = (node) => {
-    return node && node.$tag$ === Host;
-};
-const vdomFnUtils = {
-    'forEach': (children, cb) => children.map(convertToPublic).forEach(cb),
-    'map': (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
-};
-const convertToPublic = (node) => {
-    return {
-        vattrs: node.$attrs$,
-        vchildren: node.$children$,
-        vkey: node.$key$,
-        vname: node.$name$,
-        vtag: node.$tag$,
-        vtext: node.$text$
-    };
-};
-const convertToPrivate = (node) => {
-    return {
-        $flags$: 0,
-        $attrs$: node.vattrs,
-        $children$: node.vchildren,
-        $key$: node.vkey,
-        $name$: node.vname,
-        $tag$: node.vtag,
-        $text$: node.vtext
-    };
-};
-/**
- * Production setAccessor() 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
- */
-const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
-    if (oldValue === newValue) {
-        return;
-    }
-    if ( memberName === 'class') {
-        const classList = elm.classList;
-        parseClassList(oldValue).forEach(cls => classList.remove(cls));
-        parseClassList(newValue).forEach(cls => classList.add(cls));
-    }
-    else if ( memberName === 'style') {
-        // update style attribute, css properties and values
-        {
-            for (const prop in oldValue) {
-                if (!newValue || newValue[prop] == null) {
-                    if ( prop.includes('-')) {
-                        elm.style.removeProperty(prop);
-                    }
-                    else {
-                        elm.style[prop] = '';
-                    }
-                }
-            }
-        }
-        for (const prop in newValue) {
-            if (!oldValue || newValue[prop] !== oldValue[prop]) {
-                if ( prop.includes('-')) {
-                    elm.style.setProperty(prop, newValue[prop]);
-                }
-                else {
-                    elm.style[prop] = newValue[prop];
-                }
-            }
-        }
-    }
-    else if ( memberName === 'key')
-        ;
-    else if ( memberName === 'ref') {
-        // minifier will clean this up
-        if (newValue) {
-            newValue(elm);
-        }
-    }
-    else if ( memberName.startsWith('on') && !isMemberInElement(elm, memberName)) {
-        // Event Handlers
-        // so if the member name starts with "on" and the 3rd characters is
-        // a capital letter, and it's not already a member on the element,
-        // then we're assuming it's an event listener
-        if (isMemberInElement(elm, toLowerCase(memberName))) {
-            // standard event
-            // the JSX attribute could have been "onMouseOver" and the
-            // member name "onmouseover" is on the element's prototype
-            // so let's add the listener "mouseover", which is all lowercased
-            memberName = toLowerCase(memberName.substring(2));
-        }
-        else {
-            // custom event
-            // the JSX attribute could have been "onMyCustomEvent"
-            // so let's trim off the "on" prefix and lowercase the first character
-            // and add the listener "myCustomEvent"
-            // except for the first character, we keep the event name case
-            memberName = toLowerCase(memberName[2]) + memberName.substring(3);
-        }
-        if (oldValue) {
-            plt.rel(elm, memberName, oldValue, false);
-        }
-        if (newValue) {
-            plt.ael(elm, memberName, newValue, false);
-        }
-    }
-    else {
-        // Set property if it exists and it's not a SVG
-        const isProp = isMemberInElement(elm, memberName);
-        const isComplex = isComplexType(newValue);
-        if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
-            try {
-                if (!elm.tagName.includes('-')) {
-                    const n = newValue == null ? '' : newValue;
-                    // Workaround for Safari, moving the <input> caret when re-assigning the same valued
-                    if (elm[memberName] !== n) {
-                        elm[memberName] = n;
-                    }
-                }
-                else {
-                    elm[memberName] = newValue;
-                }
-            }
-            catch (e) { }
-        }
-        /**
-         * Need to manually update attribute if:
-         * - memberName is not an attribute
-         * - if we are rendering the host element in order to reflect attribute
-         * - if it's a SVG, since properties might not work in <svg>
-         * - if the newValue is null/undefined or 'false'.
-         */
-        const isXlinkNs =  isSvg && (memberName !== (memberName = memberName.replace(/^xlink\:?/, ''))) ? true : false;
-        if (newValue == null || newValue === false) {
-            if (isXlinkNs) {
-                elm.removeAttributeNS(XLINK_NS, toLowerCase(memberName));
-            }
-            else {
-                elm.removeAttribute(memberName);
-            }
-        }
-        else if ((!isProp || (flags & 4 /* isHost */) || isSvg) && !isComplex) {
-            newValue = newValue === true ? '' : newValue.toString();
-            if (isXlinkNs) {
-                elm.setAttributeNS(XLINK_NS, toLowerCase(memberName), newValue);
-            }
-            else {
-                elm.setAttribute(memberName, newValue);
-            }
-        }
-    }
-};
-const parseClassList = (value) => (!value) ? [] : value.split(/\s+/).filter(c => c);
-const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
-    // if the element passed in is a shadow root, which is a document fragment
-    // then we want to be adding attrs/props to the shadow root's "host" element
-    // if it's not a shadow root, then we add attrs/props to the same element
-    const elm = (newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host) ? newVnode.$elm$.host : newVnode.$elm$;
-    const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
-    const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
-    {
-        // remove attributes no longer present on the vnode by setting them to undefined
-        for (memberName in oldVnodeAttrs) {
-            if (!(memberName in newVnodeAttrs)) {
-                setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
-            }
-        }
-    }
-    // add new & update changed attributes
-    for (memberName in newVnodeAttrs) {
-        setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
-    }
-};
-const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
-    // tslint:disable-next-line: prefer-const
-    let newVNode = newParentVNode.$children$[childIndex];
-    let i = 0;
-    let elm;
-    let childNode;
-    let oldVNode;
-    if ( !useNativeShadowDom) {
-        // remember for later we need to check to relocate nodes
-        checkSlotRelocate = true;
-        if (newVNode.$tag$ === 'slot') {
-            if (scopeId) {
-                // scoped css needs to add its scoped id to the parent element
-                parentElm.classList.add(scopeId + '-s');
-            }
-            if (!newVNode.$children$) {
-                // slot element does not have fallback content
-                // create an html comment we'll use to always reference
-                // where actual slot content should sit next to
-                newVNode.$flags$ |= 1 /* isSlotReference */;
-            }
-            else {
-                // slot element has fallback content
-                // still create an element that "mocks" the slot element
-                newVNode.$flags$ |= 2 /* isSlotFallback */;
-            }
-        }
-    }
-    if (isDef(newVNode.$text$)) {
-        // create text node
-        newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
-    }
-    else if ( newVNode.$flags$ & 1 /* isSlotReference */) {
-        // create a slot reference node
-        newVNode.$elm$ =  doc.createTextNode('');
-    }
-    else {
-        // create element
-        elm = newVNode.$elm$ = (( (isSvgMode || newVNode.$tag$ === 'svg'))
-            ? doc.createElementNS(SVG_NS, newVNode.$tag$)
-            : doc.createElement(( newVNode.$flags$ & 2 /* isSlotFallback */) ? 'slot-fb' : newVNode.$tag$));
-        {
-            isSvgMode = newVNode.$tag$ === 'svg' ? true : (newVNode.$tag$ === 'foreignObject' ? false : isSvgMode);
-        }
-        // add css classes, attrs, props, listeners, etc.
-        {
-            updateElement(null, newVNode, isSvgMode);
-        }
-        if ( isDef(scopeId) && elm['s-si'] !== scopeId) {
-            // if there is a scopeId and this is the initial render
-            // then let's add the scopeId as a css class
-            elm.classList.add((elm['s-si'] = scopeId));
-        }
-        if (newVNode.$children$) {
-            for (i = 0; i < newVNode.$children$.length; ++i) {
-                // create the node
-                childNode = createElm(oldParentVNode, newVNode, i, elm);
-                // return node could have been null
-                if (childNode) {
-                    // append our new node
-                    elm.appendChild(childNode);
-                }
-            }
-        }
-        {
-            if (newVNode.$tag$ === 'svg') {
-                // Only reset the SVG context when we're exiting <svg> element
-                isSvgMode = false;
-            }
-            else if (newVNode.$elm$.tagName === 'foreignObject') {
-                // Reenter SVG context when we're exiting <foreignObject> element
-                isSvgMode = true;
-            }
-        }
-    }
-    {
-        newVNode.$elm$['s-hn'] = hostTagName;
-        if (newVNode.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
-            // remember the content reference comment
-            newVNode.$elm$['s-sr'] = true;
-            // remember the content reference comment
-            newVNode.$elm$['s-cr'] = contentRef;
-            // remember the slot name, or empty string for default slot
-            newVNode.$elm$['s-sn'] = newVNode.$name$ || '';
-            // check if we've got an old vnode for this slot
-            oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
-            if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
-                // we've got an old slot vnode and the wrapper is being replaced
-                // so let's move the old slot content back to it's original location
-                putBackInOriginalLocation(oldParentVNode.$elm$, false);
-            }
-        }
-    }
-    return newVNode.$elm$;
-};
-const putBackInOriginalLocation = (parentElm, recursive) => {
-    plt.$flags$ |= 1 /* isTmpDisconnected */;
-    const oldSlotChildNodes = parentElm.childNodes;
-    for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
-        const childNode = oldSlotChildNodes[i];
-        if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
-            // // this child node in the old element is from another component
-            // // remove this node from the old slot's parent
-            // childNode.remove();
-            // and relocate it back to it's original location
-            parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
-            // remove the old original location comment entirely
-            // later on the patch function will know what to do
-            // and move this to the correct spot in need be
-            childNode['s-ol'].remove();
-            childNode['s-ol'] = undefined;
-            checkSlotRelocate = true;
-        }
-        if (recursive) {
-            putBackInOriginalLocation(childNode, recursive);
-        }
-    }
-    plt.$flags$ &= ~1 /* isTmpDisconnected */;
-};
-const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
-    let containerElm = (( parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
-    let childNode;
-    if ( containerElm.shadowRoot && toLowerCase(containerElm.tagName) === hostTagName) {
-        containerElm = containerElm.shadowRoot;
-    }
-    for (; startIdx <= endIdx; ++startIdx) {
-        if (vnodes[startIdx]) {
-            childNode = createElm(null, parentVNode, startIdx, parentElm);
-            if (childNode) {
-                vnodes[startIdx].$elm$ = childNode;
-                containerElm.insertBefore(childNode,  referenceNode(before) );
-            }
-        }
-    }
-};
-const removeVnodes = (vnodes, startIdx, endIdx, elm) => {
-    for (; startIdx <= endIdx; ++startIdx) {
-        if (isDef(vnodes[startIdx])) {
-            elm = vnodes[startIdx].$elm$;
-            callNodeRefs(vnodes[startIdx], true);
-            {
-                // we're removing this element
-                // so it's possible we need to show slot fallback content now
-                checkSlotFallbackVisibility = true;
-                if (elm['s-ol']) {
-                    // remove the original location comment
-                    elm['s-ol'].remove();
-                }
-                else {
-                    // it's possible that child nodes of the node
-                    // that's being removed are slot nodes
-                    putBackInOriginalLocation(elm, true);
-                }
-            }
-            // remove the vnode's element from the dom
-            elm.remove();
-        }
-    }
-};
-const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
-    let oldStartIdx = 0;
-    let newStartIdx = 0;
-    let idxInOld = 0;
-    let i = 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;
-    let elmToMove;
-    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)) {
-            patch(oldStartVnode, newStartVnode);
-            oldStartVnode = oldCh[++oldStartIdx];
-            newStartVnode = newCh[++newStartIdx];
-        }
-        else if (isSameVnode(oldEndVnode, newEndVnode)) {
-            patch(oldEndVnode, newEndVnode);
-            oldEndVnode = oldCh[--oldEndIdx];
-            newEndVnode = newCh[--newEndIdx];
-        }
-        else if (isSameVnode(oldStartVnode, newEndVnode)) {
-            // Vnode moved right
-            if ( (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
-                putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
-            }
-            patch(oldStartVnode, newEndVnode);
-            parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
-            oldStartVnode = oldCh[++oldStartIdx];
-            newEndVnode = newCh[--newEndIdx];
-        }
-        else if (isSameVnode(oldEndVnode, newStartVnode)) {
-            // Vnode moved left
-            if ( (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
-                putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
-            }
-            patch(oldEndVnode, newStartVnode);
-            parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
-            oldEndVnode = oldCh[--oldEndIdx];
-            newStartVnode = newCh[++newStartIdx];
-        }
-        else {
-            // createKeyToOldIdx
-            idxInOld = -1;
-            {
-                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
-                    if (oldCh[i] && isDef(oldCh[i].$key$) && oldCh[i].$key$ === newStartVnode.$key$) {
-                        idxInOld = i;
-                        break;
-                    }
-                }
-            }
-            if ( idxInOld >= 0) {
-                elmToMove = oldCh[idxInOld];
-                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
-                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
-                }
-                else {
-                    patch(elmToMove, newStartVnode);
-                    oldCh[idxInOld] = undefined;
-                    node = elmToMove.$elm$;
-                }
-                newStartVnode = newCh[++newStartIdx];
-            }
-            else {
-                // new element
-                node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
-                newStartVnode = newCh[++newStartIdx];
-            }
-            if (node) {
-                {
-                    parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
-                }
-            }
-        }
-    }
-    if (oldStartIdx > oldEndIdx) {
-        addVnodes(parentElm, (newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$), newVNode, newCh, newStartIdx, newEndIdx);
-    }
-    else if ( newStartIdx > newEndIdx) {
-        removeVnodes(oldCh, oldStartIdx, oldEndIdx);
-    }
-};
-const isSameVnode = (vnode1, vnode2) => {
-    // 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 (vnode1.$tag$ === vnode2.$tag$) {
-        if ( vnode1.$tag$ === 'slot') {
-            return vnode1.$name$ === vnode2.$name$;
-        }
-        {
-            return vnode1.$key$ === vnode2.$key$;
-        }
-        return true;
-    }
-    return false;
-};
-const referenceNode = (node) => {
-    // this node was relocated to a new location in the dom
-    // because of some other component's slot
-    // but we still have an html comment in place of where
-    // it's original location was according to it's original vdom
-    return (node && node['s-ol']) || node;
-};
-const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
-const patch = (oldVNode, newVNode) => {
-    const elm = newVNode.$elm$ = oldVNode.$elm$;
-    const oldChildren = oldVNode.$children$;
-    const newChildren = newVNode.$children$;
-    let defaultHolder;
-    {
-        // test if we're rendering an svg element, or still rendering nodes inside of one
-        // only add this to the when the compiler sees we're using an svg somewhere
-        isSvgMode = elm &&
-            isDef(elm.parentNode) &&
-            elm.ownerSVGElement !== undefined;
-        isSvgMode = newVNode.$tag$ === 'svg' ? true : (newVNode.$tag$ === 'foreignObject' ? false : isSvgMode);
-    }
-    if (!isDef(newVNode.$text$)) {
-        // element node
-        {
-            if ( newVNode.$tag$ === 'slot')
-                ;
-            else {
-                // either this is the first render of an element OR it's an update
-                // AND we already know it's possible it could have changed
-                // this updates the element's css classes, attrs, props, listeners, etc.
-                updateElement(oldVNode, newVNode, isSvgMode);
-            }
-        }
-        if ( isDef(oldChildren) && isDef(newChildren)) {
-            // looks like there's child vnodes for both the old and new vnodes
-            updateChildren(elm, oldChildren, newVNode, newChildren);
-        }
-        else if (isDef(newChildren)) {
-            // no old child vnodes, but there are new child vnodes to add
-            if ( isDef(oldVNode.$text$)) {
-                // 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 ( isDef(oldChildren)) {
-            // no new child vnodes, but there are old child vnodes to remove
-            removeVnodes(oldChildren, 0, oldChildren.length - 1);
-        }
-    }
-    else if ( (defaultHolder = elm['s-cr'])) {
-        // this element has slotted content
-        defaultHolder.parentNode.textContent = newVNode.$text$;
-    }
-    else if ( oldVNode.$text$ !== newVNode.$text$) {
-        // update the text content for the text only vnode
-        // and also only if the text is different than before
-        elm.textContent = newVNode.$text$;
-    }
-    if ( isSvgMode && newVNode.$tag$ === 'svg') {
-        isSvgMode = false;
-    }
-};
-const updateFallbackSlotVisibility = (elm, childNode, childNodes, i, ilen, j, slotNameAttr, nodeType) => {
-    childNodes = elm.childNodes;
-    for (i = 0, ilen = childNodes.length; i < ilen; i++) {
-        childNode = childNodes[i];
-        if (childNode.nodeType === 1 /* ElementNode */) {
-            if (childNode['s-sr']) {
-                // this is a slot fallback node
-                // get the slot name for this slot reference node
-                slotNameAttr = childNode['s-sn'];
-                // by default always show a fallback slot node
-                // then hide it if there are other slots in the light dom
-                childNode.hidden = false;
-                for (j = 0; j < ilen; j++) {
-                    if (childNodes[j]['s-hn'] !== childNode['s-hn']) {
-                        // this sibling node is from a different component
-                        nodeType = childNodes[j].nodeType;
-                        if (slotNameAttr !== '') {
-                            // this is a named fallback slot node
-                            if (nodeType === 1 /* ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
-                                childNode.hidden = true;
-                                break;
-                            }
-                        }
-                        else {
-                            // this is a default fallback slot node
-                            // any element or text node (with content)
-                            // should hide the default fallback slot node
-                            if (nodeType === 1 /* ElementNode */ || (nodeType === 3 /* TextNode */ && childNodes[j].textContent.trim() !== '')) {
-                                childNode.hidden = true;
-                                break;
-                            }
-                        }
-                    }
-                }
-            }
-            // keep drilling down
-            updateFallbackSlotVisibility(childNode);
-        }
-    }
-};
-const relocateNodes = [];
-const relocateSlotContent = (elm) => {
-    // tslint:disable-next-line: prefer-const
-    let childNodes = elm.childNodes;
-    let ilen = childNodes.length;
-    let i = 0;
-    let j = 0;
-    let nodeType = 0;
-    let childNode;
-    let node;
-    let hostContentNodes;
-    let slotNameAttr;
-    for (ilen = childNodes.length; i < ilen; i++) {
-        childNode = childNodes[i];
-        if (childNode['s-sr'] && (node = childNode['s-cr'])) {
-            // first got the content reference comment node
-            // then we got it's parent, which is where all the host content is in now
-            hostContentNodes = node.parentNode.childNodes;
-            slotNameAttr = childNode['s-sn'];
-            for (j = hostContentNodes.length - 1; j >= 0; j--) {
-                node = hostContentNodes[j];
-                if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
-                    // let's do some relocating to its new home
-                    // but never relocate a content reference node
-                    // that is suppose to always represent the original content location
-                    nodeType = node.nodeType;
-                    if (((nodeType === 3 /* TextNode */ || nodeType === 8 /* CommentNode */) && slotNameAttr === '') ||
-                        (nodeType === 1 /* ElementNode */ && node.getAttribute('slot') === null && slotNameAttr === '') ||
-                        (nodeType === 1 /* ElementNode */ && node.getAttribute('slot') === slotNameAttr)) {
-                        // it's possible we've already decided to relocate this node
-                        if (!relocateNodes.some(r => r.$nodeToRelocate$ === node)) {
-                            // made some changes to slots
-                            // let's make sure we also double check
-                            // fallbacks are correctly hidden or shown
-                            checkSlotFallbackVisibility = true;
-                            node['s-sn'] = slotNameAttr;
-                            // add to our list of nodes to relocate
-                            relocateNodes.push({
-                                $slotRefNode$: childNode,
-                                $nodeToRelocate$: node
-                            });
-                        }
-                    }
-                }
-            }
-        }
-        if (childNode.nodeType === 1 /* ElementNode */) {
-            relocateSlotContent(childNode);
-        }
-    }
-};
-const callNodeRefs = (vNode, isDestroy) => {
-    if ( vNode) {
-        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(isDestroy ? null : vNode.$elm$);
-        vNode.$children$ && vNode.$children$.forEach(vChild => {
-            callNodeRefs(vChild, isDestroy);
-        });
-    }
-};
-const renderVdom = (hostElm, hostRef, cmpMeta, renderFnResults) => {
-    hostTagName = toLowerCase(hostElm.tagName);
-    const oldVNode = hostRef.$vnode$ || { $flags$: 0 };
-    const rootVnode = isHost(renderFnResults)
-        ? renderFnResults
-        : h(null, null, renderFnResults);
-    if ( cmpMeta.$attrsToReflect$) {
-        rootVnode.$attrs$ = rootVnode.$attrs$ || {};
-        cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]);
-    }
-    rootVnode.$tag$ = null;
-    rootVnode.$flags$ |= 4 /* isHost */;
-    hostRef.$vnode$ = rootVnode;
-    rootVnode.$elm$ = oldVNode.$elm$ = ( hostElm.shadowRoot || hostElm );
-    {
-        scopeId = hostElm['s-sc'];
-    }
-    {
-        contentRef = hostElm['s-cr'];
-        useNativeShadowDom = supportsShadowDom && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
-        // always reset
-        checkSlotRelocate = checkSlotFallbackVisibility = false;
-    }
-    // synchronous patch
-    patch(oldVNode, rootVnode);
-    {
-        if (checkSlotRelocate) {
-            relocateSlotContent(rootVnode.$elm$);
-            for (let i = 0; i < relocateNodes.length; i++) {
-                const relocateNode = relocateNodes[i];
-                if (!relocateNode.$nodeToRelocate$['s-ol']) {
-                    // add a reference node marking this node's original location
-                    // keep a reference to this node for later lookups
-                    const orgLocationNode =  doc.createTextNode('');
-                    orgLocationNode['s-nr'] = relocateNode.$nodeToRelocate$;
-                    relocateNode.$nodeToRelocate$.parentNode.insertBefore((relocateNode.$nodeToRelocate$['s-ol'] = orgLocationNode), relocateNode.$nodeToRelocate$);
-                }
-            }
-            // while we're moving nodes around existing nodes, temporarily disable
-            // the disconnectCallback from working
-            plt.$flags$ |= 1 /* isTmpDisconnected */;
-            for (let i = 0; i < relocateNodes.length; i++) {
-                const relocateNode = relocateNodes[i];
-                // by default we're just going to insert it directly
-                // after the slot reference node
-                const parentNodeRef = relocateNode.$slotRefNode$.parentNode;
-                let insertBeforeNode = relocateNode.$slotRefNode$.nextSibling;
-                let orgLocationNode = relocateNode.$nodeToRelocate$['s-ol'];
-                while (orgLocationNode = orgLocationNode.previousSibling) {
-                    let refNode = orgLocationNode['s-nr'];
-                    if (refNode &&
-                        refNode['s-sn'] === relocateNode.$nodeToRelocate$['s-sn'] &&
-                        parentNodeRef === refNode.parentNode) {
-                        refNode = refNode.nextSibling;
-                        if (!refNode || !refNode['s-nr']) {
-                            insertBeforeNode = refNode;
-                            break;
-                        }
-                    }
-                }
-                if ((!insertBeforeNode && parentNodeRef !== relocateNode.$nodeToRelocate$.parentNode) ||
-                    (relocateNode.$nodeToRelocate$.nextSibling !== insertBeforeNode)) {
-                    // we've checked that it's worth while to relocate
-                    // since that the node to relocate
-                    // has a different next sibling or parent relocated
-                    if (relocateNode.$nodeToRelocate$ !== insertBeforeNode) {
-                        // add it back to the dom but in its new home
-                        parentNodeRef.insertBefore(relocateNode.$nodeToRelocate$, insertBeforeNode);
-                    }
-                }
-            }
-            // done moving nodes around
-            // allow the disconnect callback to work again
-            plt.$flags$ &= ~1 /* isTmpDisconnected */;
-        }
-        if (checkSlotFallbackVisibility) {
-            updateFallbackSlotVisibility(rootVnode.$elm$);
-        }
-        // always reset
-        relocateNodes.length = 0;
-    }
-};
-const scheduleUpdate = (elm, hostRef, cmpMeta, isInitialLoad) => {
-    {
-        hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
-    }
-    const instance =  hostRef.$lazyInstance$ ;
-    let promise;
-    if (isInitialLoad) {
-        {
-            hostRef.$flags$ |= 256 /* isListenReady */;
-        }
-        if ( hostRef.$queuedListeners$) {
-            hostRef.$queuedListeners$.forEach(([methodName, event]) => safeCall(instance, methodName, event));
-            hostRef.$queuedListeners$ = null;
-        }
-        {
-            promise = safeCall(instance, 'componentWillLoad');
-        }
-    }
-    else {
-        {
-            promise = safeCall(instance, 'componentWillUpdate');
-        }
-    }
-    {
-        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
-    }
-    // there is no ancestorc omponent or the ancestor component
-    // has already fired off its lifecycle update then
-    // fire off the initial update
-    const update = () => updateComponent(elm, hostRef, cmpMeta, instance, isInitialLoad);
-    return then(promise,  () => writeTask(update)
-        );
-};
-const updateComponent = (elm, hostRef, cmpMeta, instance, isInitialLoad) => {
-    // updateComponent
-    {
-        hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
-    }
-    {
-        elm['s-lr'] = false;
-    }
-    if ( isInitialLoad) {
-        // DOM WRITE!
-        attachStyles(elm, cmpMeta, hostRef.$modeName$);
-    }
-    {
-        {
-            // tell the platform we're actively rendering
-            // if a value is changed within a render() then
-            // this tells the platform not to queue the change
-            hostRef.$flags$ |= 4 /* isActiveRender */;
-            try {
-                // 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(elm, hostRef, cmpMeta,  instance.render() );
-            }
-            catch (e) {
-                consoleError(e);
-            }
-            hostRef.$flags$ &= ~4 /* isActiveRender */;
-        }
-    }
-    if (cssVarShim) {
-        cssVarShim.updateHost(elm);
-    }
-    // set that this component lifecycle rendering has completed
-    {
-        elm['s-lr'] = true;
-    }
-    {
-        hostRef.$flags$ |= 2 /* hasRendered */;
-    }
-    if ( elm['s-rc'].length > 0) {
-        // 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
-        elm['s-rc'].forEach(cb => cb());
-        elm['s-rc'].length = 0;
-    }
-    postUpdateComponent(elm, hostRef);
-};
-const postUpdateComponent = (elm, hostRef, ancestorsActivelyLoadingChildren) => {
-    if ( !elm['s-al']) {
-        const instance =  hostRef.$lazyInstance$ ;
-        const ancestorComponent = hostRef.$ancestorComponent$;
-        {
-            safeCall(instance, 'componentDidRender');
-        }
-        if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
-            hostRef.$flags$ |= 64 /* hasLoadedComponent */;
-            {
-                // DOM WRITE!
-                // add the css class that this element has officially hydrated
-                elm.classList.add(HYDRATED_CLASS);
-            }
-            {
-                safeCall(instance, 'componentDidLoad');
-            }
-            {
-                hostRef.$onReadyResolve$(elm);
-            }
-            if ( !ancestorComponent) {
-                appDidLoad();
-            }
-        }
-        else {
-            {
-                // we've already loaded this component
-                // fire off the user's componentDidUpdate method (if one was provided)
-                // componentDidUpdate runs AFTER render() has been called
-                // and all child components have finished updating
-                safeCall(instance, 'componentDidUpdate');
-            }
-        }
-        // load events fire from bottom to top
-        // the deepest elements load first then bubbles up
-        if ( ancestorComponent) {
-            // ok so this element already has a known ancestor component
-            // let's make sure we remove this element from its ancestor's
-            // known list of child elements which are actively loading
-            if (ancestorsActivelyLoadingChildren = ancestorComponent['s-al']) {
-                // remove this element from the actively loading map
-                ancestorsActivelyLoadingChildren.delete(elm);
-                // the ancestor's initializeComponent method will do the actual checks
-                // to see if the ancestor is actually loaded or not
-                // then let's call the ancestor's initializeComponent method if there's no length
-                // (which actually ends up as this method again but for the ancestor)
-                if (ancestorsActivelyLoadingChildren.size === 0) {
-                    ancestorComponent['s-al'] = undefined;
-                    ancestorComponent['s-init']();
-                }
-            }
-            hostRef.$ancestorComponent$ = undefined;
-        }
-        // ( •_•)
-        // ( •_•)>⌐■-■
-        // (⌐■_■)
-    }
-};
-const forceUpdate = (elm, cmpMeta) => {
-    {
-        const hostRef = getHostRef(elm);
-        if (hostRef.$flags$ & 2 /* hasRendered */) {
-            scheduleUpdate(elm, hostRef, cmpMeta, false);
-        }
-    }
-};
-const appDidLoad = () => {
-    // on appload
-    // we have finish the first big initial render
-    {
-        doc.documentElement.classList.add(HYDRATED_CLASS);
-    }
-    {
-        plt.$flags$ |= 2 /* appLoaded */;
-    }
-};
-const safeCall = (instance, method, arg) => {
-    if (instance && instance[method]) {
-        try {
-            return instance[method](arg);
-        }
-        catch (e) {
-            consoleError(e);
-        }
-    }
-    return undefined;
-};
-const then = (promise, thenFn) => {
-    return promise && promise.then ? promise.then(thenFn) : thenFn();
-};
-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 elm =  hostRef.$hostElement$ ;
-    const oldVal = hostRef.$instanceValues$.get(propName);
-    const flags = hostRef.$flags$;
-    newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
-    if (newVal !== oldVal && ( !(flags & 8 /* isConstructingInstance */) || oldVal === undefined)) {
-        // gadzooks! the property's value has changed!!
-        // set our new value!
-        hostRef.$instanceValues$.set(propName, newVal);
-        if ( hostRef.$lazyInstance$) {
-            // get an array of method names of watch functions to call
-            if ( cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
-                const watchMethods = cmpMeta.$watchers$[propName];
-                if (watchMethods) {
-                    // this instance is watching for when this property changed
-                    watchMethods.forEach(watchMethodName => {
-                        try {
-                            // fire off each of the watch methods that are watching this property
-                            ( hostRef.$lazyInstance$ )[watchMethodName].call(( hostRef.$lazyInstance$ ), newVal, oldVal, propName);
-                        }
-                        catch (e) {
-                            consoleError(e);
-                        }
-                    });
-                }
-            }
-            if ( (flags & (4 /* isActiveRender */ | 2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* 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(elm, hostRef, cmpMeta, false);
-            }
-        }
-    }
-};
-const proxyComponent = (Cstr, cmpMeta, flags) => {
-    if ( cmpMeta.$members$) {
-        if ( Cstr.watchers) {
-            cmpMeta.$watchers$ = Cstr.watchers;
-        }
-        // It's better to have a const than two Object.entries()
-        const members = Object.entries(cmpMeta.$members$);
-        const prototype = Cstr.prototype;
-        members.forEach(([memberName, [memberFlags]]) => {
-            if ( ((memberFlags & 31 /* Prop */) ||
-                (( flags & 2 /* proxyState */) &&
-                    (memberFlags & 32 /* State */)))) {
-                // proxyComponent - prop
-                Object.defineProperty(prototype, memberName, {
-                    get() {
-                        // proxyComponent, get value
-                        return getValue(this, memberName);
-                    },
-                    set(newValue) {
-                        // proxyComponent, set value
-                        setValue(this, memberName, newValue, cmpMeta);
-                    },
-                    configurable: true,
-                    enumerable: true
-                });
-            }
-            else if ( (flags & 1 /* isElementConstructor */) && (memberFlags & 64 /* Method */)) {
-                // proxyComponent - method
-                Object.defineProperty(prototype, memberName, {
-                    value(...args) {
-                        const ref = getHostRef(this);
-                        return ref.$onReadyPromise$.then(() => ref.$lazyInstance$[memberName](...args));
-                    }
-                });
-            }
-        });
-        if ( ( flags & 1 /* isElementConstructor */)) {
-            const attrNameToPropName = new Map();
-            prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
-                plt.jmp(() => {
-                    const propName = attrNameToPropName.get(attrName);
-                    this[propName] = newValue === null && typeof this[propName] === 'boolean'
-                        ? false
-                        : newValue;
-                });
-            };
-            // create an array of attributes to observe
-            // and also create a map of html attribute name to js property name
-            Cstr.observedAttributes = members
-                .filter(([_, m]) => m[0] & 15 /* HasAttribute */) // filter to only keep props that should match attributes
-                .map(([propName, m]) => {
-                const attrName = m[1] || propName;
-                attrNameToPropName.set(attrName, propName);
-                if ( m[0] & 512 /* ReflectAttr */) {
-                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
-                }
-                return attrName;
-            });
-        }
-    }
-    return Cstr;
-};
-const addEventListeners = (elm, hostRef, listeners) => {
-    hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || [];
-    const removeFns = listeners.map(([flags, name, method]) => {
-        const target = ( getHostListenerTarget(elm, flags) );
-        const handler = hostListenerProxy(hostRef, method);
-        const opts = hostListenerOpts(flags);
-        plt.ael(target, name, handler, opts);
-        return () => plt.rel(target, name, handler, opts);
-    });
-    return () => removeFns.forEach(fn => fn());
-};
-const hostListenerProxy = (hostRef, methodName) => {
-    return (ev) => {
-        {
-            if (hostRef.$flags$ & 256 /* isListenReady */) {
-                // instance is ready, let's call it's member method for this event
-                hostRef.$lazyInstance$[methodName](ev);
-            }
-            else {
-                hostRef.$queuedListeners$.push([methodName, ev]);
-            }
-        }
-    };
-};
-const getHostListenerTarget = (elm, flags) => {
-    if ( flags & 8 /* TargetWindow */)
-        return win;
-    if ( flags & 32 /* TargetBody */)
-        return doc.body;
-    if ( flags & 16 /* TargetParent */)
-        return elm.parentElement;
-    return elm;
-};
-const hostListenerOpts = (flags) => supportsListenerOptions ?
-    {
-        'passive': (flags & 1 /* Passive */) !== 0,
-        'capture': (flags & 2 /* Capture */) !== 0,
-    }
-    : (flags & 2 /* Capture */) !== 0;
-const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
-    const shadowRoot = hostElm.shadowRoot;
-    const childRenderNodes = [];
-    const slotNodes = [];
-    const shadowRootNodes = ( shadowRoot ? [] : null);
-    const vnode = hostRef.$vnode$ = {
-        $flags$: 0,
-        $tag$: tagName
-    };
-    if (!plt.$orgLocNodes$) {
-        initializeDocumentHydrate(doc.body, plt.$orgLocNodes$ = new Map());
-    }
-    hostElm[HYDRATE_ID] = hostId;
-    hostElm.removeAttribute(HYDRATE_ID);
-    clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
-    childRenderNodes.forEach(c => {
-        const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
-        const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
-        const node = c.$elm$;
-        if (orgLocationNode && (orgLocationNode['s-sd'] || c.$hostId$ === '0')) {
-            orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
-        }
-        if (!shadowRoot) {
-            node['s-hn'] = tagName;
-            if (orgLocationNode) {
-                node['s-ol'] = orgLocationNode;
-                node['s-ol']['s-nr'] = node;
-            }
-        }
-        plt.$orgLocNodes$.delete(orgLocationId);
-    });
-    if ( shadowRoot) {
-        shadowRootNodes.forEach(shadowRootNode => {
-            if (shadowRootNode) {
-                shadowRoot.appendChild(shadowRootNode);
-            }
-        });
-    }
-};
-const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
-    let childNodeType;
-    let childIdSplt;
-    let childVNode;
-    if (node.nodeType === 1 /* ElementNode */) {
-        childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
-        if (childNodeType) {
-            // got the node data from the element's attribute
-            // `${hostId}.${nodeId}.${depth}.${index}`
-            childIdSplt = childNodeType.split('.');
-            if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {
-                childVNode = {
-                    $flags$: 0,
-                    $hostId$: childIdSplt[0],
-                    $nodeId$: childIdSplt[1],
-                    $depth$: childIdSplt[2],
-                    $index$: childIdSplt[3],
-                    $tag$: toLowerCase(node.tagName),
-                    $elm$: node
-                };
-                childRenderNodes.push(childVNode);
-                node.removeAttribute(HYDRATE_CHILD_ID);
-                // this is a new child vnode
-                // so ensure its parent vnode has the vchildren array
-                if (!parentVNode.$children$) {
-                    parentVNode.$children$ = [];
-                }
-                // add our child vnode to a specific index of the vnode's children
-                parentVNode.$children$[childVNode.$index$] = childVNode;
-                // this is now the new parent vnode for all the next child checks
-                parentVNode = childVNode;
-                if (shadowRootNodes && childVNode.$depth$ === '0') {
-                    shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-                }
-            }
-        }
-        // recursively drill down, end to start so we can remove nodes
-        let i = node.childNodes.length - 1;
-        for (; i >= 0; i--) {
-            clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId);
-        }
-        if (node.shadowRoot) {
-            // keep drilling down through the shadow root nodes
-            for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
-                clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId);
-            }
-        }
-    }
-    else if (node.nodeType === 8 /* CommentNode */) {
-        // `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}`
-        childIdSplt = node.nodeValue.split('.');
-        if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {
-            // comment node for either the host id or a 0 host id
-            childNodeType = childIdSplt[0];
-            childVNode = {
-                $flags$: 0,
-                $hostId$: childIdSplt[1],
-                $nodeId$: childIdSplt[2],
-                $depth$: childIdSplt[3],
-                $index$: childIdSplt[4],
-                $elm$: node
-            };
-            if (childNodeType === TEXT_NODE_ID) {
-                childVNode.$elm$ = node.nextSibling;
-                if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* TextNode */) {
-                    childVNode.$text$ = childVNode.$elm$.textContent;
-                    childRenderNodes.push(childVNode);
-                    // remove the text comment since it's no longer needed
-                    node.remove();
-                    if (!parentVNode.$children$) {
-                        parentVNode.$children$ = [];
-                    }
-                    parentVNode.$children$[childVNode.$index$] = childVNode;
-                    if (shadowRootNodes && childVNode.$depth$ === '0') {
-                        shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-                    }
-                }
-            }
-            else if (childVNode.$hostId$ === hostId) {
-                // this comment node is specifcally for this host id
-                if (childNodeType === SLOT_NODE_ID) {
-                    // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
-                    childVNode.$tag$ = 'slot';
-                    if (childIdSplt[5]) {
-                        node['s-sn'] = childVNode.$name$ = childIdSplt[5];
-                    }
-                    else {
-                        node['s-sn'] = '';
-                    }
-                    node['s-sr'] = true;
-                    if ( shadowRootNodes) {
-                        // browser support shadowRoot and this is a shadow dom component
-                        // create an actual slot element
-                        childVNode.$elm$ = doc.createElement(childVNode.$tag$);
-                        if (childVNode.$name$) {
-                            // add the slot name attribute
-                            childVNode.$elm$.setAttribute('name', childVNode.$name$);
-                        }
-                        // insert the new slot element before the slot comment
-                        node.parentNode.insertBefore(childVNode.$elm$, node);
-                        // remove the slot comment since it's not needed for shadow
-                        node.remove();
-                        if (childVNode.$depth$ === '0') {
-                            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-                        }
-                    }
-                    slotNodes.push(childVNode);
-                    if (!parentVNode.$children$) {
-                        parentVNode.$children$ = [];
-                    }
-                    parentVNode.$children$[childVNode.$index$] = childVNode;
-                }
-                else if (childNodeType === CONTENT_REF_ID) {
-                    // `${CONTENT_REF_ID}.${hostId}`;
-                    if ( shadowRootNodes) {
-                        // remove the content ref comment since it's not needed for shadow
-                        node.remove();
-                    }
-                    else {
-                        hostElm['s-cr'] = node;
-                        node['s-cn'] = true;
-                    }
-                }
-            }
-        }
-    }
-    else if (parentVNode && parentVNode.$tag$ === 'style') {
-        parentVNode.$children$ = [{
-                $index$: '0',
-                $text$: node.textContent,
-                $elm$: node
-            }];
-    }
-};
-const initializeDocumentHydrate = (node, orgLocNodes) => {
-    if (node.nodeType === 1 /* ElementNode */) {
-        let i = 0;
-        for (; i < node.childNodes.length; i++) {
-            initializeDocumentHydrate(node.childNodes[i], orgLocNodes);
-        }
-        if (node.shadowRoot) {
-            for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
-                initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
-            }
-        }
-    }
-    else if (node.nodeType === 8 /* CommentNode */) {
-        const childIdSplt = node.nodeValue.split('.');
-        if (childIdSplt[0] === ORG_LOCATION_ID) {
-            orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);
-            node.nodeValue = '';
-            // useful to know if the original location is
-            // the root light-dom of a shadow dom component
-            node['s-sd'] = (childIdSplt[3] === '');
-        }
-    }
-};
-const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
-    // initializeComponent
-    if ( (hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
-        // we haven't initialized this element yet
-        hostRef.$flags$ |= 32 /* 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
-                Cstr = await Cstr;
-            }
-            if ( !Cstr.isProxied) {
-                // we'eve never proxied this Constructor before
-                // let's add the getters/setters to its prototype before
-                // the first time we create an instance of the implementation
-                {
-                    cmpMeta.$watchers$ = Cstr.watchers;
-                }
-                proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
-                Cstr.isProxied = true;
-            }
-            // 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 /* 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 /* isConstructingInstance */;
-            }
-            {
-                hostRef.$flags$ |= 128 /* isWatchReady */;
-            }
-            fireConnectedCallback(hostRef.$lazyInstance$);
-        }
-        if ( !Cstr.$isStyleRegistered$ && Cstr.style) {
-            // this component has styles but we haven't registered them yet
-            let style = Cstr.style;
-            let scopeId = getScopeId(cmpMeta.$tagName$);
-            const shadowCssPolyfill = ( cmpMeta.$flags$ & 8 /* needsShadowDomShim */);
-            const runtimeScopedCss = (BUILD.runtimeScopeCss  /* scopedCssEncapsulation */);
-            if ( (shadowCssPolyfill || runtimeScopedCss)) {
-                style = await new Promise(function (resolve) { resolve(require('./shadow-css-9e778f69-0a34c9e7.js')); }).then(m => m.scopeCss(style, scopeId, false));
-            }
-            registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
-            Cstr.$isStyleRegistered$ = true;
-        }
-    }
-    // we've successfully created a lazy instance
-    const ancestorComponent = hostRef.$ancestorComponent$;
-    const schedule = () => scheduleUpdate(elm, hostRef, cmpMeta, true);
-    if ( ancestorComponent && ancestorComponent['s-lr'] === false && ancestorComponent['s-rc']) {
-        // this is the intial 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, cmpMeta) => {
-    if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
-        // connectedCallback
-        const hostRef = getHostRef(elm);
-        if ( cmpMeta.$listeners$) {
-            // initialize our event listeners on the host element
-            // we do this now so that we can listening to events that may
-            // have fired even before the instance is ready
-            hostRef.$rmListeners$ = addEventListeners(elm, hostRef, cmpMeta.$listeners$);
-        }
-        if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
-            // first time this component has connected
-            hostRef.$flags$ |= 1 /* hasConnected */;
-            let hostId;
-            {
-                hostId = elm.getAttribute(HYDRATE_ID);
-                if (hostId) {
-                    if ( supportsShadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-                        const scopeId = addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute('s-mode'));
-                        elm.classList.remove(scopeId + '-h');
-                        elm.classList.remove(scopeId + '-s');
-                    }
-                    initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
-                }
-            }
-            if ( !hostId) {
-                // initUpdate
-                // if the slot polyfill is required we'll need to put some nodes
-                // in here to act as original content anchors as we move nodes around
-                // host element has been connected to the DOM
-                if (
-                    ( cmpMeta.$flags$ & 4 /* hasSlotRelocation */) ||
-                    ( cmpMeta.$flags$ & 8 /* needsShadowDomShim */)) {
-                    setContentReference(elm);
-                }
-            }
-            {
-                // 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.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute('s-id')) || (ancestorComponent['s-init'] && ancestorComponent['s-lr'] === false)) {
-                        // we found this components first ancestor component
-                        // keep a reference to this component's ancestor component
-                        hostRef.$ancestorComponent$ = ancestorComponent;
-                        // ensure there is an array to contain a reference to each of the child components
-                        // and set this component as one of the ancestor's child components it should wait on
-                        (ancestorComponent['s-al'] = ancestorComponent['s-al'] || new Set()).add(elm);
-                        break;
-                    }
-                }
-            }
-            // Lazy properties
-            // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
-            if ( cmpMeta.$members$) {
-                Object.entries(cmpMeta.$members$).forEach(([memberName, [memberFlags]]) => {
-                    if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
-                        const value = elm[memberName];
-                        delete elm[memberName];
-                        elm[memberName] = value;
-                    }
-                });
-            }
-            {
-                // connectedCallback, taskQueue, initialLoad
-                // angular sets attribute AFTER connectCallback
-                // https://github.com/angular/angular/issues/18909
-                // https://github.com/angular/angular/issues/19940
-                nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
-            }
-        }
-        fireConnectedCallback(hostRef.$lazyInstance$);
-    }
-};
-const setContentReference = (elm, contentRefElm) => {
-    // only required when we're NOT using native shadow dom (slot)
-    // or this browser doesn't support native shadow dom
-    // and this host element was NOT created with SSR
-    // let's pick out the inner content for slot projection
-    // create a node to represent where the original
-    // content was first placed, which is useful later on
-    let crName;
-    {
-        crName = '';
-    }
-    contentRefElm = elm['s-cr'] = doc.createComment(crName);
-    contentRefElm['s-cn'] = true;
-    elm.insertBefore(contentRefElm, elm.firstChild);
-};
-const disconnectedCallback = (elm) => {
-    if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
-        const hostRef = getHostRef(elm);
-        {
-            if (hostRef.$rmListeners$) {
-                hostRef.$rmListeners$();
-                hostRef.$rmListeners$ = undefined;
-            }
-        }
-        // clear CSS var-shim tracking
-        if (cssVarShim) {
-            cssVarShim.removeHost(elm);
-        }
-        const instance =  hostRef.$lazyInstance$ ;
-        {
-            safeCall(instance, 'disconnectedCallback');
-        }
-        {
-            safeCall(instance, 'componentDidUnload');
-        }
-    }
-};
-const bootstrapLazy = (lazyBundles, options = {}) => {
-    const cmpTags = [];
-    const exclude = options.exclude || [];
-    const head = doc.head;
-    const customElements = win.customElements;
-    const y = /*@__PURE__*/ head.querySelector('meta[charset]');
-    const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
-    let appLoadFallback;
-    Object.assign(plt, options);
-    plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
-    if (options.syncQueue) {
-        plt.$flags$ |= 4 /* queueSync */;
-    }
-    {
-        // If the app is already hydrated there is not point to disable the
-        // async queue. This will improve the first input delay
-        plt.$flags$ |= 2 /* appLoaded */;
-    }
-    {
-        const styles = doc.querySelectorAll('style[s-id]');
-        let globalStyles = '';
-        styles.forEach(styleElm => globalStyles += styleElm.innerHTML);
-        styles.forEach(styleElm => {
-            registerStyle(styleElm.getAttribute(HYDRATE_ID), globalStyles + convertScopedToShadow(styleElm.innerHTML), true);
-        });
-    }
-    lazyBundles.forEach(lazyBundle => lazyBundle[1].forEach(compactMeta => {
-        const cmpMeta = {
-            $flags$: compactMeta[0],
-            $tagName$: compactMeta[1],
-            $members$: compactMeta[2],
-            $listeners$: compactMeta[3],
-        };
-        {
-            cmpMeta.$attrsToReflect$ = [];
-        }
-        {
-            cmpMeta.$watchers$ = {};
-        }
-        if ( !supportsShadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
-        }
-        const tagName = cmpMeta.$tagName$;
-        const HostElement = class extends HTMLElement {
-            // StencilLazyHost
-            constructor(self) {
-                // @ts-ignore
-                super(self);
-                self = this;
-                {
-                    this['s-lr'] = false;
-                    this['s-rc'] = [];
-                }
-                registerHost(self);
-                if ( cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-                    // this component is using shadow dom
-                    // and this browser supports shadow dom
-                    // add the read-only property "shadowRoot" to the host element
-                    if (supportsShadowDom) {
-                        self.attachShadow({ 'mode': 'open' });
-                    }
-                    else if ( !('shadowRoot' in self)) {
-                        self.shadowRoot = self;
-                    }
-                }
-            }
-            connectedCallback() {
-                if (appLoadFallback) {
-                    clearTimeout(appLoadFallback);
-                    appLoadFallback = null;
-                }
-                plt.jmp(() => connectedCallback(this, cmpMeta));
-            }
-            disconnectedCallback() {
-                plt.jmp(() => disconnectedCallback(this));
-            }
-            's-init'() {
-                const hostRef = getHostRef(this);
-                if (hostRef.$lazyInstance$) {
-                    postUpdateComponent(this, hostRef);
-                }
-            }
-            's-hmr'(hmrVersionId) {
-            }
-            forceUpdate() {
-                forceUpdate(this, cmpMeta);
-            }
-            componentOnReady() {
-                return getHostRef(this).$onReadyPromise$;
-            }
-        };
-        cmpMeta.$lazyBundleIds$ = lazyBundle[0];
-        if (!exclude.includes(tagName) && !customElements.get(tagName)) {
-            cmpTags.push(tagName);
-            customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
-        }
-    }));
-    // visibilityStyle.innerHTML = cmpTags.map(t => `${t}:not(.hydrated)`) + '{display:none}';
-    visibilityStyle.innerHTML = cmpTags + '{visibility:hidden}.hydrated{visibility:inherit}';
-    visibilityStyle.setAttribute('data-styles', '');
-    head.insertBefore(visibilityStyle, y ? y.nextSibling : head.firstChild);
-    // Fallback appLoad event
-    plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30));
-};
-const createEvent = (ref, name, flags) => {
-    const elm = getElement(ref);
-    return {
-        emit: (detail) => {
-            return elm.dispatchEvent(new ( CustomEvent)(name, {
-                bubbles: !!(flags & 4 /* Bubbles */),
-                composed: !!(flags & 2 /* Composed */),
-                cancelable: !!(flags & 1 /* Cancellable */),
-                detail
-            }));
-        }
-    };
-};
-const getElement = (ref) =>  getHostRef(ref).$hostElement$ ;
-
-exports.Host = Host;
-exports.bootstrapLazy = bootstrapLazy;
-exports.createEvent = createEvent;
-exports.getElement = getElement;
-exports.h = h;
-exports.patchBrowser = patchBrowser;
-exports.patchEsm = patchEsm;
-exports.registerInstance = registerInstance;