@xplortech/apollo-core 1.0.0-beta.7 → 1.0.0-beta.9

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

@@ -1,8 +1,6 @@
-import { Component, Host, Prop, State, Event, h, } from '@stencil/core';
+import { Host, h, } from '@stencil/core';
 export class XplTable {
   constructor() {
-    this.areAllSelected = false;
-    this.hasScrolled = false;
     this.selectAll = (e) => {
       const { target } = e;
       if (!(target instanceof HTMLInputElement))
@@ -30,28 +28,43 @@ export class XplTable {
     this.onScroll = () => {
       this.hasScrolled = this.container.scrollLeft > 0;
     };
+    /**
+     * 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.selected = new Array(this.rowData.length).fill(false);
+    };
+    this.columns = undefined;
+    this.data = undefined;
+    this.freeze = undefined;
+    this.multiselect = undefined;
+    this.striped = undefined;
+    this.areAllSelected = false;
+    this.rowData = undefined;
+    this.hasScrolled = false;
+    this.selected = undefined;
+  }
+  watchData() {
+    this.setData();
   }
-  /**
-   * 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();
-  // };
   componentWillLoad() {
     this.areAllSelected = false;
-    this.rowData = this.data !== undefined ? Array.from(this.data) : [];
-    this.selected = new Array(this.rowData.length).fill(false);
+    this.setData();
   }
   render() {
     let className = 'xpl-table';
@@ -61,140 +74,145 @@ 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" }),
-              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 }))));
-            })));
-          }))))));
+    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": ""
-      }
-    },
-    "data": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[][]",
-        "resolved": "string[][]",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "freeze": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get properties() {
+    return {
+      "columns": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[][]",
+          "resolved": "string[][]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "attribute": "freeze",
-      "reflect": false
-    },
-    "multiselect": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "freeze": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "freeze",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "multiselect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiselect",
+        "reflect": false
       },
-      "attribute": "multiselect",
-      "reflect": false
-    },
-    "striped": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "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": {}
+      "striped": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "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 watchers() {
+    return [{
+        "propName": "data",
+        "methodName": "watchData"
+      }];
+  }
 }
+//# sourceMappingURL=xpl-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-table.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-table/xpl-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Host,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    h,\n    Watch,\n} from '@stencil/core';\n\n@Component({\n    tag: 'xpl-table',\n})\nexport class XplTable {\n    @Prop() columns?: string[];\n    @Prop() data?: string[][];\n    @Prop() freeze?: boolean;\n    @Prop() multiselect?: boolean;\n    @Prop() striped?: boolean;\n\n    @State() areAllSelected: boolean = false;\n    @State() rowData: string[][];\n    @State() hasScrolled: boolean = false;\n    @State() selected: boolean[];\n\n    @Event() tableSelect: EventEmitter;\n\n    private container!: HTMLDivElement;\n\n    private selectAll = (e: Event) => {\n        const { target } = e;\n        if (!(target instanceof HTMLInputElement)) return;\n        const { checked } = target;\n        this.areAllSelected = checked;\n        this.selected = this.selected.map(() => checked);\n        this.onChange();\n    };\n\n    private selectOne = (e: Event, i: number) => {\n        const { target } = e;\n        if (!(target instanceof HTMLInputElement)) return;\n        const { checked } = target;\n        this.areAllSelected = false;\n        this.selected = this.selected.map((v, _i) => (_i === i ? checked : v));\n        this.onChange();\n    };\n\n    private onChange = () => {\n        this.tableSelect.emit({\n            selected: this.selected,\n            areAllSelected: this.areAllSelected,\n        });\n    };\n\n    private onScroll = () => {\n        this.hasScrolled = this.container.scrollLeft > 0;\n    };\n\n    /**\n     * TODO: Need to figure out how this interplays with data\n     * received from an API/server\n     */\n    // private sortBy = (col: number, ascending = true) => {\n    //     this.rowData.sort((a, b) => {\n    //         const A = a[col];\n    //         const B = b[col];\n    //         if (typeof A === 'number' && typeof B === 'number') {\n    //             const f = ascending ? 1 : -1;\n    //             return A > B ? f : -f;\n    //         }\n    //         return -1;\n    //     });\n    //     this.rowData = Array.from(this.rowData);\n    //     this.render();\n    // };\n\n    private setData = () => {\n        this.rowData = this.data !== undefined ? Array.from(this.data) : [];\n        this.selected = new Array(this.rowData.length).fill(false);\n    };\n\n    @Watch('data')\n    watchData() {\n        this.setData();\n    }\n\n    componentWillLoad() {\n        this.areAllSelected = false;\n        this.setData();\n    }\n\n    render() {\n        let className = 'xpl-table';\n        if (this.striped) className += ' xpl-table--striped';\n        if (this.freeze) className += ' xpl-table--freeze';\n        if (this.hasScrolled) className += ' xpl-table--has-scrolled';\n\n        return (\n            <Host>\n                <div\n                    class=\"xpl-table-container\"\n                    onScroll={this.onScroll}\n                    ref={(el) => (this.container = el as HTMLDivElement)}\n                >\n                    <table class={className}>\n                        {this.columns && (\n                            <thead>\n                                {this.columns.map((column, i) => {\n                                    return (\n                                        <th>\n                                            {this.multiselect && i === 0 ? (\n                                                <label htmlFor=\"__xpl-table-th\">\n                                                    <input\n                                                        checked={\n                                                            this.areAllSelected\n                                                        }\n                                                        id=\"__xpl-table-th\"\n                                                        // appear indeterminate when at least one but not all\n                                                        // are selected\n                                                        indeterminate={\n                                                            !this\n                                                                .areAllSelected &&\n                                                            this.selected.some(\n                                                                (a) => a\n                                                            )\n                                                        }\n                                                        onChange={(e) => {\n                                                            this.selectAll(e);\n                                                        }}\n                                                        type=\"checkbox\"\n                                                    />\n                                                    {column}\n                                                </label>\n                                            ) : (\n                                                column\n                                            )}\n                                        </th>\n                                    );\n                                })}\n                            </thead>\n                        )}\n                        <tbody>\n                            {this.rowData.map((row, rowNum) => {\n                                return (\n                                    <tr\n                                        class={\n                                            this.selected &&\n                                            this.selected[rowNum]\n                                                ? 'xpl-table-row-selected'\n                                                : ''\n                                        }\n                                    >\n                                        {row.map((cell, i) => {\n                                            return (\n                                                <td>\n                                                    {this.multiselect &&\n                                                    i === 0 ? (\n                                                        <label\n                                                            htmlFor={\n                                                                '__xpl-table-row-' +\n                                                                rowNum\n                                                            }\n                                                        >\n                                                            <input\n                                                                id={\n                                                                    '__xpl-table-row-' +\n                                                                    rowNum\n                                                                }\n                                                                checked={\n                                                                    this\n                                                                        .selected[\n                                                                        rowNum\n                                                                    ]\n                                                                }\n                                                                type=\"checkbox\"\n                                                                onChange={(e) =>\n                                                                    this.selectOne(\n                                                                        e,\n                                                                        rowNum\n                                                                    )\n                                                                }\n                                                            />\n                                                            <div\n                                                                innerHTML={cell}\n                                                            />\n                                                        </label>\n                                                    ) : (\n                                                        <div innerHTML={cell} />\n                                                    )}\n                                                </td>\n                                            );\n                                        })}\n                                    </tr>\n                                );\n                            })}\n                        </tbody>\n                    </table>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -1,30 +1,30 @@
-import { Component, Host, h, Event } from '@stencil/core';
+import { Host, h } 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-tag.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-tag/xpl-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAKxE,MAAM,OAAO,MAAM;EAGf,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB;MAC3B,cACI,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;UACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC;QAED,eAAa,CACR;MACT,cACI,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,GAAG,EAAE;UACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC,aAGI,CACN,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-tag',\n})\nexport class XplTag {\n    @Event() close: EventEmitter;\n\n    render() {\n        return (\n            <Host class=\"xpl-tag-container\">\n                <button\n                    class=\"xpl-tag\"\n                    onClick={() => {\n                        this.close.emit();\n                    }}\n                >\n                    <slot></slot>\n                </button>\n                <button\n                    class=\"xpl-tag__close\"\n                    onClick={() => {\n                        this.close.emit();\n                    }}\n                >\n                    &times;\n                </button>\n            </Host>\n        );\n    }\n}\n"]}