proto-table-wc 0.0.478 → 0.0.480

package/dist/cjs/demo-table_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7fae5439.js');
+const index = require('./index-7e385ad7.js');
 
 const demoTableCss = ".detailWrapper{font-weight:100;font-size:13px;display:flex;flex-direction:column;justify-items:start;padding:5px;padding-left:30px}";
 const DemoTableStyle0 = demoTableCss;
@@ -75,7 +75,7 @@ const DemoTable = class {
         table.details = this.renderDetails;
     }
     render() {
-        return index.h("proto-table", { ref: el => (this.table = el) });
+        return index.h("proto-table", { key: 'aa5f26287b85073afb5bbd3c133f9ad388fc8138', ref: el => (this.table = el) });
     }
 };
 DemoTable.style = DemoTableStyle0;
@@ -162,7 +162,7 @@ const ProtoTable = class {
     }
     render() {
         const items = this.data || [];
-        return (index.h("div", { class: "table" }, this.header(), items.map((item, index) => this.row(item, index))));
+        return (index.h("div", { key: 'c30742fde0de976c553234528a7bfb6ce10d3ef5', class: "table" }, this.header(), items.map((item, index) => this.row(item, index))));
     }
 };
 ProtoTable.style = ProtoTableStyle0;

package/dist/cjs/{index-7fae5439.js → index-7e385ad7.js}

