@xplortech/apollo-core 1.0.0-beta.18 → 1.0.0-beta.3

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

@@ -1,47 +1,24 @@
-import { Host, h, } from '@stencil/core';
+import { Component, Host, Prop, State, Event, h, } from '@stencil/core';
 export class XplTable {
   constructor() {
-    this.selectAllValue = Math.random().toString(36).slice(2);
+    this.areAllSelected = false;
+    this.hasScrolled = false;
     this.selectAll = (e) => {
       const { target } = e;
       if (!(target instanceof HTMLInputElement))
         return;
       const { checked } = target;
       this.areAllSelected = checked;
-      this.selected =
-        this.selectedValues.length > 0
-          ? // gets all checkboxes in body
-            Array.from(this.el.querySelectorAll('tbody td:first-child input')).map((input) => 
-            // if the select all checkbox is checked, return
-            // the value from the current input. If false, set all to false.
-            checked ? input === null || input === void 0 ? void 0 : input.value : checked)
-          : this.selected.map(() => checked);
+      this.selected = this.selected.map(() => checked);
       this.onChange();
     };
-    this.selectOne = (e, checkboxIdx) => {
+    this.selectOne = (e, i) => {
       const { target } = e;
       if (!(target instanceof HTMLInputElement))
         return;
-      const { checked, value } = target;
+      const { checked } = target;
       this.areAllSelected = false;
-      this.selected = this.selected.map((v, selectedIdx) => {
-        // if the checkbox that fired the event is not the current idx
-        // return the current value
-        if (selectedIdx !== checkboxIdx)
-          return v;
-        /**
-         * If there are values in this.selectedValues, either return the value
-         * for that checkbox or false, dependent on if the checkbox is checked or not.
-         * If there are no values in this.selectedValues, return the value
-         * to either true or false, dependent on if the checkbox is checked or not.
-         *
-         */
-        return this.selectedValues.length > 0
-          ? checked
-            ? value
-            : checked
-          : checked;
-      });
+      this.selected = this.selected.map((v, _i) => (_i === i ? checked : v));
       this.onChange();
     };
     this.onChange = () => {
@@ -57,39 +34,23 @@ export class XplTable {
      * TODO: Need to figure out how this interplays with data
      * received from an API/server
      */
-    // private sortBy = (col: number, ascending = true) => {
-    //     this.rowData.sort((a, b) => {
-    //         const A = a[col];
-    //         const B = b[col];
-    //         if (typeof A === 'number' && typeof B === 'number') {
-    //             const f = ascending ? 1 : -1;
-    //             return A > B ? f : -f;
-    //         }
-    //         return -1;
-    //     });
-    //     this.rowData = Array.from(this.rowData);
-    //     this.render();
-    // };
-    this.setData = () => {
-      this.rowData = this.data !== undefined ? Array.from(this.data) : [];
+    this.sortBy = (col, ascending = true) => {
+      this.rowData.sort((a, b) => {
+        const A = a[col];
+        const B = b[col];
+        if (typeof A === 'number' && typeof B === 'number') {
+          const f = ascending ? 1 : -1;
+          return A > B ? f : -f;
+        }
+        return -1;
+      });
+      this.rowData = Array.from(this.rowData);
+      this.render();
     };
-    this.columns = undefined;
-    this.data = undefined;
-    this.freeze = undefined;
-    this.multiselect = undefined;
-    this.striped = undefined;
-    this.selectedValues = [];
-    this.areAllSelected = false;
-    this.rowData = undefined;
-    this.hasScrolled = false;
-    this.selected = undefined;
-  }
-  watchData() {
-    this.setData();
   }
   componentWillLoad() {
     this.areAllSelected = false;
-    this.setData();
+    this.rowData = this.data !== undefined ? Array.from(this.data) : [];
     this.selected = new Array(this.rowData.length).fill(false);
   }
   render() {
@@ -100,168 +61,140 @@ export class XplTable {
       className += ' xpl-table--freeze';
     if (this.hasScrolled)
       className += ' xpl-table--has-scrolled';
-    return (h(Host, null, h("div", { class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("table", { class: className }, this.columns && (h("thead", null, this.columns.map((column, i) => {
-      return (h("th", null, this.multiselect && i === 0 ? (h("label", { htmlFor: "__xpl-table-th" }, h("input", { checked: this.areAllSelected, id: "__xpl-table-th",
-        // appear indeterminate when at least one but not all
-        // are selected
-        indeterminate: !this
-          .areAllSelected &&
-          this.selected.some((a) => a), onChange: (e) => {
-          this.selectAll(e);
-        }, type: "checkbox", value: `select-all-${this.selectAllValue}` }), column)) : (column)));
-    }))), h("tbody", null, this.rowData.map((row, rowNum) => {
-      return (h("tr", { class: this.selected &&
-          this.selected[rowNum]
-          ? 'xpl-table-row-selected'
-          : '' }, row.map((cell, i) => {
-        return (h("td", null, this.multiselect &&
-          i === 0 ? (h("label", { htmlFor: '__xpl-table-row-' +
-            rowNum }, h("input", { id: '__xpl-table-row-' +
-            rowNum, checked: !!this
-            .selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: `${this
-            .selectedValues
-            .length >
-            0
-            ? this
-              .selectedValues[rowNum]
-            : `xpl-table-checkbox-${rowNum}`}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))));
-      })));
-    }))))));
+    return (h(Host, null,
+      h("div", { class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => (this.container = el) },
+        h("table", { class: className },
+          this.columns && (h("thead", null, this.columns.map((column, i) => {
+            return (h("th", null, this.multiselect && i === 0 ? (h("label", { htmlFor: "__xpl-table-th" },
+              h("input", { checked: this.areAllSelected, id: "__xpl-table-th", 
+                // appear indeterminate when at least one but not all
+                // are selected
+                indeterminate: !this
+                  .areAllSelected &&
+                  this.selected.some((a) => a), onChange: (e) => {
+                  this.selectAll(e);
+                }, type: "checkbox" }),
+              column)) : (column)));
+          }))),
+          h("tbody", null, this.rowData.map((row, rowNum) => {
+            return (h("tr", { class: this.selected &&
+                this.selected[rowNum]
+                ? 'xpl-table-row-selected'
+                : '' }, row.map((cell, i) => {
+              return (h("td", null, this.multiselect &&
+                i === 0 ? (h("label", { htmlFor: '__xpl-table-row-' +
+                  rowNum },
+                h("input", { id: '__xpl-table-row-' +
+                    rowNum, checked: this
+                    .selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum) }),
+                h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))));
+            })));
+          }))))));
   }
   static get is() { return "xpl-table"; }
-  static get properties() {
-    return {
-      "columns": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The header values for each column."
-        }
+  static get properties() { return {
+    "columns": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
       },
-      "data": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[][]",
-          "resolved": "string[][]",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The data for the body of the table."
-        }
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "data": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[][]",
+        "resolved": "string[][]",
+        "references": {}
       },
-      "freeze": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container."
-        },
-        "attribute": "freeze",
-        "reflect": false
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "freeze": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "freeze",
+      "reflect": false
+    },
+    "multiselect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
       },
-      "multiselect": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Toggles a selectable checkbox for each row in the table"
-        },
-        "attribute": "multiselect",
-        "reflect": false
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
       },
-      "striped": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Toggles an optional styling of the background of each even row of the table body."
-        },
-        "attribute": "striped",
-        "reflect": false
+      "attribute": "multiselect",
+      "reflect": false
+    },
+    "striped": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
       },
-      "selectedValues": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The values for the input for each row when multiselect is activated."
-        },
-        "defaultValue": "[]"
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "striped",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "areAllSelected": {},
+    "rowData": {},
+    "hasScrolled": {},
+    "selected": {}
+  }; }
+  static get events() { return [{
+      "method": "tableSelect",
+      "name": "tableSelect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
       }
-    };
-  }
-  static get states() {
-    return {
-      "areAllSelected": {},
-      "rowData": {},
-      "hasScrolled": {},
-      "selected": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tableSelect",
-        "name": "tableSelect",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "data",
-        "methodName": "watchData"
-      }];
-  }
+    }]; }
 }
-//# sourceMappingURL=xpl-table.js.map

package/dist/collection/components/xpl-tag/xpl-tag.js

@@ -1,30 +1,30 @@
-import { Host, h } from '@stencil/core';
+import { Component, Host, h, Event } from '@stencil/core';
 export class XplTag {
   render() {
-    return (h(Host, { class: "xpl-tag-container" }, h("button", { class: "xpl-tag", onClick: () => {
-        this.close.emit();
-      } }, h("slot", null)), h("button", { class: "xpl-tag__close", onClick: () => {
-        this.close.emit();
-      } }, "\u00D7")));
+    return (h(Host, { class: "xpl-tag-container" },
+      h("button", { class: "xpl-tag", onClick: () => {
+          this.close.emit();
+        } },
+        h("slot", null)),
+      h("button", { class: "xpl-tag__close", onClick: () => {
+          this.close.emit();
+        } }, "\u00D7")));
   }
   static get is() { return "xpl-tag"; }
-  static get events() {
-    return [{
-        "method": "close",
-        "name": "close",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
+  static get events() { return [{
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
 }
-//# sourceMappingURL=xpl-tag.js.map