proto-table-wc 0.0.457 → 0.0.459

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

@@ -2,166 +2,166 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-267e3f8d.js');
+const index = require('./index-719e6a11.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) {
-    index.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 (index.h("div", { class: "detailWrapper" }, index.h("span", null, tags.length, " details..."), index.h("ul", null, tags.map(tag => (index.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 index.h("proto-table", { ref: el => (this.table = el) });
-  }
+    constructor(hostRef) {
+        index.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 (index.h("div", { class: "detailWrapper" }, index.h("span", null, tags.length, " details..."), index.h("ul", null, tags.map(tag => (index.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 index.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) {
-    index.registerInstance(this, hostRef);
-    this.protoIcon = (name, hex = undefined, size = 24) => {
-      const path = iconPaths[name];
-      return (index.h("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-labelledby": "title" }, index.h("title", null, aliasFor(name)), index.h("g", { fill: hex }, index.h("path", { d: path })), index.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 (index.h("div", { class: "header" }, fields.map(({ label }, index$1) => {
-        const cellClass = index$1 === this.sort ? 'headerCell sort' : 'headerCell';
-        const ikon = iconFor(index$1);
-        return (index.h("div", { class: cellClass, onClick: this.handleSortClick(index$1) }, protoIcon(ikon), index.h("span", null, label)));
-      })));
-    };
-    this.row = (data, row) => {
-      const { fields, protoIcon } = this;
-      const rowClass = this.expanded === row ? 'row expanded' : 'row';
-      return (index.h("div", { class: "rowContainer" }, index.h("div", { class: rowClass }, fields.map(({ prop }, index$1) => {
-        const cellClass = index$1 === this.sort ? 'cell sort' : 'cell';
-        return (index.h("div", { class: cellClass, onClick: this.handleCellClick(index$1, row) }, index$1 === 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 (index.h("div", { class: "table" }, this.header(), items.map((item, index) => this.row(item, index))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.protoIcon = (name, hex = undefined, size = 24) => {
+            const path = iconPaths[name];
+            return (index.h("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-labelledby": "title" }, index.h("title", null, aliasFor(name)), index.h("g", { fill: hex }, index.h("path", { d: path })), index.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 (index.h("div", { class: "header" }, fields.map(({ label }, index$1) => {
+                const cellClass = index$1 === this.sort ? 'headerCell sort' : 'headerCell';
+                const ikon = iconFor(index$1);
+                return (index.h("div", { class: cellClass, onClick: this.handleSortClick(index$1) }, protoIcon(ikon), index.h("span", null, label)));
+            })));
+        };
+        this.row = (data, row) => {
+            const { fields, protoIcon } = this;
+            const rowClass = this.expanded === row ? 'row expanded' : 'row';
+            return (index.h("div", { class: "rowContainer" }, index.h("div", { class: rowClass }, fields.map(({ prop }, index$1) => {
+                const cellClass = index$1 === this.sort ? 'cell sort' : 'cell';
+                return (index.h("div", { class: cellClass, onClick: this.handleCellClick(index$1, row) }, index$1 === 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 (index.h("div", { class: "table" }, this.header(), items.map((item, index) => this.row(item, index))));
+    }
 };
 ProtoTable.style = protoTableCss;
 

package/dist/cjs/{index-267e3f8d.js → index-719e6a11.js}

@@ -49,6 +49,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
  */
@@ -263,6 +270,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);
                 }
@@ -400,7 +411,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) === '') {
@@ -419,6 +434,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 + '$');
@@ -1167,10 +1187,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 */))) {
@@ -1193,6 +1213,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.
@@ -1248,11 +1269,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);
@@ -1432,12 +1454,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 = {
@@ -1446,6 +1469,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];
             }
@@ -1496,15 +1524,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;
@@ -1656,7 +1692,7 @@ const flush = () => {
         }
     }
 };
-const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
+const nextTick = (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 exports.bootstrapLazy = bootstrapLazy;

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-267e3f8d.js');
+const index = require('./index-719e6a11.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-267e3f8d.js');
+const index = require('./index-719e6a11.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 = (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.7.1",
+    "version": "4.8.0",
     "typescriptVersion": "5.2.2"
   },
   "collections": [],