@@ -106,6 +106,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 = [];
@@ -133,6 +134,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;
@@ -151,6 +155,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     return vnode;
 };
 /**
@@ -172,6 +179,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     return vnode;
 };
 const Host = {};
@@ -339,6 +349,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 if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
@@ -657,6 +669,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];
@@ -664,6 +678,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
@@ -730,7 +745,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
@@ -780,6 +829,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;
@@ -1530,25 +1587,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;
@@ -1573,8 +1634,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/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7fae5439.js');
+const index = require('./index-7e385ad7.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/cjs/proto-table-wc.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7fae5439.js');
+const index = require('./index-7e385ad7.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 = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('proto-table-wc.cjs.js', document.baseURI).href));

package/dist/collection/collection-manifest.json

@@ -5,7 +5,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.11.0",
+    "version": "4.12.1",
     "typescriptVersion": "5.3.3"
   },
   "collections": [],

package/dist/collection/components/demo-table/demo-table.js

@@ -66,7 +66,7 @@ export class DemoTable {
         table.details = this.renderDetails;
     }
     render() {
-        return h("proto-table", { ref: el => (this.table = el) });
+        return h("proto-table", { key: 'aa5f26287b85073afb5bbd3c133f9ad388fc8138', ref: el => (this.table = el) });
     }
     static get is() { return "demo-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/proto-table/proto-table.js

@@ -68,7 +68,7 @@ export class ProtoTable {
     }
     render() {
         const items = this.data || [];
-        return (h("div", { class: "table" }, this.header(), items.map((item, index) => this.row(item, index))));
+        return (h("div", { key: 'c30742fde0de976c553234528a7bfb6ce10d3ef5', class: "table" }, this.header(), items.map((item, index) => this.row(item, index))));
     }
     static get is() { return "proto-table"; }
     static get originalStyleUrls() {

package/dist/esm/demo-table_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-d7dbc3b8.js';
+import { r as registerInstance, h } from './index-3c4befcf.js';
 
 const demoTableCss = ".detailWrapper{font-weight:100;font-size:13px;display:flex;flex-direction:column;justify-items:start;padding:5px;padding-left:30px}";
 const DemoTableStyle0 = demoTableCss;
@@ -71,7 +71,7 @@ const DemoTable = class {
         table.details = this.renderDetails;
     }
     render() {
-        return h("proto-table", { ref: el => (this.table = el) });
+        return h("proto-table", { key: 'aa5f26287b85073afb5bbd3c133f9ad388fc8138', ref: el => (this.table = el) });
     }
 };
 DemoTable.style = DemoTableStyle0;
@@ -158,7 +158,7 @@ const ProtoTable = class {
     }
     render() {
         const items = this.data || [];
-        return (h("div", { class: "table" }, this.header(), items.map((item, index) => this.row(item, index))));
+        return (h("div", { key: 'c30742fde0de976c553234528a7bfb6ce10d3ef5', class: "table" }, this.header(), items.map((item, index) => this.row(item, index))));
     }
 };
 ProtoTable.style = ProtoTableStyle0;

package/dist/esm/{index-d7dbc3b8.js → index-3c4befcf.js}

@@ -84,6 +84,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 = [];
@@ -111,6 +112,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;
@@ -129,6 +133,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     return vnode;
 };
 /**
@@ -150,6 +157,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     return vnode;
 };
 const Host = {};
@@ -317,6 +327,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 if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
@@ -635,6 +647,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];
@@ -642,6 +656,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
@@ -708,7 +723,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
@@ -758,6 +807,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;
@@ -1508,25 +1565,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;
@@ -1551,8 +1612,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-d7dbc3b8.js';
-export { s as setNonce } from './index-d7dbc3b8.js';
+import { b as bootstrapLazy } from './index-3c4befcf.js';
+export { s as setNonce } from './index-3c4befcf.js';
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

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

@@ -1,8 +1,8 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-d7dbc3b8.js';
-export { s as setNonce } from './index-d7dbc3b8.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-3c4befcf.js';
+export { s as setNonce } from './index-3c4befcf.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-table-wc/p-a740337c.entry.js

@@ -0,0 +1 @@
+import{r as e,h as t}from"./p-f419fd84.js";const r=class{constructor(r){e(this,r),this.fields=[{label:"Date",prop:"date"},{label:"List Price",prop:"price"},{label:"% of Market",prop:"market"},{label:"ProfitTime Score",prop:"score"}],this.items=[],this.table=void 0,this.renderDetails=e=>{const{tags:r=[]}=e;return t("div",{class:"detailWrapper"},t("span",null,r.length," details..."),t("ul",null,r.map((e=>t("li",null,e)))))}}componentWillLoad(){this.items=[{date:"08/30/2020",price:"$24,000",market:"98%",score:"No Score",tags:["one","two","three"]},{date:"08/31/2020",price:"$24,000",market:"99%",score:"No Score",tags:["uno","duo"]},{date:"09/01/2020",price:"$27,000",market:"102%",score:"Platinum"},{date:"09/02/2020",price:"$27,423",market:"104%",score:"Platinum",tags:["dog","cat","fish","hamster"]},{date:"09/03/2020",price:"$27,521",market:"106%",score:"Platinum",tags:["4wd","sports"]},{date:"09/04/2020",price:"$27,687",market:"107%",score:"Platinum",tags:["leather","chrome"]}]}componentDidLoad(){const{table:e,items:t,fields:r}=this;e.data=t,e.fields=r,e.details=this.renderDetails}render(){return t("proto-table",{key:"aa5f26287b85073afb5bbd3c133f9ad388fc8138",ref:e=>this.table=e})}};r.style=".detailWrapper{font-weight:100;font-size:13px;display:flex;flex-direction:column;justify-items:start;padding:5px;padding-left:30px}";const s={down:"M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z",up:"M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z",left:"M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z",right:"M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z",more:"M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z","arrow-up":"M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z","arrow-down":"M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z"},i={right:"show",down:"hide","arrow-up":"sort","arrow-down":"sort"},l=class{constructor(r){e(this,r),this.protoIcon=(e,r,l=24)=>{const o=s[e];return t("svg",{width:l,height:l,viewBox:"0 0 24 24",role:"img","aria-labelledby":"title"},t("title",null,(e=>i[e])(e)),t("g",{fill:r},t("path",{d:o})),t("path",{d:"M0 0h24v24H0z",fill:"none"}))},this.handleCellClick=(e,t)=>()=>{0===e&&(this.expanded=this.expanded===t?void 0:t)},this.handleSortClick=e=>()=>{this.sort===e?2===this.clicks?(this.clicks=0,this.sort=void 0):this.clicks=this.clicks+1:(this.sort=e,this.clicks=1)},this.iconFor=e=>this.sort===e&&2===this.clicks?"arrow-up":"arrow-down",this.header=()=>{const{fields:e,iconFor:r,protoIcon:s}=this;return t("div",{class:"header"},e.map((({label:e},i)=>{const l=i===this.sort?"headerCell sort":"headerCell",o=r(i);return t("div",{class:l,onClick:this.handleSortClick(i)},s(o),t("span",null,e))})))},this.row=(e,r)=>{const{fields:s,protoIcon:i}=this;return t("div",{class:"rowContainer"},t("div",{class:this.expanded===r?"row expanded":"row"},s.map((({prop:s},l)=>t("div",{class:l===this.sort?"cell sort":"cell",onClick:this.handleCellClick(l,r)},i(0===l&&this.details?this.expanded===r?"down":"right":"pad"),e[s])))),this.details&&this.expanded===r&&this.details(e))},this.data=[],this.details=void 0,this.fields=[],this.expanded=void 0,this.sort=void 0,this.clicks=0}render(){const e=this.data||[];return t("div",{key:"c30742fde0de976c553234528a7bfb6ce10d3ef5",class:"table"},this.header(),e.map(((e,t)=>this.row(e,t))))}};l.style=".table{font-weight:400;font-size:13px;display:flex;flex-direction:column;width:100%;border:1px solid var(--clrs-navy);border-radius:2px}.table svg{fill:var(--clrs-navy)}.header{display:flex}.headerCell{flex-basis:100%;display:flex;align-items:center;justify-items:start;border-right:1px solid var(--clrs-navy);border-bottom:1px solid var(--clrs-navy);padding:5px;cursor:pointer}.headerCell svg g{display:none}.headerCell.sort svg g{display:inline}.headerCell:hover svg g{display:inline}.headerCell:hover{background-color:var(--clrs-silver)}.headerCell:last-child{border-right:none}.cell{flex-basis:100%;display:flex;align-items:center;justify-items:start;padding:5px}.cell:first-child svg{cursor:pointer}.sort{background-color:var(--cx-column-sort)}.row{display:flex;justify-items:stretch;width:100%}.row.expanded{background-color:var(--cx-row-expanded)}.row.expanded svg{fill:var(--clrs-red)}.row:hover{background-color:var(--cx-row-hover)}";export{r as demo_table,l as proto_table}

package/dist/proto-table-wc/p-f419fd84.js

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

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

@@ -1 +1 @@
-import{p as e,b as t}from"./p-e08124f1.js";export{s as setNonce}from"./p-e08124f1.js";(()=>{const t=import.meta.url,s={};return""!==t&&(s.resourcesUrl=new URL(".",t).href),e(s)})().then((e=>t([["p-f9888c13",[[1,"demo-table"],[0,"proto-table",{data:[16],details:[8],fields:[16],expanded:[32],sort:[32],clicks:[32]}]]]],e)));
+import{p as e,b as t}from"./p-f419fd84.js";export{s as setNonce}from"./p-f419fd84.js";(()=>{const t=import.meta.url,s={};return""!==t&&(s.resourcesUrl=new URL(".",t).href),e(s)})().then((e=>t([["p-a740337c",[[1,"demo-table"],[0,"proto-table",{data:[16],details:[8],fields:[16],expanded:[32],sort:[32],clicks:[32]}]]]],e)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proto-table-wc",
-  "version": "0.0.478",
+  "version": "0.0.480",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -25,12 +25,12 @@
     "format": "prettier --write src"
   },
   "dependencies": {
-    "@stencil/core": "4.11.0"
+    "@stencil/core": "4.12.1"
   },
   "devDependencies": {
     "cspell": "8.3.2",
     "eslint": "8.56.0",
-    "prettier": "3.2.4",
+    "prettier": "3.2.5",
     "tslint": "6.1.3",
     "typescript": "5.3.3"
   },

package/dist/proto-table-wc/p-e08124f1.js

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

package/dist/proto-table-wc/p-f9888c13.entry.js

@@ -1 +0,0 @@
-import{r as t,h as e}from"./p-e08124f1.js";const r=class{constructor(r){t(this,r),this.fields=[{label:"Date",prop:"date"},{label:"List Price",prop:"price"},{label:"% of Market",prop:"market"},{label:"ProfitTime Score",prop:"score"}],this.items=[],this.table=void 0,this.renderDetails=t=>{const{tags:r=[]}=t;return e("div",{class:"detailWrapper"},e("span",null,r.length," details..."),e("ul",null,r.map((t=>e("li",null,t)))))}}componentWillLoad(){this.items=[{date:"08/30/2020",price:"$24,000",market:"98%",score:"No Score",tags:["one","two","three"]},{date:"08/31/2020",price:"$24,000",market:"99%",score:"No Score",tags:["uno","duo"]},{date:"09/01/2020",price:"$27,000",market:"102%",score:"Platinum"},{date:"09/02/2020",price:"$27,423",market:"104%",score:"Platinum",tags:["dog","cat","fish","hamster"]},{date:"09/03/2020",price:"$27,521",market:"106%",score:"Platinum",tags:["4wd","sports"]},{date:"09/04/2020",price:"$27,687",market:"107%",score:"Platinum",tags:["leather","chrome"]}]}componentDidLoad(){const{table:t,items:e,fields:r}=this;t.data=e,t.fields=r,t.details=this.renderDetails}render(){return e("proto-table",{ref:t=>this.table=t})}};r.style=".detailWrapper{font-weight:100;font-size:13px;display:flex;flex-direction:column;justify-items:start;padding:5px;padding-left:30px}";const s={down:"M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z",up:"M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z",left:"M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z",right:"M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z",more:"M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z","arrow-up":"M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z","arrow-down":"M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z"},i={right:"show",down:"hide","arrow-up":"sort","arrow-down":"sort"},l=class{constructor(r){t(this,r),this.protoIcon=(t,r,l=24)=>{const o=s[t];return e("svg",{width:l,height:l,viewBox:"0 0 24 24",role:"img","aria-labelledby":"title"},e("title",null,(t=>i[t])(t)),e("g",{fill:r},e("path",{d:o})),e("path",{d:"M0 0h24v24H0z",fill:"none"}))},this.handleCellClick=(t,e)=>()=>{0===t&&(this.expanded=this.expanded===e?void 0:e)},this.handleSortClick=t=>()=>{this.sort===t?2===this.clicks?(this.clicks=0,this.sort=void 0):this.clicks=this.clicks+1:(this.sort=t,this.clicks=1)},this.iconFor=t=>this.sort===t&&2===this.clicks?"arrow-up":"arrow-down",this.header=()=>{const{fields:t,iconFor:r,protoIcon:s}=this;return e("div",{class:"header"},t.map((({label:t},i)=>{const l=i===this.sort?"headerCell sort":"headerCell",o=r(i);return e("div",{class:l,onClick:this.handleSortClick(i)},s(o),e("span",null,t))})))},this.row=(t,r)=>{const{fields:s,protoIcon:i}=this;return e("div",{class:"rowContainer"},e("div",{class:this.expanded===r?"row expanded":"row"},s.map((({prop:s},l)=>e("div",{class:l===this.sort?"cell sort":"cell",onClick:this.handleCellClick(l,r)},i(0===l&&this.details?this.expanded===r?"down":"right":"pad"),t[s])))),this.details&&this.expanded===r&&this.details(t))},this.data=[],this.details=void 0,this.fields=[],this.expanded=void 0,this.sort=void 0,this.clicks=0}render(){const t=this.data||[];return e("div",{class:"table"},this.header(),t.map(((t,e)=>this.row(t,e))))}};l.style=".table{font-weight:400;font-size:13px;display:flex;flex-direction:column;width:100%;border:1px solid var(--clrs-navy);border-radius:2px}.table svg{fill:var(--clrs-navy)}.header{display:flex}.headerCell{flex-basis:100%;display:flex;align-items:center;justify-items:start;border-right:1px solid var(--clrs-navy);border-bottom:1px solid var(--clrs-navy);padding:5px;cursor:pointer}.headerCell svg g{display:none}.headerCell.sort svg g{display:inline}.headerCell:hover svg g{display:inline}.headerCell:hover{background-color:var(--clrs-silver)}.headerCell:last-child{border-right:none}.cell{flex-basis:100%;display:flex;align-items:center;justify-items:start;padding:5px}.cell:first-child svg{cursor:pointer}.sort{background-color:var(--cx-column-sort)}.row{display:flex;justify-items:stretch;width:100%}.row.expanded{background-color:var(--cx-row-expanded)}.row.expanded svg{fill:var(--clrs-red)}.row:hover{background-color:var(--cx-row-hover)}";export{r as demo_table,l as proto_table}