proto-table-wc 0.0.457 → 0.0.459

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

@@ -1,163 +1,163 @@
-import { r as registerInstance, h } from './index-4a0356a5.js';
+import { r as registerInstance, h } from './index-0e2d85f3.js';
 
 const demoTableCss = ".detailWrapper{font-weight:100;font-size:13px;display:flex;flex-direction:column;justify-items:start;padding:5px;padding-left:30px}";
 
 const DemoTable = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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 = undefined;
-    this.renderDetails = item => {
-      const { tags = [] } = item;
-      return (h("div", { class: "detailWrapper" }, h("span", null, tags.length, " details..."), h("ul", null, tags.map(tag => (h("li", null, tag))))));
-    };
-  }
-  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, items, fields } = this;
-    table.data = items;
-    table.fields = fields;
-    table.details = this.renderDetails;
-  }
-  render() {
-    return h("proto-table", { ref: el => (this.table = el) });
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 = undefined;
+        this.renderDetails = item => {
+            const { tags = [] } = item;
+            return (h("div", { class: "detailWrapper" }, h("span", null, tags.length, " details..."), h("ul", null, tags.map(tag => (h("li", null, tag))))));
+        };
+    }
+    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, items, fields } = this;
+        table.data = items;
+        table.fields = fields;
+        table.details = this.renderDetails;
+    }
+    render() {
+        return h("proto-table", { ref: el => (this.table = el) });
+    }
 };
 DemoTable.style = demoTableCss;
 
 const iconPaths = {
-  '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',
+    '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',
 };
 
 const protoTableCss = ".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)}";
 
 const iconAliases = {
-  'right': 'show',
-  'down': 'hide',
-  'arrow-up': 'sort',
-  'arrow-down': 'sort',
+    'right': 'show',
+    'down': 'hide',
+    'arrow-up': 'sort',
+    'arrow-down': 'sort',
 };
 const aliasFor = name => {
-  return iconAliases[name];
+    return iconAliases[name];
 };
 const ProtoTable = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.protoIcon = (name, hex = undefined, size = 24) => {
-      const path = iconPaths[name];
-      return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-labelledby": "title" }, h("title", null, aliasFor(name)), h("g", { fill: hex }, h("path", { d: path })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
-    };
-    this.handleCellClick = (index, row) => {
-      return () => {
-        if (index === 0) {
-          this.expanded = this.expanded === row ? undefined : row;
-        }
-      };
-    };
-    this.handleSortClick = index => {
-      // NOTE:  small state machine for dealing with sorting...
-      return () => {
-        if (this.sort === index) {
-          if (this.clicks === 2) {
-            this.clicks = 0;
-            this.sort = undefined;
-          }
-          else {
-            this.clicks = this.clicks + 1;
-          }
-        }
-        else {
-          this.sort = index;
-          this.clicks = 1;
-        }
-      };
-    };
-    this.iconFor = column => {
-      return this.sort === column && this.clicks === 2 ? 'arrow-up' : 'arrow-down';
-    };
-    this.header = () => {
-      const { fields, iconFor, protoIcon } = this;
-      return (h("div", { class: "header" }, fields.map(({ label }, index) => {
-        const cellClass = index === this.sort ? 'headerCell sort' : 'headerCell';
-        const ikon = iconFor(index);
-        return (h("div", { class: cellClass, onClick: this.handleSortClick(index) }, protoIcon(ikon), h("span", null, label)));
-      })));
-    };
-    this.row = (data, row) => {
-      const { fields, protoIcon } = this;
-      const rowClass = this.expanded === row ? 'row expanded' : 'row';
-      return (h("div", { class: "rowContainer" }, h("div", { class: rowClass }, fields.map(({ prop }, index) => {
-        const cellClass = index === this.sort ? 'cell sort' : 'cell';
-        return (h("div", { class: cellClass, onClick: this.handleCellClick(index, row) }, index === 0 && this.details ? protoIcon(this.expanded === row ? 'down' : 'right') : protoIcon('pad'), data[prop]));
-      })), this.details && this.expanded === row && this.details(data)));
-    };
-    this.data = [];
-    this.details = undefined;
-    this.fields = [];
-    this.expanded = undefined;
-    this.sort = undefined;
-    this.clicks = 0;
-  }
-  render() {
-    const items = this.data || [];
-    return (h("div", { class: "table" }, this.header(), items.map((item, index) => this.row(item, index))));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.protoIcon = (name, hex = undefined, size = 24) => {
+            const path = iconPaths[name];
+            return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-labelledby": "title" }, h("title", null, aliasFor(name)), h("g", { fill: hex }, h("path", { d: path })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+        };
+        this.handleCellClick = (index, row) => {
+            return () => {
+                if (index === 0) {
+                    this.expanded = this.expanded === row ? undefined : row;
+                }
+            };
+        };
+        this.handleSortClick = index => {
+            // NOTE:  small state machine for dealing with sorting...
+            return () => {
+                if (this.sort === index) {
+                    if (this.clicks === 2) {
+                        this.clicks = 0;
+                        this.sort = undefined;
+                    }
+                    else {
+                        this.clicks = this.clicks + 1;
+                    }
+                }
+                else {
+                    this.sort = index;
+                    this.clicks = 1;
+                }
+            };
+        };
+        this.iconFor = column => {
+            return this.sort === column && this.clicks === 2 ? 'arrow-up' : 'arrow-down';
+        };
+        this.header = () => {
+            const { fields, iconFor, protoIcon } = this;
+            return (h("div", { class: "header" }, fields.map(({ label }, index) => {
+                const cellClass = index === this.sort ? 'headerCell sort' : 'headerCell';
+                const ikon = iconFor(index);
+                return (h("div", { class: cellClass, onClick: this.handleSortClick(index) }, protoIcon(ikon), h("span", null, label)));
+            })));
+        };
+        this.row = (data, row) => {
+            const { fields, protoIcon } = this;
+            const rowClass = this.expanded === row ? 'row expanded' : 'row';
+            return (h("div", { class: "rowContainer" }, h("div", { class: rowClass }, fields.map(({ prop }, index) => {
+                const cellClass = index === this.sort ? 'cell sort' : 'cell';
+                return (h("div", { class: cellClass, onClick: this.handleCellClick(index, row) }, index === 0 && this.details ? protoIcon(this.expanded === row ? 'down' : 'right') : protoIcon('pad'), data[prop]));
+            })), this.details && this.expanded === row && this.details(data)));
+        };
+        this.data = [];
+        this.details = undefined;
+        this.fields = [];
+        this.expanded = undefined;
+        this.sort = undefined;
+        this.clicks = 0;
+    }
+    render() {
+        const items = this.data || [];
+        return (h("div", { class: "table" }, this.header(), items.map((item, index) => this.row(item, index))));
+    }
 };
 ProtoTable.style = protoTableCss;
 

