proto-table-wc 0.0.458 → 0.0.460

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

@@ -1,145 +1,145 @@
 import { h } from "@stencil/core";
 import { iconPaths } from "./iconPaths";
 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];
 };
 export class ProtoTable {
-  constructor() {
-    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))));
-  }
-  static get is() { return "proto-table"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["proto-table.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["proto-table.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "data": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "any[]",
-          "resolved": "any[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "[]"
-      },
-      "details": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "details",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "fields": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "any[]",
-          "resolved": "any[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "[]"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "expanded": {},
-      "sort": {},
-      "clicks": {}
-    };
-  }
+    constructor() {
+        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))));
+    }
+    static get is() { return "proto-table"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["proto-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["proto-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
+            "details": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "details",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "fields": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expanded": {},
+            "sort": {},
+            "clicks": {}
+        };
+    }
 }

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

@@ -1,163 +1,163 @@
-import { r as registerInstance, h } from './index-7e1a24cf.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;