@utrecht/web-component-library-stencil 1.0.0-alpha.32 → 1.0.0-alpha.322

package/dist/esm/{index-cabfbb36.js → index-31022c39.js}

@@ -13,17 +13,17 @@ const doc = win.document || { head: {} };
 const plt = {
     $flags$: 0,
     $resourcesUrl$: '',
-    jmp: h => h(),
-    raf: h => requestAnimationFrame(h),
+    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 supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
+const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
         try {
             new CSSStyleSheet();
-            return typeof (new CSSStyleSheet()).replace === 'function';
+            return typeof new CSSStyleSheet().replaceSync === 'function';
         }
         catch (e) { }
         return false;
@@ -47,9 +47,14 @@ const uniqueTime = (key, measureText) => {
 const rootAppliedStyles = new WeakMap();
 const registerStyle = (scopeId, cssText, allowCS) => {
     let style = styles.get(scopeId);
-    if (supportsConstructibleStylesheets && allowCS) {
+    if (supportsConstructableStylesheets && allowCS) {
         style = (style || new CSSStyleSheet());
-        style.replace(cssText);
+        if (typeof style === 'string') {
+            style = cssText;
+        }
+        else {
+            style.replaceSync(cssText);
+        }
     }
     else {
         style = cssText;
@@ -58,7 +63,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
     let scopeId = getScopeId(cmpMeta);
-    let style = styles.get(scopeId);
+    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 /* DocumentFragment */ ? styleContainerNode : doc;
@@ -76,6 +81,11 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
                         styleElm = doc.createElement('style');
                         styleElm.innerHTML = style;
                     }
+                    const nonceElm = styleContainerNode.ownerDocument.querySelector('style[nonce]');
+                    if (nonceElm) {
+                      styleElm.setAttribute('nonce', nonceElm.getAttribute('nonce'));
+                      console.log(`CSP nonce-${nonceElm.getAttribute('nonce')}`);
+                    }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
                 if (appliedStyles) {
@@ -145,7 +155,7 @@ const h = (nodeName, vnodeData, ...children) => {
     let slotName = null;
     let simple = false;
     let lastSimple = false;
-    let vNodeChildren = [];
+    const vNodeChildren = [];
     const walk = (c) => {
         for (let i = 0; i < c.length; i++) {
             child = c[i];
@@ -184,7 +194,7 @@ const h = (nodeName, vnodeData, ...children) => {
                     typeof classData !== 'object'
                         ? classData
                         : Object.keys(classData)
-                            .filter(k => classData[k])
+                            .filter((k) => classData[k])
                             .join(' ');
             }
         }
@@ -234,27 +244,65 @@ const isHost = (node) => node && node.$tag$ === Host;
 const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     if (oldValue !== newValue) {
         let isProp = isMemberInElement(elm, memberName);
-        memberName.toLowerCase();
+        let ln = memberName.toLowerCase();
         if (memberName === 'class') {
             const classList = elm.classList;
             const oldClasses = parseClassList(oldValue);
             const newClasses = parseClassList(newValue);
-            classList.remove(...oldClasses.filter(c => c && !newClasses.includes(c)));
-            classList.add(...newClasses.filter(c => c && !oldClasses.includes(c)));
+            classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
+            classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
         else if (memberName === 'key')
             ;
+        else if ((!isProp ) &&
+            memberName[0] === 'o' &&
+            memberName[1] === 'n') {
+            // 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 (memberName[2] === '-') {
+                // on- prefixed events
+                // allows to be explicit about the dom event to listen without any magic
+                // under the hood:
+                // <my-cmp on-click> // listens for "click"
+                // <my-cmp on-Click> // listens for "Click"
+                // <my-cmp on-ionChange> // listens for "ionChange"
+                // <my-cmp on-EVENTS> // listens for "EVENTS"
+                memberName = memberName.slice(3);
+            }
+            else if (isMemberInElement(win, ln)) {
+                // standard event
+                // the JSX attribute could have been "onMouseOver" and the
+                // member name "onmouseover" is on the window's prototype
+                // so let's add the listener "mouseover", which is all lowercased
+                memberName = ln.slice(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 = ln[2] + memberName.slice(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 isComplex = isComplexType(newValue);
             if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
                 try {
                     if (!elm.tagName.includes('-')) {
-                        let n = newValue == null ? '' : newValue;
+                        const n = newValue == null ? '' : newValue;
                         // Workaround for Safari, moving the <input> caret when re-assigning the same valued
                         if (memberName === 'list') {
                             isProp = false;
-                            // tslint:disable-next-line: triple-equals
                         }
                         else if (oldValue == null || elm[memberName] != n) {
                             elm[memberName] = n;
@@ -288,7 +336,9 @@ 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 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;
     {
@@ -306,7 +356,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
 };
 const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     // tslint:disable-next-line: prefer-const
-    let newVNode = newParentVNode.$children$[childIndex];
+    const newVNode = newParentVNode.$children$[childIndex];
     let i = 0;
     let elm;
     let childNode;
@@ -332,14 +382,17 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     else if (newVNode.$flags$ & 1 /* isSlotReference */) {
         // create a slot reference node
-        elm = newVNode.$elm$ = doc.createTextNode('');
+        elm = newVNode.$elm$ =
+            doc.createTextNode('');
     }
     else {
         if (!isSvgMode) {
             isSvgMode = newVNode.$tag$ === 'svg';
         }
         // create element
-        elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$flags$ & 2 /* isSlotFallback */ ? 'slot-fb' : newVNode.$tag$)
+        elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$flags$ & 2 /* isSlotFallback */
+                ? 'slot-fb'
+                : newVNode.$tag$)
             );
         if (isSvgMode && newVNode.$tag$ === 'foreignObject') {
             isSvgMode = false;
@@ -635,7 +688,7 @@ const patch = (oldVNode, newVNode) => {
 };
 const updateFallbackSlotVisibility = (elm) => {
     // tslint:disable-next-line: prefer-const
-    let childNodes = elm.childNodes;
+    const childNodes = elm.childNodes;
     let childNode;
     let i;
     let ilen;
@@ -688,8 +741,8 @@ const relocateSlotContent = (elm) => {
     let relocateNodeData;
     let j;
     let i = 0;
-    let childNodes = elm.childNodes;
-    let ilen = childNodes.length;
+    const childNodes = elm.childNodes;
+    const ilen = childNodes.length;
     for (; i < ilen; i++) {
         childNode = childNodes[i];
         if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
@@ -705,7 +758,7 @@ const relocateSlotContent = (elm) => {
                     // that is suppose to always represent the original content location
                     if (isNodeLocatedInSlot(node, slotNameAttr)) {
                         // it's possible we've already decided to relocate this node
-                        relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
+                        relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
                         // made some changes to slots
                         // let's make sure we also double check
                         // fallbacks are correctly hidden or shown
@@ -724,9 +777,9 @@ const relocateSlotContent = (elm) => {
                             });
                         }
                         if (node['s-sr']) {
-                            relocateNodes.map(relocateNode => {
+                            relocateNodes.map((relocateNode) => {
                                 if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
-                                    relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
+                                    relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
                                     if (relocateNodeData && !relocateNode.$slotRefNode$) {
                                         relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
                                     }
@@ -734,7 +787,7 @@ const relocateSlotContent = (elm) => {
                             });
                         }
                     }
-                    else if (!relocateNodes.some(r => r.$nodeToRelocate$ === node)) {
+                    else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
                         // so far this element does not have a slot home, not setting slotRefNode on purpose
                         // if we never find a home for this element then we'll need to hide it
                         relocateNodes.push({
@@ -770,6 +823,10 @@ const renderVdom = (hostRef, renderFnResults) => {
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
+    if (cmpMeta.$attrsToReflect$) {
+        rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+        cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
+    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -804,7 +861,8 @@ const renderVdom = (hostRef, renderFnResults) => {
                 if (!nodeToRelocate['s-ol']) {
                     // add a reference node marking this node's original location
                     // keep a reference to this node for later lookups
-                    orgLocationNode = doc.createTextNode('');
+                    orgLocationNode =
+                        doc.createTextNode('');
                     orgLocationNode['s-nr'] = nodeToRelocate;
                     nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
                 }
@@ -828,7 +886,8 @@ const renderVdom = (hostRef, renderFnResults) => {
                             }
                         }
                     }
-                    if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) || nodeToRelocate.nextSibling !== insertBeforeNode) {
+                    if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
+                        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
@@ -860,6 +919,27 @@ const renderVdom = (hostRef, renderFnResults) => {
         relocateNodes.length = 0;
     }
 };
+const getElement = (ref) => (getHostRef(ref).$hostElement$ );
+const createEvent = (ref, name, flags) => {
+    const elm = getElement(ref);
+    return {
+        emit: (detail) => {
+            return emitEvent(elm, name, {
+                bubbles: !!(flags & 4 /* Bubbles */),
+                composed: !!(flags & 2 /* Composed */),
+                cancelable: !!(flags & 1 /* Cancellable */),
+                detail,
+            });
+        },
+    };
+};
+/**
+ * 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);
@@ -867,7 +947,7 @@ const emitEvent = (elm, name, opts) => {
 };
 const attachToAncestor = (hostRef, ancestorComponent) => {
     if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
-        ancestorComponent['s-p'].push(new Promise(r => (hostRef.$onRenderResolve$ = r)));
+        ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
     }
 };
 const scheduleUpdate = (hostRef, isInitialLoad) => {
@@ -909,7 +989,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
         // 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());
+        rc.map((cb) => cb());
         elm['s-rc'] = undefined;
     }
     endRender();
@@ -1001,7 +1081,31 @@ const appDidLoad = (who) => {
 const then = (promise, thenFn) => {
     return promise && promise.then ? promise.then(thenFn) : thenFn();
 };
-const addHydratedFlag = (elm) => (elm.classList.add('hydrated') );
+const addHydratedFlag = (elm) => elm.classList.add('hydrated')
+    ;
+/**
+ * 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)) {
@@ -1034,7 +1138,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
     newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
-    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
+    // 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 /* isConstructingInstance */) || oldVal === undefined) && didValueChange) {
         // gadzooks! the property's value has changed!!
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
@@ -1055,7 +1162,8 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
         const members = Object.entries(cmpMeta.$members$);
         const prototype = Cstr.prototype;
         members.map(([memberName, [memberFlags]]) => {
-            if ((memberFlags & 31 /* Prop */ || ((flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
+            if ((memberFlags & 31 /* Prop */ ||
+                    ((flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
                 // proxyComponent - prop
                 Object.defineProperty(prototype, memberName, {
                     get() {
@@ -1076,6 +1184,51 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
             prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
+                    //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
+                    //  in the case where an attribute was set inline.
+                    //  ```html
+                    //    <my-component some-attribute="some-value"></my-component>
+                    //  ```
+                    //
+                    //  There is an edge case where a developer sets the attribute inline on a custom element and then
+                    //  programmatically changes it before it has been upgraded as shown below:
+                    //
+                    //  ```html
+                    //    <!-- this component has _not_ been upgraded yet -->
+                    //    <my-component id="test" some-attribute="some-value"></my-component>
+                    //    <script>
+                    //      // grab non-upgraded component
+                    //      el = document.querySelector("#test");
+                    //      el.someAttribute = "another-value";
+                    //      // upgrade component
+                    //      customElements.define('my-component', MyComponent);
+                    //    </script>
+                    //  ```
+                    //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
+                    //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
+                    //  to the value that was set inline i.e. "some-value" from above example. When
+                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
+                    //
+                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
+                    //  by connectedCallback as this attributeChangedCallback will not fire.
+                    //
+                    //  https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
+                    //
+                    //  TODO(STENCIL-16) we should think about whether or not we actually want to be reflecting the attributes to
+                    //  properties here given that this goes against best practices outlined here
+                    //  https://developers.google.com/web/fundamentals/web-components/best-practices#avoid-reentrancy
+                    if (this.hasOwnProperty(propName)) {
+                        newValue = this[propName];
+                        delete this[propName];
+                    }
+                    else if (prototype.hasOwnProperty(propName) &&
+                        typeof this[propName] === 'number' &&
+                        this[propName] == newValue) {
+                        // if the propName exists on the prototype of `Cstr`, this update may be a result of Stencil using native
+                        // APIs to reflect props as attributes. Calls to `setAttribute(someElement, propName)` will result in
+                        // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
+                        return;
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
@@ -1086,6 +1239,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 .map(([propName, m]) => {
                 const attrName = m[1] || propName;
                 attrNameToPropName.set(attrName, propName);
+                if (m[0] & 512 /* ReflectAttr */) {
+                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                }
                 return attrName;
             });
         }
@@ -1149,7 +1305,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
     const ancestorComponent = hostRef.$ancestorComponent$;
     const schedule = () => scheduleUpdate(hostRef, true);
     if (ancestorComponent && ancestorComponent['s-rc']) {
-        // this is the intial load and this component it has an ancestor component
+        // 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
@@ -1240,71 +1396,80 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     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);
-                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
-                    // adding the shadow root build conditionals to minimize runtime
-                    {
+    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];
+            }
+            {
+                cmpMeta.$attrsToReflect$ = [];
+            }
+            const tagName = cmpMeta.$tagName$;
+            const HostElement = class extends HTMLElement {
+                // StencilLazyHost
+                constructor(self) {
+                    // @ts-ignore
+                    super(self);
+                    self = this;
+                    registerHost(self, cmpMeta);
+                    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
+                        // adding the shadow root build conditionals to minimize runtime
                         {
-                            self.attachShadow({ mode: 'open' });
+                            {
+                                self.attachShadow({ mode: 'open' });
+                            }
                         }
                     }
                 }
-            }
-            connectedCallback() {
-                if (appLoadFallback) {
-                    clearTimeout(appLoadFallback);
-                    appLoadFallback = null;
+                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));
+                    }
                 }
-                if (isBootstrapping) {
-                    // connectedCallback will be processed once all components have been registered
-                    deferredConnectedCallbacks.push(this);
+                disconnectedCallback() {
+                    plt.jmp(() => disconnectedCallback(this));
                 }
-                else {
-                    plt.jmp(() => connectedCallback(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 /* isElementConstructor */));
             }
-            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 /* isElementConstructor */));
-        }
-    }));
+        });
+    });
     {
         visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
         visibilityStyle.setAttribute('data-styles', '');
+        const nonceElm = visibilityStyle.ownerDocument.querySelector('style[nonce]');
+        if (nonceElm) {
+          visibilityStyle.setAttribute('nonce', nonceElm.getAttribute('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());
+        deferredConnectedCallbacks.map((host) => host.connectedCallback());
     }
     else {
         {
@@ -1325,7 +1490,7 @@ const registerHost = (elm, cmpMeta) => {
         $instanceValues$: new Map(),
     };
     {
-        hostRef.$onReadyPromise$ = new Promise(r => (hostRef.$onReadyResolve$ = r));
+        hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
         elm['s-p'] = [];
         elm['s-rc'] = [];
     }
@@ -1342,11 +1507,13 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     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 => {
+    `./${bundleId}.entry.js${''}`).then((importedModule) => {
         {
             cmpModules.set(bundleId, importedModule);
         }
@@ -1397,4 +1564,4 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-export { bootstrapLazy as b, h, promiseResolve as p, registerInstance as r };
+export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r };

package/dist/esm/loader.js

@@ -1,7 +1,7 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-cabfbb36.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-31022c39.js';
 
 /*
- Stencil Client Patch Esm v2.6.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.17.2 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return promiseResolve();
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["utrecht-article",[[1,"utrecht-article"]]],["utrecht-badge-counter",[[1,"utrecht-badge-counter",{"value":[2],"max":[2],"locale":[1]}]]],["utrecht-badge-data",[[1,"utrecht-badge-data"]]],["utrecht-badge-status",[[1,"utrecht-badge-status",{"status":[1]}]]],["utrecht-breadcrumb",[[1,"utrecht-breadcrumb",{"json":[1],"variant":[1]}]]],["utrecht-button",[[1,"utrecht-button",{"disabled":[4]}]]],["utrecht-document",[[1,"utrecht-document"]]],["utrecht-heading",[[1,"utrecht-heading",{"level":[2]}]]],["utrecht-html-content",[[4,"utrecht-html-content"]]],["utrecht-icon-facebook",[[1,"utrecht-icon-facebook"]]],["utrecht-icon-instagram",[[1,"utrecht-icon-instagram"]]],["utrecht-icon-linkedin",[[1,"utrecht-icon-linkedin"]]],["utrecht-icon-twitter",[[1,"utrecht-icon-twitter"]]],["utrecht-icon-whatsapp",[[1,"utrecht-icon-whatsapp"]]],["utrecht-page-footer",[[1,"utrecht-page-footer"]]],["utrecht-paragraph",[[1,"utrecht-paragraph",{"lead":[4]}]]],["utrecht-separator",[[1,"utrecht-separator"]]],["utrecht-sidenav",[[1,"utrecht-sidenav",{"json":[1]}]]]], options);
+  return bootstrapLazy(JSON.parse("[[\"utrecht-contact-card-template\",[[1,\"utrecht-contact-card-template\"]]],[\"utrecht-logo-button\",[[1,\"utrecht-logo-button\",{\"type\":[1]}]]],[\"utrecht-custom-checkbox\",[[1,\"utrecht-custom-checkbox\",{\"disabled\":[516],\"checked\":[516],\"indeterminate\":[516],\"invalid\":[516],\"required\":[516]}]]],[\"utrecht-digid-button\",[[1,\"utrecht-digid-button\",{\"type\":[1]}]]],[\"utrecht-article\",[[1,\"utrecht-article\"]]],[\"utrecht-backdrop\",[[1,\"utrecht-backdrop\",{\"viewport\":[4]}]]],[\"utrecht-badge-counter\",[[1,\"utrecht-badge-counter\",{\"value\":[2],\"max\":[2],\"locale\":[1]}]]],[\"utrecht-badge-data\",[[1,\"utrecht-badge-data\"]]],[\"utrecht-badge-status\",[[1,\"utrecht-badge-status\",{\"status\":[1]}]]],[\"utrecht-breadcrumb\",[[1,\"utrecht-breadcrumb\",{\"json\":[1],\"variant\":[1]}]]],[\"utrecht-checkbox\",[[1,\"utrecht-checkbox\",{\"disabled\":[516],\"readOnly\":[516,\"readonly\"],\"checked\":[4],\"value\":[1]}]]],[\"utrecht-document\",[[1,\"utrecht-document\"]]],[\"utrecht-eherkenning-logo\",[[1,\"utrecht-eherkenning-logo\"]]],[\"utrecht-eidas-logo\",[[1,\"utrecht-eidas-logo\"]]],[\"utrecht-form-field-checkbox\",[[1,\"utrecht-form-field-checkbox\",{\"label\":[4],\"disabled\":[516],\"checked\":[516],\"invalid\":[516],\"required\":[516],\"value\":[32]}]]],[\"utrecht-form-field-description\",[[1,\"utrecht-form-field-description\",{\"status\":[513]}]]],[\"utrecht-form-field-textarea\",[[1,\"utrecht-form-field-textarea\",{\"disabled\":[516],\"invalid\":[516],\"readOnly\":[516,\"readonly\"],\"placeholder\":[1],\"required\":[516],\"value\":[1]}]]],[\"utrecht-form-field-textbox\",[[1,\"utrecht-form-field-textbox\",{\"autoComplete\":[513,\"autocomplete\"],\"disabled\":[516],\"invalid\":[516],\"min\":[1],\"max\":[1],\"pattern\":[1],\"placeholder\":[1],\"readOnly\":[516,\"readonly\"],\"required\":[516],\"type\":[513],\"value\":[1]}]]],[\"utrecht-form-toggle\",[[1,\"utrecht-form-toggle\",{\"disabled\":[516],\"checked\":[516]}]]],[\"utrecht-heading\",[[1,\"utrecht-heading\",{\"level\":[2]}]]],[\"utrecht-heading-1\",[[1,\"utrecht-heading-1\"]]],[\"utrecht-heading-4\",[[1,\"utrecht-heading-4\"]]],[\"utrecht-heading-5\",[[1,\"utrecht-heading-5\"]]],[\"utrecht-heading-6\",[[1,\"utrecht-heading-6\"]]],[\"utrecht-html-content\",[[4,\"utrecht-html-content\"]]],[\"utrecht-icon\",[[1,\"utrecht-icon\"]]],[\"utrecht-icon-afspraak-maken\",[[1,\"utrecht-icon-afspraak-maken\"]]],[\"utrecht-icon-afval\",[[1,\"utrecht-icon-afval\"]]],[\"utrecht-icon-afval-container\",[[1,\"utrecht-icon-afval-container\"]]],[\"utrecht-icon-afval-containerpas\",[[1,\"utrecht-icon-afval-containerpas\"]]],[\"utrecht-icon-afval-kalender\",[[1,\"utrecht-icon-afval-kalender\"]]],[\"utrecht-icon-afval-scheiden\",[[1,\"utrecht-icon-afval-scheiden\"]]],[\"utrecht-icon-afvalkalender\",[[1,\"utrecht-icon-afvalkalender\"]]],[\"utrecht-icon-alleen\",[[1,\"utrecht-icon-alleen\"]]],[\"utrecht-icon-arrow\",[[1,\"utrecht-icon-arrow\"]]],[\"utrecht-icon-bestemmingsplan\",[[1,\"utrecht-icon-bestemmingsplan\"]]],[\"utrecht-icon-betaaldatum\",[[1,\"utrecht-icon-betaaldatum\"]]],[\"utrecht-icon-bewijsstukken\",[[1,\"utrecht-icon-bewijsstukken\"]]],[\"utrecht-icon-bijstand\",[[1,\"utrecht-icon-bijstand\"]]],[\"utrecht-icon-blad\",[[1,\"utrecht-icon-blad\"]]],[\"utrecht-icon-bouwproject\",[[1,\"utrecht-icon-bouwproject\"]]],[\"utrecht-icon-brandgevaar\",[[1,\"utrecht-icon-brandgevaar\"]]],[\"utrecht-icon-college-b-w\",[[1,\"utrecht-icon-college-b-w\"]]],[\"utrecht-icon-container\",[[1,\"utrecht-icon-container\"]]],[\"utrecht-icon-container-bio\",[[1,\"utrecht-icon-container-bio\"]]],[\"utrecht-icon-cross\",[[1,\"utrecht-icon-cross\"]]],[\"utrecht-icon-dakloos\",[[1,\"utrecht-icon-dakloos\"]]],[\"utrecht-icon-dementie\",[[1,\"utrecht-icon-dementie\"]]],[\"utrecht-icon-duurzaam\",[[1,\"utrecht-icon-duurzaam\"]]],[\"utrecht-icon-eenzaamheid\",[[1,\"utrecht-icon-eenzaamheid\"]]],[\"utrecht-icon-eikenprocessie\",[[1,\"utrecht-icon-eikenprocessie\"]]],[\"utrecht-icon-energie-vergoeding\",[[1,\"utrecht-icon-energie-vergoeding\"]]],[\"utrecht-icon-energietransitie\",[[1,\"utrecht-icon-energietransitie\"]]],[\"utrecht-icon-error\",[[1,\"utrecht-icon-error\"]]],[\"utrecht-icon-evenementen\",[[1,\"utrecht-icon-evenementen\"]]],[\"utrecht-icon-facebook\",[[1,\"utrecht-icon-facebook\"]]],[\"utrecht-icon-fiets\",[[1,\"utrecht-icon-fiets\"]]],[\"utrecht-icon-filter\",[[1,\"utrecht-icon-filter\"]]],[\"utrecht-icon-gebruiker-centraal\",[[1,\"utrecht-icon-gebruiker-centraal\"]]],[\"utrecht-icon-gegevenswoordenboek\",[[1,\"utrecht-icon-gegevenswoordenboek\"]]],[\"utrecht-icon-gemeenteraad\",[[1,\"utrecht-icon-gemeenteraad\"]]],[\"utrecht-icon-grofvuil\",[[1,\"utrecht-icon-grofvuil\"]]],[\"utrecht-icon-horeca\",[[1,\"utrecht-icon-horeca\"]]],[\"utrecht-icon-huishoudelijk-geweld\",[[1,\"utrecht-icon-huishoudelijk-geweld\"]]],[\"utrecht-icon-hulp-huishouden\",[[1,\"utrecht-icon-hulp-huishouden\"]]],[\"utrecht-icon-hulp-vervoer\",[[1,\"utrecht-icon-hulp-vervoer\"]]],[\"utrecht-icon-hulp-zorg\",[[1,\"utrecht-icon-hulp-zorg\"]]],[\"utrecht-icon-hulpverlening\",[[1,\"utrecht-icon-hulpverlening\"]]],[\"utrecht-icon-information\",[[1,\"utrecht-icon-information\"]]],[\"utrecht-icon-innovatie\",[[1,\"utrecht-icon-innovatie\"]]],[\"utrecht-icon-instagram\",[[1,\"utrecht-icon-instagram\"]]],[\"utrecht-icon-kalender\",[[1,\"utrecht-icon-kalender\"]]],[\"utrecht-icon-kerstbomen\",[[1,\"utrecht-icon-kerstbomen\"]]],[\"utrecht-icon-klachten\",[[1,\"utrecht-icon-klachten\"]]],[\"utrecht-icon-kroon\",[[1,\"utrecht-icon-kroon\"]]],[\"utrecht-icon-laadpaal\",[[1,\"utrecht-icon-laadpaal\"]]],[\"utrecht-icon-lantaarnpaal\",[[1,\"utrecht-icon-lantaarnpaal\"]]],[\"utrecht-icon-leren\",[[1,\"utrecht-icon-leren\"]]],[\"utrecht-icon-let-op\",[[1,\"utrecht-icon-let-op\"]]],[\"utrecht-icon-linkedin\",[[1,\"utrecht-icon-linkedin\"]]],[\"utrecht-icon-list\",[[1,\"utrecht-icon-list\"]]],[\"utrecht-icon-loupe\",[[1,\"utrecht-icon-loupe\"]]],[\"utrecht-icon-markt\",[[1,\"utrecht-icon-markt\"]]],[\"utrecht-icon-melding\",[[1,\"utrecht-icon-melding\"]]],[\"utrecht-icon-melding-klacht\",[[1,\"utrecht-icon-melding-klacht\"]]],[\"utrecht-icon-menselijk\",[[1,\"utrecht-icon-menselijk\"]]],[\"utrecht-icon-milieu-ontheffing\",[[1,\"utrecht-icon-milieu-ontheffing\"]]],[\"utrecht-icon-natuur\",[[1,\"utrecht-icon-natuur\"]]],[\"utrecht-icon-nieuw-huis\",[[1,\"utrecht-icon-nieuw-huis\"]]],[\"utrecht-icon-nummerbord\",[[1,\"utrecht-icon-nummerbord\"]]],[\"utrecht-icon-omgeving\",[[1,\"utrecht-icon-omgeving\"]]],[\"utrecht-icon-omgevingsvisie\",[[1,\"utrecht-icon-omgevingsvisie\"]]],[\"utrecht-icon-omgevingswet\",[[1,\"utrecht-icon-omgevingswet\"]]],[\"utrecht-icon-onderhoud\",[[1,\"utrecht-icon-onderhoud\"]]],[\"utrecht-icon-openingstijden\",[[1,\"utrecht-icon-openingstijden\"]]],[\"utrecht-icon-panden\",[[1,\"utrecht-icon-panden\"]]],[\"utrecht-icon-park\",[[1,\"utrecht-icon-park\"]]],[\"utrecht-icon-parkeerkaart\",[[1,\"utrecht-icon-parkeerkaart\"]]],[\"utrecht-icon-parkeervergunning\",[[1,\"utrecht-icon-parkeervergunning\"]]],[\"utrecht-icon-parken\",[[1,\"utrecht-icon-parken\"]]],[\"utrecht-icon-parkeren-bedrijven\",[[1,\"utrecht-icon-parkeren-bedrijven\"]]],[\"utrecht-icon-parkeren-betalen\",[[1,\"utrecht-icon-parkeren-betalen\"]]],[\"utrecht-icon-participatie-campagne\",[[1,\"utrecht-icon-participatie-campagne\"]]],[\"utrecht-icon-paspoort\",[[1,\"utrecht-icon-paspoort\"]]],[\"utrecht-icon-rijbewijs\",[[1,\"utrecht-icon-rijbewijs\"]]],[\"utrecht-icon-rolstoel\",[[1,\"utrecht-icon-rolstoel\"]]],[\"utrecht-icon-shoppen\",[[1,\"utrecht-icon-shoppen\"]]],[\"utrecht-icon-sinterklaas\",[[1,\"utrecht-icon-sinterklaas\"]]],[\"utrecht-icon-sport\",[[1,\"utrecht-icon-sport\"]]],[\"utrecht-icon-stookverbod\",[[1,\"utrecht-icon-stookverbod\"]]],[\"utrecht-icon-strooien\",[[1,\"utrecht-icon-strooien\"]]],[\"utrecht-icon-subsidie-gezin\",[[1,\"utrecht-icon-subsidie-gezin\"]]],[\"utrecht-icon-toeslag\",[[1,\"utrecht-icon-toeslag\"]]],[\"utrecht-icon-trein\",[[1,\"utrecht-icon-trein\"]]],[\"utrecht-icon-trouwen\",[[1,\"utrecht-icon-trouwen\"]]],[\"utrecht-icon-twitter\",[[1,\"utrecht-icon-twitter\"]]],[\"utrecht-icon-vaccinatie\",[[1,\"utrecht-icon-vaccinatie\"]]],[\"utrecht-icon-veilige-wijk\",[[1,\"utrecht-icon-veilige-wijk\"]]],[\"utrecht-icon-vergoeding\",[[1,\"utrecht-icon-vergoeding\"]]],[\"utrecht-icon-verhuizen\",[[1,\"utrecht-icon-verhuizen\"]]],[\"utrecht-icon-verkiezingen\",[[1,\"utrecht-icon-verkiezingen\"]]],[\"utrecht-icon-verslaving\",[[1,\"utrecht-icon-verslaving\"]]],[\"utrecht-icon-vervoersvoorziening\",[[1,\"utrecht-icon-vervoersvoorziening\"]]],[\"utrecht-icon-virus\",[[1,\"utrecht-icon-virus\"]]],[\"utrecht-icon-vluchtelingen\",[[1,\"utrecht-icon-vluchtelingen\"]]],[\"utrecht-icon-voorzieningen-vervoer\",[[1,\"utrecht-icon-voorzieningen-vervoer\"]]],[\"utrecht-icon-vrijwilligerswerk\",[[1,\"utrecht-icon-vrijwilligerswerk\"]]],[\"utrecht-icon-vuurwerk\",[[1,\"utrecht-icon-vuurwerk\"]]],[\"utrecht-icon-wandelstok\",[[1,\"utrecht-icon-wandelstok\"]]],[\"utrecht-icon-warm\",[[1,\"utrecht-icon-warm\"]]],[\"utrecht-icon-warning\",[[1,\"utrecht-icon-warning\"]]],[\"utrecht-icon-werken\",[[1,\"utrecht-icon-werken\"]]],[\"utrecht-icon-werkzaamheden\",[[1,\"utrecht-icon-werkzaamheden\"]]],[\"utrecht-icon-whatsapp\",[[1,\"utrecht-icon-whatsapp\"]]],[\"utrecht-icon-wonen-kosten\",[[1,\"utrecht-icon-wonen-kosten\"]]],[\"utrecht-icon-woning-zoeken\",[[1,\"utrecht-icon-woning-zoeken\"]]],[\"utrecht-icon-youtube\",[[1,\"utrecht-icon-youtube\"]]],[\"utrecht-icon-zelfstandig-wonen\",[[1,\"utrecht-icon-zelfstandig-wonen\"]]],[\"utrecht-icon-zoomin\",[[1,\"utrecht-icon-zoomin\"]]],[\"utrecht-icon-zoomout\",[[1,\"utrecht-icon-zoomout\"]]],[\"utrecht-icon-zorg-huis\",[[1,\"utrecht-icon-zorg-huis\"]]],[\"utrecht-icon-zwemmen\",[[1,\"utrecht-icon-zwemmen\"]]],[\"utrecht-logo\",[[1,\"utrecht-logo\"]]],[\"utrecht-page\",[[1,\"utrecht-page\"]]],[\"utrecht-page-content\",[[1,\"utrecht-page-content\"]]],[\"utrecht-page-footer\",[[1,\"utrecht-page-footer\"]]],[\"utrecht-pagination\",[[1,\"utrecht-pagination\",{\"links\":[1],\"next\":[1],\"prev\":[1],\"currentIndex\":[2,\"current-index\"]}]]],[\"utrecht-separator\",[[1,\"utrecht-separator\"]]],[\"utrecht-sidenav\",[[1,\"utrecht-sidenav\",{\"json\":[1]}]]],[\"utrecht-table\",[[1,\"utrecht-table\"]]],[\"utrecht-table-body\",[[1,\"utrecht-table-body\"]]],[\"utrecht-table-caption\",[[1,\"utrecht-table-caption\"]]],[\"utrecht-table-cell\",[[1,\"utrecht-table-cell\"]]],[\"utrecht-table-footer\",[[1,\"utrecht-table-footer\"]]],[\"utrecht-table-header\",[[1,\"utrecht-table-header\"]]],[\"utrecht-table-header-cell\",[[1,\"utrecht-table-header-cell\",{\"scope\":[1]}]]],[\"utrecht-table-row\",[[1,\"utrecht-table-row\"]]],[\"utrecht-textbox\",[[1,\"utrecht-textbox\",{\"autoComplete\":[513,\"autocomplete\"],\"disabled\":[516],\"invalid\":[516],\"min\":[1],\"max\":[1],\"pattern\":[1],\"placeholder\":[1],\"readOnly\":[516,\"readonly\"],\"required\":[516],\"type\":[513],\"value\":[1]}]]],[\"utrecht-button\",[[1,\"utrecht-button\",{\"appearance\":[1],\"busy\":[4],\"disabled\":[4],\"type\":[1]}]]],[\"utrecht-icon-checkmark\",[[1,\"utrecht-icon-checkmark\"]]],[\"utrecht-digid-logo\",[[1,\"utrecht-digid-logo\"]]],[\"utrecht-heading-2_3\",[[1,\"utrecht-heading-2\"],[1,\"utrecht-heading-3\"],[1,\"utrecht-paragraph\",{\"lead\":[4]}]]]]"), options);
   });
 };