package/dist/esm/{index-4a0356a5.js → index-0e2d85f3.js}

@@ -27,6 +27,13 @@ const uniqueTime = (key, measureText) => {
     }
 };
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+/**
+ * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
+ *
+ * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
+ * support as of Stencil v4.
+ */
+const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
 /**
  * Default style mode id
  */
@@ -241,6 +248,10 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
                     }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
+                // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
+                if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                    styleElm.innerHTML += SLOT_FB_CSS;
+                }
                 if (appliedStyles) {
                     appliedStyles.add(scopeId);
                 }
@@ -378,7 +389,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                         elm[memberName] = newValue;
                     }
                 }
-                catch (e) { }
+                catch (e) {
+                    /**
+                     * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
+                     */
+                }
             }
             if (newValue == null || newValue === false) {
                 if (newValue !== false || elm.getAttribute(memberName) === '') {
@@ -397,6 +412,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     }
 };
 const parseClassListRegex = /\s/;
+/**
+ * Parsed a string of classnames into an array
+ * @param value className string, e.g. "foo bar baz"
+ * @returns list of classes, e.g. ["foo", "bar", "baz"]
+ */
 const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
 const CAPTURE_EVENT_SUFFIX = 'Capture';
 const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');
@@ -1145,10 +1165,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     var _a;
+    const prototype = Cstr.prototype;
     if (cmpMeta.$members$) {
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
-        const prototype = Cstr.prototype;
         members.map(([memberName, [memberFlags]]) => {
             if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
                     ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
@@ -1171,6 +1191,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
             const attrNameToPropName = new Map();
             prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
                 plt.jmp(() => {
+                    var _a;
                     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.
@@ -1226,11 +1247,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // 1. The instance is ready
                         // 2. The watchers are ready
                         // 3. The value has changed
-                        if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                        if (flags &&
+                            !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
                             flags & 128 /* HOST_FLAGS.isWatchReady */ &&
                             newValue !== oldValue) {
                             const instance = hostRef.$lazyInstance$ ;
-                            const entry = cmpMeta.$watchers$[attrName];
+                            const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
                             entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
                                 if (instance[callbackName] != null) {
                                     instance[callbackName].call(instance, newValue, oldValue, attrName);
@@ -1410,12 +1432,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     const customElements = win.customElements;
     const head = doc.head;
     const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
-    const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
+    const dataStyles = /*@__PURE__*/ doc.createElement('style');
     const deferredConnectedCallbacks = [];
     let appLoadFallback;
     let isBootstrapping = true;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
+    let hasSlotRelocation = false;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
             const cmpMeta = {
@@ -1424,6 +1447,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 $members$: compactMeta[2],
                 $listeners$: compactMeta[3],
             };
+            // Check if we are using slots outside the shadow DOM in this component.
+            // We'll use this information later to add styles for `slot-fb` elements
+            if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                hasSlotRelocation = true;
+            }
             {
                 cmpMeta.$members$ = compactMeta[2];
             }
@@ -1474,15 +1502,23 @@ 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
     {
-        visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
-        visibilityStyle.setAttribute('data-styles', '');
+        dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
+    }
+    // If we have styles, add them to the DOM
+    if (dataStyles.innerHTML.length) {
+        dataStyles.setAttribute('data-styles', '');
+        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
         // Apply CSP nonce to the style tag if it exists
         const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
         if (nonce != null) {
-            visibilityStyle.setAttribute('nonce', nonce);
+            dataStyles.setAttribute('nonce', nonce);
         }
-        head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
@@ -1634,7 +1670,7 @@ const flush = () => {
         }
     }
 };
-const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
+const nextTick = (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { b as bootstrapLazy } from './index-4a0356a5.js';
-export { s as setNonce } from './index-4a0356a5.js';
+import { b as bootstrapLazy } from './index-0e2d85f3.js';
+export { s as setNonce } from './index-0e2d85f3.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-4a0356a5.js';
-export { s as setNonce } from './index-4a0356a5.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-0e2d85f3.js';
+export { s as setNonce } from './index-0e2d85f3.js';
 
 /*
- Stencil Client Patch Browser v4.7.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.8.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;

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

@@ -0,0 +1,2 @@
+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=(t,l,o)=>{const s=l.o[o];let i,c,r=0;if(null!==s.t)i=s.p=K.createTextNode(s.t);else{if(e||(e="svg"===s.u),i=s.p=K.createElementNS(e?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",s.u),e&&"foreignObject"===s.u&&(e=!1),m(null,s,e),null!=n&&i["s-si"]!==n&&i.classList.add(i["s-si"]=n),s.o)for(r=0;r<s.o.length;++r)c=w(t,s,r),c&&i.appendChild(c);"svg"===s.u?e=!1:"foreignObject"===i.tagName&&(e=!0)}return i},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)=>{const l=t.p=n.p,o=n.o,s=t.o,i=t.u,c=t.t;null===c?(e="svg"===i||"foreignObject"!==i&&e,m(n,t,e),null!==o&&null!==s?((n,t,e,l)=>{let o,s=0,i=0,c=t.length-1,r=t[0],u=t[c],a=l.length-1,f=l[0],d=l[a];for(;s<=c&&i<=a;)null==r?r=t[++s]:null==u?u=t[--c]:null==f?f=l[++i]:null==d?d=l[--a]:j(r,f)?(S(r,f),r=t[++s],f=l[++i]):j(u,d)?(S(u,d),u=t[--c],d=l[--a]):j(r,d)?(S(r,d),n.insertBefore(r.p,u.p.nextSibling),r=t[++s],d=l[--a]):j(u,f)?(S(u,f),n.insertBefore(u.p,r.p),u=t[--c],f=l[++i]):(o=w(t&&t[i],e,i),f=l[++i],o&&r.p.parentNode.insertBefore(o,r.p));s>c?b(n,null==l[a+1]?null:l[a+1].p,e,l,i,a):i>a&&g(t,s,c)})(l,o,t,s):null!==s?(null!==n.t&&(l.textContent=""),b(l,null,t,s,0,s.length-1)):null!==o&&g(o,0,o.length-1),e&&"svg"===i&&(e=!1)):n.t!==c&&(l.data=c)},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)})(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",""),r.insertBefore(a,u?u.nextSibling:r.firstChild);const n=null!==(e=Q.S)&&void 0!==e?e:c(K);null!=n&&a.setAttribute("nonce",n)}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-dcfb580f.entry.js → p-e927935b.entry.js}

@@ -1 +1 @@
-import{r as t,h as e}from"./p-0f6e26e3.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}
+import{r as t,h as e}from"./p-e4f313cd.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}

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

@@ -1 +1 @@
-import{p as e,b as t}from"./p-0f6e26e3.js";export{s as setNonce}from"./p-0f6e26e3.js";(()=>{const t=import.meta.url,s={};return""!==t&&(s.resourcesUrl=new URL(".",t).href),e(s)})().then((e=>t([["p-dcfb580f",[[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-e4f313cd.js";export{s as setNonce}from"./p-e4f313cd.js";(()=>{const t=import.meta.url,s={};return""!==t&&(s.resourcesUrl=new URL(".",t).href),e(s)})().then((e=>t([["p-e927935b",[[1,"demo-table"],[0,"proto-table",{data:[16],details:[8],fields:[16],expanded:[32],sort:[32],clicks:[32]}]]]],e)));

package/dist/types/components/demo-table/demo-table.d.ts

@@ -1,12 +1,12 @@
 export declare class DemoTable {
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  fields: {
-    label: string;
-    prop: string;
-  }[];
-  items: any[];
-  table: any;
-  renderDetails: (item: any) => any;
-  render(): any;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    fields: {
+        label: string;
+        prop: string;
+    }[];
+    items: any[];
+    table: any;
+    renderDetails: (item: any) => any;
+    render(): any;
 }

package/dist/types/components/proto-table/iconPaths.d.ts

@@ -1,11 +1,11 @@
 declare const iconPaths: {
-  down: string;
-  up: string;
-  left: string;
-  right: string;
-  more: string;
-  'arrow-up': string;
-  'arrow-down': string;
+    down: string;
+    up: string;
+    left: string;
+    right: string;
+    more: string;
+    'arrow-up': string;
+    'arrow-down': string;
 };
 export { iconPaths };
 export default iconPaths;

package/dist/types/components/proto-table/proto-table.d.ts

@@ -1,15 +1,15 @@
 export declare class ProtoTable {
-  data: any[];
-  details: any;
-  fields: any[];
-  expanded: any;
-  sort: any;
-  clicks: number;
-  protoIcon: (name: any, hex?: any, size?: number) => any;
-  handleCellClick: (index: any, row: any) => () => void;
-  handleSortClick: (index: any) => () => void;
-  iconFor: (column: any) => "arrow-up" | "arrow-down";
-  header: () => any;
-  row: (data: any, row: any) => any;
-  render(): any;
+    data: any[];
+    details: any;
+    fields: any[];
+    expanded: any;
+    sort: any;
+    clicks: number;
+    protoIcon: (name: any, hex?: any, size?: number) => any;
+    handleCellClick: (index: any, row: any) => () => void;
+    handleSortClick: (index: any) => () => void;
+    iconFor: (column: any) => "arrow-up" | "arrow-down";
+    header: () => any;
+    row: (data: any, row: any) => any;
+    render(): any;
 }