proto-ikons-wc 0.0.127 → 0.0.129

package/dist/esm/{index-73342eec.js → index-f27a3666.js}

@@ -83,6 +83,7 @@ function queryNonceMetaTagContent(doc) {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let simple = false;
     let lastSimple = false;
     const vNodeChildren = [];
@@ -110,6 +111,9 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         // normalize class / className attributes
         {
             const classData = vnodeData.className || vnodeData.class;
@@ -128,6 +132,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     return vnode;
 };
 /**
@@ -149,6 +156,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     return vnode;
 };
 const Host = {};
@@ -318,6 +328,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'key')
+            ;
         else {
             // Set property if it exists and it's not a SVG
             const isComplex = isComplexType(newValue);
@@ -592,6 +604,8 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {
     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];
@@ -599,6 +613,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
     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
@@ -665,7 +680,41 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // Here we do some checks to match up old and new nodes based on the
+            // `$key$` attribute, which is set by putting a `key="my-key"` attribute
+            // in the JSX for a DOM element in the implementation of a Stencil
+            // component.
+            //
+            // First we check to see if there are any nodes in the array of old
+            // children which have the same key as the first node in the new
+            // children.
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                // We found a node in the old children which matches up with the first
+                // node in the new children! So let's deal with that
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    // the tag doesn't match so we'll need a new DOM element
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+                }
+                else {
+                    patch(elmToMove, newStartVnode, isInitialRender);
+                    // invalidate the matching old node so that we won't try to update it
+                    // again later on
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // We either didn't find an element in the old children that matches
                 // the key of the first new child OR the build is not using `key`
                 // attributes at all. In either case we need to create a new element
@@ -715,6 +764,14 @@ const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (leftVNode.$tag$ === rightVNode.$tag$) {
+        // this will be set if JSX tags in the build have `key` attrs set on them
+        // we only want to check this if we're not on the first render since on
+        // first render `leftVNode.$key$` will always be `null`, so we can be led
+        // astray and, for instance, accidentally delete a DOM node that we want to
+        // keep around.
+        if (!isInitialRender) {
+            return leftVNode.$key$ === rightVNode.$key$;
+        }
         return true;
     }
     return false;
@@ -1403,25 +1460,29 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             }
         });
     });
-    // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
-    if (hasSlotRelocation) {
-        dataStyles.innerHTML += SLOT_FB_CSS;
-    }
-    // Add hydration styles
-    {
-        dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
-    }
-    // If we have styles, add them to the DOM
-    if (dataStyles.innerHTML.length) {
-        dataStyles.setAttribute('data-styles', '');
-        // Apply CSP nonce to the style tag if it exists
-        const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
-        if (nonce != null) {
-            dataStyles.setAttribute('nonce', nonce);
-        }
-        // Insert the styles into the document head
-        // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
-        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
+    // Only bother generating CSS if we have components
+    // TODO(STENCIL-1118): Add test cases for CSS content based on conditionals
+    if (cmpTags.length > 0) {
+        // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
+        if (hasSlotRelocation) {
+            dataStyles.innerHTML += SLOT_FB_CSS;
+        }
+        // Add hydration styles
+        {
+            dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
+        }
+        // If we have styles, add them to the DOM
+        if (dataStyles.innerHTML.length) {
+            dataStyles.setAttribute('data-styles', '');
+            // Apply CSP nonce to the style tag if it exists
+            const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+            if (nonce != null) {
+                dataStyles.setAttribute('nonce', nonce);
+            }
+            // Insert the styles into the document head
+            // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
+            head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
+        }
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
@@ -1446,8 +1507,19 @@ const setNonce = (nonce) => (plt.$nonce$ = nonce);
 /**
  * A WeakMap mapping runtime component references to their corresponding host reference
  * instances.
+ *
+ * **Note**: If we're in an HMR context we need to store a reference to this
+ * value on `window` in order to maintain the mapping of {@link d.RuntimeRef}
+ * to {@link d.HostRef} across HMR updates.
+ *
+ * This is necessary because when HMR updates for a component are processed by
+ * the browser-side dev server client the JS bundle for that component is
+ * re-fetched. Since the module containing {@link hostRefs} is included in
+ * that bundle, if we do not store a reference to it the new iteration of the
+ * component will not have access to the previous hostRef map, leading to a
+ * bug where the new version of the component cannot properly initialize.
  */
-const hostRefs = /*@__PURE__*/ new WeakMap();
+const hostRefs = new WeakMap();
 /**
  * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
  *

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { b as bootstrapLazy } from './index-73342eec.js';
-export { s as setNonce } from './index-73342eec.js';
+import { b as bootstrapLazy } from './index-f27a3666.js';
+export { s as setNonce } from './index-f27a3666.js';
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/proto-ikons-wc.js

@@ -1,8 +1,8 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-73342eec.js';
-export { s as setNonce } from './index-73342eec.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-f27a3666.js';
+export { s as setNonce } from './index-f27a3666.js';
 
 /*
- Stencil Client Patch Browser v4.11.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.12.1 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;

package/dist/proto-ikons-wc/p-9981b0d2.js

@@ -0,0 +1,2 @@
+let e,n=!1,t=!1;const l="slot-fb{display:contents}slot-fb[hidden]{display:none}",o="http://www.w3.org/1999/xlink",s={},i=e=>"object"==(e=typeof e)||"function"===e;function c(e){var n,t,l;return null!==(l=null===(t=null===(n=e.head)||void 0===n?void 0:n.querySelector('meta[name="csp-nonce"]'))||void 0===t?void 0:t.getAttribute("content"))&&void 0!==l?l:void 0}const r=(e,n,...t)=>{let l=null,o=null,s=!1,c=!1;const r=[],f=n=>{for(let t=0;t<n.length;t++)l=n[t],Array.isArray(l)?f(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!i(l))&&(l+=""),s&&c?r[r.length-1].t+=l:r.push(s?u(null,l):l),c=s)};if(f(t),n){n.key&&(o=n.key);{const e=n.className||n.class;e&&(n.class="object"!=typeof e?e:Object.keys(e).filter((n=>e[n])).join(" "))}}const a=u(e,null);return a.l=n,r.length>0&&(a.o=r),a.i=o,a},u=(e,n)=>({u:0,v:e,t:n,h:null,o:null,l:null,i:null}),f={},a=new WeakMap,d=e=>"sc-"+e.p,y=(e,n,t,l,s,c)=>{if(t!==l){let r=q(e,n),u=n.toLowerCase();if("class"===n){const n=e.classList,o=h(t),s=h(l);n.remove(...o.filter((e=>e&&!s.includes(e)))),n.add(...s.filter((e=>e&&!o.includes(e))))}else if("key"===n);else{const f=i(l);if((r||f&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[n]=l;else{const o=null==l?"":l;"list"===n?r=!1:null!=t&&e[n]==o||(e[n]=o)}}catch(e){}let a=!1;u!==(u=u.replace(/^xlink\:?/,""))&&(n=u,a=!0),null==l||!1===l?!1===l&&""!==e.getAttribute(n)||(a?e.removeAttributeNS(o,n):e.removeAttribute(n)):(!r||4&c||s)&&!f&&(l=!0===l?"":l,a?e.setAttributeNS(o,n,l):e.setAttribute(n,l))}}},v=/\s/,h=e=>e?e.split(v):[],p=(e,n,t,l)=>{const o=11===n.h.nodeType&&n.h.host?n.h.host:n.h,i=e&&e.l||s,c=n.l||s;for(l in i)l in c||y(o,l,i[l],void 0,t,n.u);for(l in c)y(o,l,i[l],c[l],t,n.u)},$=(t,l,o)=>{const s=l.o[o];let i,c,r=0;if(null!==s.t)i=s.h=D.createTextNode(s.t);else{if(n||(n="svg"===s.v),i=s.h=D.createElementNS(n?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",s.v),n&&"foreignObject"===s.v&&(n=!1),p(null,s,n),s.o)for(r=0;r<s.o.length;++r)c=$(t,s,r),c&&i.appendChild(c);"svg"===s.v?n=!1:"foreignObject"===i.tagName&&(n=!0)}return i["s-hn"]=e,i},w=(e,n,t,l,o,s)=>{let i,c=e;for(;o<=s;++o)l[o]&&(i=$(null,t,o),i&&(l[o].h=i,c.insertBefore(i,n)))},m=(e,n,t)=>{for(let l=n;l<=t;++l){const n=e[l];if(n){const e=n.h;e&&e.remove()}}},b=(e,n,t=!1)=>e.v===n.v&&(!!t||e.i===n.i),g=(e,t,l=!1)=>{const o=t.h=e.h,s=e.o,i=t.o,c=t.v,r=t.t;null===r?(n="svg"===c||"foreignObject"!==c&&n,p(e,t,n),null!==s&&null!==i?((e,n,t,l,o=!1)=>{let s,i,c=0,r=0,u=0,f=0,a=n.length-1,d=n[0],y=n[a],v=l.length-1,h=l[0],p=l[v];for(;c<=a&&r<=v;)if(null==d)d=n[++c];else if(null==y)y=n[--a];else if(null==h)h=l[++r];else if(null==p)p=l[--v];else if(b(d,h,o))g(d,h,o),d=n[++c],h=l[++r];else if(b(y,p,o))g(y,p,o),y=n[--a],p=l[--v];else if(b(d,p,o))g(d,p,o),e.insertBefore(d.h,y.h.nextSibling),d=n[++c],p=l[--v];else if(b(y,h,o))g(y,h,o),e.insertBefore(y.h,d.h),y=n[--a],h=l[++r];else{for(u=-1,f=c;f<=a;++f)if(n[f]&&null!==n[f].i&&n[f].i===h.i){u=f;break}u>=0?(i=n[u],i.v!==h.v?s=$(n&&n[r],t,u):(g(i,h,o),n[u]=void 0,s=i.h),h=l[++r]):(s=$(n&&n[r],t,r),h=l[++r]),s&&d.h.parentNode.insertBefore(s,d.h)}c>a?w(e,null==l[v+1]?null:l[v+1].h,t,l,r,v):r>v&&m(n,c,a)})(o,s,t,i,l):null!==i?(null!==e.t&&(o.textContent=""),w(o,null,t,i,0,i.length-1)):null!==s&&m(s,0,s.length-1),n&&"svg"===c&&(n=!1)):e.t!==r&&(o.data=r)},j=(e,n)=>{n&&!e.$&&n["s-p"]&&n["s-p"].push(new Promise((n=>e.$=n)))},S=(e,n)=>{if(e.u|=16,!(4&e.u))return j(e,e.m),ne((()=>k(e,n)));e.u|=512},k=(e,n)=>{const t=e.j;return O(void 0,(()=>x(e,t,n)))},O=(e,n)=>M(e)?e.then(n):n(),M=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,x=async(e,n,t)=>{var o;const s=e.$hostElement$,i=s["s-rc"];t&&(e=>{const n=e.S;((e,n)=>{var t;const o=d(n),s=z.get(o);if(e=11===e.nodeType?e:D,s)if("string"==typeof s){let i,r=a.get(e=e.head||e);if(r||a.set(e,r=new Set),!r.has(o)){{i=D.createElement("style"),i.innerHTML=s;const n=null!==(t=G.k)&&void 0!==t?t:c(D);null!=n&&i.setAttribute("nonce",n),e.insertBefore(i,e.querySelector("link"))}4&n.u&&(i.innerHTML+=l),r&&r.add(o)}}else e.adoptedStyleSheets.includes(s)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,s])})(e.$hostElement$.getRootNode(),n)})(e);C(e,n,s,t),i&&(i.map((e=>e())),s["s-rc"]=void 0);{const n=null!==(o=s["s-p"])&&void 0!==o?o:[],t=()=>P(e);0===n.length?t():(Promise.all(n).then(t),e.u|=4,n.length=0)}},C=(n,t,l,o)=>{try{t=t.render(),n.u&=-17,n.u|=2,((n,t,l=!1)=>{const o=n.$hostElement$,s=n.O||u(null,null),i=(e=>e&&e.v===f)(t)?t:r(null,null,t);if(e=o.tagName,l&&i.l)for(const e of Object.keys(i.l))o.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(i.l[e]=o[e]);i.v=null,i.u|=4,n.O=i,i.h=s.h=o,g(s,i,l)})(n,t,o)}catch(e){H(e,n.$hostElement$)}return null},P=e=>{const n=e.$hostElement$,t=e.m;64&e.u||(e.u|=64,E(n),e.M(n),t||A()),e.$&&(e.$(),e.$=void 0),512&e.u&&ee((()=>S(e,!1))),e.u&=-517},A=()=>{E(D.documentElement),ee((()=>(e=>{const n=G.ce("appload",{detail:{namespace:"proto-ikons-wc"}});return e.dispatchEvent(n),n})(B)))},E=e=>e.classList.add("hydrated"),N=(e,n,t)=>{var l;const o=e.prototype;if(n.C){const s=Object.entries(n.C);if(s.map((([e,[l]])=>{(31&l||2&t&&32&l)&&Object.defineProperty(o,e,{get(){return((e,n)=>R(this).P.get(n))(0,e)},set(t){((e,n,t,l)=>{const o=R(e),s=o.P.get(n),c=o.u,r=o.j;t=((e,n)=>null==e||i(e)?e:4&n?"false"!==e&&(""===e||!!e):2&n?parseFloat(e):1&n?e+"":e)(t,l.C[n][0]),8&c&&void 0!==s||t===s||Number.isNaN(s)&&Number.isNaN(t)||(o.P.set(n,t),r&&2==(18&c)&&S(o,!1))})(this,e,t,n)},configurable:!0,enumerable:!0})})),1&t){const t=new Map;o.attributeChangedCallback=function(e,l,s){G.jmp((()=>{var i;const c=t.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(o.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const t=R(this),o=null==t?void 0:t.u;if(o&&!(8&o)&&128&o&&s!==l){const o=t.j,c=null===(i=n.A)||void 0===i?void 0:i[e];null==c||c.forEach((n=>{null!=o[n]&&o[n].call(o,s,l,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!==(l=n.A)&&void 0!==l?l:{}),...s.filter((([e,n])=>15&n[0])).map((([e,n])=>{const l=n[1]||e;return t.set(l,e),l}))]))}}return e},T=(e,n={})=>{var t;const o=[],s=n.exclude||[],i=B.customElements,r=D.head,u=r.querySelector("meta[charset]"),f=D.createElement("style"),a=[];let y,v=!0;Object.assign(G,n),G.N=new URL(n.resourcesUrl||"./",D.baseURI).href;let h=!1;if(e.map((e=>{e[1].map((n=>{const t={u:n[0],p:n[1],C:n[2],T:n[3]};4&t.u&&(h=!0),t.C=n[2];const l=t.p,c=class extends HTMLElement{constructor(e){super(e),W(e=this,t)}connectedCallback(){y&&(clearTimeout(y),y=null),v?a.push(this):G.jmp((()=>(e=>{if(0==(1&G.u)){const n=R(e),t=n.S,l=()=>{};if(1&n.u)(null==n?void 0:n.j)||(null==n?void 0:n.F)&&n.F.then((()=>{}));else{n.u|=1;{let t=e;for(;t=t.parentNode||t.host;)if(t["s-p"]){j(n,n.m=t);break}}t.C&&Object.entries(t.C).map((([n,[t]])=>{if(31&t&&e.hasOwnProperty(n)){const t=e[n];delete e[n],e[n]=t}})),(async(e,n,t)=>{let l;if(0==(32&n.u)){n.u|=32;{if(l=_(t),l.then){const e=()=>{};l=await l,e()}l.isProxied||(N(l,t,2),l.isProxied=!0);const e=()=>{};n.u|=8;try{new l(n)}catch(e){H(e)}n.u&=-9,e()}if(l.style){let e=l.style;const n=d(t);if(!z.has(n)){const l=()=>{};((e,n,t)=>{let l=z.get(e);J&&t?(l=l||new CSSStyleSheet,"string"==typeof l?l=n:l.replaceSync(n)):l=n,z.set(e,l)})(n,e,!!(1&t.u)),l()}}}const o=n.m,s=()=>S(n,!0);o&&o["s-rc"]?o["s-rc"].push(s):s()})(0,n,t)}l()}})(this)))}disconnectedCallback(){G.jmp((()=>(async()=>{if(0==(1&G.u)){const e=R(this);(null==e?void 0:e.j)||(null==e?void 0:e.F)&&e.F.then((()=>{}))}})()))}componentOnReady(){return R(this).F}};t.L=e[0],s.includes(l)||i.get(l)||(o.push(l),i.define(l,N(c,t,1)))}))})),o.length>0&&(h&&(f.innerHTML+=l),f.innerHTML+=o+"{visibility:hidden}.hydrated{visibility:inherit}",f.innerHTML.length)){f.setAttribute("data-styles","");const e=null!==(t=G.k)&&void 0!==t?t:c(D);null!=e&&f.setAttribute("nonce",e),r.insertBefore(f,u?u.nextSibling:r.firstChild)}v=!1,a.length?a.map((e=>e.connectedCallback())):G.jmp((()=>y=setTimeout(A,30)))},F=e=>G.k=e,L=new WeakMap,R=e=>L.get(e),U=(e,n)=>L.set(n.j=e,n),W=(e,n)=>{const t={u:0,$hostElement$:e,S:n,P:new Map};return t.F=new Promise((e=>t.M=e)),e["s-p"]=[],e["s-rc"]=[],L.set(e,t)},q=(e,n)=>n in e,H=(e,n)=>(0,console.error)(e,n),V=new Map,_=e=>{const n=e.p.replace(/-/g,"_"),t=e.L,l=V.get(t);return l?l[n]:import(`./${t}.entry.js`).then((e=>(V.set(t,e),e[n])),H)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/},z=new Map,B="undefined"!=typeof window?window:{},D=B.document||{head:{}},G={u:0,N:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,n,t,l)=>e.addEventListener(n,t,l),rel:(e,n,t,l)=>e.removeEventListener(n,t,l),ce:(e,n)=>new CustomEvent(e,n)},I=e=>Promise.resolve(e),J=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),K=[],Q=[],X=(e,n)=>l=>{e.push(l),t||(t=!0,n&&4&G.u?ee(Z):G.raf(Z))},Y=e=>{for(let n=0;n<e.length;n++)try{e[n](performance.now())}catch(e){H(e)}e.length=0},Z=()=>{Y(K),Y(Q),(t=K.length>0)&&G.raf(Z)},ee=e=>I().then(e),ne=X(Q,!0);export{T as b,r as h,I as p,U as r,F as s}